Geojson Features not Plotting via d3

Community Help
1

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.

2

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.

3

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

1 Like
4

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