Skip to content

Instantly share code, notes, and snippets.

@natemiller

natemiller/index.html

Created May 12, 2016 02:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save natemiller/33163ad99e4004b62a100a0322c0174b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save natemiller/33163ad99e4004b62a100a0322c0174b to your computer and use it in GitHub Desktop.
Download ZIP
Climate Change Topic Modeling - Topic 8
Raw
index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title> Climate Streamplot - Topic 8</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 8 - Water Issues/Local &#38; State/Food &#38; Farmers </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("topic8_stream.csv", "BlYlGr");
var datearray = [];
var colorrange = [];
function chart(csvpath, color) {
if (color == "blue") {
colorrange = ['#00441b','#006d2c','#238b45','#41ae76','#66c2a4','#99d8c9','#e5f5f9','#ccece6'];
}
else if (color == "pink") {
colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
}
else if (color == "BlYlGr") {
colorrange = ["#081d58","#253494","#225ea8","#1d91c0","#41b6c4","#7fcdbb","#c7e9b4"];
}
else if (color == "YlGr") {
colorrange = ["#004529","#006837","#238443","#41ab5d","#78c679","#addd8e","#d9f0a3","#f7fcb9"]
}
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>
</body>
</html>
Raw
topic8_stream.csv
key date value
1 california 1988 0
2 california 1989 0
3 california 1990 0
4 california 1991 0
5 california 1992 0
6 california 1993 0
7 california 1994 0
8 california 1995 0
9 california 1996 0
10 california 1997 0
11 california 1998 0
12 california 1999 0
13 california 2000 0
14 california 2001 0
15 california 2002 0
16 california 2003 0
17 california 2004 0
18 california 2005 0
19 california 2006 0
20 california 2007 0
21 california 2008 0
22 california 2009 0
23 california 2010 0
24 california 2011 0
25 california 2012 0
26 california 2013 0.003107936
27 california 2014 0.003583988
28 california 2015 0.004137373
29 california 2016 0.004242956
30 city 1988 0.007599045
31 city 1989 0.007528629
32 city 1990 0.007429514
33 city 1991 0.007417828
34 city 1992 0.007492605
35 city 1993 0.007684137
36 city 1994 0.007780919
37 city 1995 0.007830368
38 city 1996 0.00791158
39 city 1997 0.008031212
40 city 1998 0.008041727
41 city 1999 0.008021339
42 city 2000 0.007733836
43 city 2001 0.00735234
44 city 2002 0.007122237
45 city 2003 0.007020631
46 city 2004 0.00686269
47 city 2005 0.006921993
48 city 2006 0.007072654
49 city 2007 0.007013651
50 city 2008 0.006452865
51 city 2009 0.006641232
52 city 2010 0.00695924
53 city 2011 0.007084069
54 city 2012 0.007295882
55 city 2013 0.00755109
56 city 2014 0.007191059
57 city 2015 0.006659586
58 city 2016 0.006279756
59 drought 1988 0.003409336
60 drought 1989 0.003442729
61 drought 1990 0.003507467
62 drought 1991 0.00360366
63 drought 1992 0.003674934
64 drought 1993 0.003581172
65 drought 1994 0.003381464
66 drought 1995 0.003182705
67 drought 1996 0.003007222
68 drought 1997 0
69 drought 1998 0
70 drought 1999 0
71 drought 2000 0
72 drought 2001 0
73 drought 2002 0
74 drought 2003 0
75 drought 2004 0
76 drought 2005 0
77 drought 2006 0
78 drought 2007 0
79 drought 2008 0
80 drought 2009 0
81 drought 2010 0
82 drought 2011 0
83 drought 2012 0
84 drought 2013 0
85 drought 2014 0.003280104
86 drought 2015 0.003659423
87 drought 2016 0.003786368
88 farmers 1988 0
89 farmers 1989 0
90 farmers 1990 0
91 farmers 1991 0
92 farmers 1992 0
93 farmers 1993 0
94 farmers 1994 0
95 farmers 1995 0
96 farmers 1996 0
97 farmers 1997 0
98 farmers 1998 0
99 farmers 1999 0
100 farmers 2000 0
101 farmers 2001 0
102 farmers 2002 0.002860791
103 farmers 2003 0.003066212
104 farmers 2004 0.003277873
105 farmers 2005 0.003383968
106 farmers 2006 0.003474542
107 farmers 2007 0.003581351
108 farmers 2008 0.003660532
109 farmers 2009 0.003491736
110 farmers 2010 0.003380821
111 farmers 2011 0.003376282
112 farmers 2012 0.003489455
113 farmers 2013 0.003594639
114 farmers 2014 0.003633793
115 farmers 2015 0.003660585
116 farmers 2016 0.003627812
117 food 1988 0.005704202
118 food 1989 0.005728897
119 food 1990 0.005819162
120 food 1991 0.00594078
121 food 1992 0.006003464
122 food 1993 0.005753431
123 food 1994 0.005506364
124 food 1995 0.005309469
125 food 1996 0.005134447
126 food 1997 0.004980258
127 food 1998 0.004879618
128 food 1999 0.00482594
129 food 2000 0.004921092
130 food 2001 0.00500249
131 food 2002 0.005148486
132 food 2003 0.005379986
133 food 2004 0.005696191
134 food 2005 0.006126746
135 food 2006 0.006446811
136 food 2007 0.007138585
137 food 2008 0.009652005
138 food 2009 0.008734486
139 food 2010 0.007970474
140 food 2011 0.007398419
141 food 2012 0.007333737
142 food 2013 0.007617503
143 food 2014 0.007840503
144 food 2015 0.006412278
145 food 2016 0.005883149
146 lake 1988 0
147 lake 1989 0
148 lake 1990 0
149 lake 1991 0
150 lake 1992 0
151 lake 1993 0
152 lake 1994 0.002954268
153 lake 1995 0.003068552
154 lake 1996 0.00318618
155 lake 1997 0.003250765
156 lake 1998 0.003227084
157 lake 1999 0.003170073
158 lake 2000 0.003020435
159 lake 2001 0.002863853
160 lake 2002 0
161 lake 2003 0
162 lake 2004 0
163 lake 2005 0
164 lake 2006 0
165 lake 2007 0
166 lake 2008 0
167 lake 2009 0
168 lake 2010 0
169 lake 2011 0
170 lake 2012 0
171 lake 2013 0
172 lake 2014 0
173 lake 2015 0
174 lake 2016 0
175 land 1988 0
176 land 1989 0
177 land 1990 0
178 land 1991 0
179 land 1992 0
180 land 1993 0
181 land 1994 0
182 land 1995 0
183 land 1996 0
184 land 1997 0
185 land 1998 0
186 land 1999 0
187 land 2000 0
188 land 2001 0
189 land 2002 0
190 land 2003 0
191 land 2004 0
192 land 2005 0
193 land 2006 0.002936129
194 land 2007 0.003012813
195 land 2008 0.003127964
196 land 2009 0.003192107
197 land 2010 0.003187731
198 land 2011 0.003187319
199 land 2012 0.003212882
200 land 2013 0.003246621
201 land 2014 0.00314865
202 land 2015 0.00309016
203 land 2016 0.00300303
204 local 1988 0
205 local 1989 0
206 local 1990 0
207 local 1991 0
208 local 1992 0
209 local 1993 0
210 local 1994 0
211 local 1995 0
212 local 1996 0
213 local 1997 0.002999544
214 local 1998 0.003062264
215 local 1999 0.003120571
216 local 2000 0.003140075
217 local 2001 0.003154551
218 local 2002 0.003202943
219 local 2003 0.003276296
220 local 2004 0.003300324
221 local 2005 0.003241121
222 local 2006 0.003162069
223 local 2007 0.00309824
224 local 2008 0.003131478
225 local 2009 0.003105035
226 local 2010 0.003048857
227 local 2011 0.002901501
228 local 2012 0
229 local 2013 0
230 local 2014 0
231 local 2015 0
232 local 2016 0
233 many 1988 0.003099619
234 many 1989 0.003097136
235 many 1990 0.003081613
236 many 1991 0.00305372
237 many 1992 0.003019819
238 many 1993 0.00298299
239 many 1994 0
240 many 1995 0
241 many 1996 0
242 many 1997 0
243 many 1998 0
244 many 1999 0
245 many 2000 0
246 many 2001 0
247 many 2002 0
248 many 2003 0
249 many 2004 0
250 many 2005 0
251 many 2006 0
252 many 2007 0
253 many 2008 0
254 many 2009 0
255 many 2010 0
256 many 2011 0
257 many 2012 0
258 many 2013 0
259 many 2014 0
260 many 2015 0
261 many 2016 0
262 people 1988 0.007136257
263 people 1989 0.007180131
264 people 1990 0.007222666
265 people 1991 0.007190657
266 people 1992 0.007121457
267 people 1993 0.007033143
268 people 1994 0.006917286
269 people 1995 0.006805689
270 people 1996 0.006694166
271 people 1997 0.006566903
272 people 1998 0.006422093
273 people 1999 0.00630109
274 people 2000 0.00622693
275 people 2001 0.006154545
276 people 2002 0.006076978
277 people 2003 0.006013374
278 people 2004 0.00596301
279 people 2005 0.005932715
280 people 2006 0.005908507
281 people 2007 0.005838874
282 people 2008 0.005587154
283 people 2009 0.005515042
284 people 2010 0.005462489
285 people 2011 0.005387532
286 people 2012 0.005266665
287 people 2013 0.00510352
288 people 2014 0.00495429
289 people 2015 0.004790212
290 people 2016 0.004699973
291 river 1988 0.006222927
292 river 1989 0.006262746
293 river 1990 0.00627705
294 river 1991 0.006145174
295 river 1992 0.00597265
296 river 1993 0.005860487
297 river 1994 0.005793055
298 river 1995 0.005781594
299 river 1996 0.005817846
300 river 1997 0.005850612
301 river 1998 0.00572019
302 river 1999 0.005474315
303 river 2000 0.005167084
304 river 2001 0.004873847
305 river 2002 0.004560666
306 river 2003 0.004265344
307 river 2004 0.003969342
308 river 2005 0.003818659
309 river 2006 0.003708734
310 river 2007 0.003550201
311 river 2008 0.003136916
312 river 2009 0.003060096
313 river 2010 0.003120356
314 river 2011 0.00327025
315 river 2012 0.003397955
316 river 2013 0.003183645
317 river 2014 0
318 river 2015 0
319 river 2016 0
320 state 1988 0.003160654
321 state 1989 0.00316534
322 state 1990 0.00315245
323 state 1991 0.003120991
324 state 1992 0.003084585
325 state 1993 0.003054626
326 state 1994 0.003033129
327 state 1995 0.003007239
328 state 1996 0.002975478
329 state 1997 0.002944702
330 state 1998 0
331 state 1999 0
332 state 2000 0
333 state 2001 0
334 state 2002 0
335 state 2003 0
336 state 2004 0
337 state 2005 0
338 state 2006 0
339 state 2007 0
340 state 2008 0
341 state 2009 0
342 state 2010 0
343 state 2011 0
344 state 2012 0.003025258
345 state 2013 0.003242648
346 state 2014 0.003487209
347 state 2015 0.003754596
348 state 2016 0.003770976
349 water 1988 0.01770448
350 water 1989 0.017702717
351 water 1990 0.017765085
352 water 1991 0.017826929
353 water 1992 0.017938529
354 water 1993 0.018132964
355 water 1994 0.018625957
356 water 1995 0.01953794
357 water 1996 0.020929856
358 water 1997 0.022719494
359 water 1998 0.02446497
360 water 1999 0.026061137
361 water 2000 0.026829277
362 water 2001 0.026878425
363 water 2002 0.024935933
364 water 2003 0.021640825
365 water 2004 0.019453153
366 water 2005 0.020327955
367 water 2006 0.021940126
368 water 2007 0.022030303
369 water 2008 0.018124613
370 water 2009 0.017028637
371 water 2010 0.017484593
372 water 2011 0.018949283
373 water 2012 0.021160048
374 water 2013 0.022856752
375 water 2014 0.025164629
376 water 2015 0.030535212
377 water 2016 0.034367957
378 year 1988 0.00565788
379 year 1989 0.005661348
380 year 1990 0.005646656
381 year 1991 0.005619295
382 year 1992 0.005573397
383 year 1993 0.005479926
384 year 1994 0.005365987
385 year 1995 0.00523836
386 year 1996 0.005108978
387 year 1997 0.004956043
388 year 1998 0.004793066
389 year 1999 0.004639401
390 year 2000 0.004510898
391 year 2001 0.004367702
392 year 2002 0.004174454
393 year 2003 0.003977278
394 year 2004 0.003814542
395 year 2005 0.003716589
396 year 2006 0.003635457
397 year 2007 0.003554928
398 year 2008 0.003475871
399 year 2009 0.003493635
400 year 2010 0.003588247
401 year 2011 0.003725366
402 year 2012 0.003860993
403 year 2013 0.003990731
404 year 2014 0.004104036
405 year 2015 0.004129032
406 year 2016 0.00414211
407 years 1988 0
408 years 1989 0
409 years 1990 0
410 years 1991 0
411 years 1992 0
412 years 1993 0
413 years 1994 0
414 years 1995 0
415 years 1996 0
416 years 1997 0
417 years 1998 0.002934779
418 years 1999 0.002966072
419 years 2000 0.00300534
420 years 2001 0.003049033
421 years 2002 0.003079009
422 years 2003 0.003099905
423 years 2004 0.003121581
424 years 2005 0.003168746
425 years 2006 0.003227866
426 years 2007 0.003274154
427 years 2008 0.003246731
428 years 2009 0.003229551
429 years 2010 0.003204047
430 years 2011 0.003114894
431 years 2012 0.002993116
432 years 2013 0
433 years 2014 0
434 years 2015 0
435 years 2016 0
436 york 1988 0.004479942
437 york 1989 0.004379613
438 york 1990 0.004291007
439 york 1991 0.004247264
440 york 1992 0.004226246
441 york 1993 0.00421821
442 york 1994 0.00421193
443 york 1995 0.004157966
444 york 1996 0.004117663
445 york 1997 0.004110615
446 york 1998 0.00413893
447 york 1999 0.004126053
448 york 2000 0.003962482
449 york 2001 0.003743494
450 york 2002 0.003559769
451 york 2003 0.003407228
452 york 2004 0.003166762
453 york 2005 0.003001379
454 york 2006 0
455 york 2007 0
456 york 2008 0
457 york 2009 0
458 york 2010 0
459 york 2011 0
460 york 2012 0
461 york 2013 0
462 york 2014 0
463 york 2015 0
464 york 2016 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment