D3 - Large GeoJSON File does not show draw map properly using projections

Question

I am having an issue with drawing this GeoJSON file I picked up from data.seattle.gov. Specifically, I\'m using the Shape file which can be found here. I converted it to a G

Answer 1

I had a look at your problem. The problem seems to be with the map. I ran into the same problems as you have, although I had no issue creating a map from the older (pre 2008) files on the site you linked to. Mapshaper (mapshaper.org) had no problem plotting both graphs, so the problem seems to be with d3 and this specific map. I have no time to look into the reason for this.

Simplifying the map using mapshaper (which is something you might want to do anyway) seems to result in a map that can be correctly drawn:

ogr2ogr -f GeoJSON map_tmp.json spd_beats_wgs84.kmz
mapshaper -p 0.5 --repair -o map.json map_tmp.json

I can then draw the map using the following code:

var width = 800;
var height = 500;

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

d3.json("map.json", function(map) {
  var projection = d3.geo.mercator().scale(1).translate([0,0]).precision(0);
  var path = d3.geo.path().projection(projection);
  var bounds = path.bounds(map);

  var scale = .95 / Math.max((bounds[1][0] - bounds[0][0]) / width,
      (bounds[1][1] - bounds[0][1]) / height);
  var transl = [(width - scale * (bounds[1][0] + bounds[0][0])) / 2,
      (height - scale * (bounds[1][1] + bounds[0][1])) / 2];
  projection.scale(scale).translate(transl);

  vis.selectAll("path").data(map.features).enter().append("path")
    .attr("d", path)
    .style("fill", "none")
    .style("stroke", "black");
});

Resulting in: