traffic control

_.md

[ Launch: traffic control ] 6914083 by enjalot
[ Launch: traffic control ] 6913897 by enjalot
[ Launch: SF side 80 traffic ] 6895540 by enjalot
[ Launch: treasure island traffic ] 6895166 by enjalot

config.json

{"description":"traffic control","endpoint":"","display":"svg","public":true,"require":[{"name":"d3.tip","url":"http://labratrevenge.com/d3-tip/javascripts/d3.tip.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"pems402827.csv":{"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},"pems402814.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"pems400683.csv":{"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,"thumbnail":"http://i.imgur.com/JnwrFZ9.png"}

inlet.js

//map of pems http://tributary.io/inlet/6894869
//var data = tributary.pems402827; //treasure island
//tooltips with d3.tip https://github.com/Caged/d3-tip
var sfexit = tributary.pems402814;  // exit into sf
var hwy92 = tributary.pems400683;

//20% is capacity (threshold for occupancy)

var svg = d3.select("svg");

var strikeStart = +new Date("07/02/2013")
var strikeEnd = +new Date("07/06/2013")


var tip = d3.tip().attr("class", "d3-tip").html(function(d) { return format(new Date(d.time)) + " flow " + d.flow })
svg.call(tip)

var cw = 400;
var ch = 30;
var band = 24; //hours
var startTime = +new Date("07/02/2013")
var endTime = +new Date("07/06/2013")

var controlScale = d3.scale.linear()
.domain([startTime, endTime])
.range([0, cw])


sfexit.forEach(function(d) { 
  //convert csv fields to numbers
  d.time = new Date(+d.time);
  d.flow = +d.flow;
})
hwy92.forEach(function(d) { 
  //convert csv fields to numbers
  d.time = new Date(+d.time);
  d.flow = +d.flow;
})

function filter(start, end) {
  return function(d) {
    return d.time < new Date(end) && d.time > new Date(start)
  }
}

var exitg = svg.append("g").attr("transform", "translate(" + [30, 140] + ")")
exitg.append("text").text("SF exit").attr({x: 200, y: 20})
exitg.append("rect").classed("bg", true).attr({width: 455, height: 240 })
var strike = plot().data(sfexit.filter(filter(strikeStart, strikeEnd)))
var strikeg = exitg.append("g")
.attr("transform", "translate(" + [20, 40] + ")")
strike(strikeg)

var afterstrike = plot().data(sfexit.filter(filter("07/9/13", "07/13/13")))
var afterstrikeg = exitg.append("g")
.attr("transform", "translate(" + [20, 140] + ")")
afterstrike(afterstrikeg)


var hwyg = svg.append("g").attr("transform", "translate(" + [30, 387] + ")")
hwyg.append("text").text("Highway 92").attr({x: 200, y: 20})
hwyg.append("rect").classed("bg", true).attr({width: 455, height: 240 })
var strike2 = plot().data(hwy92.filter(filter(strikeStart, strikeEnd)))
var strike2g = hwyg.append("g")
.attr("transform", "translate(" + [20, 40] + ")")
strike2(strike2g)

var afterstrike2 = plot().data(hwy92.filter(filter("07/9/13", "07/13/13")))
var afterstrike2g = hwyg.append("g")
.attr("transform", "translate(" + [20, 140] + ")")
afterstrike2(afterstrike2g)


var HOUR = 1000 * 60 * 60
var brush = d3.svg.brush()
.x(controlScale)
.on("brush", brusha)
.extent([startTime, +d3.time.hour.offset(new Date(startTime), band)])
function brusha() {
  var offset = brush.extent()[0] - startTime;
  var band = brush.extent()[1] - offset - startTime 
  offset /= HOUR
  band /= HOUR
  var sums = [
    strike.highlight(offset, band),
    afterstrike.highlight(offset, band),
    strike2.highlight(offset, band),
    afterstrike2.highlight(offset, band)
  ];
  var sumscale = d3.scale.linear()
  .domain([0, d3.max(sums)])
  .range([0,200]);
  
  var sumbars = svg.selectAll("rect.sums").data(sums)
  sumbars.enter()
  .append("rect").classed("sums", true)
  sumbars.attr({
    x: 507,
    y: function(d,i) { return 188 + i * 104 + (i > 1 ? 40 : 0) },
    width: function(d) { return sumscale(d) },
    height: 50
  })
  console.log("sums", sums)
}
brusha();


var bg = svg.append("g")
.classed("control", true)
.attr("transform", "translate(" + [50, 50] + ")")
brush(bg)
bg.selectAll("rect").attr("height", ch)
bg.selectAll("*").style("visibility", "visible")



function plot() {

  //var width = tributary.sw - cx - 50;
  var width = 400
  var height = 63
  var data;
  var xscale = d3.time.scale()
  var yscale = d3.scale.linear()
  var highlight;
  function chart(g) {
    
    var timeExtent = d3.extent(data, function(d) { return d.time })
    timeExtent[0] = d3.time.day.floor(timeExtent[0])
    console.log("time extent", timeExtent)
    xscale
    .domain(timeExtent)
    .range([0, width])
    
    var xbarScale = d3.scale.ordinal()
    .domain(d3.range(data.length))
    .rangeBands([0, width], 0.213909504)
    
    
    var maxFlow = d3.max(data, function(d) { return d.flow })
    yscale
    .domain([0, maxFlow])
    .range([0, height])
    
    var bars = g.selectAll("rect.hour")
    .data(data)
    
    bars.enter()
    .append("rect").classed("hour", true)
    
    bars.attr({
      x: function(d,i) { return xscale(d.time) },
      y: function(d) { return yscale(maxFlow) - yscale(d.flow) },
      width: xbarScale.rangeBand(),
      height: function(d) { return yscale(d.flow) }
    })
    
    format = d3.time.format("%B %d %H:%M")
    bars.on("mouseover", tip.show)
    bars.on("mouseout", tip.hide)
    
    var tickFormat = d3.time.format("%B %d")
    var xAxis = d3.svg.axis()
    .orient("bottom")
    .tickFormat(tickFormat)
    .tickValues(d3.time.day.range(timeExtent[0], d3.time.day.offset(timeExtent[1], 1)))
    .scale(xscale)
    
    var xg = g.append("g")
    .call(xAxis)
    .classed("x-axis", true)
    .attr("transform", "translate(" + [0, yscale(maxFlow)] + ")")
    .selectAll(".tick text")
    .attr("transform", "rotate(45)translate(17,-5)")
    
    highlight = g.append("rect").classed("highlight", true)
    .attr({height: height})
  }
  chart.data = function(_) {
    if(!arguments.length) return data;
    data = _;
    return chart;
  }
  chart.highlight = function(offset, band) {
    var start = d3.time.hour.offset(data[0].time, offset)
    var end = d3.time.hour.offset(data[0].time, offset + band);
    highlight.attr({
      x: xscale(start),
      width: xscale(end) - xscale(start)
    })
    var filtered = data.filter(filter(start, end));
    return d3.sum(filtered, function(d) { return d.flow })
  }
  return chart;
}

pems400683.csv

pems402814.csv

pems402827.csv

style.css

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  pointer-events: none;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

.hour {
  fill: #317FD3;
  fill-opacity: 0.5;
}
.bg {
  fill-opacity: 0.3;
  fill: #fff;
}
.sums {
    fill: #317FD3;
  fill-opacity: 0.7;
}


.x-axis path {
  fill: none;
  stroke: #000;
}
.x-axis .tick {
  font-size: 8px;
}
.x-axis .tick line {
  stroke: #000
}

/* CONTROL */
.control .background {
  fill: #C4C4C4;
}
.control .extent {
  fill: #FFF72C;
  fill-opacity: 0.5;
  stroke: #000;
  stroke-width: 1;
  stroke-opacity: 0.5;
}
.control .resize rect {
  fill: #000000;
  fill-opacity: 0.25
}

.highlight {
  pointer-events: none;
  fill: #FFF72C;
  fill-opacity: 0.2;
  stroke: #1B1D00;
  stroke-width: 1;
  stroke-opacity: 0.5;
}