lorenzopub · October 20, 2016 08:39
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/data.csv b/data.csv
diff --git a/index.html b/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>
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
	<!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>