Harish Sivaramakrishnan

I have been and am a huge fan of Adobe Flex as a technology to build great experiences for the web. The FlexStore app was a great example of how we can change the experience around a common use case like an online shopping website. This app was built sometime around 2005 (if I remember right) to showcase the capabilities of Flex 2.0 framework. 7 years down, with web standards making quantum leaps in providing great experiences, we could now build a similar experience without flash or flex.

I just started out writing my own port of this app using web standards and here’s an early prototype of what I could do. I spent about a couple of days to get this far, which is super encouraging. I am using a combination of JavaScript and CSS animations to get the transitions working and some jQuery to get the drag and drop going. I have also tried to replicate most of the UI elements the same way as the Flex application with some exceptions.Mind you,  this is a very early prototype and is very much in work in progress mode. I have made the source code available in my github – if you feel you can add some features / fix some of the issues, please feel free to fork the branch.

I will be spending time in adding features and fixes to this as well, but not at a very quick rate.  You can experience the demo here. Here is a small summary of what works. Read the bullets below or watch the video

The stuff that works

1. Move the slider to filter the items.
2. Click the “triband” check box to filter on triband
3. Drag and drop items to compare bin
4. Drag and drop items to shopping cart
5. Use the select box and choose “2000″ as the series to filter
6. Click the “search” or the “cart”  icons to see the sliding animation

The stuff that doesn’t work (yet)

1. Dragging the slider violently with the intent of breaking the demo.
2. Combination of filtering is buggy.
3. Price calculation based on items in shopping cart.
4. Any other combination  that is untested.

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

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.