issue with d3 projection albers producing checkered map

Question

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): 1 2, Converted files: 1 2,

Sun spots? Can't really tell without knowing what you're doing. — Lars Kotthoff
It looks as if the shp file (whatever that is) contains state border segments (e.g. the Texas-Oklahoma border, the Texas-New Mexico border), while topojson expects complete state borders (e.g. the boundary of Texas, all the way around). There may be other problems too. — Beta
@LarsKotthoff I've shown my code. I am just using a projection. I've tried other projection types and still get the same error.. — Union find
Can you clarify what you're trying to achieve? topojson.mesh(topology) returns a single path representing all the borders in that topology as multiple open-ended sub-paths. This is exactly what your map displays, except that your map has the default path styling of black fill and no stroke, which doesn't make sense for a path that only represents borders. If you just want to draw the borders, set .style({fill:"none", stroke:"black"}); on the path. If you want each state to be a separate filled path, you're going to need a different approach. — AmeliaBR
The method you're using only draws borders, it doesn't create shapes you can fill. If you want to fill them in use one of the other methods to create an array of separate shapes. — AmeliaBR

Union find Union find · Accepted Answer · 2014-07-21T03:54:15

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.

issue with d3 projection albers producing checkered map

1 Answers