Skip to content

Instantly share code, notes, and snippets.

@emmasaunders

emmasaunders/index.html

Last active October 19, 2016 14:24
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 emmasaunders/f55caf3a742aac10a5d44f58374bf343 to your computer and use it in GitHub Desktop.
Save emmasaunders/f55caf3a742aac10a5d44f58374bf343 to your computer and use it in GitHub Desktop.
Download ZIP
Line chart from csv (v3)
Raw
readme.md

##Explanation

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Line chart from CSV using d3.js</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
text {
font-family: arial;
font-size: 12px;
}
path.line {
fill: none;
stroke: red;
stroke-width: 3px;
}
.axis path,
.axis line {
fill: none;
stroke: slategray;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script type="text/javascript">
var parseDate = d3.time.format("%m/%d/%Y").parse;
var margin = {left: 50, right: 20, top: 20, bottom: 50 };
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var max = 0;
var xNudge = 50;
var yNudge = 20;
var minDate = new Date();
var maxDate = new Date();
d3.csv("prices.csv")
.row(function(d) { return { month: parseDate(d.month), price: Number(d.price.trim().slice(1))}; })
.get(function(error, rows) {
max = d3.max(rows, function(d) { return d.price; });
minDate = d3.min(rows, function(d) {return d.month; });
maxDate = d3.max(rows, function(d) { return d.month; });
var y = d3.scale.linear()
.domain([0,max])
.range([height,0]);
var x = d3.time.scale()
.domain([minDate,maxDate])
.range([0,width]);
var yAxis = d3.svg.axis()
.orient("left")
.scale(y);
var xAxis = d3.svg.axis()
.orient("bottom")
.scale(x);
var line = d3.svg.line()
.x(function(d){ return x(d.month); })
.y(function(d){ return y(d.price); })
.interpolate("cardinal");
var svg = d3.select("body").append("svg").attr("id","svg").attr("height","100%").attr("width","100%");
var chartGroup = svg.append("g").attr("class","chartGroup").attr("transform","translate("+xNudge+","+yNudge+")");
chartGroup.append("path")
.attr("class","line")
.attr("d",function(d){ return line(rows); })
chartGroup.append("g")
.attr("class","axis x")
.attr("transform","translate(0,"+height+")")
.call(xAxis);
chartGroup.append("g")
.attr("class","axis y")
.call(yAxis);
});
</script>
</body>
</html>
Raw
prices.csv
month price
1/1/2003 $54
2/1/2003 $54
3/1/2003 $50
4/1/2003 $52
5/1/2003 $53
6/1/2003 $49
7/1/2003 $51
8/1/2003 $52
9/1/2003 $54
10/1/2003 $52
11/1/2003 $50
12/1/2003 $52
1/1/2004 $59
2/1/2004 $60
3/1/2004 $61
4/1/2004 $59
5/1/2004 $60
6/1/2004 $64
7/1/2004 $58
8/1/2004 $57
9/1/2004 $61
10/1/2004 $61
11/1/2004 $68
12/1/2004 $78
1/1/2005 $79
2/1/2005 $89
3/1/2005 $101
4/1/2005 $98
5/1/2005 $100
6/1/2005 $96
7/1/2005 $88
8/1/2005 $85
9/1/2005 $79
10/1/2005 $83
11/1/2005 $86
12/1/2005 $87
1/1/2006 $101
2/1/2006 $97
3/1/2006 $93
4/1/2006 $94
5/1/2006 $90
6/1/2006 $86
7/1/2006 $89
8/1/2006 $96
9/1/2006 $96
10/1/2006 $96
11/1/2006 $103
12/1/2006 $108
1/1/2007 $106
2/1/2007 $104
3/1/2007 $100
4/1/2007 $99
5/1/2007 $100
6/1/2007 $107
7/1/2007 $106
8/1/2007 $108
9/1/2007 $113
10/1/2007 $116
11/1/2007 $114
12/1/2007 $118
1/1/2008 $122
2/1/2008 $139
3/1/2008 $136
4/1/2008 $127
5/1/2008 $127
6/1/2008 $131
7/1/2008 $133
8/1/2008 $131
9/1/2008 $127
10/1/2008 $108
11/1/2008 $108
12/1/2008 $103
1/1/2009 $108
2/1/2009 $108
3/1/2009 $106
4/1/2009 $112
5/1/2009 $123
6/1/2009 $119
7/1/2009 $113
8/1/2009 $117
9/1/2009 $116
10/1/2009 $121
11/1/2009 $120
12/1/2009 $125
1/1/2010 $127
2/1/2010 $123
3/1/2010 $125
4/1/2010 $127
5/1/2010 $128
6/1/2010 $142
7/1/2010 $153
8/1/2010 $157
9/1/2010 $164
10/1/2010 $162
11/1/2010 $174
12/1/2010 $184
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment