Skip to content

Instantly share code, notes, and snippets.

@smit1678
Created August 14, 2014 03:42
Show Gist options
  • Save smit1678/c896e62681833a0c7abc to your computer and use it in GitHub Desktop.
Save smit1678/c896e62681833a0c7abc to your computer and use it in GitHub Desktop.
date total
1/2/14 1
1/20/14 1
1/21/14 1
1/24/14 1
1/25/14 2
1/29/14 1
2/1/14 1
2/2/14 1
2/3/14 2
2/4/14 2
2/6/14 1
2/10/14 1
2/11/14 1
2/16/14 1
2/17/14 1
2/18/14 1
2/21/14 1
2/22/14 1
2/23/14 1
2/25/14 2
2/27/14 1
2/28/14 1
3/1/14 3
3/5/14 2
3/6/14 1
3/7/14 3
3/9/14 1
3/10/14 3
3/11/14 1
3/12/14 7
3/13/14 4
3/14/14 1
3/15/14 5
3/16/14 6
3/17/14 2
3/18/14 1
3/19/14 1
3/20/14 1
3/21/14 3
3/22/14 4
3/23/14 4
3/24/14 2
3/25/14 5
3/26/14 5
3/27/14 4
3/28/14 6
3/29/14 2
3/30/14 4
3/31/14 5
4/1/14 3
4/2/14 5
4/3/14 6
4/4/14 6
4/5/14 2
4/6/14 1
4/7/14 1
4/9/14 2
4/10/14 4
4/11/14 2
4/12/14 7
4/13/14 11
4/14/14 6
4/15/14 5
4/16/14 1
4/17/14 1
4/18/14 1
4/20/14 2
4/21/14 1
4/22/14 2
4/25/14 4
4/26/14 2
4/27/14 1
4/28/14 1
4/29/14 2
5/1/14 2
5/2/14 7
5/3/14 3
5/5/14 1
5/7/14 2
5/10/14 1
5/11/14 8
5/12/14 1
5/13/14 1
5/14/14 4
5/15/14 1
5/17/14 1
5/19/14 2
5/20/14 3
5/21/14 3
5/22/14 7
5/23/14 3
5/24/14 2
5/25/14 6
5/26/14 9
5/27/14 7
5/28/14 5
5/29/14 12
5/30/14 6
5/31/14 7
6/1/14 7
6/2/14 8
6/3/14 3
6/4/14 3
6/5/14 2
6/6/14 3
6/7/14 7
6/8/14 7
6/9/14 5
6/10/14 12
6/11/14 19
6/12/14 23
6/13/14 12
6/14/14 15
6/15/14 12
6/16/14 7
6/17/14 8
6/18/14 25
6/19/14 13
6/20/14 16
6/21/14 18
6/22/14 19
6/23/14 13
6/24/14 14
6/25/14 8
6/26/14 11
6/27/14 10
6/28/14 13
6/29/14 5
6/30/14 11
7/1/14 35
7/2/14 9
7/3/14 14
7/4/14 15
7/5/14 9
7/6/14 7
7/7/14 19
7/8/14 7
7/9/14 14
7/10/14 21
7/11/14 27
7/12/14 30
7/13/14 20
7/14/14 30
7/15/14 11
7/16/14 34
7/17/14 26
7/18/14 12
7/19/14 17
7/20/14 32
7/21/14 19
7/22/14 25
7/23/14 37
7/24/14 69
7/25/14 18
7/26/14 40
7/27/14 28
7/28/14 50
7/29/14 21
7/30/14 58
7/31/14 157
8/1/14 45
8/2/14 37
8/3/14 15
8/4/14 42
8/5/14 46
8/6/14 39
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%m/%d/%y").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.total); });
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 + ")");
d3.csv("cases-date-processed.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.total = +d.total;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.total; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Cases Reported");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment