|
<!DOCTYPE html> |
|
<html lang='en'> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title> Climate Streamplot - Topic 1</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 1 - Science / Nature / Species </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("topic1_stream_R.csv", "yelblu"); |
|
|
|
var datearray = []; |
|
var colorrange = []; |
|
|
|
|
|
function chart(csvpath, color) { |
|
|
|
if (color == "blue") { |
|
colorrange = ['#00441b','#006d2c','#238b45','#41ae76','#66c2a4','#99d8c9','#e5f5f9','#ccece6']; |
|
} |
|
else if (color == "yelblu") { |
|
colorrange = ['#084081','#0868ac','#2b8cbe','#4eb3d3','#7bccc4','#a8ddb5','#ccebc5']; |
|
} |
|
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/07507ddbe4b4da3b3604f4e4654a522a/>Topic #2</a></p> |
|
<br> |
|
<br> |
|
<p style="font-size:93%;">Brief methods: New York Times (NYT) articles were accessed through the NYT API using the search terms 'climate change' and 'global warming' for the years January 1988 through March 2016. After tokenizing the data, removing very common words, and words that only occurred a single time, a Dynamic Topic Modeling analysis was performed using the Python package 'gensim'. Eight different topics and the words most associated with those topics over time were identified. Visualizations of the topics themselves, and the words associated with them, were created to aid in identifying how the discussion of global climate has shifted. Dynamic Topic Modeling is an exploratory analysis tool, attempting to identify latent or hidden features in text data. As such the results should be viewed as suggesting areas of additional emphasis rather than any causal or diffinitive relationships. Additionally, these data were drawn from the New York Times. Text from other publications would likely show different, but likely interesting patterns. </p> |
|
</body> |
|
</html> |