Skip to content

Instantly share code, notes, and snippets.

@dougdowson

dougdowson/chart.js

Last active August 29, 2015 13:57
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 dougdowson/9727398 to your computer and use it in GitHub Desktop.
Save dougdowson/9727398 to your computer and use it in GitHub Desktop.
Download ZIP
Reusable Line Chart
Raw
chart.js
function timeSeriesChart() {
var margin = {top: 20, right: 20, bottom: 20, left: 35},
width = 760,
height = 420,
xValue = function(d) { return d[0]; },
yValue = function(d) { return d[1]; },
xScale = d3.time.scale(),
yScale = d3.scale.linear(),
xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(6, 0),
yAxis = d3.svg.axis().scale(yScale).orient("left").tickSize(-width - margin.left - margin.right),
area = d3.svg.area().x(X).y1(Y),
line = d3.svg.line().x(X).y(Y);
function chart(selection) {
selection.each(function(data) {
// Convert data to standard representation greedily;
// this is needed for nondeterministic accessors.
data = data.map(function(d, i) {
return [xValue.call(data, d, i), yValue.call(data, d, i)];
});
// Update the x-scale.
xScale
.domain(d3.extent(data, function(d) { return d[0]; }))
.range([0, width - margin.left - margin.right]);
// Update the y-scale.
yScale
.domain([0, 1.1*(d3.max(data, function(d) { return d[1]; }))])
.range([height - margin.top - margin.bottom, 0]);
// Select the svg element, if it exists.
var svg = d3.select(this).selectAll("svg").data([data]);
// Otherwise, create the skeletal chart.
var gEnter = svg.enter().append("svg").append("g");
gEnter.append("g").attr("class", "x axis");
gEnter.append("g").attr("class", "y axis");
gEnter.append("path").attr("class", "line");
// Update the outer dimensions.
svg .attr("width", width)
.attr("height", height);
// Update the inner dimensions.
var g = svg.select("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Update the line path.
g.select(".line")
.attr("d", line);
// Update the x-axis.
g.select(".x.axis")
.attr("transform", "translate(0," + yScale.range()[0] + ")")
.call(xAxis);
g.select(".y.axis")
.attr("transform", "translate(0," + yScale.range()[1] + ")")
.call(yAxis);
svg.selectAll("g")
.classed("g-baseline", function(d) { return d == 0 });
});
}
// The x-accessor for the path generator; xScale ∘ xValue.
function X(d) {
return xScale(d[0]);
}
// The x-accessor for the path generator; yScale ∘ yValue.
function Y(d) {
return yScale(d[1]);
}
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
return chart;
};
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
return chart;
};
chart.x = function(_) {
if (!arguments.length) return xValue;
xValue = _;
return chart;
};
chart.y = function(_) {
if (!arguments.length) return yValue;
yValue = _;
return chart;
};
return chart;
}
Raw
data.csv
date price
2000-01-01 1425.59
2000-02-01 1388.87
2000-03-01 1442.21
2000-04-01 1461.36
2000-05-01 1418.48
2000-06-01 1461.96
2000-07-01 1473.00
2000-08-01 1485.46
2000-09-01 1468.05
2000-10-01 1390.14
2000-11-01 1375.04
2000-12-01 1330.93
2001-01-01 1335.63
2001-02-01 1305.75
2001-03-01 1185.85
2001-04-01 1189.84
2001-05-01 1270.37
2001-06-01 1238.71
2001-07-01 1204.45
2001-08-01 1178.51
2001-09-01 1044.64
2001-10-01 1076.59
2001-11-01 1129.68
2001-12-01 1144.93
2002-01-01 1140.21
2002-02-01 1100.67
2002-03-01 1153.79
2002-04-01 1112.03
2002-05-01 1079.27
2002-06-01 1014.05
2002-07-01 903.59
2002-08-01 912.55
2002-09-01 867.81
2002-10-01 854.63
2002-11-01 909.93
2002-12-01 899.18
2003-01-01 895.84
2003-02-01 837.62
2003-03-01 846.62
2003-04-01 890.03
2003-05-01 935.96
2003-06-01 988.00
2003-07-01 992.54
2003-08-01 989.53
2003-09-01 1019.44
2003-10-01 1038.73
2003-11-01 1049.90
2003-12-01 1080.64
2004-01-01 1132.52
2004-02-01 1143.36
2004-03-01 1123.98
2004-04-01 1133.08
2004-05-01 1102.78
2004-06-01 1132.76
2004-07-01 1105.85
2004-08-01 1088.94
2004-09-01 1117.66
2004-10-01 1118.07
2004-11-01 1168.94
2004-12-01 1199.21
2005-01-01 1181.41
2005-02-01 1199.63
2005-03-01 1194.90
2005-04-01 1164.42
2005-05-01 1178.28
2005-06-01 1202.26
2005-07-01 1222.24
2005-08-01 1224.27
2005-09-01 1225.91
2005-10-01 1191.96
2005-11-01 1237.37
2005-12-01 1262.07
2006-01-01 1278.72
2006-02-01 1276.65
2006-03-01 1293.74
2006-04-01 1302.18
2006-05-01 1290.00
2006-06-01 1253.12
2006-07-01 1260.24
2006-08-01 1287.15
2006-09-01 1317.81
2006-10-01 1363.38
2006-11-01 1388.63
2006-12-01 1416.42
2007-01-01 1424.16
2007-02-01 1444.79
2007-03-01 1406.95
2007-04-01 1463.65
2007-05-01 1511.14
2007-06-01 1514.49
2007-07-01 1520.70
2007-08-01 1454.62
2007-09-01 1497.12
2007-10-01 1539.66
2007-11-01 1463.39
2007-12-01 1479.23
2008-01-01 1378.76
2008-02-01 1354.87
2008-03-01 1316.94
2008-04-01 1370.47
2008-05-01 1403.22
2008-06-01 1341.25
2008-07-01 1257.33
2008-08-01 1281.47
2008-09-01 1217.01
2008-10-01 968.80
2008-11-01 883.04
2008-12-01 877.56
2009-01-01 865.58
2009-02-01 805.23
2009-03-01 757.13
2009-04-01 848.15
2009-05-01 902.41
2009-06-01 926.12
2009-07-01 935.82
2009-08-01 1009.72
2009-09-01 1044.55
2009-10-01 1067.66
2009-11-01 1088.07
2009-12-01 1110.38
2010-01-01 1123.58
2010-02-01 1089.16
2010-03-01 1152.05
2010-04-01 1197.32
2010-05-01 1125.06
2010-06-01 1083.36
2010-07-01 1079.80
2010-08-01 1087.28
2010-09-01 1122.08
2010-10-01 1171.58
2010-11-01 1198.89
2010-12-01 1241.53
2011-01-01 1282.62
2011-02-01 1321.12
2011-03-01 1304.49
2011-04-01 1331.51
2011-05-01 1338.31
2011-06-01 1287.29
2011-07-01 1325.18
2011-08-01 1185.31
2011-09-01 1173.88
2011-10-01 1207.22
2011-11-01 1226.41
2011-12-01 1243.32
2012-01-01 1300.58
2012-02-01 1352.49
2012-03-01 1389.24
2012-04-01 1386.43
2012-05-01 1341.27
2012-06-01 1323.48
2012-07-01 1359.78
2012-08-01 1403.44
2012-09-01 1443.42
2012-10-01 1437.82
2012-11-01 1394.51
2012-12-01 1422.29
2013-01-01 1480.40
2013-02-01 1512.31
2013-03-01 1550.83
2013-04-01 1570.70
2013-05-01 1639.84
2013-06-01 1618.77
2013-07-01 1668.68
2013-08-01 1670.09
2013-09-01 1687.17
2013-10-01 1720.03
2013-11-01 1783.54
2013-12-01 1807.78
2014-01-01 1822.36
2014-02-01 1817.03
Raw
index.html
<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,600italic,700italic,200,300,400,600,700,900">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body, h1, h2, h3, p {
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1em;
color: #333;
font-weight: 400;
}
#content {
margin: 5px;
padding: 20px 10px 20px 20px;
width: 780px;
text-align: left;
border: 1px solid #ccc;
}
h1 {
line-height: 1em;
font-size: 1.75em;
font-weight: 900;
color: #000;
}
p {
margin: 5px 0px 0px 0px;
padding: 0;
}
.domain {
stroke-width: 0;
}
path.line {
fill: none;
stroke: #08306b;
stroke-width: 2px;
}
.axis path, .axis line {
fill: none;
stroke: #ccc;
shape-rendering: crispEdges;
}
.axis line {
stroke: #eee;
stroke-width: 1;
shape-rendering: crispEdges;
}
.g-baseline line {
stroke: #333;
stroke-width: 2;
shape-rendering: crispEdges;
}
.x.axis .tick text, .y.axis .tick text {
color: #333;
font-size: 0.9em;
}
</style>
</head>
<body>
<div id="content">
<h1>S&P 500 Stock Price Index</h1>
<p>Jan 2000&ndash;Feb 2014</p>
<div id="chart"></div>
<p>Source: S&P Dow Jones Indices.</p>
</div>
<script src="chart.js"></script>
<script>
var chart = timeSeriesChart()
.x(function(d) { return formatDate.parse(d.date); })
.y(function(d) { return +d.price; });
var formatDate = d3.time.format("%Y-%m-%d");
d3.csv("data.csv", function(data) {
d3.select("#chart")
.datum(data)
.call(chart);
});
d3.select(self.frameElement).style("height", "555px");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment