14

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 but wouldn't mind trying to implement it myself if I had some direction.

For 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/

Wex
  • 15,539
  • 10
  • 64
  • 107

2 Answers2

6

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.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • Example for conrec.js in combination with d3.js: https://github.com/jasondavies/conrec.js/tree/master/example – Stefan May 20 '16 at 06:24
  • Things are apparently not as simple as described here. Are there any examples? We can not just feed [x, y, z] values to the conrec, it needs to be transformed and significantly it seems. At least that is what I understand. Even if you look at the github example, it is NOT a `nx3` array that is supplied as the initial `data` parameter. – Nikita Vlasenko Feb 15 '18 at 22:50
  • I don't think this is accurate, unfortunately. I just attempted to use conrec.js but discovered that it needs an evenly spaced grid of points, not an array of X,Y,Z coordinates. And it's not very straightforward to convert coordinates into a grid - that would likely require additional algorithms. Possible, but not "easy". – Simon East Feb 10 '23 at 10:59
1

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

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

Simon East
  • 55,742
  • 17
  • 139
  • 133
Stefan
  • 10,010
  • 7
  • 61
  • 117
  • Unfortunately the contour plugin for d3.js requires a fixed grid of Z values, not an array of arbitrary X,Y,Z values. Doing the conversion is reasonably difficult without an additional library. – Simon East Feb 10 '23 at 11:03