Bay Area

_.md

[ Launch: Bay Area ] 6799876 by lewis500
[ Launch: Bay Area ] 6799480 by lewis500

bart.svg

bayarea.json

config.json

{"description":"Bay Area","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}},"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/K4M1Abs.png"}

inlet.js

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

var bart = d3.select('bart.svg');

var colorScale = d3.scale.category20();

var lonlat = [-122.4376, 37.77];

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

var xy = projection(lonlat);

var graticule = d3.geo.graticule()

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

var zoom = d3.behavior.zoom()
    .translate(projection.translate())
    .scale(projection.scale())
    //.scaleExtent([1, 2 * 49004])
    .on("zoom", zoomed);

var g = svg.append("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);

function zoomed() {
  projection.translate(d3.event.translate).scale(d3.event.scale);
  g.selectAll(".water").attr("d", path(water));
}

style.css

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

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

.background{
  fill: #353535;


}