Confusing paths when using D3 and topojson?

Question

A bit of forewarning: still a novice with D3.

Right now, I'm following along with Mike Bostock's Let's Make a Map guide, but instead of the UK, I'm using a map of the electoral districts in Alberta, Canada. After altering Bostock's code to load in my own TopoJSON with the Alberta data, here is what appears.

I've spent a lot of time trying to figure out whether I'm not spotting an error in my code, or if there's possibly some kind of error in the geodata, but I've been unable to narrow down exactly where the problem might lie. Based on some other questions on here, my suspicion is that it might have something to do with the projection, perhaps something having to do with the difference in the way Bostock is representing the UK versus what I need to do to represent Alberta properly, but I really am at a loss when it comes to that.

One thing to note is that an error pops up in the JS console: Error: Invalid value for <path> attribute which is what makes me question if there's something amiss in the TopoJSON data, however when I pull that same data into Mapshaper, the map shows up without error.

Thus, I'm kind of stuck and unsure of how to proceed. Any kind of help/direction is appreciated, thanks!

Answer 1

There's something wrong with your geo data. It looks like it's already projected? I loaded it into QGIS and whilst the data looks OK, it seems to already have a projection applied. I found some Alberta electoral district data at http://www.electionsalberta.ab.ca/Public%20Website/112.htm and when I load in the shapefile from there, the two don't overlap. Not sure what happened, but whatever processing was done before you displayed it has caused some issues. Also, try styling your path with fill: none and stroke: black to make it look tidier

Update:

In the zip provided by Elections Alberta, there is a .prj file that contains the projection, which as you suspected is NAD83, Alberta Transverse Mercator. Mapshaper, and others were showing you this projected file and then producing a topojson of the projected file.

To create an "unprojected" file, I loaded the provided zip into QGIS as a vector layer and then saved it as a new layer, but changed the Co-ordinate Reference System (CRS, the projection in other words) in the process, to WGS 84.

I then used topojson to convert that saved result to a topojson file.

I have created a gist/block for you to take a look at using your code and my updated file. You can check it out at http://bl.ocks.org/benlyall/4f2e4ed1e8f4bdb8457c

All I've really done is save the file with a different Co-ordinate Reference System from QGIS and then loaded it into your existing page. Hope this helps somewhat.

To answer a couple of questions from your comments:

1. The file was already projected by Elections Alberta, but it can potentially be projected at any point in the process. You can convert between projections at any point, and in fact you do when you apply the projection in your javascript. The projection just converts co-ordinates from one system into co-ordinates from another system. In your case, we're going from NAD83/Alberta Transverse Mercator to WGS 84 back to a Mercator projection. For more info on the NAD83/Alberta TM check out http://georepository.com/crs_3403/NAD83-CSRS-Alberta-10-TM-Resource.html

2. Mapshaper and topojson were reading in your shapefile and displaying that for you. It probably looked ok for you, as that is what that region looks like when you see it on a map. What isn't immediately clear from that, is that the source data was projected. I determined that there was a mismatch by loading your topojson data into QGIS with a WGS 84 projection (since that's typically what we start with) and then loaded in the Elections Alberta data (which includes the .prj file) and saw that there was no overlap. That's a bit of a giveaway that one of them was projected differently to the other. Since you were the one asking on Stack Overflow, I thought the Elections Alberta data was probably the correct one. That's when I started looking inside your topojson file and saw that the co-ordinates in there were huge, ie. outside of -/+180,-/+90, which means that it was probably projected before being created.

   d3 can load already projected topojson data, by passing in a null projection as per http://bl.ocks.org/mbostock/5557726, but in this case it expects the co-ordinates in your topojson file to be pixels, and if you look at your topojson file, they are way too large to be considered pixel values, so they wouldn't work like that.

3. I just did a

   ogr2ogr -t_srs crs:84 alberta_wgs84 EDs_Act2010_FINAL.shp
   

   and I then converted that using topojson and it loaded correctly, as per my QGIS re-projected file. So I'm not sure what went wrong with yours for that conversion. It shouldn't matter how the re-projection is done, just that it is. You were definitely on the right track.