"Things that are beautiful have a communicative power that things that are not beautiful do not." Eric Lander Twitter-bird-blue-on-white

mbsmrtic at flashbit.com Twitter-bird-blue-on-white

Google Flu Trends

Flashbit on Ruby on Rails

Welcome to Flashbit on Ruby on Rails! This small site is made up of about 90 files but it's now much more scalable and organized and flexible than my site running on Tomcat. The Model-view-controller pattern that is used by Ruby on Rails keeps the styling and data and layout code separate from each other. Everything has a clear place so nothing feels cluttered. The logic of the layout looks clean and clear since it isn't mixed in with styling and data. This is known as separation of concerns which makes the code for the site much easier to understand and manipulate.

D3 Transitions

The latest addition to this visualization are the Streamgraph, Stacked Area and Line Chart buttons. There are a few great things about this addition. One is that the buttons allow you to see the data 3 different ways, which helps in understanding it. Another is that this is my first adventure with D3 transitions. A transition is a smooth animation from one visualization to another. We could just use a stacked area chart, it's a great, simple, intuitive visualization. The problem, though is that if we want to differentiate the regions to show which regions had the higher numbers, the regions at the top are more difficult to see than the ones at the bottom. They get stretched. A streamgraph is a good way to help alleviate this problem but it's a more advanced visualization. It's not immediately obvious what it shows. Animated transition from a simple to a complex view makes the complex visualization usable. This is a simple example, but it illustrates a powerful technique. This technique can remove some limitations. If we can make the advanced visualizations understandable, we aren't limited to simple visualizations. We can now build up to complex, nuanced visualizations giving us the power to see more deeply into complex data.


Since I'm using the D3 JavaScript data visualization library for my data visualizations, there is some JavaScript in the site in addition to the Ruby. The version of Ruby on Rails that I'm using (3.2) ships with a JavaScript library called CoffeeScript which makes JavaScript cleaner and sleeker and further organizes my code for the site.

Data Visualization Future Work

Now that the Ruby on Rails site is all installed and running, I can focus on the data visualizations! For the above visualization of Google Flu Trends I added grid lines to show the years, to better show the time of year that the flu peaks.

In addition to the tooltip, I'd like to add a vertical line representing the estimated number of flu like illness in that region on that date. This would help the user to understand what the graph is showing. Streamgraphs aren't always intuitive and this would help with that.

The tooltip should be resized to the size of the content.

On touchscreens, the mouse tracking line wasn't getting updated on touch, I fixed that.

I'd like to make an adjustment to the stream graph calculations so that it's more centered. That might make a good contribution to the D3 codebase. Although it isn't very obvious here, with some data sets stream graphs get very off center.

I could work on the speed, it takes a long time to load.

The addition of a map of the United States made the geography of the regions much more intuitive. Without the images, it was not preattentive. If you read the description, you could see which states are included in the region, but it took focus, and it took cycles away from understanding the data.

But before I do any of those things, I want to add some new time visualizations. I'd like to add a time line that allows zooming. I have a flu text data set that contains some interesting history of flu in the United States. I'd like to create a time line visualization of that.

Do you have a data set that you'd like analyzed, processed and/or visualized? Let me know.