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.
Feel free to play with this interactive visualization.
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
- One-Click TimeTracker UX Design & Development
- ShakeShare Product Design, UX Design & Development
- ChiltonPRO Tablet Interaction Design, Wireframing, Prototyping & Mobile App Design
- Who's That? Ubiquitous System User Research, Interaction Design, Wireframing & Prototyping
- OVIC Usability Evaluation User Research & Usability Evaluation
- Firework: Interactive Data Explorer Data Analysis, Prototyping & Information Visualization
- SocialCusp Wireframing, Prototyping, Interaction Design & Development
- PlainMed Mobile App Mobile App Design & Development
- SleepHabit Monitor Information Visualization
- Graphic Design Collection Graphic Design
- Homeshine Boutique Online Shop Project Management, Web Design & Graphic Design
- HBHE Genetics Research Website Information Architecture, Web Design & Development
- Gale Cengage Learning Contextual Inquiry Contextual Inquiry & Project Management
- UMBS Website Information Architecture, Web Design & Development