treasure island traffic

_.md

[ Launch: treasure island traffic ] 6895166 by enjalot

config.json

{"description":"treasure island traffic","endpoint":"","display":"svg","public":true,"require":[],"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}},"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/JYTRMw2.png"}

inlet.js

//map of pems http://tributary.io/inlet/6894869
//var data = tributary.pems402827; //treasure island
var data = tributary.pems402814;  // exit into sf

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

var cx = 50;
var cy = 100;
var width = tributary.sw - cx - 20;

var timeExtent = d3.extent(data, function(d) { return d.time })
console.log("time extent", timeExtent)
var xscale = d3.time.scale()
.domain(timeExtent)
.range([0, width])

var maxFlow = d3.max(data, function(d) { return d.flow })
var yscale = d3.scale.linear()
.domain([0, maxFlow])
.range([200, 0])
console.log("max flow",maxFlow)

var line = d3.svg.line()
.x(function(d) { return xscale(d.time);})
.y(function(d) { return yscale(d.flow) })

var svg = d3.select("svg");
svg.append("path")
.attr({
  d: line(data),
  transform: "translate(" + [cx, cy] +")"
})
.style({
  fill: "none",
  stroke: "#000"
})

var xAxis = d3.svg.axis()
.scale(xscale)

var xg = svg.append("g")
.call(xAxis)

pems402814.csv

pems402827.csv