Skip to content

Instantly share code, notes, and snippets.

@cgroll
Last active August 29, 2015 14:16
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 cgroll/491344b798af8dcc8dc4 to your computer and use it in GitHub Desktop.
Save cgroll/491344b798af8dcc8dc4 to your computer and use it in GitHub Desktop.
Multi-series line chart with missing values

The plot shows multiple time series with missing values, where missing values should not cause line breaks.

You can view a rendered version of this gist at bl.ocks.org.

// define margins
var margin = {top: 20, right: 80, bottom: 30, left: 150};
// graphics size without axis
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
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 + ")");
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.log()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
var parseDate = d3.time.format("%Y-%m-%d").parse;
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.idx); })
.y(function(d) { return y(d.gdp); });
var tsdata = d3.csv("gdp_us_br_af.csv", function (data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "idx"; }));
data.forEach(function(d) {
d.idx = parseDate(d.idx);
});
var tseries = color.domain().map(function(name) {
dataWithNaN = data.map(function(d) {
return {idx: d.idx, gdp: +d[name]/1000000000};
});
var fltData = dataWithNaN.filter( function(d) { return !isNaN(d.gdp)});
return {
name: name,
values: fltData
};
});
x.domain(d3.extent(data, function(d) { return d.idx; }));
y.domain([
d3.min(tseries, function(c) { return d3.min(c.values, function(v) { return v.gdp; }); }),
d3.max(tseries, function(c) { return d3.max(c.values, function(v) { return v.gdp; }); })
]);
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("GDP in bn $");
var gdp = svg.selectAll(".gdp")
.data(tseries)
.enter().append("g")
.attr("class", "gdp");
gdp.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
// gdp.append("text")
// .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
// .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
// .attr("x", 3)
// .attr("dy", ".35em")
// .text(function(d) { return d.name; });
});
idx US BR AF
1960-12-31 5.433e11 1.51655699125199e10 5.37777811911111e8
1961-12-31 5.633e11 1.5236854859469e10 5.48888894577778e8
1962-12-31 6.051e11 1.99262938390163e10 5.46666678044444e8
1963-12-31 6.386e11 2.30214772922093e10 7.51111190755556e8
1964-12-31 6.858e11 2.12118922599904e10 8.00000045511111e8
1965-12-31 7.437e11 2.1790035102382e10 1.00666663822222e9
1966-12-31 8.15e11 2.70627165105085e10 1.39999996586667e9
1967-12-31 8.617e11 3.05918340453823e10 1.67333341866667e9
1968-12-31 9.425e11 3.38758819060553e10 1.37333336746667e9
1969-12-31 1.0199e12 3.74588982652258e10 1.40888892302222e9
1970-12-31 1.0759e12 4.23276001159852e10 1.74888659626667e9
1971-12-31 1.1678e12 4.9204456711657e10 1.83110897208889e9
1972-12-31 1.2824e12 5.85390087957658e10 1.59555547591111e9
1973-12-31 1.4285e12 7.92790577361044e10 1.73333326506667e9
1974-12-31 1.5488e12 1.05136007544771e11 2.15555549866667e9
1975-12-31 1.6889e12 1.23709376566885e11 2.36666661546667e9
1976-12-31 1.8776e12 1.52678020453114e11 2.55555556693333e9
1977-12-31 2.086e12 1.76171284305289e11 2.95333341866667e9
1978-12-31 2.3566e12 2.00800891871957e11 3.30000010808889e9
1979-12-31 2.6321e12 2.24969488839356e11 3.69794034514177e9
1980-12-31 2.8625e12 2.35024598984118e11 3.64172344718433e9
1981-12-31 3.211e12 2.63561088975615e11 3.47878790981818e9
1982-12-31 3.345e12 2.81682304160256e11 NA
1983-12-31 3.6381e12 2.03304515490695e11 NA
1984-12-31 4.0407e12 2.09023912696764e11 NA
1985-12-31 4.3467e12 2.22942790435318e11 NA
1986-12-31 4.5902e12 2.68137224729724e11 NA
1987-12-31 4.8702e12 2.94084112392657e11 NA
1988-12-31 5.2526e12 3.30397381998489e11 NA
1989-12-31 5.6577e12 4.2559531e11 NA
1990-12-31 5.9796e12 4.61951782e11 NA
1991-12-31 6.174e12 4.07337832905405e11 NA
1992-12-31 6.5393e12 3.90566551483761e11 NA
1993-12-31 6.8787e12 4.38299504406263e11 NA
1994-12-31 7.3088e12 5.46233380259659e11 NA
1995-12-31 7.6641e12 7.68951297894977e11 NA
1996-12-31 8.1002e12 8.39682618644911e11 NA
1997-12-31 8.6085e12 8.71200342859687e11 NA
1998-12-31 9.0892e12 8.43827363149355e11 NA
1999-12-31 9.6606e12 5.86862640399442e11 NA
2000-12-31 1.02848e13 6.44701831101394e11 NA
2001-12-31 1.06218e13 5.53582178386192e11 2.46166631478366e9
2002-12-31 1.09775e13 5.04221228974035e11 4.12881804225508e9
2003-12-31 1.15107e13 5.52469288267793e11 4.58364892164112e9
2004-12-31 1.22749e13 6.63760341880342e11 5.28546199933739e9
2005-12-31 1.30937e13 8.82185702547247e11 6.27507601647174e9
2006-12-31 1.38559e13 1.08891681985294e12 7.05759761445076e9
2007-12-31 1.44776e13 1.36682399465872e12 9.84385100941462e9
2008-12-31 1.47186e13 1.65350856145708e12 1.01905346366444e10
2009-12-31 1.44187e13 1.62018805641693e12 1.24869504681773e10
2010-12-31 1.49644e13 2.14306787175989e12 1.5936784437224e10
2011-12-31 1.55179e13 2.47669476327116e12 1.7870159081787e10
2012-12-31 1.61632e13 2.24878091239568e12 2.05067952544884e10
2013-12-31 1.67681e13 2.24567303235376e12 2.03096710146236e10
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 16px 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;
}
.grid .tick {
stroke: lightgrey;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8">
</script>
<script src="assembly_code.js">
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment