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.

  • 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, 2018 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, 2018 at 11:16

1 Answer 1


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/

  • 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, 2018 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, 2018 at 7:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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