Skip to content

Instantly share code, notes, and snippets.

@amiri
Created December 31, 2013 20:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amiri/8202126 to your computer and use it in GitHub Desktop.
Save amiri/8202126 to your computer and use it in GitHub Desktop.
d3 code to render railroad json
var width = 1000,
height = 2000;
var projection = d3.geo.mercator().scale(400).translate([width / 2, height / 2]);
var path = d3.geo.path().projection(projection);
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height).call(d3.behavior.zoom().translate(projection.translate()).scale(projection.scale()).on("zoom", redraw));
var axes = svg.append("g").attr("id", "axes"),
xAxis = axes.append("line").attr("y2", height),
yAxis = axes.append("line").attr("x2", width);
function redraw() {
if (d3.event) {
projection.translate(d3.event.translate).scale(d3.event.scale);
}
svg.selectAll("path").attr("d", path);
var t = projection.translate();
xAxis.attr("x1", t[0]).attr("x2", t[0]);
yAxis.attr("y1", t[1]).attr("y2", t[1]);
}
d3.json("na-rail-lines.json", function(error, links) {
svg.selectAll("path").data(links.features).enter().append("path").attr("class", function(d) {
return "rail-line";
}).attr("d", path);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment