javascript - Confusing paths when using D3 and topojson? -

a bit of forewarning: still novice d3.

right now, i'm following along mike bostock's let's make map guide, instead of uk, i'm using map of electoral districts in alberta, canada. after altering bostock's code load in own topojson alberta data, here appears.

i've spent lot of time trying figure out whether i'm not spotting error in code, or if there's possibly kind of error in geodata, i've been unable narrow down problem might lie. based on other questions on here, suspicion might have projection, perhaps having difference in way bostock representing uk versus need represent alberta properly, @ loss when comes that.

one thing note error pops in js console: error: invalid value <path> attribute makes me question if there's amiss in topojson data, when pull same data mapshaper, map shows without error.

thus, i'm kind of stuck , unsure of how proceed. kind of help/direction appreciated, thanks!

there's wrong geo data. looks it's projected? loaded qgis , whilst data looks ok, seems have projection applied. found alberta electoral district data @ http://www.electionsalberta.ab.ca/public%20website/112.htm , when load in shapefile there, 2 don't overlap. not sure happened, whatever processing done before displayed has caused issues. also, try styling path fill: none , stroke: black make tidier

update:

in zip provided elections alberta, there .prj file contains projection, suspected nad83, alberta transverse mercator. mapshaper, , others showing projected file , producing topojson of projected file.

to create "unprojected" file, loaded provided zip qgis vector layer , saved new layer, changed co-ordinate reference system (crs, projection in other words) in process, wgs 84.

i used topojson convert saved result topojson file.

i have created gist/block take @ using code , updated file. can check out @ http://bl.ocks.org/benlyall/4f2e4ed1e8f4bdb8457c

all i've done save file different co-ordinate reference system qgis , loaded existing page. hope helps somewhat.

to answer couple of questions comments:

1. the file projected elections alberta, can potentially projected @ point in process. can convert between projections @ point, , in fact when apply projection in javascript. projection converts co-ordinates 1 system co-ordinates system. in case, we're going nad83/alberta transverse mercator wgs 84 mercator projection. more info on nad83/alberta tm check out http://georepository.com/crs_3403/nad83-csrs-alberta-10-tm-resource.html

2. mapshaper , topojson reading in shapefile , displaying you. looked ok you, region looks when see on map. isn't clear that, source data projected. determined there mismatch loading topojson data qgis wgs 84 projection (since that's typically start with) , loaded in elections alberta data (which includes .prj file) , saw there no overlap. that's bit of giveaway 1 of them projected differently other. since 1 asking on stack overflow, thought elections alberta data correct one. that's when started looking inside topojson file , saw co-ordinates in there huge, ie. outside of -/+180,-/+90, means projected before being created.

   d3 can load projected topojson data, passing in null projection per http://bl.ocks.org/mbostock/5557726, in case expects co-ordinates in topojson file pixels, , if @ topojson file, way large considered pixel values, wouldn't work that.

3. i did

   ogr2ogr -t_srs crs:84 alberta_wgs84 eds_act2010_final.shp 

   and converted using topojson , loaded correctly, per qgis re-projected file. i'm not sure went wrong yours conversion. shouldn't matter how re-projection done, is. on right track.