JavaScript - drawing on .svg diagram image

Question

Let's say I have a very simplified diagram as below in.svg format: Map 1 (In reality the image will be much more complex and will)

What I would like to achieve is to write a JavasScript program that draws a bubble with some text on each subsequent square every 10 seconds as shown in the following image: Map 2

Then on click of the bubble I would like to display some more info in a form of a popup.

So, in principle I need to get coordinates of each of the rectangles. Set up a timer. And and draw the bubble.

But what is the best way of achieving it? Just use HTML5 Canvas? Or some libraries like D3.JS? Or some other technology like GeoJSON?

I am expecting some guidance or sample code.

Answer 1

You probably want to use a high-level library that builds on the HTML5 Canvas API; you can find some canvas libraries at https://github.com/raphamorim/awesome-canvas that you can use; the exact code will differ based on the library you choose.