D3 Examples - Commuter Flow North Rt1 v2

xxxxxxxxxx
 
​
<!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>
    