D3 Examples - Historic BART Ridership Averages

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang ="en">
  <head>
    <meta charset="utf-8">
    <title>BART Destinations from Oakland and San Francisco Airports</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    <style type="text/css">
      body {
      }
      svg {
        background-color: white;
      }
      .axis path, line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
      }
      .axis text {
        font-family: sans-serif;
        font-size: 11pt;
      }
      .Weekdays {
        fill: steelblue;
      }
      .Saturdays {
        fill: orange;
      }
      .Sundays {
        fill: green;
      }
      p span {
        font-weight: bold;
        font-family: sans-serif;
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <h2>BART Ridership Averages 1973-2014</h2>
    <p><span style="color:steelblue">Weekday</span>, <span style="color:orange">Saturday</span>, and <span style="color:green">Sunday</span> Averages. Source: <a href="https://www.bart.gov/about/reports/averages">BART</a></p>
    <script type="text/javascript">
      w = 1200
      h = 600
      topPadding = 20
      bottomPadding = 50
      leftPadding = 80
      rightPadding = 0
​
      var numFormat = d3.format("0,f")
      var dateFormat = d3.time.format("%Y")
​
      var xScale = d3.time.scale()
        .range([ leftPadding, w - rightPadding ]);
​
      var yScale = d3.scale.linear()
        .range([ topPadding , h - bottomPadding ]);
              
      var xAxis = d3.svg.axis()
        .scale(xScale)
        .ticks(10)
        .orient("bottom");
      
      var yAxis = d3.svg.axis()
        .scale(yScale)
        .ticks(20)
        .orient("left");
​
      var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
        
      d3.csv("BART_Ridership_FY73_FY14.csv", function(data) {
​
        var dataset = [
          { day: "Weekdays",
            riders: data.map(function(d) {
              var obj = {};
              obj['year'] = d.Year;
              obj['averages'] = d.Weekday;
              return obj;
              })
          },
          { day: "Saturdays",
            riders: data.map(function(d) {
              var obj = {};
              obj['year'] = d.Year;
              obj['averages'] = d.Saturday;
              return obj;
            })
          },
          { day: "Sundays",
            riders: data.map(function(d) {
              var obj = {};
              obj['year'] = d.Year;
              obj['averages'] = d.Sunday;
              return obj;
            })
          }
        ]
​
        xScale.domain([ 
          d3.min(data, function(d) {
            return dateFormat.parse(d.Year);
          }), 
          d3.max(data, function(d) {
            return dateFormat.parse(d.Year);
          }) 
        ]);
                
        yScale.domain([d3.max(data, function(d) {
          return +d.Weekday;
        }), 0 ]);
        
        var area = d3.svg.area()
          .x(function(d) {
            return xScale(dateFormat.parse(d.year))
          })
          .y0(h - bottomPadding)
          .y1(function(d) {
            return yScale(+d.averages)
          });
        
        var groups = svg.selectAll("g")
          .data(dataset)
          .enter()
          .append("g")
          .attr("class", function(d) {
                  return d.day; 
                });
        
        groups.append("title")
          .text(function(d) {
            return "Average Ridership on " + d.day ;
          });
        
        groups.selectAll("path")
          .data(function(d) {
            return [ d.riders ];
          })
          .enter()
                    .append("path")
                    .attr("class", "area")
                    .attr("d", area)
                    .attr("stroke", "none");
​
        dataset.forEach(function(set) {
          var circles = svg.selectAll("circles")
            .data(set.riders)
            .enter()
            .append("circle");       
          circles.attr("cx", function(d) {
              return xScale(dateFormat.parse(d.year))
            })
            .attr("cy", function(d) {
              return yScale(+d.averages);
            })
            .attr("r", 5)
            .attr("class", function(d) {
              return set.day + " " + d.year;
            })
            .attr("display", function(d) {
              if (d.averages == 0)
                return "none";
            })
            .append("title")
            .text(function(d) {
              return "Average " + set.day + " Ridership in " + d.year + ": " + numFormat(+d.averages);
            })
          });  
        
        svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + (h - bottomPadding) + ")")
          .call(xAxis);
​
        svg.append("g")
          .attr("class", "y axis")
          .attr("transform", "translate(" + (leftPadding - 10) + ", 0)")
          .call(yAxis);
      });
    </script>
  </body>
</html>
    