1

I have a csv file with a set of coordinates with the following structure: id,name,latitude,longitude (24 values).

Those 24 points represent coordinates in a city. I would like to get a voronoi map with those coordinates as centroids, and then colour the polygons as if it were a choropleth map. The result of this will be a map to be published on a web dashboard, so I will be using js-only frameworks.

I've been following this tutorial and this example (leaflet+voronoi), but it's hard to find:

  1. Tutorials with current/modern versions of d3 and/or leaflet.
  2. Tutorials or articles on how to do the mapping process I need (coordinates>voronoi>choropleth).

Currently I am following the d3.voronoi section in the d3 API docs in order to understand how to generate the regions/polygons, but I don't know how to process those in order to generate the choropleth map using leaflet and mapbox.

Improve this question
2
  • Have you managed to make anything work? If so, can you share a link? I want to do the same thing but running into the same problems you are. – duxk.gh Nov 26 '18 at 10:28
  • I ended up using turf.voronoi on a featureCollection composed by the points previously described, then adding the polygons to a layer with leaflet geoJSON. You can see it here, methods voronoi and addVoronoiLayer (it's far from perfect but it works). Hope this helps @duxk.gh. – Daniel F Nov 27 '18 at 11:16
0

I can suggest you to try with turf.js instead of d3.js.

Here's the documentation for Voronoi polygons : http://turfjs.org/docs#voronoi

You will get a GeoJSON as result that you can then style as a choropleth map following the Leaflet default example : https://leafletjs.com/examples/choropleth/

Improve this answer
2
  • But I need to transform my coordinates set into a FeatureCollection, right? I'm trying to use polygon in order to do so, but I don't know if it's the correct approach. – Daniel F Aug 5 '18 at 16:29
  • Yes, you need all you points in a featureCollection first. You can do that by looping on the csv rows and create a turf.point for each and then put them all in a featureCollection. Here's a Fiddle to help you : https://jsfiddle.net/23t8m6en/19/ – Léo M Aug 6 '18 at 7:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.