Geojson Features not Plotting via d3

I’m trying to plot UK Local Authorities using d3. The code below has an example using leaflet, which works but the d3 version plots a large rectangle and then a small, strange shape and I can’t see why.

Any suggestions warmly welcomed.

Once I get this working , I plan to plot the data using d3 on top of the leaflet map with all its detail, but that’s one for another day.

Looks like your geojson has the wrong winding order. As a quick fix, you can reverse the order via @turf/rewind.

Load the module:

rewind = (await import('@turf/rewind@6.5')).default

Then apply to your geojson features:

boundaries = rewind(
  await FileAttachment("Local_Authority_Districts_(December_2017)_Boundaries_in_Great_Britain@1.geojson").json(),
  {mutate: true, reverse: true}

Note that maps aren’t my forte, so there may very well be a different cause or better solution. @Fil breathes projections and may be able to chime in.

To @mootari’s suggestion I’d add a change: centreOfUK = [-1.5, 52.3555] (the order of coordinates is longitude, latitude).

1 Like

Thanks @mootari and @Fil , those changes did the trick.