|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.0.0"></script> |
|
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js?2.0.0"></script> |
|
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js?2.0.0"></script> |
|
<style type="text/css"> |
|
|
|
body { |
|
font: 10px sans-serif; |
|
margin: 0; |
|
} |
|
|
|
path.line { |
|
fill: none; |
|
stroke: #666; |
|
stroke-width: 1.5px; |
|
} |
|
|
|
path.area { |
|
fill: #e7e7e7; |
|
} |
|
|
|
.axis { |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.x.axis line { |
|
stroke: #fff; |
|
} |
|
|
|
.x.axis .minor { |
|
stroke-opacity: .5; |
|
} |
|
|
|
.x.axis path { |
|
display: none; |
|
} |
|
|
|
.y.axis line, .y.axis path { |
|
fill: none; |
|
stroke: #000; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
<script type="text/javascript"> |
|
|
|
var m = [80, 80, 80, 80], |
|
w = 960 - m[1] - m[3], |
|
h = 500 - m[0] - m[2], |
|
parse = d3.time.format("%b %Y").parse; |
|
|
|
// Scales and axes. Note the inverted domain for the y-scale: bigger is up! |
|
var x = d3.time.scale().range([0, w]), |
|
y = d3.scale.linear().range([h, 0]), |
|
xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true), |
|
yAxis = d3.svg.axis().scale(y).ticks(4).orient("left"); |
|
|
|
// A line generator, for the dark stroke. |
|
var line = d3.svg.line() |
|
.interpolate("monotone") |
|
.x(function(d) { return x(d.date); }) |
|
.y(function(d) { return y(d.price); }); |
|
|
|
d3.csv("readme.csv", function(data) { |
|
|
|
// Filter to one symbol; the S&P 500. |
|
var values = data.filter(function(d) { |
|
return d.symbol == "S&P 500"; |
|
}); |
|
|
|
// Parse dates and numbers. We assume values are sorted by date. |
|
values.forEach(function(d) { |
|
d.date = parse(d.date); |
|
d.price = +d.price; |
|
}); |
|
|
|
// Compute the minimum and maximum date, and the maximum price. |
|
x.domain([values[0].date, values[values.length - 1].date]); |
|
y.domain([0, d3.max(values, function(d) { return d.price; })]).nice(); |
|
|
|
// Add an SVG element with the desired dimensions and margin. |
|
var svg = d3.select("body").append("svg:svg") |
|
.attr("width", w + m[1] + m[3]) |
|
.attr("height", h + m[0] + m[2]) |
|
.append("svg:g") |
|
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); |
|
|
|
// Add the clip path. |
|
svg.append("svg:clipPath") |
|
.attr("id", "clip") |
|
.append("svg:rect") |
|
.attr("width", w) |
|
.attr("height", h); |
|
|
|
|
|
// Add the x-axis. |
|
svg.append("svg:g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(0," + h + ")") |
|
.call(xAxis); |
|
|
|
// Add the y-axis. |
|
svg.append("svg:g") |
|
.attr("class", "y axis") |
|
.attr("transform", "translate(0,0)") |
|
.call(yAxis); |
|
|
|
// Add the line path. |
|
svg.append("svg:path") |
|
.attr("class", "line") |
|
.attr("clip-path", "url(#clip)") |
|
.attr("d", line(values)); |
|
|
|
}); |
|
|
|
</script> |
|
</body> |
|
</html> |