Infinite Zoom with Javascript, Jquery or HTML5 Canvas

Question

I've seen this "The Scale of the Universe 2" and I just want to know if this can be done with javascript or jQuery or with HTML5 Canvas.

If you click an item (example the "Human") , an info will pop out beside it.

I searched for 3 days here if someone has a similar question. But I only saw Google Map like behavior where you can zoom in on the map cursor position.

Actually I want to make a "Timeline" like effect or, like the "Time Machine" Recovery on Mac OS X.

• Fixed position of zoom. Not like a google map zoom, that you can pan and zoom anywhere.
• Can I put (example "The human") images and text on a div?
• Are there available articles/tutorials about this?

Options:

• Javascript
• jQuery
• HTML5 Canvas and CSS3 Transform and scrolling it to Z-axis so you can zoom in/out.
• Flash/Flex (Well I don't want to use lots of resources on CPU because I need it in a large resolution or in full screen.

Answer 1

There is no infinite zoom. However you can zoom in/out of an SVG image in HTML5 canvas.

SVG supports affine tranformation. You can set the required zoom/pan in the affine transform and show the relavant areas. The behavior/listener can be implemented in Javascript and the SVG can be rendered on HTML5 canvas.

As a starting point you can look at this example: http://www.html5canvastutorials.com/labs/html5-canvas-scaling-a-drawing-with-plus-and-minus-buttons/

Answer 2

It is possible to implement an infinite zoom in HTML canvas, this is the source code of a proof of concept that I implemented and here you can test it live.

It is actually quite tricky to implement, and most probably you'll need to use big decimals.

The approach I followed uses the same coordinate space as d3-zoom. Basically, you have three coordinates, x, y and k. K is the zoom. If k is 2 it means that you have doubled everything.

Now, if you want to do infinite zoom, it is very easy to reach k = 64, but that is already outside of float64 precision and you'll have a lot of artifacts, where translating in the image is not smooth, or you don't zoom in where you want.

One way to avoid those artifacts is to use coordinates that have infinite length, for example BigIntegers. To make my implementation easy and compatible with d3-zoom, I used big decimals instead, but I had to implement my own library of BigDecimals, basically infinite precission on the integer part and 32bits of precision on the decimal part. Of course, you also need to adapt the zooming library to support BigDecimals. Moreover, in the case of d3-zoom, a lot of calculations where done in the initial coordinate space (k=1) but division of floats will always have an error and it is also perceivable once you are deep enough. To avoid that you need to do all computations locally.

It might sound like a lot of hassle to insist on using the d3-zoom library, but zooming UX is actually tricky, specially if you combine that at different k, you'll need to consider scrolling, zooming on the phone, double tapping...

In case you want to use SVG transformations, then you'll need to fake it. You'll introduce nodes when they are barely visible, allow to scale them. However, most probably you'll also need to fake it when they are too big to avoid artifacts there.