stack area

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>

https://d3js.org/d3.v4.min.js