Skip to content

Instantly share code, notes, and snippets.

@ncameronbritt

ncameronbritt/ebola_headlines.csv Secret

Last active August 29, 2015 14:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ncameronbritt/2db5dc81f107fd7656b7 to your computer and use it in GitHub Desktop.
Save ncameronbritt/2db5dc81f107fd7656b7 to your computer and use it in GitHub Desktop.
Download ZIP
Numbers of NY Times articles referencing 'ebola' over a 60-day period
Raw
ebola_headlines.csv
date article_count
2014-10-28 37
2014-10-27 62
2014-10-26 42
2014-10-25 54
2014-10-24 99
2014-10-23 84
2014-10-22 71
2014-10-21 63
2014-10-20 71
2014-10-19 49
2014-10-18 48
2014-10-17 125
2014-10-16 120
2014-10-15 105
2014-10-14 88
2014-10-13 70
2014-10-12 48
2014-10-11 32
2014-10-10 62
2014-10-09 70
2014-10-08 67
2014-10-07 54
2014-10-06 54
2014-10-05 27
2014-10-04 35
2014-10-03 65
2014-10-02 70
2014-10-01 53
2014-09-30 25
2014-09-29 7
2014-09-28 5
2014-09-27 10
2014-09-26 26
2014-09-25 26
2014-09-24 18
2014-09-23 30
2014-09-22 20
2014-09-21 7
2014-09-20 9
2014-09-19 23
2014-09-18 28
2014-09-17 26
2014-09-16 31
2014-09-15 9
2014-09-14 5
2014-09-13 11
2014-09-12 16
2014-09-11 21
2014-09-10 11
2014-09-09 21
2014-09-08 21
2014-09-07 11
2014-09-06 15
2014-09-05 20
2014-09-04 19
2014-09-03 17
2014-09-02 23
2014-09-01 7
2014-08-31 3
2014-08-30 14
Raw
index.html
<!--
The data for this visualization were aquired by querying the NY Times Article Search API.
I wrote a Python script that gathered the number stories related to 'ebola' for each day of a 60-day time period.
The number date and number of stories for each date were written to the ebola_headlines.csv file.
Mousing over the circles reveals a tool tip with more specific information.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ebola Headlines</title>
<style type="text/css">
body { font: 10px sans-serif;}
path {
stroke: MediumPurple;
stroke-width: 2;
fill:none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
border-radius: 2px;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script type="text/javascript">
//Set the dimensions of the canvas / graph
var margin = {top: 75, right: 20, bottom: 60, left: 50},
width = 600 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%Y-%m-%d").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom")
.ticks(20);
var yAxis = d3.svg.axis().scale(y)
.orient("left")
.ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.article_count); });
// define tool tip
var tip = d3.tip()
.attr("class", "tip")
.offset([-10, 0])
.html(function(d) {
return "<strong>Date: </strong><span style='color:orange'>" + d.unformatted_date + " <br></span>" +
"<strong>Number of articles: </strong><span style='color:orange'>" + d.article_count + "</span>"
;
});
// Adds the svg canvas
var svg = d3.select("body")
.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 + ")");
// Get the data
d3.csv("ebola_headlines.csv", function(error, data) {
data.forEach(function(d) {
d.unformatted_date = d.date;
d.date = parseDate(d.date);
d.article_count = +d.article_count;
//console.log(d.article_count)
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.article_count; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.article_count); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.5em")
.attr("transform", function(d) {
return "rotate(-90)"
});
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// Add label to Y axis
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "middle")
.attr("y", 0 - margin.left/1.8)
.attr("x", 0 - (height/2))
.attr("transform", "rotate(-90)")
.text("Number of Articles")
// Add the tip
svg.call(tip);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment