Commuter Flow North Rt1 v2

Stacked area chart of world population over time. Data from the United Nations Population Estimates. This is example 41 from the screencast Splitting Charts.

MIT License

forked from curran's block: Multi-Line Chart of Largest Countries

forked from curran's block: World Population Area Chart

forked from curran's block: Stacked Area Chart

forked from jrzief's block: Commuter Flow North Rt1

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        
    <style>
      
      body {
        margin: 0px;
      }

.axis text {
        font-family: 'Open Sans', sans-serif;
        font-size: 12pt;
      }
      
      .axis .label {
        font-size: 18pt;
      }

.axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }

.color-legend text {
        font-family: 'Open Sans', sans-serif;
        font-size: 9pt;
      }

</style>
  </head>
  <body>
    <script>
    
      var outerWidth = 1460;
      var outerHeight = 750;
      var margin = { left: 86, top: 50, right: 10, bottom: 140 };

var xColumn = "Intersect";
      var yColumn = "Commuters";
      var colorColumn = "OriginTown";
      var areaColumn = colorColumn;

var xAxisLabelText = "Rte1 Interchange";
      var xAxisLabelOffset = 48;

var yAxisLabelText = "Commuters";
      var yAxisLabelOffset = 60;

var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;
      
      var pts = ['Trenton','OldenAve','WhiteheadRd','Lawrence-295','Quakerbridge', 'MeadowRd','CarnegieCenter','AlexanderRD','WashingtonRd','HarrisonRd','Plainsboro-ScuddersMill','Plainsboro-CollegeRd','RaymondRD','RidgeRd','PromenadeBlvd','SBrunswick-AutumnDr','NewRd','SandHillRd','HendersonRd','FinnegansLane','AdamsLane','Nbrunswick-JerseyAve','LivingstonAve',' Rte130','RydersLane'];

var svg = d3.select("body").append("svg")
        .attr("width", outerWidth)
        .attr("height", outerHeight);
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")")
      var xAxisLabel = xAxisG.append("text")
        .style("text-anchor", "middle")
      
        .attr("transform", "translate(" + (innerWidth / 2) + "," + xAxisLabelOffset + ")")
        .attr("class", "label")
        .text(xAxisLabelText);

var yAxisG = g.append("g")
        .attr("class", "y axis");
      var yAxisLabel = yAxisG.append("text")
        .style("text-anchor", "middle")
        .attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)")
        .attr("class", "label")
        .text(yAxisLabelText);

var colorLegendG = g.append("g")
        .attr("class", "color-legend")
        .attr("transform", "translate(1100, 2)");

var xScale = d3.scalePoint()
             .domain(pts)
             .range([0, innerWidth]);

var yScale = d3.scaleLinear().range([innerHeight, 0]);
      var colorScale =  d3.scaleOrdinal(d3.schemeCategory20);;

// Use a modified SI formatter that uses "B" for Billion.
     // var siFormat = d3.format("s");
      //var customTickFormat = function (d){
      //  return siFormat(d).replace("G", "B");
      //};

var xAxis= d3.axisBottom(xScale);
       // .ticks(23)
      //  .outerTickSize(0);
      var yAxis = d3.axisLeft(yScale);
       // .ticks(13)
       // .tickFormat(customTickFormat)
       // .outerTickSize(0);
      
      //var xAxis = d3.axisBottom(xRange).tickFormat(function(d){ return d.x;});
//var yAxis = d3.axisLeft(yRange);
      
     
      var stack = d3.stack()
        //.offset(d3.stackOffsetExpand)
       // .order(d3.stackOrderInsideOut)
      ;

var area = d3.area()
        .x(function(d) { return xScale(d[xColumn]); })
        .y0(function(d) { return yScale(d.y0); })
        .y1(function(d) { return yScale(d.y0 + d.y); });

var colorLegend = d3.legendColor()
        .scale(colorScale)
        .shapePadding(3)
        .shapeWidth(15)
        .shapeHeight(11)
        .labelOffset(4)
        .ascending(false);

function render(data){
        
        var nested = d3.nest()
          .key(function (d){ return d[areaColumn]; })
          .entries(data);
        
        var layers = stack(nested);

// xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
        yScale.domain([
          0,
          d3.max(layers, function (layer){
            return d3.max(layer.values, function (d){
              return d.y0 + d.y;
            });
          })
        ]);
        
        xAxisG
          .call(xAxis)
          .selectAll("text")	
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", function(d) {
                return "rotate(-65)" 
                });
        
        yAxisG.call(yAxis);

colorScale.domain(nested.map(function (d){ return d.key; }));
        
       //  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);

var paths = g.selectAll(".chart-area").data(layers);
        var pathsEnter = paths
          .enter().append('path');
        //paths.enter().append("path").attr("class", "chart-line");
        //paths.exit().remove();
        pathsEnter.merge(paths)
          .attr("d", function (d){ return area(d.values); })
          .attr("fill", function (d){ return colorScale(d.key); });

colorLegendG.call(colorLegend);
      }

function type(d){
       // d.year = new Date(d.year);
        d.Commuters = +d.Commuters;
        return d;
      }

d3.csv("rt1northNI.csv", type, render);

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

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.js