SF bus stops shelters in blue

_.md

[ Launch: SF bus stops ] 5022195 by sasconsul
[ Launch: SF bus stops ] 5021988 by lewis500
[ Launch: SF bus stops ] 5021985 by lewis500
[ Launch: SF bus stops ] 5021875 by enjalot
[ Launch: SF bus routes ] 5021432 by enjalot
[ Launch: prototype: d3.geo ] 5021179 by enjalot
[ Launch: Tributary inlet ] 4700486 by enjalot

config.json

{"description":"SF bus stops shelters in blue","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},"world110.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"routes.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"stops.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

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

var routes = tributary.routes;
var stops = tributary.stops;

console.log(stops);

var width = tributary.sw;
var height = tributary.sh;
var center = {
  x: width/2,
  y: height/2
}
var colorScale = d3.scale.category20();

var lonlat = [-122.4376, 37.77];

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

var xy = projection(lonlat);

var graticule = d3.geo.graticule()

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



svg.append("circle")
.attr({
  cx: xy[0],
  cy: xy[1],
  r: 126
})

svg.selectAll("path.routes")
.data(routes.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", function(d,i) { return colorScale(i)})
.style("fill", "none")
.style("stroke-width", 1)


svg.selectAll("circle.stop")
  .data(stops.features)
  .enter()
  .append("circle")
  .classed("stop", true)
  .attr({
    r: 2.5,
    cx: function(d,i) { return projection(d.geometry.coordinates)[0] },
    cy: function(d,i) { return projection(d.geometry.coordinates)[1] }
  })
  .style("fill", function(d,i) {
  if (d.properties.SHELTER) {return '#6600FF' } else {return '#FFFFFF'}})

routes.json

stops.json

style.css