Databases
StackOverflow2013
Postsdbo
POD3 Geo albers USA map showing Puerto Rico and Virginia incorrectly
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POD3 Geo albers USA map showing Puerto Rico and Virginia incorrectly
    text
    copied!<p>Having trouble showing a clean us states geo map in D3.</p> <ol> <li><p>I copied exact code from <a href="http://examples.oreilly.com/0636920026938/chapter_12/04_fill.html" rel="nofollow">http://examples.oreilly.com/0636920026938/chapter_12/04_fill.html</a> Also downloaded us-states.json from <a href="http://examples.oreilly.com/0636920026938/chapter_12/us-states.json" rel="nofollow">http://examples.oreilly.com/0636920026938/chapter_12/us-states.json</a></p></li> <li><p>In firefox on CentOS, I just saw a big steel blue box covering the whole svg element instead of the individual states.</p></li> <li><p>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.</p></li> <li><p>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.</p></li> <li><p>Added style("opacity",function(d) { if (d.properties.name=="Virginia") return 0.0; else return "1.0"; })</p></li> <li><p>Now the map displays all the states minus Virginia which shows white space and Puerto Rico which I manually removed from the data file. </p></li> <li><p>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.</p></li> <li><p>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?</p></li> </ol> <p>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 </p> <p>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..</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload