CODEWITHSUNDEEP
d3.jstopojson
Union find
Union find

Reputation: 8150

issue with d3 projection albers producing checkered map

I am converting the map file in Bostock's US Atlas (the unfiltered-us-states shp file) to topojson. And I end up with this map. Does anyone know why?

enter image description here

My projection code: var svg = d3.select("#interactive").insert("svg") .attr("width", w) .attr("height", h);

var projection = d3.geo.albers().scale([600]);

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

d3.json("us-states.json", function(error, us) {
  if (error) return console.error(error);

  svg.append("path")
      .datum(topojson.mesh(us))
      .attr("d", path);
});

Original files I've tried (doing the same thing): 12, Converted files: 12,

Upvotes: 0

Views: 228

Answers (1)

Union find
Union find

Reputation: 8150

So it turns out this is what it is supposed to do!

There are two fixes.

To show borders, we can keep the current code, but we need to set the fill to none, and just stylize the borders themselves. Something like this works:

.states_borders{
stroke: #00001d;
  stroke-width: .5px;
  fill: white;
   /* stroke-dasharray: 1,1;  */
  stroke-linejoin: round;
  stroke-linecap: round;
}

To show the states themselves properly, we need to use topojson.feature to construct our data object.

Upvotes: 2

Related Questions