Bay Area + pems locations

_.md

[ Launch: Bay Area ] 6894869 by enjalot

bayarea.json

config.json

{"description":"Bay Area + pems locations","endpoint":"","display":"svg","public":true,"require":[{"name":"topojson","url":"http://d3js.org/topojson.v0.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"bayarea.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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},"bart.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"pemslocs.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,"inline-console":false,"thumbnail":"http://i.imgur.com/h6LVzxr.png"}

inlet.js

var svg = d3.select("svg");
var bayarea = tributary.bayarea;
var water = topojson.object(bayarea, bayarea.objects.bayareaGEO);
var width = tributary.sw;
var height = tributary.sh;
var center = {
  x: width/2,
  y: height/2
}


var pems = tributary.pemslocs;

var lonlat = [-122.4, 37.77];

var projection = d3.geo.mercator()
  .center(lonlat)  
  .scale(55743)
  .translate([width/2, height/2])

var path = d3.geo.path()
  .projection(projection);



var g = svg.append("g")

var zoom = d3.behavior.zoom()
    .translate(projection.translate())
    .scale(projection.scale())
    .on("zoom", zoomed);
function zoomed() {
  projection.translate(d3.event.translate).scale(d3.event.scale);
  g.selectAll(".water").attr("d", path(water));
  g.selectAll("circle.pems").attr({
    cx: function(d,i) {
      return projection([d.lon, d.lat])[0]
    },
    cy: function(d,i) {
      return projection([d.lon, d.lat])[1]
    }
  })
}
g.call(zoom);

g.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height);
g.append("path")
.attr("d", path(water))
.classed("water", true);



d3.select('#layer1').call(zoom);


var circles = g.selectAll("circle.pems")
.data(pems)
circles
.enter()
.append("circle").classed("pems", true)

circles.attr({
  cx: function(d,i) {
    return projection([d.lon, d.lat])[0]
  },
  cy: function(d,i) {
    return projection([d.lon, d.lat])[1]
  },
  r: 9,
  fill: "#fff",
  "fill-opacity": 0.2,
  stroke: "#fff",
  title: function(d,i) { return d.id }
})
$('circle.pems').tipsy({fade: true, gravity: 's', opacity: 0.86});;

pemslocs.csv

style.css

.water {
  fill: #6AF5F5;
  stroke: #000000;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-opacity: .5;
  stroke-width: 2px;
}

.background{
  fill: #353535;


}