I am considering to make an animated infographic based on SVG, Javascript and CSS technologies of a timeline. I have lots of experience in programming but not so much in using these technologies to animate something (means that you could possibly tell me that I should approach the problem in a different way).
With Inkscape
, I can generate a large SVG image (large in the horizontal dimension and also relatively large in file size, unless I avoid embedding the pixel graphics). The SVG contains lots of boxes for events (SVG groups) which I would like to enlarge when clicked such that the details may be seen. I think, I could produce a working animation that shows the whole SVG and allows to enlarge all the boxes separately.
However, since the timeline is so long, it is necessary to zoom it such that only a part of it is visible at a time. There would need to be some buttons that allow the user to shift to the left or to the right to display earlier or later events. But still, whenever the user clicks one of the events it should be enlarged.
Here is the concept in pictures (the smaller large box is supposed to be the screen or the visible part of the graphic):
I am wondering if that is a feasible approach (how would I approach the combination of the two functions?). A different option would be to generate a separate SVG, or whatever, for each of the events and to position them in a different way on the screen.
Since I will need to repeat this many times for different or updated timelines, I will need to do most of it programmatically, working on the source text files. However, If such a single timeline can be created with some tool, from whose output I can learn how to do it, I am open to suggestions. In this case, I would need to know how.
Also, it would of course be very useful to have a working example, if there exists something comparable out there.