1

I want to calculate the area of blue region under the curve. The curve is made by cardinal interpolation from the red data points, using D3's line().

enter image description here

I tried to calculate the area as if it was linear interpolation (along the black lines) but it's not quite the exact number.

Please help me out here. Thank you in advance!

Huyen
  • 443
  • 4
  • 17
  • 1
    I cannot see a black line. Will that be a linear connection between the red dots? – Carsten Massmann Oct 01 '18 at 22:51
  • Edited, thank you for spotting that out @cars10m – Huyen Oct 01 '18 at 22:53
  • Tempted to close this as [duplicate of this one](https://stackoverflow.com/questions/10039679/how-can-i-calculate-the-area-of-a-bezier-curve/10045537#10045537). – Mark Oct 01 '18 at 23:27
  • 1
    get the points along the path, one of the many examples you can see here https://stackoverflow.com/q/52599555/9938317 so you can interpolate more precise – rioV8 Oct 01 '18 at 23:42
  • @Mark, I don't want to divide the area as subdivisions as in the question you mentioned. That's what I calculate with the black lines :) – Huyen Oct 02 '18 at 00:11
  • 1
    You might be missing the point of the answer I link. @Phrogz's code sub-divides the curve path and does not use the points the curve was fit from. In my opinion, it's the cleanest way to get your desired result. If you really want to implement quickly, though, look at the fourth answer in my [link](https://stackoverflow.com/a/50613616/16363). – Mark Oct 02 '18 at 00:20
  • Thank you so much @Mark, I got that now. The smooth of the polygon increases with the exact area. – Huyen Oct 02 '18 at 04:01

2 Answers2

1

If you want to calculate the sum of all the trapezoidal partial areas you can use the following formula:

Area = ((sum of all y values)- 0.5*((first y value)+(last y value)) * (delta x)

Or, JavaSript code:

A = (y.reduce((s,v)=>s+v)-.5*(y[0]+y[y.length-1]))*deltax
Carsten Massmann
  • 26,510
  • 2
  • 22
  • 43
  • 1
    Thank you for your reply. For now all the (x,y) points I have are the little red ones. I would like to get the values from the curve but haven't been able to do so. – Huyen Oct 01 '18 at 23:05
1

I solved this problem based on this brilliant answer: https://stackoverflow.com/a/10045537/4505826. Remember the path must be a closed path, which means it has to end with Z.

When I run the code, the browser keep notifying these errors :

  • path.getPointAtLength() is not a function
  • path.getTotalLength() is not a function
  • Uncaught TypeError: Cannot read property 'createElementNS' of undefined

:::: SOLUTION: Adjust the above code as follows ::::

path.getPointAtLength(d)   ->    path.node().getPointAtLength(d)

path.getTotalLength(d)   ->    path.node().getTotalLength(d)

And replace

var doc = path.ownerDocument;
var poly = doc.createElementNS('http://www.w3.org/2000/svg','polygon');

by

var poly = document.createElementNS('http://www.w3.org/2000/svg','polygon');

as from this answer https://stackoverflow.com/a/25611318/4505826.

Huyen
  • 443
  • 4
  • 17