Area Chart - CNJ Commuter Data North

A stacked area chart 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. Similar to the stream graph, this is easier to interpret quanititatively.

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.

forked from curran's block: How Americans Spend Time

forked from sajudson's block: Global Carbon Emissions Streamgraph

forked from sajudson's block: Global Carbon Emissions Area Chart

<!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: 10pt;
      }
      .axis--minor .tick text {
        display: none;
      }
      .axis--major .tick line{
        stroke: #ddd;
        stroke-width: 1px;
      }
      .axis--minor .tick line{
        stroke: #eee;
      }
      .axis-label {
        fill: #585858;
        font-family: sans-serif;
        font-size: 14pt;
      }
      .axis .domain {
        display: none;
      }
    </style>
  </head>
  <body>
    <svg width="1160" 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: 80, right: 10 };

xScale
          .domain(sites)
         // .domain(d3.extent(data, xValue))
          .rangeRound([0, innerWidth]);
      
       
        yScale
          .domain([    //0, 5500])
            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]);
        console.log('xScale', xScale.domain());
        //check y domain and range
        console.log('yScale', 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; })

</script>
  </body>
</html>

https://d3js.org/d3.v4.min.js

https://unpkg.com/datalib@1.8.0/datalib.min.js

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