Global CO2 Emissions 1751-2014

A StreamGraph visualization of Global CO2 Emissions from Fossil-Fuel Burning, Cement Manufacture, and Gas Flaring: 1751-2014 (Source: Source: Tom Boden, Bob Andres, Carbon Dioxide Information Analysis Center, Oak Ridge National Laboratory; Gregg Marland, Research Institute for Environment, Energy and Economics, Appalachian State University). Data from the Carbon Dioxide Information Analysis Center. Data preprocessing and conversion to CSV by Scott Judson via Data Table Summary - Global CO2 Emissions 1751-2014.

Uses d3-area-label to position labels.

forked from curran's block: How Americans Spend Time

<!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>CO2 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>
      
      var row = d => {
        d.Year = new Date(d.Year);
        d.Gas = +d.Gas;
        d.Liquids = +d.Liquids;
        d.Solids = +d.Solids;
        d['Cement Production'] = +d['Cement Production'];
        d['Gas Flaring'] = +d['Gas Flaring'];
        d.Total = +d.Total;
        d.Capita = +d.Capita;
        return d;
      };
      
      d3.csv('data.csv', row, function (data) {
        render(data, ["Gas","Liquids","Solids","Cement Production","Gas Flaring"]);
      });

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

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