CODEWITHSUNDEEP
javascriptd3.jstopojson
Matthew Snell
Matthew Snell

Reputation: 957

Plotting Lat/Long on map - D3.js v4

I have a simple map of the United States and I'm trying to plot some test Lat Long points. I found this block explaining the process but I'm having trouble converting the syntax to v4. Even when I run the exact code in the block it throws the same errors.

I can see the d3.geoMercator() kind of 'flattens' the map. Is this needed? It seems trivial but I like the natural curvature the US map has without this.

Curious what the correct approach is, and if some of the code is even necessary. Particularly this part: 

  projection //Added from block -- What is this doing?
    .scale(1000) //Added from block
    .center([-106, 37.5]) //Added from block

My code with the broken additions, I added comments to the code added: https://jsfiddle.net/fettww66/2/

Upvotes: 1

Views: 2481

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

In that bl.ock you linked, you only need two changes to make it running with D3 v4:

  • var projection = d3.geo.mercator() ↦ var projection = d3.geoMercator()

  • var path = d3.geo.path() ↦ var path = d3.geoPath()

Here is the updated bl.ocks using D3 v4: http://bl.ocks.org/anonymous/d0b530924ef2aae3436840a1dbb3a39f

Regarding your fiddle, the issue is very simple: you are using an already projected JSON. Just set the projection to null:

.projection(null)

Here is the updated fiddle: https://jsfiddle.net/vypu9qwr/

Upvotes: 1

Related Questions