Built with blockbuilder.org
forked from GitNoise's block: stack area
forked from GitNoise's block: stack area
xxxxxxxxxx
<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;}
#main {
width: 700px;
}
#wrapper {
width: 800px;
display: grid;
grid-template-columns: 50px auto;
}
path {
stroke: black;
fill-opacity: 0.6;
}
#container {
display: grid;
justify-items: center;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-column-gap: 10px;
grid-row-gap: 10px;
}
#scalesLeft {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-row-gap: 10px;
}
#scalesBottom {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
justify-items: center;
grid-column-gap: 10px;
}
</style>
</head>
<body>
<div id="main">
<div id="wrapper">
<div id="scalesLeft"></div>
<div id="container"></div>
<div></div>
<div id="scalesBottom"></div>
</div>
</div>
<script>
const width = 100;
const margin = 12;
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.scaleTime()
.domain(d3.extent(data, d => new Date(+d.Year, 1, 1)))
.range([margin, width-margin]);
const y = d3.scaleLinear()
.domain([0, 100])
.range([ width -margin, margin ]);
const color = d3.scaleOrdinal()
.domain([0, keys.length]) .range(['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f']);
const area = d3.area()
.curve(d3.curveLinear)
.x(d => x(d.Year))
.y0(y(0))
.y1(d => y(+d.Percentage))
keys.forEach((key,i) => {
const sportData = wideData.map(d => {
return {Year: new Date(+d.Year, 0, 1), Percentage: +d[key]};
})
var svg = d3.select("#container").append('div').append("svg")
.classed('sport', true)
.attr("width", width)
.attr("height", width);
// draw the result
svg
.append("path")
.style("fill", color(i))
.attr("d", area(sportData))
})
const conatinerWidth = d3.select("#container").node().getBoundingClientRect().width;
for(let i=0; i< Math.floor(conatinerWidth / (width + margin)) ; i++) {
const svg = d3.select('#scalesBottom')
.append('svg')
.attr("width", width)
.attr("height", 30)
.call(d3.axisBottom(x).tickValues([new Date(2004, 0, 1), new Date(2010, 0, 1),new Date(2017, 0, 1)]));
}
const conatinerHeight = d3.select("#container").node().getBoundingClientRect().height;
for(let i=0; i< Math.floor(conatinerHeight / width) ; i++) {
const svg = d3.select('#scalesLeft')
.append('svg')
.attr("width", 50)
.attr("height", width)
.append('g')
.attr('transform', 'translate(40)')
.call(d3.axisLeft(y).tickValues([0, 25, 50, 75,100]));
}
})
</script>
</body>
https://d3js.org/d3.v4.min.js