Search code examples
d3.jsgeomap

d3 geoPath projection is messing up the map


I would like to change the projection of the map to be more flat for the user
I have tried setting the projection to d3.geoIdentity() it worked but it's not "flat enough" And when i try to change to d3.geoAlbers() it gives errors and by using other methods it either giving me errors of null path values or it's working but with a roundish map here's the chunk of code that matters since the rest of the code including the json file all good what i would like is to set the projection in a way to have the map displayed as the map of USA

[this is what i would like the projection to be

 var geojson = topojson.feature(dz, dz.objects.DZA_adm1)
 var projection = d3.geoIdentity()
    .reflectY(true)
    .fitSize([width, height * 2/3],geojson)
const path = d3.geoPath().projection(projection)

[this is what i'm getting]2


Solution

  • Projection finally works!

    so the topojson file (json file of the map) was actually wrong Thank to mapstarter tool i found online , i could try a few projection options they provide , i reshaped the json file using mapshaper and now it works good