Skip to content

Instantly share code, notes, and snippets.

@lorenzopub

lorenzopub/.block

Created October 20, 2016 08:40
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 lorenzopub/0b09968e3d4970d845a5f45ed25595bb to your computer and use it in GitHub Desktop.
Save lorenzopub/0b09968e3d4970d845a5f45ed25595bb to your computer and use it in GitHub Desktop.
Download ZIP
for reference: stacked area chart d3 v4
Raw
.block
license: mit
Raw
data.csv
date Rest of the world Mexico Netherlands Belgium Canada Ireland Germany United Kingdom Italy Poland Dominican Republic
2002 88558206 1148836167 686581858 16284782 392642400 71082755 143404547 117944163 7535197 5642489 13590525
2003 83540588 1195852817 694147130 22538407 386142563 95911940 139187125 95186602 8753778 9923607 13777927
2004 82110272 1240508053 698363141 31451099 361144916 73398981 139741567 119952263 7662460 8187112 14783630
2005 96446977 1374412804 704236235 48837518 351015320 101100241 144728160 121471118 9946037 11761780 14553130
2006 99597884 1631887282 828601218 72199111 380863857 98627600 144630411 118579399 12412105 10796643 15064333
2007 100411671 1620666247 789142240 111914367 397821581 105063181 158251183 119842075 16314811 13812183 14329372
2008 97578069 1585430382 767479362 122512008 362440537 109665375 136256464 116128266 19541037 12478281 15024342
2009 87209758 1521317909 662921254 100543918 280890781 101719703 123469764 90222042 20008511 10792537 15487936
2010 90353716 1578205773 652054991 129350786 311936133 100210415 142132707 93747063 22359753 11715607 14327911
2011 87494225 1668121485 600947493 163771112 280736673 115867733 138116263 83828860 23147337 11388168 13420458
2012 78403307 1780838195 612335989 180930179 243315315 110740768 91736542 81827284 25301651 12752521 15146016
2013 60990882 1861629388 568978539 179862067 231047571 108061495 81589914 75766894 19188989 12225128 11585473
2014 65037841 2152870946 542067060 224332138 207130600 82245572 67844388 57395795 20116266 12770467 11257330
2015 66504137 2271799863 570892012 271021757 201833297 106222316 71614446 52206182 19792453 13327032 12969939
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 12px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: none;
shape-rendering: crispEdges;
}
.browser text {
text-anchor: end;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.0.0-rc.2.min.js"></script>
<div id="chart">
<p>
For reference: d3 v4 stacked area chart
</p>
</div>
</body>
<script>
var tsvData = null;
var margin = {top: 20, right: 60, bottom: 30, left: 30},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.timeParse('%Y');
var formatSi = d3.format(".3s");
var formatNumber = d3.format(".1f"),
formatBillion = function(x) { return formatNumber(x / 1e9); };
var x = d3.scaleTime()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var color = d3.scaleOrdinal(d3.schemeCategory20);
var xAxis = d3.axisBottom()
.scale(x);
var yAxis = d3.axisLeft()
.scale(y)
.tickFormat(formatBillion);
var area = d3.area()
.x(function(d) {
return x(d.data.date); })
.y0(function(d) { return y(d[0]); })
.y1(function(d) { return y(d[1]); });
var stack = d3.stack()
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 + ')');
d3.csv('data.csv', function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== 'date'; }));
var keys = data.columns.filter(function(key) { return key !== 'date'; })
data.forEach(function(d) {
d.date = parseDate(d.date);
});
tsvData = (function(){ return data; })();
var maxDateVal = d3.max(data, function(d){
var vals = d3.keys(d).map(function(key){ return key !== 'date' ? d[key] : 0 });
return d3.sum(vals);
});
// Set domains for axes
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, maxDateVal])
stack.keys(keys);
stack.order(d3.stackOrderNone);
stack.offset(d3.stackOffsetNone);
console.log(stack(data));
var browser = svg.selectAll('.browser')
.data(stack(data))
.enter().append('g')
.attr('class', function(d){ return 'browser ' + d.key; })
.attr('fill-opacity', 0.5);
browser.append('path')
.attr('class', 'area')
.attr('d', area)
.style('fill', function(d) { return color(d.key); });
browser.append('text')
.datum(function(d) { return d; })
.attr('transform', function(d) { return 'translate(' + x(data[13].date) + ',' + y(d[13][1]) + ')'; })
.attr('x', -6)
.attr('dy', '.35em')
.style("text-anchor", "start")
.text(function(d) { return d.key; })
.attr('fill-opacity', 1);
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.call(yAxis);
svg.append ("text")
.attr("x", 0-margin.left)
.text("Billions of liters")
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment