Deep Scale in Ajax - Maybe? Are there any examples?

Question

I have an idea to implement a deep scaling interface located in the browser for sports training data (speed, distance, heart rate, etc.). However, instead of the images that I really want to increase in the hierarchy of information. For example, the initial screen will display daylight saving time grid, for example, during 2008, and the rotation of the mouse wheel (or click) will increase this year, but during scaling I want 2008 to go blank and replace the calendar of months. Zoom in again by the month, and months are replaced by the calendar of months, zoom in on the day, and you finally see a chart with the training data plotted on it. All the time, only dates with actual data will be highlighted somehow.

My question is whether this is possible, even if someone has already seen examples of this. I assume that most of the time the next level of information can be cached in the browser (in fact, since it is based on a calendar, I can calculate most of this and cache the dates that will be highlighted.) I could also zoom in to an empty chart. while the Ajax stream retrieves the displayed data.

I have never tried anything like this before, and I am particularly interested in whether DHTML can be this way (I suspect not, and I have to resort to Silverlight) and whether Ajax execution will be continuous while the browser rendering stream is constantly animating.

Answer 1

For Deep Zoom, JavaScript / Ajax images have the excellent Microsoft Live Labs Seadragon Ajax library .

If you look at smooth and interactive scaling of content besides images such as text , video and vectors , look at the open source OpenZoom SDK I have developed over the past couple of months.

Answer 2

You probably couldn't achieve very smooth scaling with the javascript / ajax interface, but a scaling interface would be possible. The pragmatic ajax book has a great chapter on introducing a Google map clone. Theres no need for the technique to be limited to zooming and cropping images. Image elements can just as easily be any HTML code. The fade effect can be applied to the zoom operation, so when you move up and down the layer, you get something similar to what you described. I recommend grabbing the book (its a pragmatic book of programmers, so a cheap and immediately downloadable PDF version is available). Read the chapter, think about the methods, and then see if you consider it practical for your vision. Good luck.

Answer 3

Seadragon Ajax continues to evolve and is now OpenSeadragon:

http://openseadragon.imtqy.com/

I also keep a list of various scaling technologies, many of which use JavaScript:

https://github.com/iangilman/zooming

Answer 4

I do not believe that ajax or dhtml are good solutions for what you are trying to achieve. I think the best option might be flash / flex or silverlight.

Answer 5

Check out the scale effect in jQuery. Here is the link. I did not use it myself, but I could do what you want. You will need to change some content for other content in the right place, or your html will become too large.