Create contour map

Question

Given a set of (x, y, z) coordinates, how would I go about creating a contour map?

Would be nice to know how to implement in d3 but wouldn't mind trying to implement it myself if I had some direction.

---

For d3 users, can I create a contour map using d3.geom.contour() and jasondavies' conrec.js:

https://github.com/jasondavies/conrec.js

Essentially, I'd like to replicate this contour map using d3.js: http://beaugunderson.com/routes/

Answer 1

It looks like this would be very easy with conrec.js. If you pass the data in the form that you have it, you can get a list of paths by calling .contourList() on the result. That you should be able to pass without modification to a d3 .data() call. All you should need to do is supply a path generator that maps the coordinates in the data to screen coordinates.

Answer 2

• Plotly.js is based on d3.js and provides contour plots. See for example

https://plot.ly/javascript/contour-plots/

Plotly.js: How to avoid overlapping contour lines?

How to apply plotly.js to an existing svg group <g> as target instead of applying it to a target <div> element?

• There is also a contour plugin for d3.js (which I did not use yet):

https://github.com/d3/d3-plugins/blob/master/geom/contour/contour.js

And an example: http://bl.ocks.org/mbostock/4241134