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; }
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>
https://d3js.org/d3.v4.min.js