create moving object from a set of data points

[BienvenueJS]

Hi,
I want to create a moving image based on a set of data points that I have in a json file.

What would be the best way to create this?
Should I just use plain javascript, or should I use d3 ? SVG?

Please can you point me to a few resources for the same.

[styxlawyer]

"Moving image" covers a lot of possibilities. Do you want a fixed image to appear at different places on the page or do you want the contents of a rendered image to be dynamic in some way?

[BienvenueJS]

"Moving image" covers a lot of possibilities. Do you want a fixed image to appear at different places on the page or do you want the contents of a rendered image to be dynamic in some way?

styxlawyer, Given a set of coordinates, I want, say a ball, to draw the line between those points.

Say If I give screen coordinates like
50 200,
200 250,
250 20

I want to see three lines drawn one after another between the coordinates mentioned above, with a small time gap in between.

[styxlawyer]

Ah, you actually want to plot lines. I suggest you look at the HTML canvas methods, in particular the lineTo() function.

[BienvenueJS]

Ah, you actually want to plot lines. I suggest you look at the HTML canvas methods, in particular the lineTo() function.

Thanks styxlawyer, this is useful. I have been looking at it now, and trying out a few examples.

However, I wanted a pen at the end of the line, and add some delay to see the line being drawn, basically it should look like the line is coming out of the pen. Can you give me some pointers on how I can do this?
Imagine drawing a line using a pen from a source point (0, 0) to destination point (300, 150), so you want to see the pen moving from source to destination slowly, and I want to do this in javascript.

[styxlawyer]

You will have to calculate the intermediate points in JavaScript and simply redraw the line many times (each one a little longer than the previous) and place the image of a pen at the drawing end of the line using the calculated x & y coordinates.

[BienvenueJS]

You will have to calculate the intermediate points in JavaScript and simply redraw the line many times (each one a little longer than the previous) and place the image of a pen at the drawing end of the line using the calculated x & y coordinates.

Thanks styxlawyer, shall work around this.

[styxlawyer]

Have a look at this page.