Arrows using elevation value for any point(x, y) in contour chart

[polaris0227]

I want to draw arrows using elevation value in contours like below screenshot.

Please help me on it if anyone can do it.
Thanks so much.

[Fil]

See https://observablehq.com/@grahampullan/gradient-of-a-scalar-field — and https://observablehq.com/@d3/vector-field for an alternative rendering of the arrows.

[polaris0227]

Thank you for your reply. My question is that how to get elevation value for any point (x, y) in contour chart to define the direction of arrows.

[polaris0227]

I want to know how to get value for point(x,y) when I load data from csv. - https://observablehq.com/@d3/vector-field In this example, there is direction property in data array. - https://observablehq.com/@grahampullan/gradient-of-a-scalar-field In this example, there is a function to get value for point(x, y) : function value(x, y) { ... return out; } Thanks again.

[Fil]

It would probably depend on the format of your csv. However once you transform it into a linear array values suitable for d3.contour, you can use

function value(x, y) {
  return values[Math.round(x) + width * Math.round(y)]
}

[Fil]

Edit: I realize you are probably using density contours, not rectangular contours ; so the answer might be more complicated. Please share a notebook on Observable and we'll see how to help you better.