My Comparisons
My Comparisons is a mobile web app designed to allow participants to compare different independent data streams for their own personal analysis. It answers the question "When I do X how, is Y affected?" For example, you can ask questions like, "When I eat a bowl of cereal, how is my blood glucose level affected?" or, “How is my mood affected by exercise?”.
The participant is presented with a dashboard that has a set of comparisons corresponding to different data streams. Each comparison is a small timeline that shows when two events (X and Y) occurred and what their values were. The idea behind the timeline is that it is a quick view to see how different distinct data streams interact with each other. By clicking on a comparison, the participant can see a set of all comparisons of two data types to see if there are any correlations.
A comparison is shown in the above image. This comparison answers the question, "When my blood sugar level is anything, what did I eat beforehand?" The two data streams being compared in this case (1 and 2) are "Blood Glucose" and "Food". There is an optional filter on the data (3) which in this case just shows everything. In other examples we might want to only show comparisons when the blood sugar level is high or low. The blood sugar level is 168 (4) and information about the food eaten can be seen in the bubble (5). This view makes it easy to see that around 7:23 the participant ate about 20g of carbs which caused their blood sugar level to rise to 168 about 20 minutes later.
My Comparisons is a perfect use case for the Open mHealth APIs since it brings together different data streams from different locations for analysis. omh/auth is used to authenticate the user and omh/read is used to read payload data. d3 is used to generate SVG views on the fly based on the data. d3 allows for easy modification of the browser DOM based on the data provided by the omh/read call. SVG technology is limited to iOS 5+ and Android 3.0+ but it was chosen since it is the best documented use case of d3 and it allows for easy resizing on any size device. If hardware or browser requirements were changed, it would be possible to modify the existing code to use canvas (or any other method for drawing) due to the abstractions in d3.
All network calls happen when the participant first logs in or the page loads for the first time in a while. This means that any time the participant wants to interact with the data, it is all there. He or she can quickly search, filter, and make comparisons between the data without having to wait for things to load. The trade off is increased page load time, but this is partially offset by being able to batch requests and data caching.
Data is cached on the phone using HTML5 datastore. Caching the data on the phone allows the user to look at their history even if they don’t have network connectivity. This also allows us to only query for new data when we make the omh read call rather than requesting for data we already received making initial load times faster.
Visualization is not directly tied to the payload itself. Different payloads can reuse the same visualization code if they have similar data or can be visualized in a similar way. This allows for rapid addition of new payloads as they are added to a particular DSU. Eventually this will allow for users to select any payload (even a new payload which has never been visualized before) and specify a simple mapping between data in the payload and a visualization unit (DVU). This is made possible by the Concordia schema defined by each payload.
The idea behind "My Comparisons" was driven by my desire to see what happened to my blood sugar after I ate certain kinds of foods. I knew how certain types of foods should affect blood sugar, but I was curious to see how they affected me personally. I had recently started a paleo diet where the intake of grains, legumes, and dairy is restricted. Grains and processed foods are generally full of carbohydrates which are broken down quickly in the body which cause a spike in blood sugar. I was interested to see how my blood sugar responded to different meals and foods. I was able to take two distinct data sources, a glucometer from Entra Health Systems and a survey from ohmage and connect them using the Open mHealth APIs.
The source code can be found here and a demo can be found here.