Clickable lines and circles with HTML Canvas

Question

I'm thinking of making an application where at some points a graph is displayed that maps people over time and space. The vertical access is location, the horizontal access is time, and each person is identified by a line. At any point where the person did something of significance, there is a bigger dot on their line. Conceptually, clicking the dot brings up data about that particular dot, but clicking anywhere else on the line brings you to a detail on that person. Hypothetically, when you hover over the line the line should change color, and when you hover over a dot, just the dot should change color.

I know that I could do this pretty easily with flash, but I was wondering if these days there is any way to do this using only html and javascript. Is it possible? (Compatibility is not an issue, the only machine I am targeting is my own.)

Thanks!

Answer 1

You can do this with canvas, but it might be simpler to use SVG.

Since SVG uses DOM, you get builtin methods for handling events like clicking etc., instead of having to write your own handling code like you would need with canvas.

There are a few libraries that make working with SVG simpler and cross-browser compatible, such as Raphael and Dojo's dojox.gfx library.