area small multiples

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;}
    
    #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>

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