Built with blockbuilder.org
forked from GitNoise's block: stack area
license: mit |
Built with blockbuilder.org
forked from GitNoise's block: stack area
<!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; } | |
path { | |
stroke: black; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
const width = 500; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", 500) | |
const toWideData = data => ( | |
d3.nest() | |
.key(d => d.Year ) // sort by key | |
.rollup(d => d.reduce((prev, curr) => { | |
prev.Year = curr.Year; | |
prev[curr.Sport] = curr.Percentage; | |
return prev; | |
}, {})) | |
.entries(data) | |
.map(d => d.value)); | |
d3.tsv('makeovermonday.csv', (data) => { | |
// convert to wide from long data | |
const wideData = toWideData(data); | |
// get keys | |
const keys = Object.keys(wideData[0]).slice(1); | |
// stack the data | |
const stackedData = | |
d3.stack().keys(keys).value((d, key) => d[key])(wideData); | |
// scales | |
const x = d3.scaleLinear() | |
.domain(d3.extent(data, d => +d.Year)) | |
.range([ 0, width ]); | |
const y = d3.scaleLinear() | |
.domain([0, 100]) | |
.range([ 500, 0 ]); | |
const color = d3.scaleOrdinal() | |
.domain([0, keys.length]) .range(['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f']); | |
// draw the result | |
svg | |
.selectAll("mylayers") | |
.data(stackedData) | |
.enter() | |
.append("path") | |
.style("fill", (d, i) => color(i)) | |
.attr("d", d3.area() | |
.x(d => {return x(+d.data.Year); }) | |
.y0(d => { return y(d[0]); }) | |
.y1(d => { return y(d[1]); }) | |
) | |
}) | |
</script> | |
</body> |
Sport Year Percentage | |
Volleyball 2004 0 | |
Volleyball 2005 1 | |
Volleyball 2006 0 | |
Volleyball 2007 0 | |
Volleyball 2008 1 | |
Volleyball 2013 0 | |
Volleyball 2017 1 | |
Track and field 2004 0 | |
Track and field 2005 0 | |
Track and field 2006 0 | |
Track and field 2007 0 | |
Track and field 2008 0 | |
Track and field 2013 1 | |
Track and field 2017 0 | |
Fishing 2004 0 | |
Fishing 2005 1 | |
Fishing 2006 0 | |
Fishing 2007 0 | |
Fishing 2008 0 | |
Fishing 2013 1 | |
Fishing 2017 0 | |
Swimming 2004 0 | |
Swimming 2005 0 | |
Swimming 2006 0 | |
Swimming 2007 0 | |
Swimming 2008 0 | |
Swimming 2013 0 | |
Swimming 2017 0 | |
Bowling 2004 0 | |
Bowling 2005 0 | |
Bowling 2006 0 | |
Bowling 2007 0 | |
Bowling 2008 0 | |
Bowling 2013 0 | |
Bowling 2017 0 | |
Boxing 2004 1 | |
Boxing 2005 1 | |
Boxing 2006 2 | |
Boxing 2007 1 | |
Boxing 2008 2 | |
Boxing 2013 1 | |
Boxing 2017 1 | |
Gymnastics 2004 1 | |
Gymnastics 2005 0 | |
Gymnastics 2006 1 | |
Gymnastics 2007 1 | |
Gymnastics 2008 1 | |
Gymnastics 2013 0 | |
Gymnastics 2017 1 | |
Motocross 2004 1 | |
Motocross 2005 0 | |
Motocross 2006 0 | |
Motocross 2007 0 | |
Motocross 2008 0 | |
Motocross 2013 0 | |
Motocross 2017 1 | |
Rodeo 2004 1 | |
Rodeo 2005 1 | |
Rodeo 2006 0 | |
Rodeo 2007 0 | |
Rodeo 2008 0 | |
Rodeo 2013 0 | |
Rodeo 2017 0 | |
Wrestling 2004 1 | |
Wrestling 2005 1 | |
Wrestling 2006 0 | |
Wrestling 2007 1 | |
Wrestling 2008 0 | |
Wrestling 2013 0 | |
Wrestling 2017 0 | |
No opinion 2004 1 | |
No opinion 2005 0 | |
No opinion 2006 0 | |
No opinion 2007 1 | |
No opinion 2008 0 | |
No opinion 2013 0 | |
No opinion 2017 0 | |
Soccer 2004 2 | |
Soccer 2005 3 | |
Soccer 2006 2 | |
Soccer 2007 2 | |
Soccer 2008 3 | |
Soccer 2013 4 | |
Soccer 2017 7 | |
Tennis 2004 2 | |
Tennis 2005 3 | |
Tennis 2006 1 | |
Tennis 2007 1 | |
Tennis 2008 1 | |
Tennis 2013 3 | |
Tennis 2017 2 | |
Golf 2004 2 | |
Golf 2005 2 | |
Golf 2006 3 | |
Golf 2007 2 | |
Golf 2008 2 | |
Golf 2013 2 | |
Golf 2017 1 | |
Ice hockey 2004 3 | |
Ice hockey 2005 4 | |
Ice hockey 2006 2 | |
Ice hockey 2007 4 | |
Ice hockey 2008 4 | |
Ice hockey 2013 3 | |
Ice hockey 2017 4 | |
Ice/Figure skating 2004 4 | |
Ice/Figure skating 2005 3 | |
Ice/Figure skating 2006 3 | |
Ice/Figure skating 2007 2 | |
Ice/Figure skating 2008 1 | |
Ice/Figure skating 2013 1 | |
Ice/Figure skating 2017 1 | |
Other 2004 4 | |
Other 2005 4 | |
Other 2006 3 | |
Other 2007 3 | |
Other 2008 6 | |
Other 2013 4 | |
Other 2017 5 | |
Auto racing 2004 5 | |
Auto racing 2005 5 | |
Auto racing 2006 4 | |
Auto racing 2007 3 | |
Auto racing 2008 3 | |
Auto racing 2013 2 | |
Auto racing 2017 2 | |
Baseball 2004 10 | |
Baseball 2005 12 | |
Baseball 2006 11 | |
Baseball 2007 13 | |
Baseball 2008 10 | |
Baseball 2013 14 | |
Baseball 2017 9 | |
None 2004 12 | |
None 2005 13 | |
None 2006 12 | |
None 2007 12 | |
None 2008 14 | |
None 2013 11 | |
None 2017 15 | |
Basketball 2004 13 | |
Basketball 2005 12 | |
Basketball 2006 12 | |
Basketball 2007 11 | |
Basketball 2008 9 | |
Basketball 2013 12 | |
Basketball 2017 11 | |
Football 2004 37 | |
Football 2005 34 | |
Football 2006 43 | |
Football 2007 43 | |
Football 2008 41 | |
Football 2013 39 | |
Football 2017 37 |