SF bus routes

_.md

[ Launch: prototype: d3.geo ] 5021179 by enjalot
[ Launch: Tributary inlet ] 4700486 by enjalot

config.json

{"description":"SF bus routes","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}},"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,"thumbnail":"http://i.imgur.com/gTSvSqh.png"}

inlet.js

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

var routes = tributary.routes;

var width = tributary.sw;
var height = tributary.sh;
var center = {
  x: width/2,
  y: height/2
}

var world = tributary.world110;
var countries = topojson.object(world, world.objects.land);

var lonlat = [-122, 37];

var projection = d3.geo.orthographic()
var projection = d3.geo.albers()
  .center(lonlat)  
  .scale(27482)//27482
  .rotate([33,0, 0])
  
  .translate([width/2 - 5500, height/2 - 10700])
  .clipAngle(90);

var xy = projection(lonlat);
console.log(xy, width/2 - 5500, height/2 - 10637 );

var graticule = d3.geo.graticule()

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

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

svg.append("path")
//.attr("transform", "translate(" + [xy[0] - center.x, xy[1] - center.y ] + ")")
.attr("d", path(countries))
.classed("land", true);

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

svg.selectAll("path.routes")
.data(routes.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "black")
.style("fill", "none")

routes.json

style.css

.land {
  fill: #6FC480;
  stroke: #000000;
}

circle {
  fill: #ffffff;
  stroke: #CC0A48;
  fill-opacity: 0.2
}

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

world110.json