Update: The code is now available on github - https://github.com/hsivaramx/zeitgeistexpt
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).
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 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.
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.
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.