Old school D3 from simpler times

All examples By author By category About

luckymike

Full window Github gist

BART Ridership from SFO and OAK

<!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;
      }
    </style>
  </head>
  <body>
    <h2>January 2015 BART Destinations from Oakland and San Francisco Airports</h2>
    <p>Weekday ridership averages. Source: <a href="https://www.bart.gov/about/reports/ridership">BART</a></p>
    <script type="text/javascript">
      w = 1200
      h = 600
      topPadding = 20
      bottomPadding = 50
      leftPadding = 120
      rightPadding = 50

var xScale = d3.scale.linear()
        .range([ leftPadding, w - rightPadding ]);

var yScale = d3.scale.linear()
        .range([ topPadding , h - bottomPadding ]);

var stationCodes = d3.scale.ordinal()
        .domain( [ 'RM','EN','EP','NB','BK','AS','MA','19','12','LM','FV','CL','SL','BF','HY','SH','UC','FM','CN','PH','WC','LF','OR','RR','OW','EM','MT','PL','CC','16','24','GP','BP','DC','CM','CV','ED','NC','WP','SS','SB','SO','MB','WD','OA' ] )
        .range( [ 'Richmond', 'El Cerrito del Norte', 'El Cerrito Plaza', 'North Berkeley', 'Berkeley', 'Ashby', 'MacArthur', '19th Street', '12th Street', 'Lake Merritt', 'Fruitvale', 'Coliseum', 'San Leandro', 'Bay Fair', 'Hayward', 'South Hayward', 'Union City', 'Fremont', 'Concord', 'Pleasant Hill', 'Walnut Creek', 'Lafayette', 'Orinda', 'Rockridge', 'West Oakland', 'Embarcadero', 'Montgomery', 'Powell Street', 'Civic Center', '16th Street Mission', '24th Street Mission', 'Glen Park', 'Balboa Park', 'Daly City', 'Colma', 'Castro Valley', 'Dublin/Pleasanton', 'North Concord/Martinez', 'Pittsburg/Bay Point', 'South San Francisco', 'San Bruno', 'SFO', 'Milbrae', 'West Dublin/Pleasanton', 'Oakland Airport'])
      
      var colors = []
      
      d3.scale.category20().range().forEach(function(d) {
        colors.push(d)
      })
      d3.scale.category20b().range().forEach(function(d) {
        colors.push(d)
      })
      d3.scale.category20c().range().forEach(function(d) {
        colors.push(d)
      })
              
      var colorScale = d3.scale.ordinal().range(colors)
      
      var xAxis = d3.svg.axis()
        .scale(xScale)
        .ticks(7)
        .tickFormat(function(d) {
          return d + " OAK riders";
        })
        .orient("bottom");
      
      var yAxis = d3.svg.axis()
        .scale(yScale)
        .ticks(5)
        .tickFormat(function(d) {
          return d + " SFO riders";
        })
        .orient("left");

var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
        
      d3.csv("BART_Weekday_Ridership_January_2015.csv", function(data) {

data.sort(function(a,b) {
          return d3.ascending(+a.OA, +b.OA);
        }).sort(function(a,b) {
          return d3.ascending(+a.SO, +b.SO);
        });

xScale.domain([ 1, d3.max(data, function(d) {
          return +d.OA;
        }) ]);
        
        yScale.domain([d3.max(data, function(d) {
          return +d.SO;
        }), 1 ]);

var circles = svg.selectAll("circle")
          .data(data)
          .enter()
          .append("circle");
          
        circles.attr("cx", function(d) {
            return xScale(+d.OA)
          })
          .attr("cy", function(d) {
            return yScale(+d.SO);
          })
          .attr("r", 1)
          .attr("fill", function(d,i) {
            return colorScale(i);
          })
          .append("title")
          .text(function(d) {
            return stationCodes(d.Exitstations) + " – Oakland: " + d.OA + ", SFO: " + d.SO;
          });          
        
        circles.transition()
          .delay(function(d,i) {
            return i * 100;
          })
          .duration(500)
          .attr("r", 5)
        
        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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js