November 18, 2013

Brain Graphs

I haven't been able to do much work on Brain Drain, but I did want to show you the current state of the web app, which I use for inspecting the collected data.


(Note: the screenshot is showing a ficticious data set. I sincerely hope no-one has this many headaches. The data is generated by another Javascript script, which you can also find in SVN.)

There are two parts to the visualization. The bottom part shows a calendar, focused on the current year. I based this off one of the many D3 examples. The main difference with the stock calendar sample is that you can select any date, and it will show the data for that date in the top part.

The top graph, then, shows the actual collected data. Each bar represents an individual data point. The height of the bar, and its color, represents the pain level. They are placed on the horizontal axis based on the time of day. When moving the mouse over a bar you also get a popup which shows the exact level and all tags which were added by the user at the time of registration.

The main missing feature right now is a way to choose the correct dataset. The database can store datasets for multiple users, but there is no way to select which one you want (other than hacking the URL, which I set up as a temporary solution). Apart from this limitation the interface works just fine, but would benefit from some usability and layout tweaks. Simple next/previous buttons for both the day and year would be nice, for instance. I'm also thinking of adding a tag-based search, or even graphs which group data by time-of-day, day-of-week, tag, etc.

From a developer point-of-view I can't stress the benefits of D3 enough. Once you understand its functional model, and with the help of some samples, you can easily do complex visualizations and interactive graphs with a limited amount of code. D3 has quickly made it on my list of favourite tools.

Well, that's it for now. Next posts on Brain Drain will likely just be showcasing further tweaks, though I do hope I can show you some more interesting stuff soon. As things stand, however, I'm using the application more than I'm developing it, and it has already reached most of the goals I set for it.

No comments: