D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ColinEberhardt
Full window
Github gist
Interactive Small Multiples - Step 1
Built with
blockbuilder.org
<!DOCTYPE html> <script src="https://unpkg.com/d3@4.6.0"></script> <script src="https://unpkg.com/d3fc@12.1.0"></script> <div id='small-multiples'></div> <style> html, body, #small-multiples { height: 100%; margin: 0; } </style> <script> d3.tsv('askmefi_category_year.tsv') .row(function(r) { return { category: r.category, n: Number(r.n), year: Number(r.year) } }) .get(function(data) { var nested = d3.nest() .key(function(k) { return k.category; }) .entries(data); // pick on of the data series var dataSeries = nested[7].values; var yExtent = fc.extentLinear() .accessors([function(d) { return d.n; }]) .pad([0, 0.2]) .include([0]); var xExtent = fc.extentLinear() .accessors([function(d) { return d.year; }]); var line = fc.seriesSvgLine() .crossValue(function(d) { return d.year; }) .mainValue(function(d) { return d.n; }); var chart = fc.chartSvgCartesian( d3.scaleLinear(), d3.scaleLinear()) .yDomain(yExtent(data)) .xDomain(xExtent(data)) .yOrient('left') .plotArea(line); // render d3.select('#small-multiples') .datum(dataSeries) .call(chart); }); </script>
https://unpkg.com/d3@4.6.0
https://unpkg.com/d3fc@12.1.0