joshnabbott · January 8, 2018 23:05 · Jan 8, 2018
diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: mit
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+
+
+forked from <a href='http://bl.ocks.org/greencracker/'>greencracker</a>'s block: <a href='http://bl.ocks.org/greencracker/e08d5e789737e91d6e73d7dcc34969bf'>for reference: stacked area chart d3 v4 </a>
+
+forked from <a href='http://bl.ocks.org/lorenzopub/'>lorenzopub</a>'s block: <a href='http://bl.ocks.org/lorenzopub/962cdb34a86fab50de707accb7179ce5'>for reference: stacked area chart d3 v4 </a>
diff --git a/data.csv b/data.csv
@@ -0,0 +1,15 @@
+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
diff --git a/index.html b/index.html
@@ -0,0 +1,138 @@
+<!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>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,5 @@


		forked from <a href='http://bl.ocks.org/greencracker/'>greencracker</a>'s block: <a href='http://bl.ocks.org/greencracker/e08d5e789737e91d6e73d7dcc34969bf'>for reference: stacked area chart d3 v4 </a>

		forked from <a href='http://bl.ocks.org/lorenzopub/'>lorenzopub</a>'s block: <a href='http://bl.ocks.org/lorenzopub/962cdb34a86fab50de707accb7179ce5'>for reference: stacked area chart d3 v4 </a>
No results found