Streamgraph- CNJ Commuters north

A stacked area chart visualization of 150 years of immigration in Canada, Chart 4.

Uses d3-area-label to position labels.

Inspired by The Economist: Where do Canada’s immigrants come from?

forked from curran's block: How Americans Spend Time

forked from curran's block: 150 years of immigration in Canada

forked from curran's block: [unlisted] Foreign born population in Canada, selected regions

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://unpkg.com/d3@4.10.0"></script>
    <script src="https://unpkg.com/d3-area-label@1.2.0"></script>
    <title>Rte 1 Commuters North</title>
    <style>
      body {
        margin: 0px;
      }
      .area-label {
        font-family: sans-serif;
        fill-opacity: 0.7;
        fill: white;
      }
      path:hover {
        fill-opacity: 1;
        fill:black;
      }
      path {
        fill-opacity: 0.8;
        stroke-width: 0.5;
      }
      text {
        pointer-events: none;
      }
      .axis--major .tick text, .legend text, .tooltip text {
        fill: #585858;
        font-family: sans-serif;
        font-size: 10pt;
      }
      .axis--minor .tick text {
        display: none;
      }
      .axis--major .tick line{
        stroke: #ddd;
        stroke-width: 2px;
      }
      .axis--minor .tick line{
        stroke: #eee;
      }
      .axis .domain {
        display: none;
      }
    </style>
  </head>
  <body>
    <svg width="1060" height="600"></svg>
    <script>
      const yLabel = "Rte 1 Commuters North"
      const nameColumn = 'origin';
      
      d3.csv('datanorth2_fullset.csv', function (rawData) {
        
        const sites = Object.keys(rawData[0])
          .filter(key => key !== nameColumn);
        const keys = rawData
          .map(d => d[nameColumn]);
        
        const data = sites.map(site => {
          const row = { site: site };
          rawData.forEach(d => {
            row[d[nameColumn]] = +d[site];
          });
          return row;
        });
        console.log(keys);
        console.log(sites);
        console.log('data', data);
        render(data, keys, sites);
      });

var margin = { top: 20, bottom: 110, left: 70, right: 20 };

xScale
          .domain(sites)
          .rangeRound([0, innerWidth]);

yScale
          .domain([
            d3.min(stacked, function (series) {
              return d3.min(series, function (d) { return d[0]; });
            }),
            d3.max(stacked, function (series) {
              return d3.max(series, function (d) { return d[1]; });
            })
          ])
          .range([innerHeight, 0]);
        
        colorScale.domain(d3.range(keys.length));
        
        var paths = marksG.selectAll('path').data(stacked);
        var pathsEnter = paths
          .enter().append('path');
        pathsEnter.merge(paths)
            .attr('fill', function (d) { return colorScale(d.index); })
            .attr('stroke', function (d) { return colorScale(d.index); })
            .attr('d', area);
        
        paths.select('title')
          .merge(pathsEnter.append('title'))
            .text(function (d) { return d.key; })

https://unpkg.com/d3@4.10.0

https://unpkg.com/d3-area-label@1.2.0