Harish Sivaramakrishnan

on technology, music & life.

Demo: Data visualization inspired by Google Zeitgeist 2011

3 comments

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

Most of you would have seen the Google Zeitgeist 2011 app. if you haven’t, check it here. This one has some of the most gorgeous looking visualizations I have seen in recent times and its almost flash like, but built in HTML, CSS and JavaScript.

The Motivation

I was blown away by the fit and finish, performance and the interaction model on the charts and decided to take a stab at implementing one of these visualizations from scratch.I picked the volume chart visualization (find that under the section “The Data” in the zeistgeist app).

The Result

 

The Approach

I had the option of building it using simple <div> s or go with a Canvas based approach. I chose the latter, purely because I love programming for drawing surfaces, thanks to my several years of experience developing for flash. I decided to use Easel.js – a brilliant library for programming canvas based applications. I also sprinkled in some CSS based animations for the text and background animations.

The Impementation

The visualization uses a nice graphic to show the chart columns. Since this application has the chart items growing in size and animating, it was important to get the right graphic to get the effect right. I took the graphic and spliced it not three parts – the bottom, the top and the scaling bit. While drawing the chart based on the plot data, the scaling bit would grow to match the coordinates and the top would then position itself on top of this. (An alternate approach would have been to just use <div>s and set the background-repeat property to repeat-y) Since I was using a Canvas based approach, this seemed a workable solution. The line chart and the plot overlay is done in a similar way, and easel.js gives you a very easy abstraction to draw lines on a canvas.

The Demo

You can experience the demo here. It has been tested only for webkit browsers (Chrome and Safari on a Mac to be exact.) The demo uses randomly generated data to plot the charts. You can click the red arrows to move left / right – each creating a new random data set and populating the chart.

Next Steps

I am working on getting a mobile / tablet version with touch events. I should be up with it in a day or two and will post it here.

 

Short URL: http://is.gd/1F76OB

Written by harish

January 9th, 2012 at 6:08 pm

3 Responses to 'Demo: Data visualization inspired by Google Zeitgeist 2011'

Subscribe to comments with RSS or TrackBack to 'Demo: Data visualization inspired by Google Zeitgeist 2011'.

  1. The demo was awesome! Works fine on IE 9 and IE10 pre-release too! I was playing around with EaselJS last week. Its a really nice lib! Thanks to gskinner for keeping it similar to Flash :)

    Arun Sarma

    10 Jan 12 at 4:24 am

  2. As usual rocking one Harish…. So u’re back on track..
    Keep post your experience on EaselJS. :D

    Nathan5x

    10 Jan 12 at 8:23 am

  3. [...] escapades with the google zeitgeist application continues. This time around, I wanted to implement the [...]

Leave a Reply