D3 Examples - Global Carbon Emissions Streamgraph

Global Carbon Emissions Streamgraph

A StreamGraph visualization of global carbon emssions from 1751 to 2014, providing a breakdown by source (combustion of fossil fuels by type - gas, liquid, and solid, cement manufacturing, and gas flaring) from 1751 through 2014.

This data was compiled by the Carbon Dioxide Information Analysis Center

The original electronic file is Global CO2 Emissions from fossil fuel buring, cement manufacturing, and gas flaring/ This file was imported into excel and saved as a CSV file.

Note that CDIAC is shutting down on September 30, 2017. This data will be transferred to the LBNL ESS-DIVE web site after September, 30, 2017.

The link to the CDIAC website was found on gapminder, which contains other data sources that may be of interest if this data set is used for my visualization project.

Uses d3-area-label to position labels.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://unpkg.com/datalib@1.8.0/datalib.min.js"></script>
    <script src="https://unpkg.com/d3-area-label@1.2.0"></script>
    <title>Global Carbon Emissions Streamgraph</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>
      const row = d => {
        d.Year = new Date(+d.Year);
        d.Gas = +d.Gas;
        d.Liquids = +d.Liquids;
        d.Solids = +d.Solids;
        d.Cement = +d.Cement;
        d.Flaring = +d.Flaring;
        d.Total = +d.Total;
        d.Capita = 0;
        return d;
      };
      
      // Load and summarize the data.
      d3.csv('dataco2tall.csv', row, data => {
       
        render(data);
      });
​
      var margin = { top: 0, bottom: 30, left: 50, right: 10 };
​
      var svg = d3.select('svg');
      var width = +svg.attr('width');
      var height = +svg.attr('height');
      
      var g = svg.append('g')
          .attr('transform', `translate(${margin.left},${margin.top})`);
      var xAxisG = g.append('g')
          .attr('class', 'axis');
      var xAxisMinorG = xAxisG.append('g')
          .attr('class', 'axis axis--minor');
      var xAxisMajorG = xAxisG.append('g')
          .attr('class', 'axis axis--major');
      var marksG = g.append('g');
      
      const keys = ["Gas","Liquids","Solids","Cement","Flaring"];
      
      var stack = d3.stack()
        .keys(keys)
        .offset(d3.stackOffsetWiggle)
        .order(d3.stackOrderInsideOut);
​
      var xValue = function (d) { return d.Year; };
      var xScale = d3.scaleTime();
      var yScale = d3.scaleLinear();
      var colorScale = d3.scaleOrdinal()
        .range(d3.schemeCategory10);
      
​
​
      var xAxisMajor = d3.axisBottom().scale(xScale).tickFormat(d3.format('0'));
      var xAxisMinor = d3.axisBottom().scale(xScale).ticks(30);
      
      var area = d3.area()
        .x(d => xScale(xValue(d.data)))
        .y0(d => yScale(d[0]))
        .y1(d => yScale(d[1]))
        .curve(d3.curveBasis);
      
      // Render StreamGraph
      function render(data) {
        const stacked = stack(data)
        
        console.log(keys);
        console.log(stacked);
        
        var innerWidth = width - margin.right - margin.left;
        var innerHeight = height - margin.top - margin.bottom;
​
        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]);
​
        //check y domain and range
        console.log(yScale.domain())
        console.log(yScale.range())
​
        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));
        console.log(innerHeight)
        //TypeError: cannot read property TickSize of Null       
        xAxisMajor.tickSize(-innerHeight); 
        xAxisMinor.tickSize(-innerHeight);
        
        xAxisG.attr('transform', `translate(0,${innerHeight})`);
        xAxisMajorG.call(xAxisMajor);
        xAxisMinorG.call(xAxisMinor);
      }
    </script>
  </body>
</html>
​
    