BART 10/31/2012

_.md

[ Launch: BART entry exit by hour ] 9cbfb10ba5acdfa4ddd8 by enjalot
[ Launch: BART entry exit by hour ] a45405fbc8eca92c9593 by enjalot

config.json

{"description":"BART 10/31/2012","endpoint":"","display":"div","public":true,"require":[{"name":"derby-standalone","url":"https://derbyjs.github.io/derby-standalone/dist/0.6.0-alpha25/derby-standalone.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"templates.html":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/v1TSE6f.png","controls":{"function":"12th Street Oakland","station":"Civic Center"}}

inlet.js

d3.json("https://transit-data.s3.amazonaws.com/entriesexits.json", function(err, data) {
  
  // https://github.com/derbyjs/derby-standalone
  var app = derby.createApp();
  // convenience function for loading templates that are defined as <script type="text/template">
  app.registerViews();
  var page = app.createPage();
  d3.select("#display").node().appendChild(page.getFragment('main'));

  
  //console.log(data);
  
  //grab the stations dynamically
  var stations = Object.keys(data.entries);
  //setup the dropdown menu ui
  //var stationSelected = tributary.control({name: "station", options: stations});
 
  //grab the dates (should be every day in october 2012)
  dates = Object.keys(data.entries[stations[0]])

  
  var div = d3.select("#display");

  var dayDiv = div.append("div").classed("days", true);
  var days = dayDiv.selectAll("div.day")
    .data(dates)
  days.enter().append("div").classed("day", true)
  days.text(function(d) { return d.split('-')[2] })
  days.on("mouseover", function(d) {
    stations.forEach(function(station) {
      div.select(".date").text(d)
      renderHours(d, station);
    })
  })
  div.append("div").classed("date", true)

  
  stationDivs = div.selectAll("div.hours")
    .data(stations)
  .enter().append("div").classed("hours", true)
  stationDivs.append("div").classed("name", true).text(function(d) { return d })
  stationDivs
  .append("svg")
  .attr("class", function(d) { return scrubStation(d) })
  
  
  stations.forEach(function(station) {
    div.select(".date").text(dates[30])
    renderHours(dates[30], station);
  })
  //renderHours(dates[0])
  
  var model = app.model;
  window.MODEL = model;
  model.set("_page.stations", []);
  stations.forEach(function(station) {
    model.push("_page.stations", layout(dates[30], station))
  })
  function layout(day, station) {
  }

  function renderHours(day, station) {
    
    var svg = d3.select("svg." + scrubStation(station));
    entries = data.entries[station][day];
    exits = data.exits[station][day];
    //console.log("entries, exits", entries, exits);
    //console.log(day);

    
    max = d3.max([d3.max(entries), d3.max(exits)])
    //max = 12000
    
    var hourIndex = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 0, 1, 2]
    var xscale = d3.scale.ordinal()
    //.domain(d3.range(24))
    .domain(hourIndex)
    .rangeBands([0, 50], 0.0)

    var yscale = d3.scale.linear()
    .domain([0, max])
    .range([0, 40]);

    var enterColor =  "#84bfff";
    var enterrect = svg.selectAll("rect.enter")
      .data(entries)
    enterrect.enter().append("rect").classed("enter", true)
    enterrect
    .attr({
      x: function(d,i) { return xscale(i) },
      y: function(d,i) { return yscale.range()[1] - yscale(d) },
      width: xscale.rangeBand(),
      height: function(d,i) { return yscale(d) },
      fill: enterColor,
      stroke: enterColor
    });
    
    var exitColor = "#ff7751";
    var exitrect = svg.selectAll("rect.exit")
      .data(exits)
    exitrect.enter().append("rect").classed("exit", true)
    exitrect
    .attr({
      x: function(d,i) { return xscale(i) },
      y: function(d,i) { return yscale.range()[1] },
      width: xscale.rangeBand(),
      height: function(d,i) { return yscale(d) },
      fill: exitColor,
      stroke: exitColor
    });
    
    
  }
})

function scrubStation(station) {
  var re = new RegExp(' ', 'g')
  return "s" + station.replace(re, '')
  .replace('.', '', 'g')
  .replace('/', '', 'g')
}

style.css

#display {
  overflow: scroll;
}
.day {
  width: 35px;
  height: 35px;
  margin: 1px;
  padding: 5px;
  display: inline-block;
  border: 1px solid gray;
  cursor: pointer;
  background: white;
}

div.hours {
  width: 100px;
  height: 140px;
  display: inline-block;
  margin: 10px;
  border: 1px solid grey;
}
.hours svg {
  position: relative;
  left: 20px;
  top: 10px;
  width: 50px;
  height: 100px;
}
.hours .name {
  position: relative;
  left: 5px;
  font-size: 9px;
  height: 15px;
}

templates.html

<script type="text/template" id="main">
  <div class="example">
    <button type="button">Example</button>
  </div>
</script>

<script type="text/template" id="station">
  <div class="hours">
  
  <svg class="{{station.name}}">
    {{each station.enterHours as #hour}}
      <rect class="enter" 
        x="{{#hour.x}}" 
        y="{{#hour.y}}" 
        width="{{#hour.width}}" 
        height="{{#hour.height}}" 
        fill="{{#hour.fill}}" 
        stroke="{{#hour.stroke}}">
      </rect>
    {{/each}}
    {{each station.exitHours as #hour}}
      <rect class="exit" 
        x="{{#hour.x}}" 
        y="{{#hour.y}}" 
        width="{{#hour.width}}" 
        height="{{#hour.height}}" 
        fill="{{#hour.fill}}" 
        stroke="{{#hour.stroke}}">
      </rect>
    {{/each}}
  </svg>

  
  </div>
</script>