D3 Examples - Area Chart - CNJ Commuter Data North

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.

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: 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 };
​
      var svg = d3.select('svg');
      var width = +svg.attr('width');
      var height = +svg.attr('height');
      
      var innerWidth = width - margin.right - margin.left;
      var innerHeight = height - margin.top - margin.bottom;
      
      var g = svg.append('g')
          .attr('transform', `translate(${margin.left},${margin.top})`);
      var xAxisG = g.append('g')
          .attr('class', 'axis');
      var yAxisG = g.append('g')
          .attr('class', 'axis axis--major axis--y');
      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');
      
      
      var stack = d3.stack()
      
      //var xValue = keys;
      var xValue = function (d) { return d.site; };
      var xScale = d3.scaleBand()
         .paddingInner(0.99);
      var yScale = d3.scaleLinear();
      var colorScale = d3.scaleOrdinal().range(d3.schemeCategory10);
      
      var xAxisMajor = d3.axisBottom().scale(xScale);
      var xAxisMinor = d3.axisBottom().scale(xScale).ticks(30);
      var yAxis = d3.axisLeft().scale(yScale).ticks(10);
     
      var xAxis = d3.axisBottom(xScale);
      //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);
       console.log("area", area)
       
      // Render StackAreaGraph
       
   function render(data, keys, sites) {
        stack.keys(keys);
        var stacked = stack(data);
        console.log('stacked', stacked);
        
        var innerWidth = width - margin.right - margin.left;
        var innerHeight = height - margin.top - margin.bottom;
​
        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; })
​
        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(2); 
        //xAxisMinor.tickSize(0);
        yAxis.tickSize(-innerWidth); 
        
        xAxisG.attr('transform', `translate(0,${innerHeight})`);
        xAxisMajorG.call(xAxisMajor);
        xAxisMinorG.call(xAxisMinor);
        xAxisMajorG
         // .call(xAxis)
          .selectAll("text")    
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", function(d) {
                return "rotate(-65)" 
                });
        
        yAxisG.call(yAxis)
        yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -60)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);
       
   } 
​
    
    
​
      
      
    </script>
  </body>
</html>
​
    