SleepHabit Monitor: Interactive Quantified Self Visualization

I designed an interactive visualization tool that helps users to analyze sleep habits, patterns and day-time performance. It is selected as one of the samples for next year's class.

The Problem and Data

I've had some problems with sleeping time, quality and the following day's performance, so I designed this visualization tool as the indicator for my life pattern to see if there are correlations between variables that I care about. I recorded the following variables everyday for a month:

  • Time point of going to bed
  • Time point of falling asleep
  • Number of wake-ups during the night (determines sleep quality)
  • Time point of waking up in the morning
  • Time point of getting up

The visualization supports other data sources (other than mine) that contains those variables and uses JSON format.

The Visualization

The main part of the visualization is a collection of stacked bar charts that indicate time periods of sleeping stages, sleep quality and day-time performance. The y-axis indicates time of the day and the x-axis represents days. The second right column is the description panel that shows the detail of current active bar stacks. The right column is the control panel that sorts data or changes elements being displayed.

There is a legend area on the bottom right explaining the meaning of different symbols and colors.

This visualization is rich in interactivity. Users can perform the following interactions:

  • Mouseover for Detail
  • Zooming
  • Dragging
  • Sorting
  • Displaying or Hiding Elements