All Foreign born population in Canada

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

See also:

Aggregated Foreign born population in Canada, which is scaled and aggregated.
150 years of immigration in Canada, which is scaled by percentage.

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: Foreign born population in Canada, selected regions

forked from curran's block: All Foreign born population in Canada

<!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>Foreign Born in Canada</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: 16pt;
      }
      .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="960" height="500"></svg>
    <script>
      
      function processChart3Data (chart3Data) {
        const keys = Object.keys(chart3Data[0]).filter(key => key !== 'Year');
        const data = chart3Data.map(d => {
          d.date = new Date(d.Year);
          keys.forEach(key => {
            d[key] = +d[key].replace(/,/g, '');
          });
          return d;
        });
        return { data, keys };
      }
      
      function processChart4Data (chart4Data) {
        const nameColumn = 'Area of interest';
        const years = Object.keys(chart4Data[0]).filter(key => key !== nameColumn);
        const keys = chart4Data.map(d => d[nameColumn]);
        const data = years.map(year => {
          const row = {
            date: new Date(year),
            Year: year
          };
          chart4Data.forEach(d => {
            row[d[nameColumn]] = +d[year].replace(/,/g, '');
          });
          return row;
        });
        return { data, keys };
      }
      
      d3.queue()
        .defer(d3.csv, 'chart3Data.csv')
        .defer(d3.csv, 'chart4Data.csv')
        .await(function(error, chart3Data, chart4Data) {
          const chart3 = processChart3Data(chart3Data);
          const chart4 = processChart4Data(chart4Data);
          
          const chart4DataByYear = {};
          chart4.data.forEach(d => chart4DataByYear[d.Year] = d);
          const keys = chart3.keys.concat(chart4.keys);
          const data = chart3Data.map(d => {
            const chart4d = chart4DataByYear[d.Year];
            chart4.keys.forEach(key => {
              d[key] = chart4d ? chart4d[key] : 0;
            });
            return d;
          });
          render(data, keys);
        });

var margin = { top: 0, bottom: 25, left: 0, right: 20 };

xScale
          .domain(d3.extent(data, xValue))
          .range([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; })

var labels = marksG.selectAll('text').data(stacked)
        labels
          .enter().append('text')
            .attr('class', 'area-label')
          .merge(labels)
            .text(function (d) { return d.key; })
            .attr('transform', d3.areaLabel(area).interpolateResolution(1000));
        
        xAxisMajor.tickSize(-innerHeight);
        xAxisMinor.tickSize(-innerHeight);
        
        xAxisG.attr('transform', `translate(0,${innerHeight})`);
        xAxisMajorG.call(xAxisMajor);
        xAxisMinorG.call(xAxisMinor);
      }
    </script>
  </body>
</html>

https://unpkg.com/d3@4.10.0

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