D3 Geo albers USA map showing Puerto Rico and Virginia incorrectly

Question

Having trouble showing a clean us states geo map in D3.

1. I copied exact code from http://examples.oreilly.com/0636920026938/chapter_12/04_fill.html Also downloaded us-states.json from http://examples.oreilly.com/0636920026938/chapter_12/us-states.json

2. In firefox on CentOS, I just saw a big steel blue box covering the whole svg element instead of the individual states.

3. Eventually figured out that with d3.v3.js Puerto Rico is not supported, so deleted the last line in the us-states.josn file containing the description for Puerto Rico.

4. Still get a big steel box; Traversing the html showed that path element corresponding to Virginia also shows a big square steel blue box across full SVG element.

5. Added style("opacity",function(d) { if (d.properties.name=="Virginia") return 0.0; else return "1.0"; })

6. Now the map displays all the states minus Virginia which shows white space and Puerto Rico which I manually removed from the data file.

7. Looked at geometry of Virginia in the html element and json file and see nothing very different or unique about Virgina, it is drawn in 3 parts but other states like Washington are drawn in four.

8. Any suggestions why Virginia is not being correctly shown. The inspection of HTML tag for Virginia looks OK as well and seems to reflect the data. How does one add debug code to figure out at next level of detail why D3 internally or the browser externally is struggling to draw Virginia and default to darwing a big steel blue box across the whole svg area?

The code started out exactly as in the book examples, only change is the d3.v3.js is downloaded afresh from the zip file in the d3 org site..and of course the opacity of Virginia was programmatically reduced to zero

Thanks .. Thought I had a browser problem, then a data problem, finally a d3 library version problem but eliminated all and now need help to decide what next to look at..

Answer 1

There have been some changes to the geo functions in D3 between version 2 and version 3 which you can find in the release notes and I suspect that this might be the reason you're having issues. Have a look at the release notes for 3.1.8 which mention Puerto Rico has been removed and clipping is applied. I think that these would explain what's happened to you map. FWIW I've just tested that code with d3.v2 and everything rendered as expected. In your map you can partially get the issues you're around this by setting your fill to none and your stoke to something which results in the outline that you expect, not that that answers your question. I'd suggest posting this on the d3 google group 'cause Scott Murray often posts there and I'm sure that he already has the answer.

Answer 2

Just checked w.Scott Murray, and he confirmed that indeed the coordinates for the state of Virginia used to work, but then D3 changed how it handles geodata in version 3.1.8. As of today, a new version of us-states.json is now available here: http://examples.oreilly.com/0636920026938/chapter_12/us-states.json and works well with the latest D3 3.4.6 version.

Answer 3

In the JSON code for Virginia it looks like there is an outline of a box inserted into the code ... it is one of the three parts of Virgnia's multi-polygon. If you remove this box (it'll have only four coordinates) the JSON should work. You will lose the outline around Alaska/Hawaii on the full U.S. map.