-
Notifications
You must be signed in to change notification settings - Fork 0
/
graphics.html
396 lines (283 loc) · 18 KB
/
graphics.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bitter Cold: Climate change, public health and Baltimore | CNS Maryland</title>
<meta name="description" content="Bitter Cold: Climate change, public health and Baltimore">
<meta name="author" content="Capital News Service at Merrill College of Journalism, University of Maryland">
<!-- Favicon -->
<link rel="icon" type="image/png" href="https://cnsmaryland.org/wp-content/uploads/2017/02/cns_favion-1.png">
<!-- Twitter Card data -->
<meta name="twitter:title" content="Bitter Cold">
<meta name="twitter:description" content="Climate change, public health and Baltimore">
<meta name="twitter:image" content="https://cnsmaryland.org/interactives/spring-2019/bitter-cold/images/twitter-thumb-splash.png">
<meta name="twitter:card" content="summary_large_image">
<!-- Open Graph data for Facebook -->
<meta property="og:title" content="Bitter Cold: Climate change, public health and Baltimore" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://cnsmaryland.org/interactives/spring-2019/bitter-cold/" />
<meta property="og:image" content="https://cnsmaryland.org/interactives/spring-2019/bitter-cold/images/fb-thumb-splash.png" />
<meta property="og:description" content="Extreme temperatures pose a serious, long-term health threat for people with chronic medical conditions — and climate change is making the problem worse." />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- c3.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.13/c3.min.css" rel="stylesheet">
<!-- d3.js and c3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.13/c3.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.4/d3-queue.min.js"></script>
<!-- our CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- graphics CSS -->
<link rel="stylesheet" href="css/graphics-css.css">
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Serif:400,700" rel="stylesheet">
<!-- METRICS -->
<meta name="parsely-title" content="Bitter Cold Story Template" />
<meta name="parsely-link" content="https://cnsmaryland.org/interactives/spring-2019/bitter-cold/climate.html" />
<meta name="parsely-type" content="post" />
<meta name="parsely-image-url" content="https://cnsmaryland.org/interactives/spring-2019/bitter-cold/images/fb-thumb-climate.png" />
<meta name="parsely-pub-date" content="2019-04-15T13:00:00Z" />
<meta name="parsely-section" content="Climate" />
<meta name="parsely-author" content="CNS Maryland" />
<meta name="parsely-tags" content="climate, health, baltimore, journalism, interactives" />
<!-- D3 graphic styles-->
<style>
html, body {
height: 100%;
}
#vis {
height: 100%;
max-height:500px;
margin: 0;
background:#181818;
width:100%;
max-width:1000px;
margin:0 auto;
}
path, line {
stroke:#fff;
}
#vis text, #selected_temp, .degree-text {
color:#fff;
fill:#fff;
font-family: 'Montserrat', sans-serif;
font-size:1em;
}
</style>
<title>Bitter Cold</title>
</head>
<body>
<!-- Hero image -->
<!-- Can repeat for fullscreen image anywhere, just need to put outside container -->
<div class="headline-container-slide-nophoto">
<div class="hero-text">All graphics</div>
</div> <!-- This slideUp when scrolling down -->
<!-- Start container -->
<div class="container">
<br>
<!-- Social icons-->
<p class="chapter-head"><a name="chapter">Climate story graphics</p>
<!-- Embed container for graphics and video or whatever - to make full screen, move outside of container -->
<div class="embed-container">
<!-- Bar chart including:
cutom title for tool tip,
comma and $ on tool tip and y-axis,
custom colors
-->
<br>
<h1 class="highcharts-title">Number of extreme cold days in Baltimore (below 10 degrees)</h1>
<p class="caption">Baltimore saw spikes in days that dipped to 10 degrees or below in the 1960s and 1980s, but the city has relatively consistent patterns from decade to decade. The 2010s, however, accumulated more than the previous two decades.</p>
<text class="highcharts-subtitle" y="60">
<tspan>BY JOE CATAPANO</tspan>
<!-- ^^ PUT YOUR NAME HERE, TAKE CREDIT FOR YOUR COOL WORK ^^ -->
<tspan onclick="location.href="http://cnsmaryland.org""> | CAPITAL NEWS SERVICE</tspan>
<br>
<br>
<div id="chart-cold-10"></div>
<div id="Label"><center>DECADE</center></div>
<div id="source"><text><tspan>Source: BWI Airport Sensor Data</tspan></a></text></div>
<!-- ^^ PUT YOUR SOURCE HERE AND LINK IT^^ -->
</div>
<!-- End embed container -->
<div class="embed-container">
<h1 class="highcharts-title">Number of freezing days in Baltimore</h1>
<p class="caption">The number of days that dip to 32 degrees or below in Baltimore has stayed consistent over the past 80 years. The 1960s peaked at more than 1,000 such days, but that’s happened just once in the last eight decades.</p>
<text class="highcharts-subtitle" y="60">
<tspan>BY JOE CATAPANO</tspan>
<!-- ^^ PUT YOUR NAME HERE, TAKE CREDIT FOR YOUR COOL WORK ^^ -->
<tspan onclick="location.href="http://cnsmaryland.org""> | CAPITAL NEWS SERVICE</tspan>
<br>
</text>
<div id="chart-freeze-32"></div>
<div id="Label"><center>DECADE</center></div>
<div id="source"><text><tspan>Source: BWI Airport Sensor Data (1940-2018)</tspan></a></text></div>
<!-- ^^ PUT YOUR SOURCE HERE AND LINK IT^^ -->
</div>
<div class="embed-container">
<h1 class="highcharts-title">Number of extreme cold days in Baltimore </h1>
<p class="caption">While the number of sub-freezing days hasn’t fluctuated dramatically from decade to decade, the number of extremely cold days has. There have been fewer days that have fallen below 20 and 10 degrees in each of the last three decades than in the three prior.</p>
<text class="highcharts-subtitle" y="60">
<tspan>BY JOE CATAPANO</tspan>
<!-- ^^ PUT YOUR NAME HERE, TAKE CREDIT FOR YOUR COOL WORK ^^ -->
<tspan onclick="location.href="http://cnsmaryland.org""> | CAPITAL NEWS SERVICE</tspan>
<br>
</text>
<div id="chart-20-10-compare"></div>
<div id="Label"><center>DECADE</center></div>
<div id="source"><text><tspan>Source: BWI Airport Sensor Data (1940-2018)</tspan></a></text></div>
<!-- ^^ PUT YOUR SOURCE HERE AND LINK IT^^ -->
</div>
<div class="embed-container">
<h1 class="highcharts-title">Number of below freezing cold snaps in Baltimore</h1>
<p class="caption">In Baltimore, the number of cold snaps that last at least three or at least five days hasn't changed significantly over the years. In the last eight decades, three-day cold snaps peaked in the 1990s while five-day cold snaps peaked in the 1960s.</p>
<text class="highcharts-subtitle" y="60">
<tspan>BY JOE CATAPANO</tspan>
<!-- ^^ PUT YOUR NAME HERE, TAKE CREDIT FOR YOUR COOL WORK ^^ -->
<tspan onclick="location.href="http://cnsmaryland.org""> | CAPITAL NEWS SERVICE</tspan>
<br>
</text>
<div id="coldsnap"></div>
<div id="Label"><center>DECADE</center></div>
<div id="source"><text><tspan>Source: BWI Airport Sensor Data (1940-2018)</tspan></a></text></div>
<!-- ^^ PUT YOUR SOURCE HERE AND LINK IT^^ -->
</div>
<div class="embed-container">
<!-- Full screen image -->
<h1 class="highcharts-title">The polar vortex explained</h1>
<p class="caption">The concept of the polar vortex, a phenomenon that continues to push cold artic air into the United States.</p>
<img src="images/vortex.png" class="image">
<div id="source"><text><tspan>Credit: National Oceanic and Atmospheric Administration</tspan></a></text></div>
<!-- end full screen image-->
</div>
<div class="embed-container">
<figure class='lede feature full_width'>
<h1 class="highcharts-title">NASA's Atmospheric Infrared Sounder (AIRS) instrument captures a polar vortex</h1><br>
<p class="caption">In January 2019, the polar vortex dropped deep into the continental United States, causing record-breaking temperatures in the Midwest and frigid weather across the Northeast.</p>
<img alt="NASA's Atmospheric Infrared Sounder (AIRS) instrument captures a polar vortex" class='main_image' src='https://climate.nasa.gov/system/news_items/main_images/2839_PIA22823_768px.gif'>
<div id="source"><text><tspan>Credit: NASA</tspan></a></text></div>
</figure>
</div>
<br>
<p class="chapter-head"><a name="chapter">Health story graphics</p>
<p>Missing:
<br> 1. Cold conditions and how they are affected by cold (Aaron and Adam)
<br> 2. Maps showing correlation between health and temp by neighborhood (Jake)
<!-- START D3 Graphic for EMS calls -->
<div class="embed-container">
<h1 class="highcharts-title">EMS calls for certain health conditions increase as the temperature rises</h1>
<p class="caption">This chart shows the rise and fall of emergency medical calls for certain health conditions at various temperatures in Baltimore city. Each bar represents the percentage of calls that particular health condition represents of total calls in the specified temperature range. Drag the slider to change the temperature range and explore how EMS calls changed at different temperatures. </p>
<form>
<span class="degree-text">Select a temperature:</span>
<input type="range" min=0 max=100 step=10 id="temp" value=70 oninput="selected_temp.value = temp.value">
<span class="degree-text">Temps in the</span> <output name="selected_temp" id="selected_temp">70</output><span class="degree-text">s</span>
</form>
</div>
<!-- Close container for D3 graphic to work -->
</div>
<div id="vis">
</div>
<!-- Reopen container after D3 graphic -->
<div class="container">
<div class="embed-container">
<div id="source"><text><tspan>*In percents
<br>Source: Baltimore EMS calls 2014-2018, data obtained from Baltimore City Fire Department</tspan></text></div>
</div>
<!-- //END D3 Graphic for EMS calls -->
<div class="embed-container">
<h1 class="highcharts-title">Cold Related Deaths in Baltimore and all of Maryland</h1>
<p class="caption">Over the past five years, over 30% of all cold-related deaths in Maryland have occurred in Baltimore City.</p>
<text class="highcharts-subtitle" y="60">
<tspan>By Aaron Wilson</tspan>
<!-- ^^ PUT YOUR NAME HERE, TAKE CREDIT FOR YOUR COOL WORK ^^ -->
<tspan onclick="location.href="http://cnsmaryland.org""> | CAPITAL NEWS SERVICE</tspan>
<br>
</text>
<div id="cold-deaths-bar"></div>
<div id="source"><text><a href="https://preparedness.health.maryland.gov/Pages/Home.aspx"><tspan>Source: Maryland Department of Health </tspan></a></text></div>
<!-- ^^ PUT YOUR SOURCE HERE AND LINK IT^^ -->
</div>
<br>
<p class="chapter-head"><a name="chapter">Safety net story graphics</p>
<div class="embed-container">
<p class="map-headline">Warming Centers in Baltimore</p>
<p class="caption">During periods of extremely cold weather, the Baltimore Health Commissioner declares a Code Blue Extreme Cold Alert and the city opens warming centers, which are community locations like libraries and senior centers where residents can go to warm up. However, many of the warming centers have limited hours or aren’t open daily.</p>
<iframe width="100%" height="720" frameborder="0" src="https://amarton.carto.com/builder/0d059c9b-525b-4dd8-a2f6-0a36203d6300/embed" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
</div>
<br><br>
<div id="embed-container">
<h1 class="highcharts-title">BGE Average Low-Income Customer Turnoffs and Reconnections by Month (2009-2018)</h1>
<p class="caption">The Maryland Public Service Commission collects monthly reports from Maryland power companies like Baltimore Gas and Electric (BGE) that show the number of low-income customers whose power is turned off or reconnected. Customers are defined as low-income if they receive bill payment assistance. Due to weather restrictions that make turning power off during the winter more difficult, most turn-offs occur between April and October, peaking in October. While BGE does reconnect about an average of almost 1,000 low-income customers per October, the disconnections and reconnections are not necessarily directly connected; reconnections in a particular month may not be for the same people who were cut off earlier in that month.</p>
<text class="highcharts-subtitle" y="60">
<tspan>BY DANIELLE KIEFER AND NOAH JOHNSON</tspan>
<!-- ^^ PUT YOUR NAME HERE, TAKE CREDIT FOR YOUR COOL WORK ^^ -->
<tspan onclick="location.href="http://cnsmaryland.org""> | CAPITAL NEWS SERVICE</tspan>
<br>
</text>
<div id="turnoffs-bar-chart"></div>
<div id="source"><text><a href="https://www.psc.state.md.us/annual-utility-reports/"><tspan>Source: Maryland Public Service Commission</tspan></a></text></div>
<!-- ^^ PUT YOUR SOURCE HERE AND LINK IT^^ -->
</div>
<br><br>
<div id="embed-container">
<h1 class="highcharts-title">Average Low-Income Household Turn-offs by Month: BGE vs. Other Maryland Companies (2009-2018)</h1>
<p class="caption">The chart shows the average percentage of power turn-offs by month for the 10-year period spanning January 2009 through December 2018. The blue line represents turn-offs carried out by Baltimore Gas and Electric while the purple line represents turn-offs carried out by other Maryland utilities Delmarva Power, Pepco Holdings and Potomac Edison.</p>
<text class="highcharts-subtitle" y="60">
<tspan>BY AARON WILSON AND NOAH JOHNSON<</tspan>
<!-- ^^ PUT YOUR NAME HERE, TAKE CREDIT FOR YOUR COOL WORK ^^ -->
<tspan onclick="location.href="http://cnsmaryland.org""> | CAPITAL NEWS SERVICE</tspan>
<br>
</text>
<div id="turnoffs-line-chart"></div>
<div id="source"><text><a href="https://www.psc.state.md.us/annual-utility-reports/"><tspan>Source: Maryland Public Service Commission</tspan></a></text></div>
<!-- ^^ PUT YOUR SOURCE HERE AND LINK IT^^ -->
</div>
<!-- Footer-->
<div class="footer">
<a href="#footer"><center><img src="images/footer2.png" class="footer-image"></a></center>
</div>
<!-- end footer-->
</div>
<!-- close container -->
<!-- JavaScript calls -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Variables for social media icon popups -->
<script type="text/javascript">
//Twitter variables
var tweet = "Bitter Cold. Climate change, public health and Baltimore."; //Tweet text
var url = "https://cnsmaryland.org/interactives/spring-2019/bitter-cold/"; //Interactive URL
//Facebook variables
var picture = "https://cnsmaryland.org/interactives/spring-2019/bitter-cold/images/fb-thumb-splash.png"; //Picture URL
var title = "Bitter Cold"; //Post title
var description = "Extreme temperatures pose a serious, long-term health threat for people with chronic medical conditions — and climate change is making the problem worse."; //Post description
var url = "https://cnsmaryland.org/interactives/spring-2019/bitter-cold/"; //Interactive URL
</script>
<!-- Our custom Javascript -->
<script src="js/javascript.js"></script>
<!--our c3 javascript-->
<script src="js/c3-charts.js"></script>
<script src="js/d3-graphic-script.js"></script>
<!-- METRICS -->
<!-- START Parse.ly Include: Standard -->
<div id="parsely-root" style="display: none">
<span id="parsely-cfg" data-parsely-site="cnsmaryland.org"></span>
</div>
<script>
(function(s, p, d) {
var h=d.location.protocol, i=p+"-"+s,
e=d.getElementById(i), r=d.getElementById(p+"-root"),
u=h==="https:"?"d1z2jf7jlzjs58.cloudfront.net"
:"static."+p+".com";
if (e) return;
e = d.createElement(s); e.id = i; e.async = true;
e.src = h+"//"+u+"/p.js"; r.appendChild(e);
})("script", "parsely", document);
</script>
<!-- END Parse.ly Include: Standard -->
</body>
</html>