1

Here's what I have so far:

https://jsfiddle.net/bnhwjL6d/

Instead of showing the shape like it is (correctly mapped on geojson.io)

enter image description here

it shows a circle. Projection wrong? I'm only starting out with D3 maps, so I'm not getting anywhere with this...

{
  "features": [{
  "geometry": {
     "coordinates": [[[172.416088, -43.987709], [172.416585, -43.991154], [172.415202, -43.991154], [172.41816, -43.991837], [172.418697, -43.991745], [172.41817, -43.991028],[172.416088, -43.987709]]],
    "type": "Polygon"
  },
  "properties": {
    "name": "6"
  },
  "type": "Feature"
}],
  "type": "FeatureCollection"
}
AskPete
  • 88
  • 7
  • 1
    This is a winding order issue: you're showing the whole world except your area of interest (which is why you see a circle). Because D3 uses spherical geometry winding order matters, whereas most other platforms, such as geojson.io and indeed the geojson spec, use Cartesian geometry. [Here](https://jsfiddle.net/kcrynLs6/) is an updated filddle, while [here's](https://stackoverflow.com/a/49311635/7106086) an answer regarding winding, and you'll have an easier time of translating and centering with [fitSize](https://stackoverflow.com/a/40940028/7106086) as I have done in the updated fiddle. – Andrew Reid Oct 05 '21 at 20:51
  • I just had to change it to the geoMercator projection and your example was perfect. Thanks! – AskPete Oct 05 '21 at 23:25

0 Answers0