NYC subway map

I used this block of Brooklyn boroughs as a base. I grabbed shapefiles of routes and stations from the Spatiality blog, and converted to topojson and CSV, respectively.

<!DOCTYPE html>
<meta charset="utf-8">

#routes{
	stroke: #888;
	stroke-width:1.5;
	fill:none;
	position:absolute;
	top:0;
	left:0;
	z-index:100;
}

#stations{
	position:absolute;
	top:0;
	left:0;
	z-index:150;
	fill:#333;
}
</style>

<body>

var width = Math.max(960, window.innerWidth),
    height = Math.max(500, window.innerHeight);

var container = d3.select("body").append("div")
		.attr("id", "container")
		.style("width", width + "px")
		.style("height", height + "px");

var projection = d3.geo.mercator()
		.center([-73.94, 40.70])
		.scale(80000)
		.translate([(width) / 2, (height)/2]);

var path = d3.geo.path()
		.projection(projection);
				
d3.json("nyc.json", function(error, nyb) {

var map = container.append("svg")
		.attr("id", "boroughs")
		.style("width", width + "px")
		.style("height", height + "px")
		.selectAll(".state")
		.data(nyb.features)
		.enter().append("path")
		.attr("class", function(d){ return d.properties.name; })
		.attr("d", path);	
});
	
d3.json("routes.json", function(error, routes) {	
						
var lines = container.append("svg")
		.attr("id", "routes")
 		.style("width", width + "px")
		.style("height", height + "px")
		.selectAll(".brgh")
		.data(topojson.object(routes, routes.objects.nyctsubwayroutes_100627).geometries)
		.enter().append("path")
		.attr("d", path);
		
});

d3.csv("stops.csv", function(error, stops) {	
						
var stations = container.append("svg")
		.attr("id", "stations")
 		.style("width", width + "px")
		.style("height", height + "px")
		.selectAll(".stop")
		.data(stops)
		.enter().append("circle")
		.attr("r", 2)
		.attr("cx", function(d) {return projection([d.STOP_LON,d.STOP_LAT])[0]})
		.attr("cy", function(d) {return projection([d.STOP_LON,d.STOP_LAT])[1]});
		
});

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v0.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v0.min.js