Harish Sivaramakrishnan

Update: The code is now available on github - https://github.com/hsivaramx/zeitgeistexpt

My escapades with the google zeitgeist application continues. This time around, I wanted to implement the visualization that they have in the “top 10 Lists” section. This one has this nice pseudo 3D feel, with some really nice animated transitions. The earlier example that I implemented was Canvas based – hence, I wanted to try building this entirely using the HTML dom.

The approach

Step 1 – Plot the column chart in the 2D space to fake a 3D like appearance. As you’d see in the demo, a lot of the 3D perception comes from the fact that the base of the chart is a graphic with a 3D perception. So is the chart column items. Once the coordinate mapping is done on the 2D plane, simply drawing <DIV> elements into their appropriate positions will get right appearance.

Step 2 – The column chart graphic is actually a texture (Observe carefully and you can see that.) That would be a near blocker if you are choosing a Canvas based approach as Canvas treats anything drawn to it as a bitmap and the scaling would just not work. Since I chose to use a DOM based approach, I created a css class with the image as its background and set the background-repeat property to repeat-y. Once that’s done, if you increase the height of the individual <DIV> the background will grow appropriately.

Step 3 – Getting the base and the top of the chart to align and animate as we interact with the chart was the next step – This was super easy. I simply added 2 images, the bottom and top and aligned them to bottom and top. since the blue top has to always sit over the bar chart, the top would be aligned at about -3px. (in case you cared about the detail.

Step 4 – Adding a slider to the chart, which we will use to interact with the visualization. I spent quite sometime figuring out ways to style a <input type=”range”> using CSS and that’s when I chanced upon JQuery tools. This one had a nice, customizable range component that I chose to use directly. This one also comes with a reference stylesheet which you can tweak to get the appearance that you’d like.

Step 5 – Adding a ribbon that highlights the current selected columns was the last step. Again, the ribbon is a graphic that already has a pseudo 3D perspective. All I needed to do was to position it and move it based on where the slider position was.

Demo – Take a look at the demo here. Note: It is tested only on webkit based browsers (Chrome & Safari). The slider uses mouse events, hence the slider wouldn’t work if you load up the demo on a mobile phone / tablet.

Next steps:  Adding touch events to the slider, so that this could work pretty well on a tablet device. Due to the very nature of the visualization, I am unsure as to how it would look and how usable it’d be on a phone form factor, even if it would load and work.

Please feel free to right-click and view source, until I get this on to my github page – hopefully by end of this week