I’m trying to chart India and Indian states using D3 geo. For some reason—which I’m unable to figure out—the path elements that are generated from the mercator projection function are
- Overlapping, and only the last path is visible.
- Extending beyond the bounds of svg, when in requirement, they should only take as much space as bounded by the path
d’s stroke.
Following is an observable for reproduction: https://observablehq.com/@apah/indian-states. In this example I’ve added a fill opacity to show that the paths are rendered, but incorrectly.
When I try a different (less accurate) data like this one: https://gist.githubusercontent.com/RajuBhosale/a136cf7b0d437067bdb1/raw/33c9d96c70931f56883b9f50a3dd3f63f605938a/map.geojson, the problem doesn’t happen.
So I believe, there might be something wrong with the data itself? I can’t figure out how to figure that out, especially because the geojson data is from a government source, so it’s the most accurate data I have. Help would be really appreciated, have been stuck on this for a while. I’m confused more still because mapshaper and qgis are able to render the data correctly.