Skip to content

Instantly share code, notes, and snippets.

@natemiller

natemiller/index.html

Last active May 12, 2016 01:44
Show Gist options
  • Save natemiller/c4eb3447995fe311063821e5c2bb2864 to your computer and use it in GitHub Desktop.
Save natemiller/c4eb3447995fe311063821e5c2bb2864 to your computer and use it in GitHub Desktop.
Download ZIP
Climate Change Topic Modeling - Topic 3
Raw
index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title> Climate Streamplot - Topic 3 </title>
<script src="http://d3js.org/d3.v3.js"></script>
<style type = 'text/css'>
body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
background-color: white;
padding: 50px;
}
h1 {
font-size: 28px;
position: relative;
left: 100;
color: #525252;
}
h2 {
font-size: 20px;
position: relative;
left: 100;
color: darkgrey;
}
.chart {
background: #fff;
}
p {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 18px;
margin: 10px 0 0 50px;
}
.tooltip {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.axis path, .axis line {
fill: none;
stroke: #000;
stroke-width: 2px;
shape-rendering: crispEdges;
}
button {
position: absolute;
right: 50px;
top: 10px;
}
</style>
</head>
<body>
<h2 style="margin-left:3em;">Climate Change Topic Streamplot</h2>
<h1 style="margin-left:2em;">Topic 3 - Fuels / Energy </h1>
<p > Using articles from the NY Times and Dynamic Topic Modelling to assess how the discussion of 'climate change' and 'global warming' have changed over time. </p>
<div class="chart"></div>
<script type = 'text/javascript'>
chart("topic3_stream_R.csv", "orange");
var datearray = [];
var colorrange = [];
function chart(csvpath, color) {
if (color == "blue") {
colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
}
else if (color == "pink") {
colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
}
else if (color == "orange") {
colorrange = ["#7f0000","#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
}
strokecolor = colorrange[0];
var format = d3.time.format("%Y");
var margin = {top: 20, right: 100, bottom: 30, left: 100};
var width = document.body.clientWidth - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
var tooltip = d3.select("body")
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "20")
.style("visibility", "hidden")
.style("top", "625px")
.style("left", "180px");
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height-10, 2]);
var z = d3.scale.ordinal()
.range(colorrange);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.twoyears);
var yAxis = d3.svg.axis()
.scale(y);
var yAxisr = d3.svg.axis()
.scale(y);
var stack = d3.layout.stack()
.offset("silhouette")
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; });
var nest = d3.nest()
.key(function(d) { return d.key; });
var area = d3.svg.area()
.interpolate("cardinal")
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
var svg = d3.select(".chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var graph = d3.csv(csvpath, function(data) {
data.forEach(function(d) {
d.date = format.parse(d.date);
d.value = +d.value;
});
var layers = stack(nest.entries(data));
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return z(i); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + ", 0)")
.call(yAxis.orient("right"));
svg.append("g")
.attr("class", "y axis")
.call(yAxis.orient("left"))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y",-margin.top*3.3) //bigger mulitplier moves to the left
.attr("x",-height/2) //smaller divider moves up
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Probaility of Word | Topic")
.attr("font-family","serif")
.attr("font-size","16px");;
svg.selectAll(".layer")
.attr("opacity", 1)
.on("mouseover", function(d, i) {
svg.selectAll(".layer").transition()
.duration(250)
.attr("opacity", function(d, j) {
return j != i ? 0.6 : 1;
})})
.on("mousemove", function(d, i) {
mousex = d3.mouse(this);
mousex = mousex[0];
var invertedx = x.invert(mousex);
invertedx = invertedx.getYear() ;
var selected = (d.values);
for (var k = 0; k < selected.length; k++) {
datearray[k] = selected[k].date
datearray[k] = datearray[k].getYear() ;
}
var tooltips = d3.select('svg').append('g');
mousedate = datearray.indexOf(invertedx);
pro = d.values[mousedate].value;
d3.select(this)
.classed("hover", true)
.attr("stroke", strokecolor)
.attr("stroke-width", "1.5px"),
tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "visible");
})
.on("mouseout", function(d, i) {
svg.selectAll(".layer")
.transition()
.duration(250)
.attr("opacity", "1");
d3.select(this)
.classed("hover", false)
.attr("stroke-width", "0px"),
tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "hidden");
})
.on("click", function(d, i) {
svg.selectAll(".layer").transition()
.duration(250)
.attr("opacity", function(d, j) {
return j != i ? 0.6 : 1;
});
})
// .on("click", function(d, i) {
// d3.select(this)
// .transition()
// .duration(250)
// .style('fill', function(d, i) {
// if(this.style.fill = 'red') {
// return z(this);
// } else {
// return 'red';
// } });
// });
var vertical = d3.select(".chart")
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "19")
.style("width", "1px")
.style("height", "350px")
.style("top", "230px")
.style("bottom", "30px")
.style("left", "0px")
.style("background", "#fff");
d3.select(".chart")
.on("mousemove", function(){
mousex = d3.mouse(this);
mousex = mousex[0] + 5;
vertical.style("left", (mousex+50) + "px" )})
.on("mouseover", function(){
mousex = d3.mouse(this);
mousex = mousex[0] + 5;
vertical.style("left", (mousex+50) + "px")});
});
}
</script>
<br>
<br>
<p align = "right", style="font-size:93%;"><a style="color:#969696;", href=http://bl.ocks.org/WillTurman/4631136/>Inspired by http://bl.ocks.org/WillTurman/4631136</a></p>
<p align = "right", style="font-size:93%;"><a style="color:#969696;", href=http://bl.ocks.org/natemiller/raw/df9c456b5767bd32b02f60b2ef102513/>Topic #4</a></p>
</body>
</html>
Raw
topic3_stream_R.csv
key date value
1 carbon 1988 0.007653651
2 carbon 1989 0.007709032
3 carbon 1990 0.007839011
4 carbon 1991 0.008069643
5 carbon 1992 0.008343259
6 carbon 1993 0.008631492
7 carbon 1994 0.008875126
8 carbon 1995 0.009070177
9 carbon 1996 0.00922871
10 carbon 1997 0.009315864
11 carbon 1998 0.009225871
12 carbon 1999 0.008954861
13 carbon 2000 0.008620002
14 carbon 2001 0.008167253
15 carbon 2002 0.007689355
16 carbon 2003 0.007267267
17 carbon 2004 0.006871691
18 carbon 2005 0.006693335
19 carbon 2006 0.006687547
20 carbon 2007 0.006880397
21 carbon 2008 0.007210073
22 carbon 2009 0.007085432
23 carbon 2010 0.006540408
24 carbon 2011 0.006281671
25 carbon 2012 0.006791061
26 carbon 2013 0.007872793
27 carbon 2014 0.009145947
28 carbon 2015 0.009771804
29 carbon 2016 0.0097672
30 china 1988 0
31 china 1989 0
32 china 1990 0
33 china 1991 0
34 china 1992 0
35 china 1993 0
36 china 1994 0.005041488
37 china 1995 0.004947345
38 china 1996 0
39 china 1997 0
40 china 1998 0
41 china 1999 0
42 china 2000 0
43 china 2001 0
44 china 2002 0
45 china 2003 0
46 china 2004 0
47 china 2005 0
48 china 2006 0
49 china 2007 0
50 china 2008 0
51 china 2009 0.004670228
52 china 2010 0.004672218
53 china 2011 0
54 china 2012 0
55 china 2013 0.005752583
56 china 2014 0.007190851
57 china 2015 0.008681937
58 china 2016 0.009629571
59 coal 1988 0.010394316
60 coal 1989 0.010461519
61 coal 1990 0.010509925
62 coal 1991 0.010287197
63 coal 1992 0.010148
64 coal 1993 0.010102168
65 coal 1994 0.010123213
66 coal 1995 0.010217371
67 coal 1996 0.010373085
68 coal 1997 0.010597151
69 coal 1998 0.010832352
70 coal 1999 0.010810804
71 coal 2000 0.010829104
72 coal 2001 0.010965176
73 coal 2002 0.010822791
74 coal 2003 0.009996712
75 coal 2004 0.009054436
76 coal 2005 0.008311014
77 coal 2006 0.007711176
78 coal 2007 0.007349184
79 coal 2008 0.00727663
80 coal 2009 0.007438631
81 coal 2010 0.007854961
82 coal 2011 0.008477314
83 coal 2012 0.009036827
84 coal 2013 0.009658002
85 coal 2014 0.011058771
86 coal 2015 0.013437162
87 coal 2016 0.015708293
88 dioxide 1988 0
89 dioxide 1989 0
90 dioxide 1990 0
91 dioxide 1991 0
92 dioxide 1992 0
93 dioxide 1993 0.005038715
94 dioxide 1994 0.005086843
95 dioxide 1995 0.005108479
96 dioxide 1996 0.005109558
97 dioxide 1997 0
98 dioxide 1998 0
99 dioxide 1999 0
100 dioxide 2000 0
101 dioxide 2001 0
102 dioxide 2002 0
103 dioxide 2003 0
104 dioxide 2004 0
105 dioxide 2005 0
106 dioxide 2006 0
107 dioxide 2007 0
108 dioxide 2008 0
109 dioxide 2009 0
110 dioxide 2010 0
111 dioxide 2011 0
112 dioxide 2012 0
113 dioxide 2013 0
114 dioxide 2014 0
115 dioxide 2015 0
116 dioxide 2016 0
117 emissions 1988 0
118 emissions 1989 0
119 emissions 1990 0
120 emissions 1991 0
121 emissions 1992 0
122 emissions 1993 0
123 emissions 1994 0
124 emissions 1995 0
125 emissions 1996 0
126 emissions 1997 0
127 emissions 1998 0
128 emissions 1999 0
129 emissions 2000 0
130 emissions 2001 0
131 emissions 2002 0
132 emissions 2003 0
133 emissions 2004 0
134 emissions 2005 0
135 emissions 2006 0
136 emissions 2007 0
137 emissions 2008 0
138 emissions 2009 0
139 emissions 2010 0
140 emissions 2011 0
141 emissions 2012 0.005119727
142 emissions 2013 0.006261741
143 emissions 2014 0.007795847
144 emissions 2015 0.00890443
145 emissions 2016 0.009543322
146 energy 1988 0.018564168
147 energy 1989 0.018341622
148 energy 1990 0.018114908
149 energy 1991 0.017984512
150 energy 1992 0.018070889
151 energy 1993 0.018255742
152 energy 1994 0.018555345
153 energy 1995 0.018994064
154 energy 1996 0.019587264
155 energy 1997 0.020362799
156 energy 1998 0.021304128
157 energy 1999 0.022348956
158 energy 2000 0.023384333
159 energy 2001 0.024263319
160 energy 2002 0.025035544
161 energy 2003 0.025737103
162 energy 2004 0.026014931
163 energy 2005 0.025890553
164 energy 2006 0.025396341
165 energy 2007 0.024515827
166 energy 2008 0.023261358
167 energy 2009 0.021881542
168 energy 2010 0.020669876
169 energy 2011 0.019702814
170 energy 2012 0.018716184
171 energy 2013 0.017635717
172 energy 2014 0.016296614
173 energy 2015 0.015209208
174 energy 2016 0.014557335
175 fuel 1988 0
176 fuel 1989 0
177 fuel 1990 0
178 fuel 1991 0
179 fuel 1992 0
180 fuel 1993 0
181 fuel 1994 0
182 fuel 1995 0
183 fuel 1996 0
184 fuel 1997 0.005139882
185 fuel 1998 0.005294028
186 fuel 1999 0.005423423
187 fuel 2000 0.00547892
188 fuel 2001 0.005532322
189 fuel 2002 0.005552375
190 fuel 2003 0.005549144
191 fuel 2004 0
192 fuel 2005 0
193 fuel 2006 0
194 fuel 2007 0
195 fuel 2008 0
196 fuel 2009 0
197 fuel 2010 0
198 fuel 2011 0
199 fuel 2012 0
200 fuel 2013 0
201 fuel 2014 0
202 fuel 2015 0
203 fuel 2016 0
204 gas 1988 0.010274638
205 gas 1989 0.010422505
206 gas 1990 0.010564827
207 gas 1991 0.010473767
208 gas 1992 0.010103347
209 gas 1993 0.009832418
210 gas 1994 0.009769119
211 gas 1995 0.009875092
212 gas 1996 0.010181266
213 gas 1997 0.010642022
214 gas 1998 0.01114944
215 gas 1999 0.011382751
216 gas 2000 0.011210186
217 gas 2001 0.010523283
218 gas 2002 0.009629826
219 gas 2003 0.00877269
220 gas 2004 0.007911494
221 gas 2005 0.007021357
222 gas 2006 0.006333438
223 gas 2007 0.00609345
224 gas 2008 0.006591854
225 gas 2009 0.007650831
226 gas 2010 0.008915853
227 gas 2011 0.010786312
228 gas 2012 0.012560697
229 gas 2013 0.013404661
230 gas 2014 0.01273813
231 gas 2015 0.011482218
232 gas 2016 0.01070933
233 natural 1988 0.005526448
234 natural 1989 0.005512361
235 natural 1990 0.005440173
236 natural 1991 0.005292464
237 natural 1992 0.005118934
238 natural 1993 0.00498378
239 natural 1994 0
240 natural 1995 0
241 natural 1996 0
242 natural 1997 0
243 natural 1998 0
244 natural 1999 0
245 natural 2000 0
246 natural 2001 0
247 natural 2002 0
248 natural 2003 0
249 natural 2004 0
250 natural 2005 0
251 natural 2006 0
252 natural 2007 0
253 natural 2008 0
254 natural 2009 0
255 natural 2010 0
256 natural 2011 0.004813168
257 natural 2012 0.005414112
258 natural 2013 0.00571071
259 natural 2014 0
260 natural 2015 0
261 natural 2016 0
262 nuclear 1988 0.005692313
263 nuclear 1989 0.005639453
264 nuclear 1990 0.005673404
265 nuclear 1991 0.005781925
266 nuclear 1992 0.005733946
267 nuclear 1993 0.005742375
268 nuclear 1994 0.005879084
269 nuclear 1995 0.006125674
270 nuclear 1996 0.006505157
271 nuclear 1997 0.006911845
272 nuclear 1998 0.007317906
273 nuclear 1999 0.007876614
274 nuclear 2000 0.008636828
275 nuclear 2001 0.009361763
276 nuclear 2002 0.008798077
277 nuclear 2003 0.008303806
278 nuclear 2004 0.007900281
279 nuclear 2005 0.007435239
280 nuclear 2006 0.006799259
281 nuclear 2007 0.006125228
282 nuclear 2008 0.005770512
283 nuclear 2009 0.005599934
284 nuclear 2010 0.006420175
285 nuclear 2011 0.007745308
286 nuclear 2012 0.006827653
287 nuclear 2013 0
288 nuclear 2014 0
289 nuclear 2015 0
290 nuclear 2016 0
291 oil 1988 0.013999212
292 oil 1989 0.013785504
293 oil 1990 0.013114097
294 oil 1991 0.012360781
295 oil 1992 0.011527756
296 oil 1993 0.010650425
297 oil 1994 0.009677942
298 oil 1995 0.00877541
299 oil 1996 0.008067729
300 oil 1997 0.00759052
301 oil 1998 0.007377691
302 oil 1999 0.007359936
303 oil 2000 0.007502997
304 oil 2001 0.007736736
305 oil 2002 0.008139458
306 oil 2003 0.008627028
307 oil 2004 0.009082354
308 oil 2005 0.009428506
309 oil 2006 0.009705087
310 oil 2007 0.010197046
311 oil 2008 0.011182362
312 oil 2009 0.011832117
313 oil 2010 0.012305059
314 oil 2011 0.011744724
315 oil 2012 0.010388507
316 oil 2013 0.00878702
317 oil 2014 0.007163919
318 oil 2015 0.006030844
319 oil 2016 0.005511908
320 percent 1988 0.007395647
321 percent 1989 0.007393073
322 percent 1990 0.007326911
323 percent 1991 0.007281204
324 percent 1992 0.007268265
325 percent 1993 0.007293164
326 percent 1994 0.007392628
327 percent 1995 0.00754116
328 percent 1996 0.007721593
329 percent 1997 0.007846904
330 percent 1998 0.007816564
331 percent 1999 0.007720214
332 percent 2000 0.007587848
333 percent 2001 0.007531694
334 percent 2002 0.007579748
335 percent 2003 0.007663034
336 percent 2004 0.007729242
337 percent 2005 0.007703677
338 percent 2006 0.007604725
339 percent 2007 0.007418557
340 percent 2008 0.006991919
341 percent 2009 0.00660096
342 percent 2010 0.00629027
343 percent 2011 0.006060384
344 percent 2012 0.006012862
345 percent 2013 0.006232713
346 percent 2014 0.006668827
347 percent 2015 0.007112378
348 percent 2016 0.007365549
349 plant 1988 0
350 plant 1989 0
351 plant 1990 0
352 plant 1991 0
353 plant 1992 0
354 plant 1993 0
355 plant 1994 0
356 plant 1995 0
357 plant 1996 0
358 plant 1997 0
359 plant 1998 0
360 plant 1999 0
361 plant 2000 0
362 plant 2001 0
363 plant 2002 0
364 plant 2003 0
365 plant 2004 0
366 plant 2005 0
367 plant 2006 0
368 plant 2007 0.005392202
369 plant 2008 0.004896034
370 plant 2009 0
371 plant 2010 0
372 plant 2011 0
373 plant 2012 0
374 plant 2013 0
375 plant 2014 0
376 plant 2015 0
377 plant 2016 0
378 plants 1988 0
379 plants 1989 0
380 plants 1990 0
381 plants 1991 0
382 plants 1992 0
383 plants 1993 0
384 plants 1994 0
385 plants 1995 0
386 plants 1996 0.005115835
387 plants 1997 0.005666703
388 plants 1998 0.006191328
389 plants 1999 0.006617712
390 plants 2000 0.006900752
391 plants 2001 0.007088509
392 plants 2002 0.006900199
393 plants 2003 0.006554445
394 plants 2004 0.006228013
395 plants 2005 0.005916471
396 plants 2006 0.005555521
397 plants 2007 0.005249668
398 plants 2008 0.005082473
399 plants 2009 0.004941645
400 plants 2010 0.004792151
401 plants 2011 0.004765263
402 plants 2012 0
403 plants 2013 0
404 plants 2014 0.00578744
405 plants 2015 0.006599671
406 plants 2016 0.007094211
407 power 1988 0.006717745
408 power 1989 0.006778245
409 power 1990 0.006925319
410 power 1991 0.007194117
411 power 1992 0.007584587
412 power 1993 0.008085147
413 power 1994 0.008716918
414 power 1995 0.009440765
415 power 1996 0.010213884
416 power 1997 0.011058902
417 power 1998 0.011976094
418 power 1999 0.013046598
419 power 2000 0.014086347
420 power 2001 0.01492788
421 power 2002 0.015189518
422 power 2003 0.01516068
423 power 2004 0.014864694
424 power 2005 0.01431042
425 power 2006 0.013451569
426 power 2007 0.012498435
427 power 2008 0.011926431
428 power 2009 0.011526303
429 power 2010 0.010926025
430 power 2011 0.01061547
431 power 2012 0.010430333
432 power 2013 0.010240978
433 power 2014 0.010198296
434 power 2015 0.010277911
435 power 2016 0.010337489
436 solar 1988 0.0057863
437 solar 1989 0.0058215
438 solar 1990 0.005784706
439 solar 1991 0.005484302
440 solar 1992 0.005099027
441 solar 1993 0
442 solar 1994 0
443 solar 1995 0
444 solar 1996 0
445 solar 1997 0
446 solar 1998 0
447 solar 1999 0
448 solar 2000 0
449 solar 2001 0
450 solar 2002 0
451 solar 2003 0
452 solar 2004 0
453 solar 2005 0
454 solar 2006 0
455 solar 2007 0
456 solar 2008 0
457 solar 2009 0
458 solar 2010 0
459 solar 2011 0
460 solar 2012 0
461 solar 2013 0
462 solar 2014 0
463 solar 2015 0
464 solar 2016 0
465 wind 1988 0
466 wind 1989 0
467 wind 1990 0
468 wind 1991 0
469 wind 1992 0
470 wind 1993 0
471 wind 1994 0
472 wind 1995 0
473 wind 1996 0
474 wind 1997 0
475 wind 1998 0
476 wind 1999 0
477 wind 2000 0
478 wind 2001 0
479 wind 2002 0
480 wind 2003 0
481 wind 2004 0.005432053
482 wind 2005 0.005585106
483 wind 2006 0.005649866
484 wind 2007 0
485 wind 2008 0
486 wind 2009 0
487 wind 2010 0
488 wind 2011 0
489 wind 2012 0
490 wind 2013 0
491 wind 2014 0
492 wind 2015 0
493 wind 2016 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment