I'm working with topoJSON and D3 to display Natural Earth data on a globe. Obviously, we need to simplify our geometries while still keeping borders consistent. We've created a script as based on Mbostock's Map Tutorial. Here's the link to our gist.

Once we run the script, it outputs all the countries as .json files. json files

However, when we load the USA, we encounter a problem. When we mouse over the USA, the entire globe is highlighted.

United States without mouse hover

United States without mouse hover.

United States on mouse hover

United states on mouse hover

Is there something in our script that would cause this? We need to simplify our geometries for performance purposes, and we need to preserve boarders. TopoJSON was the clear choice, but we could be calling it incorrectly.

This looks like a symptom of a not topologically correct polygon. - Filling an open (last point and first point different)shape with svg and css may result in filling everything. - Filling a shape not respecting the RHR (Right Hand Rule, clockwise) will fill the outside of the shape.

I would check that your source shape/geojson file is closed and RHR.

http://postgis.net/docs/ST_ForceRHR.html

http://www.w3.org/TR/SVG2/painting.html#FillRuleProperty

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.