Multiple sets of multiple lines on a d3.js chart
Not working yet. Can only see how to draw a single chart.
HTML
<body>
<div id="container"></div>
</body>
CSS
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke-width: 1.5px;
}
.line.imports {
stroke: #900;
}
.line.exports {
stroke: #090;
}
JavaScript
var chart = function module() {
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 400,
height = 300,
inner_width = width - margin.left - margin.right,
inner_height = height - margin.top - margin.bottom,
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')
.tickFormat(d3.time.format('%Y'))
.ticks(d3.time.years, 1),
yAxis = d3.svg.axis().scale(yScale).orient('left'),
// defined() ensures we only draw the lines where there is data.
imports_line = d3.svg.line().x(X).y(YImports)
.defined(function(d){ return d.imports !== null; }),
exports_line = d3.svg.line().x(X).y(YExports)
.defined(function(d){ return d.exports !== null; }),
// defined() ensures we draw the area only when both lines have data.
area = d3.svg.area().x(X).y1(YImports)
.defined(function(d){
return d.imports !== null && d.exports !== null; });
function X(d) {
return xScale(d.year);
}
function YImports(d) {
return yScale(d.imports);
}
function YExports(d) {
return yScale(d.exports);
}
function exports(_selection) {
_selection.each(function(data) {
inner_width = width - margin.left - margin.right;
inner_height = height - margin.top - margin.bottom;
// Update scales.
// Use min/max of the years from all countries we're displaying.
xScale.domain([
d3.min(data, function(country){
return d3.min(country.values, function(v) { return v.year; })
}),
d3.max(data, function(country){
return d3.max(country.values, function(v) { return v.year; })
})
]).range([0, inner_width]);
// Use maximum value of all imports or exports from...