D3 Examples - NYC subway map

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
#boroughs {
  stroke: none;
    stroke-width: 0px;
    fill: #ddd;
    opacity:.9;
    position:absolute;
    top:0;
    left:0;
}
​
#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>
​
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>
​
<body>
​
<script>
​
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>
    