Well, it turns out that Google Scatter chart has some drawbacks – like all blackbox software, it’s not really customizable. It’s great for quick-and-dirty charting but when you need something very specific, there is just no way to get it done.
In our case, we wanted a very particular way of displaying the grid lines. Instead of the regular interval of 10, we need something more unusual, i.e., 12.5. The reason for this is because of the way the algorithm works. It subdivides our 100x100 region in 8x8 regions where each region has height and width of 12.5. These 8x8 regions are important because they are where the algorithm should place things. If the algorithm is carried out correctly, then each of those 8x8 regions should have approximately the same amount of gates in them.
There just wasn’t a way to accomplish this using the current Google Scatter Chart API. Others have requested for this as well.
While this is my first time using d3, I had used its predecessor, Protovis. I was very happy with it because it was flexible enough to handle everything that we needed. Here is the particular visualization that we had to do with it for my health instrumentation project:
The figure above shows the amount of exercise we were getting for each hour of the day for 7 weeks. The amount of exercise was measured using a pedometer. A mini pie chart is drawn for each active hour. The size of the pie chart corresponds directly with the amount of exercise. We used a pie chart because we wanted to also distinguish rigorous activity from just normal activity. The darker sections of the pie chart represent rigorous activity.
Anyway, before I digress, here’s the end result of using d3. If you compare it with the previous post, there is very little visual difference, which is good. The point is to remain consistent with the previous visualization while being able to add important visual cues.
The main advantage d3 has is the fact that you can control everything from the axis position and title to the way that you want the graph rendered, animated and displayed. If you scrutinize closely, you will see that the blue dots are segregated into the 8x8 regions pretty nicely. Had we not been able to control the gridlines, this visual cue would have been harder to detect.
I already have another visualization done using d3 and I will post about it when it is finally completed. Needless to say, d3 is now part of my arsenal of visualization toolkits.Tweet
comments powered by Disqus