Gadgetizing BioHeatMap: Colorful Squares of Energy

Shifting gears to coding a Google Gadget is a very interesting and different experience than previous endeavors. My past projects such as Greenometer and WattDepot-Applications have yielded fruitful results, but creating a Google Gadget is something that can be immediately distributed and displayed directly on the web without any complication between servers or multiple frameworks.

With my partner Kendyll, and using his idea of implementing a BioHeatMap visualization, we decided to take on this new challenge as one step further in creating a tool student's can use for the UH Energy Dorm Competition.

An example of a BioHeatMap visualization looks like this:

It essentially takes in a matrix of data and conditionally formats the data by displaying various colors. It finds the max and min values, assigns two colors to them and all other values in-between, assigns color appropriate to how close those values are to the max and min. We are currently exploring two options:

1. Rows are the floors. There are 24 columns, one for each hour of the day. The cell is the *cumulative* energy consumed during the competition for that hour of the day. That gives people on the floor a sense for when they're using a lot, as well as how they compare to others.
2. Rows are the floors. There are 28 columns, one for each day in the competition. The cell is the total energy consumed by each floor on that day. (A cell is blank if the day is in the future so there's no data for it yet.) This shows which floors used a lot on a particular day. If a floor is mostly red, it's using a lot of energy, and if a floor is mostly green, it's using very little. It also highlights which floors are consistent vs. which floors are "spiky"---one day using a lot of energy, the next day using very little.

Since this is something relatively new to take on, the first thing on the agenda was to get a working "dummy" version of the BioHeatMap visualization as a Gadget. By looking at the BioHeatMap visualization page, it was a little discouraging to see that most of the development for the BioHeatMap has ceased since the latter part of last year. But by looking at other visualizations that are backed by Google, I came across the Google Visualization Gadget Gallery. Sadly the BioHeatMap was not listed under here since it was originally created by Institute for System Biology, but I was still lucky enough to dissect one of the listed gadgets, mainly Gauge. I chose the Gauge since another group is going to try and implement it for the competition, so I helped myself to see what they would be dealing with.

The actual .xml file is being hosted in the Project Hosting here.

But for those who want to try out the "dummy" BioHeatMap the link to add to your iGoogle page is: http://wattdepot-ui-googlegadgets.googlecode.com/svn/trunk/BioHeatMap/test-bio-heat-map.xml

The data source is just a Google Spreadsheet: http://spreadsheets.google.com/ccc?key=0AhWy1L2qDnFYdGtuQTlJME9rN2pDOFhGRFBuMHZsbFE&hl=en.

Right now only I and Kendyll have access to edit the Spreadsheet, so if you want access, just send me an e-mail and I'll add you to the Google Doc.

Some of the issues I'm currently at is the default height of the Gadget is extremely long. I will have to correct that this week and try and get it to fit "snug" with the visualization. A general issue I came across is while browsing the example pages for the BioHeatMap. Most of the examples look pretty cool, however this one caught my eye:

It looks like a total mess, and judging by the size, I'd say that's a typical size we'll be looking at. Although I'm not sure how sporadic the data has to be in order to get it like that, but just by first glance it's hard to interpret or make heads/tails.