Plotting a parabola based on data points

706 Views Asked by At

I am trying to draw a parabola inside a chart which I am developing using D3.Js library and using SVG paths to draw the curve.

I have a set of 5 points for drawing the parabola: (0, 500) (100, 400) (200, 280) (300, 220) (400, 200).

Points plot image link

But to plot these points I need to know the control points so a perfect and smooth curve is obtained like below.

Example chart based on data points

Is there any equation or way to identify the control points for two point, so that its possible to draw a parabola touching the points specified above?

Edit

Is it possible with a Bezier cure?

3

There are 3 best solutions below

2
On

If the points don't fall precisely on a parabola there is nothing whatsoever you can do about that:

enter image description here

0
On

By least squares method we can find four constants $(a,b,c,d)$ from given data using base relation of a tilted parabola whose symmetry axis is inclined to the coordinate axes:

$$ (y+ax+b)^2 = cx+d$$

0
On

A parabola whose axis of symmetry is vertical can pass through three given points.

A (rotated) parabola can pass through four given points. See this question for details.

A quadratic Bezier curve is the same thing as a rotated parabola, so, again, it can interpolate four points.

A cubic Bezier curve can interpolate 6 points. See my answer here for details.