Built with blockbuilder.org
forked from ivanempire's block: Streamgraph
license: mit |
Built with blockbuilder.org
forked from ivanempire's block: Streamgraph
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
</style> | |
</head> | |
<body> | |
<script> | |
var data = [ | |
{month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400}, | |
{month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400}, | |
{month: new Date(2015, 2, 1), apples: 34, bananas: 60, cherries: 640, dates: 400}, | |
{month: new Date(2015, 3, 1), apples: 320, bananas: 480, cherries: 640, dates: 400}, | |
{month: new Date(2015, 4, 1), apples: 500, bananas: 23, cherries: 100, dates: 50}, | |
{month: new Date(2015, 5, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400}, | |
{month: new Date(2015, 6, 1), apples: 1200, bananas: 1000, cherries: 800, dates: 700}, | |
{month: new Date(2015, 7, 1), apples: 320, bananas: 1000, cherries: 640, dates: 700}, | |
{month: new Date(2015, 8, 1), apples: 1200, bananas: 1000, cherries: 800, dates: 400}, | |
{month: new Date(2015, 9, 1), apples: 34, bananas: 1000, cherries: 640, dates: 1000}, | |
{month: new Date(2015, 10, 1), apples: 3840, bananas: 1000, cherries: 800, dates: 700}, | |
{month: new Date(2015, 11, 1), apples: 1200, bananas: 480, cherries: 100, dates: 2000}, | |
]; | |
var stack = d3.stack() | |
.keys(["apples", "bananas", "cherries", "dates"]) | |
.order(d3.stackOrderNone) | |
.offset(d3.stackOffsetWiggle); | |
var series = stack(data); | |
var width = 600, | |
height = 500; | |
var x = d3.scaleTime() | |
.domain(d3.extent(data, function(d){ return d.month; })) | |
.range([0, width]); | |
// setup axis | |
var xAxis = d3.axisBottom(x); | |
var y = d3.scaleLinear() | |
.domain([0, d3.max(series, function(layer) { return d3.max(layer, function(d){ return d[0] + d[1];}); })]) | |
.range([height, 0]); | |
var color = d3.scaleLinear() | |
.range(["#51D0D7", "#31B5BB"]); | |
var area = d3.area() | |
.x(function(d) { console.info('in area function', d); return x(d.data.month); }) | |
.y0(function(d) { return y(d[0]); }) | |
.y1(function(d) { return y(d[1]); }) | |
.curve(d3.curveBasis); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
svg.selectAll("path") | |
.data(series) | |
.enter().append("path") | |
.attr("d", area) | |
.style("fill", function() { return color(Math.random()); }); | |
svg.append("g") | |
.attr("class", "axis axis--x") | |
.attr("transform", "translate(0," + (height) + ")") | |
.call(xAxis); | |
</script> | |
</body> |
key | date | value | |
---|---|---|---|
BBT | 1990 | 6 | |
BBT | 1991 | 10 | |
BBT | 1992 | 1 | |
BBT | 1993 | 14 | |
BBT | 1994 | 92 | |
BBT | 1995 | 94 | |
BBT | 1996 | 121 | |
BBT | 1997 | 140 | |
BBT | 1998 | 137 | |
BBT | 1999 | 131 | |
BBT | 2000 | 123 | |
BBT | 2001 | 143 | |
BBT | 2002 | 147 | |
BBT | 2003 | 101 | |
BBT | 2004 | 123 | |
BBT | 2005 | 115 | |
BBT | 2006 | 115 | |
BBT | 2007 | 114 | |
BBT | 2008 | 128 | |
BBT | 2009 | 116 | |
BBT | 2010 | 126 | |
BBT | 2011 | 133 | |
BBT | 2012 | 115 | |
BBT | 2013 | 109 | |
BBT | 2014 | 84 | |
BBT | 2015 | 85 | |
BC | 1990 | 0 | |
BC | 1991 | 3 | |
BC | 1992 | 2 | |
BC | 1993 | 3 | |
BC | 1994 | 16 | |
BC | 1995 | 17 | |
BC | 1996 | 26 | |
BC | 1997 | 37 | |
BC | 1998 | 54 | |
BC | 1999 | 46 | |
BC | 2000 | 30 | |
BC | 2001 | 38 | |
BC | 2002 | 28 | |
BC | 2003 | 36 | |
BC | 2004 | 36 | |
BC | 2005 | 42 | |
BC | 2006 | 32 | |
BC | 2007 | 40 | |
BC | 2008 | 56 | |
BC | 2009 | 57 | |
BC | 2010 | 58 | |
BC | 2011 | 58 | |
BC | 2012 | 44 | |
BC | 2013 | 54 | |
BC | 2014 | 44 | |
BC | 2015 | 47 | |
BCB | 1990 | 0 | |
BCB | 1991 | 0 | |
BCB | 1992 | 0 | |
BCB | 1993 | 0 | |
BCB | 1994 | 0 | |
BCB | 1995 | 0 | |
BCB | 1996 | 0 | |
BCB | 1997 | 0 | |
BCB | 1998 | 0 | |
BCB | 1999 | 0 | |
BCB | 2000 | 0 | |
BCB | 2001 | 0 | |
BCB | 2002 | 0 | |
BCB | 2003 | 0 | |
BCB | 2004 | 0 | |
BCB | 2005 | 0 | |
BCB | 2006 | 0 | |
BCB | 2007 | 0 | |
BCB | 2008 | 0 | |
BCB | 2009 | 0 | |
BCB | 2010 | 0 | |
BCB | 2011 | 0 | |
BCB | 2012 | 0 | |
BCB | 2013 | 4 | |
BCB | 2014 | 6 | |
BCB | 2015 | 7 | |
CH | 1990 | 1 | |
CH | 1991 | 0 | |
CH | 1992 | 3 | |
CH | 1993 | 7 | |
CH | 1994 | 31 | |
CH | 1995 | 31 | |
CH | 1996 | 31 | |
CH | 1997 | 36 | |
CH | 1998 | 19 | |
CH | 1999 | 31 | |
CH | 2000 | 31 | |
CH | 2001 | 31 | |
CH | 2002 | 10 | |
CH | 2003 | 10 | |
CH | 2004 | 20 | |
CH | 2005 | 17 | |
CH | 2006 | 24 | |
CH | 2007 | 18 | |
CH | 2008 | 29 | |
CH | 2009 | 28 | |
CH | 2010 | 40 | |
CH | 2011 | 33 | |
CH | 2012 | 31 | |
CH | 2013 | 33 | |
CH | 2014 | 30 | |
CH | 2015 | 27 | |
CS | 1990 | 10 | |
CS | 1991 | 12 | |
CS | 1992 | 16 | |
CS | 1993 | 38 | |
CS | 1994 | 137 | |
CS | 1995 | 108 | |
CS | 1996 | 76 | |
CS | 1997 | 171 | |
CS | 1998 | 196 | |
CS | 1999 | 235 | |
CS | 2000 | 241 | |
CS | 2001 | 304 | |
CS | 2002 | 323 | |
CS | 2003 | 285 | |
CS | 2004 | 277 | |
CS | 2005 | 237 | |
CS | 2006 | 209 | |
CS | 2007 | 146 | |
CS | 2008 | 145 | |
CS | 2009 | 147 | |
CS | 2010 | 140 | |
CS | 2011 | 146 | |
CS | 2012 | 147 | |
CS | 2013 | 151 | |
CS | 2014 | 182 | |
CS | 2015 | 226 | |
HU | 1990 | 0 | |
HU | 1991 | 0 | |
HU | 1992 | 1 | |
HU | 1993 | 1 | |
HU | 1994 | 3 | |
HU | 1995 | 4 | |
HU | 1996 | 3 | |
HU | 1997 | 16 | |
HU | 1998 | 15 | |
HU | 1999 | 24 | |
HU | 2000 | 18 | |
HU | 2001 | 28 | |
HU | 2002 | 21 | |
HU | 2003 | 32 | |
HU | 2004 | 44 | |
HU | 2005 | 26 | |
HU | 2006 | 18 | |
HU | 2007 | 11 | |
HU | 2008 | 17 | |
HU | 2009 | 10 | |
HU | 2010 | 16 | |
HU | 2011 | 18 | |
HU | 2012 | 8 | |
HU | 2013 | 3 | |
HU | 2014 | 5 | |
HU | 2015 | 7 | |
IMGD | 1990 | 0 | |
IMGD | 1991 | 0 | |
IMGD | 1992 | 0 | |
IMGD | 1993 | 0 | |
IMGD | 1994 | 0 | |
IMGD | 1995 | 0 | |
IMGD | 1996 | 0 | |
IMGD | 1997 | 0 | |
IMGD | 1998 | 0 | |
IMGD | 1999 | 0 | |
IMGD | 2000 | 0 | |
IMGD | 2001 | 0 | |
IMGD | 2002 | 0 | |
IMGD | 2003 | 0 | |
IMGD | 2004 | 0 | |
IMGD | 2005 | 0 | |
IMGD | 2006 | 5 | |
IMGD | 2007 | 30 | |
IMGD | 2008 | 52 | |
IMGD | 2009 | 81 | |
IMGD | 2010 | 91 | |
IMGD | 2011 | 68 | |
IMGD | 2012 | 76 | |
IMGD | 2013 | 66 | |
IMGD | 2014 | 76 | |
IMGD | 2015 | 90 | |
MA | 1990 | 5 | |
MA | 1991 | 6 | |
MA | 1992 | 6 | |
MA | 1993 | 13 | |
MA | 1994 | 59 | |
MA | 1995 | 48 | |
MA | 1996 | 38 | |
MA | 1997 | 42 | |
MA | 1998 | 38 | |
MA | 1999 | 32 | |
MA | 2000 | 25 | |
MA | 2001 | 22 | |
MA | 2002 | 36 | |
MA | 2003 | 41 | |
MA | 2004 | 46 | |
MA | 2005 | 43 | |
MA | 2006 | 38 | |
MA | 2007 | 48 | |
MA | 2008 | 63 | |
MA | 2009 | 53 | |
MA | 2010 | 74 | |
MA | 2011 | 77 | |
MA | 2012 | 88 | |
MA | 2013 | 95 | |
MA | 2014 | 93 | |
MA | 2015 | 79 | |
PH | 1990 | 2 | |
PH | 1991 | 2 | |
PH | 1992 | 2 | |
PH | 1993 | 10 | |
PH | 1994 | 43 | |
PH | 1995 | 30 | |
PH | 1996 | 28 | |
PH | 1997 | 38 | |
PH | 1998 | 48 | |
PH | 1999 | 24 | |
PH | 2000 | 24 | |
PH | 2001 | 28 | |
PH | 2002 | 21 | |
PH | 2003 | 32 | |
PH | 2004 | 20 | |
PH | 2005 | 30 | |
PH | 2006 | 31 | |
PH | 2007 | 35 | |
PH | 2008 | 48 | |
PH | 2009 | 36 | |
PH | 2010 | 28 | |
PH | 2011 | 43 | |
PH | 2012 | 34 | |
PH | 2013 | 32 | |
PH | 2014 | 34 | |
PH | 2015 | 30 | |
SSPS | 1990 | 0 | |
SSPS | 1991 | 0 | |
SSPS | 1992 | 0 | |
SSPS | 1993 | 0 | |
SSPS | 1994 | 0 | |
SSPS | 1995 | 0 | |
SSPS | 1996 | 3 | |
SSPS | 1997 | 2 | |
SSPS | 1998 | 9 | |
SSPS | 1999 | 4 | |
SSPS | 2000 | 7 | |
SSPS | 2001 | 11 | |
SSPS | 2002 | 17 | |
SSPS | 2003 | 6 | |
SSPS | 2004 | 7 | |
SSPS | 2005 | 5 | |
SSPS | 2006 | 12 | |
SSPS | 2007 | 15 | |
SSPS | 2008 | 13 | |
SSPS | 2009 | 18 | |
SSPS | 2010 | 21 | |
SSPS | 2011 | 12 | |
SSPS | 2012 | 32 | |
SSPS | 2013 | 19 | |
SSPS | 2014 | 20 | |
SSPS | 2015 | 16 | |
RBE | 1990 | 0 | |
RBE | 1991 | 0 | |
RBE | 1992 | 0 | |
RBE | 1993 | 0 | |
RBE | 1994 | 0 | |
RBE | 1995 | 0 | |
RBE | 1996 | 0 | |
RBE | 1997 | 0 | |
RBE | 1998 | 0 | |
RBE | 1999 | 0 | |
RBE | 2000 | 0 | |
RBE | 2001 | 0 | |
RBE | 2002 | 0 | |
RBE | 2003 | 0 | |
RBE | 2004 | 0 | |
RBE | 2005 | 0 | |
RBE | 2006 | 0 | |
RBE | 2007 | 0 | |
RBE | 2008 | 15 | |
RBE | 2009 | 27 | |
RBE | 2010 | 67 | |
RBE | 2011 | 107 | |
RBE | 2012 | 99 | |
RBE | 2013 | 118 | |
RBE | 2014 | 127 | |
RBE | 2015 | 130 | |
AE | 1990 | 0 | |
AE | 1991 | 0 | |
AE | 1992 | 0 | |
AE | 1993 | 0 | |
AE | 1994 | 0 | |
AE | 1995 | 0 | |
AE | 1996 | 0 | |
AE | 1997 | 0 | |
AE | 1998 | 0 | |
AE | 1999 | 0 | |
AE | 2000 | 0 | |
AE | 2001 | 0 | |
AE | 2002 | 0 | |
AE | 2003 | 0 | |
AE | 2004 | 5 | |
AE | 2005 | 23 | |
AE | 2006 | 45 | |
AE | 2007 | 31 | |
AE | 2008 | 40 | |
AE | 2009 | 45 | |
AE | 2010 | 69 | |
AE | 2011 | 79 | |
AE | 2012 | 104 | |
AE | 2013 | 92 | |
AE | 2014 | 92 | |
AE | 2015 | 92 | |
AREN | 1990 | 0 | |
AREN | 1991 | 0 | |
AREN | 1992 | 0 | |
AREN | 1993 | 0 | |
AREN | 1994 | 0 | |
AREN | 1995 | 0 | |
AREN | 1996 | 0 | |
AREN | 1997 | 0 | |
AREN | 1998 | 0 | |
AREN | 1999 | 0 | |
AREN | 2000 | 0 | |
AREN | 2001 | 0 | |
AREN | 2002 | 0 | |
AREN | 2003 | 0 | |
AREN | 2004 | 0 | |
AREN | 2005 | 0 | |
AREN | 2006 | 0 | |
AREN | 2007 | 0 | |
AREN | 2008 | 0 | |
AREN | 2009 | 0 | |
AREN | 2010 | 0 | |
AREN | 2011 | 0 | |
AREN | 2012 | 0 | |
AREN | 2013 | 6 | |
AREN | 2014 | 10 | |
AREN | 2015 | 17 | |
BME | 1990 | 0 | |
BME | 1991 | 0 | |
BME | 1992 | 0 | |
BME | 1993 | 0 | |
BME | 1994 | 0 | |
BME | 1995 | 0 | |
BME | 1996 | 2 | |
BME | 1997 | 10 | |
BME | 1998 | 37 | |
BME | 1999 | 66 | |
BME | 2000 | 66 | |
BME | 2001 | 56 | |
BME | 2002 | 52 | |
BME | 2003 | 56 | |
BME | 2004 | 78 | |
BME | 2005 | 87 | |
BME | 2006 | 93 | |
BME | 2007 | 104 | |
BME | 2008 | 93 | |
BME | 2009 | 104 | |
BME | 2010 | 118 | |
BME | 2011 | 145 | |
BME | 2012 | 188 | |
BME | 2013 | 208 | |
BME | 2014 | 246 | |
BME | 2015 | 209 | |
CE | 1990 | 26 | |
CE | 1991 | 18 | |
CE | 1992 | 9 | |
CE | 1993 | 38 | |
CE | 1994 | 220 | |
CE | 1995 | 227 | |
CE | 1996 | 189 | |
CE | 1997 | 231 | |
CE | 1998 | 165 | |
CE | 1999 | 132 | |
CE | 2000 | 119 | |
CE | 2001 | 86 | |
CE | 2002 | 101 | |
CE | 2003 | 95 | |
CE | 2004 | 105 | |
CE | 2005 | 126 | |
CE | 2006 | 150 | |
CE | 2007 | 147 | |
CE | 2008 | 161 | |
CE | 2009 | 112 | |
CE | 2010 | 138 | |
CE | 2011 | 130 | |
CE | 2012 | 144 | |
CE | 2013 | 137 | |
CE | 2014 | 112 | |
CE | 2015 | 107 | |
CM | 1990 | 10 | |
CM | 1991 | 6 | |
CM | 1992 | 3 | |
CM | 1993 | 20 | |
CM | 1994 | 109 | |
CM | 1995 | 101 | |
CM | 1996 | 118 | |
CM | 1997 | 151 | |
CM | 1998 | 156 | |
CM | 1999 | 134 | |
CM | 2000 | 103 | |
CM | 2001 | 71 | |
CM | 2002 | 56 | |
CM | 2003 | 50 | |
CM | 2004 | 59 | |
CM | 2005 | 65 | |
CM | 2006 | 77 | |
CM | 2007 | 69 | |
CM | 2008 | 89 | |
CM | 2009 | 102 | |
CM | 2010 | 116 | |
CM | 2011 | 140 | |
CM | 2012 | 163 | |
CM | 2013 | 155 | |
CM | 2014 | 197 | |
CM | 2015 | 216 | |
ECE | 1990 | 35 | |
ECE | 1991 | 23 | |
ECE | 1992 | 25 | |
ECE | 1993 | 77 | |
ECE | 1994 | 285 | |
ECE | 1995 | 226 | |
ECE | 1996 | 197 | |
ECE | 1997 | 268 | |
ECE | 1998 | 268 | |
ECE | 1999 | 297 | |
ECE | 2000 | 230 | |
ECE | 2001 | 291 | |
ECE | 2002 | 319 | |
ECE | 2003 | 323 | |
ECE | 2004 | 281 | |
ECE | 2005 | 261 | |
ECE | 2006 | 277 | |
ECE | 2007 | 215 | |
ECE | 2008 | 209 | |
ECE | 2009 | 189 | |
ECE | 2010 | 182 | |
ECE | 2011 | 198 | |
ECE | 2012 | 216 | |
ECE | 2013 | 214 | |
ECE | 2014 | 220 | |
ECE | 2015 | 221 | |
EV | 1990 | 0 | |
EV | 1991 | 0 | |
EV | 1992 | 1 | |
EV | 1993 | 2 | |
EV | 1994 | 9 | |
EV | 1995 | 9 | |
EV | 1996 | 2 | |
EV | 1997 | 3 | |
EV | 1998 | 2 | |
EV | 1999 | 0 | |
EV | 2000 | 0 | |
EV | 2001 | 0 | |
EV | 2002 | 1 | |
EV | 2003 | 0 | |
EV | 2004 | 0 | |
EV | 2005 | 0 | |
EV | 2006 | 0 | |
EV | 2007 | 2 | |
EV | 2008 | 10 | |
EV | 2009 | 14 | |
EV | 2010 | 12 | |
EV | 2011 | 14 | |
EV | 2012 | 38 | |
EV | 2013 | 41 | |
EV | 2014 | 29 | |
EV | 2015 | 23 | |
ME | 1990 | 45 | |
ME | 1991 | 61 | |
ME | 1992 | 27 | |
ME | 1993 | 49 | |
ME | 1994 | 418 | |
ME | 1995 | 327 | |
ME | 1996 | 255 | |
ME | 1997 | 381 | |
ME | 1998 | 393 | |
ME | 1999 | 409 | |
ME | 2000 | 344 | |
ME | 2001 | 295 | |
ME | 2002 | 313 | |
ME | 2003 | 290 | |
ME | 2004 | 311 | |
ME | 2005 | 386 | |
ME | 2006 | 375 | |
ME | 2007 | 351 | |
ME | 2008 | 348 | |
ME | 2009 | 337 | |
ME | 2010 | 334 | |
ME | 2011 | 316 | |
ME | 2012 | 372 | |
ME | 2013 | 392 | |
ME | 2014 | 391 | |
ME | 2015 | 391 | |
IE | 1990 | 0 | |
IE | 1991 | 0 | |
IE | 1992 | 0 | |
IE | 1993 | 0 | |
IE | 1994 | 0 | |
IE | 1995 | 0 | |
IE | 1996 | 11 | |
IE | 1997 | 25 | |
IE | 1998 | 38 | |
IE | 1999 | 30 | |
IE | 2000 | 40 | |
IE | 2001 | 22 | |
IE | 2002 | 22 | |
IE | 2003 | 22 | |
IE | 2004 | 20 | |
IE | 2005 | 25 | |
IE | 2006 | 34 | |
IE | 2007 | 29 | |
IE | 2008 | 38 | |
IE | 2009 | 35 | |
IE | 2010 | 36 | |
IE | 2011 | 29 | |
IE | 2012 | 25 | |
IE | 2013 | 41 | |
IE | 2014 | 42 | |
IE | 2015 | 40 | |
MG | 1990 | 10 | |
MG | 1991 | 19 | |
MG | 1992 | 7 | |
MG | 1993 | 18 | |
MG | 1994 | 89 | |
MG | 1995 | 58 | |
MG | 1996 | 28 | |
MG | 1997 | 43 | |
MG | 1998 | 68 | |
MG | 1999 | 106 | |
MG | 2000 | 109 | |
MG | 2001 | 110 | |
MG | 2002 | 116 | |
MG | 2003 | 107 | |
MG | 2004 | 117 | |
MG | 2005 | 87 | |
MG | 2006 | 105 | |
MG | 2007 | 75 | |
MG | 2008 | 76 | |
MG | 2009 | 85 | |
MG | 2010 | 89 | |
MG | 2011 | 100 | |
MG | 2012 | 115 | |
MG | 2013 | 107 | |
MG | 2014 | 103 | |
MG | 2015 | 84 | |
ID | 1990 | 0 | |
ID | 1991 | 0 | |
ID | 1992 | 1 | |
ID | 1993 | 0 | |
ID | 1994 | 3 | |
ID | 1995 | 1 | |
ID | 1996 | 3 | |
ID | 1997 | 4 | |
ID | 1998 | 2 | |
ID | 1999 | 0 | |
ID | 2000 | 0 | |
ID | 2001 | 4 | |
ID | 2002 | 1 | |
ID | 2003 | 0 | |
ID | 2004 | 1 | |
ID | 2005 | 6 | |
ID | 2006 | 2 | |
ID | 2007 | 2 | |
ID | 2008 | 1 | |
ID | 2009 | 5 | |
ID | 2010 | 2 | |
ID | 2011 | 0 | |
ID | 2012 | 4 | |
ID | 2013 | 3 | |
ID | 2014 | 2 | |
ID | 2015 | 2 |