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.

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.

• javascript
• jquery
• html
• zooming
• infinite

• 1 Not to nitpick, but that's not really "infinite zoom". Scale is bounded, even if the range is huge (10^-35m to 10^27m). – josh3736 Commented Sep 8, 2012 at 16:56
• 2 @josh3736 Thanks for the comment. I just don't know what to call it. It's like an infinite zoom... until you reach the limit. – IAMTHESTIG Commented Sep 8, 2012 at 17:05
• 2 This looks like about 5 questions in one. As far as I know the problem with infinite zoom is doing it in a way that performs well, seeing as the amount of data displayed "at once" is massive. This is irrespective of which technology you use. (Pick one that's suitable to your requirements. If you need more freeform drawing, use <canvas>. If you need to use existing images and text, use HTML.) This precludes using "lots of divs" as you mention in a comment on an answer. You'll need to create them on demand as needed. – millimoose Commented Sep 8, 2012 at 19:10
• 1 The point is, visualising huge amounts of data is an entire problem domain, I'm not sure it's something answerable with a tutorial-level article. If you only have a moderate amount of data, you might be able to make do with the straightforward approach. – millimoose Commented Sep 8, 2012 at 19:13
• @millimoose Thanks for the advices. Maybe I'll use it with HTML and javascript/jQuery. The data is not that many like the example on link. – IAMTHESTIG Commented Sep 8, 2012 at 20:14

3 Answers 3

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.

This is totally doable in HTML5. Actually, any system able to display and zoom images should be able to. It's not one big image being zoomed, it's a big amount of images being zoomed (for instance the initial human is an image, which is scaled and moved out when you zoom in or out). The idea is splendid, but I don't really see any technical performance in it. As long as you correctly limit the number of images being resized and bitmapped, it should keep a decent FPS rate.

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/