Plotting topojson file with d3.js (NYC boroughs and census tracts)

StackOverflow https://stackoverflow.com/questions/14041388

Question

here is the first topojson question on so. I am having problems rendering a map (NYC boroughs) and can't figure out why. The code below is just a copy of this example with a different topojson file. I have uploaded the file here. Below are also the details about how I created the file. Right now, I am just getting chaotic lines. Probably, the reason is the topojson file but I don't know what's wrong.

ps: I was unable to tag this as topojson because the tag has not been used before

TopoJSON file

1) Download shapefile from here

(Under “Borough & Community Districts” the file “Boroughs” (left), ArcView Shapefile)

2) Simplify shapefile with QGis

3) Convert to TopoJSON with

ogr2ogr -f geoJSON nybb-geo.json nybb.shp
topojson -o nybb.json nybb-geo.json

HTML/JS Code

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

.boundary {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>

var width = 960,
    height = 500;

var path = d3.geo.path();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("/geo/nybb.json", function(error, topology) {
  svg.append("path")
      .datum(topojson.object(topology, topology.objects['nybb-geo'].geometries[0]))
      .attr("d", path)
      .attr("class", "boundary");
});

</script>
Était-ce utile?

La solution

As also suggested by user 10579's comment, I was able to solve the problem by re-projecting the shapefile to NAD83 (EPSG 4269). After creating the topojson file from the reprojected shapefile, d3.js shows the map with 

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

The second problem I encountered was related to the correct center, scale, and translate values. With the code above nyc will just be a small dot with a lot of white space. Finding the correct center, scale, and translate values can be a little tedious. In the end, I added the code below, which allows you to drag and drop the map around and scroll to change the scale parameter. The values are displayed after each change so that it's easy to put the map in the right location and just adopt the last parameters from the console output. 

  svg.call(d3.behavior.zoom()
          .translate(projection.translate())
          .scale(projection.scale())
          .on("zoom", redraw));

  function redraw() {
      if (d3.event) {
        projection
          .translate(d3.event.translate)
          .scale(d3.event.scale);
      }
      map.datum(topojson.object(topology, topology.objects.nyct2010))
        .attr("d", path)
        .attr("class", "boundary");
      console.log("Current scale:" + projection.scale())
      console.log("Current translate:" + projection.translate())
      console.log("Current rotate:" + projection.rotate())
  }
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top