💤 Sleep Health Data Visualisation

A simple 2D line chart visualisation of my sleep data as recorded by my Apple Watch using Pillow for iOS.

• 💤 Sleep Health Data Visualisation
• Examples
• Data Source
• 2D Graph Views
  • Stacked Metrics
  • Compare Metrics
  • Single Metrics
    • Sleep Quality (%)
    • Deep Sleep (% of session duration)
    • Light Sleep (% of session duration)
    • REM Sleep (% of session duration)
    • Awake Time (% of session duration)
    • Session Duration (% of 8 hours)
• 3D Experimental View
• Thanks to
• To Do

Examples

• Recent sleep quality vs awake time stacked charts
• Sleep quality over time across all recorded sessions
• Light sleep vs deep sleep comparison (2024)
• 3D experimental mode

Data Source

Data is exported from the Pillow iOS application on my iPhone via the Export Database option in the settings. It's a fairly large (~40MB) text file committed to the codebase and served from the public directory. It's offloaded to a web-worker when the site is loaded and processed before messages are posted back to the main thread with updates and the parsed data.

2D Graph Views

2-Dimensional line charts to visual the change in specific sleep metrics over time. Clicking a sleep session node will render a gantt-style chart at the bottom with a breakdown of the sleep stages.

Stacked Metrics

Renders two charts stacked on top of one another so that the axes are separate. Useful for comparing two different metrics without the lines overlapping and creating noise.

Compare Metrics

Renders a single chart with two lines for each of the selected metrics.

Single Metrics

Renders a single line chart for the selected metric.

Sleep Quality (%)

Deep Sleep (% of session duration)

Light Sleep (% of session duration)

REM Sleep (% of session duration)

Awake Time (% of session duration)

Session Duration (% of 8 hours)

3D Experimental View

Thanks to

• User Vinicius Ferreira for his open-source Star animation CSS used in the loading screen.

To Do

• Date parsing not working in Safari and breaks graph
• Update session breakdown to include data like the ios app does
• Can we get heart rate data from the raw database export?
• There are 58k sleep stage records mapped -> undefined, why?
• If you change the date-range and the selected session is no longer in that range, what should happen?
• Web worker makes about 800 cached resource requests while its loading
• Looks like the line chart redraws from new each time now instead of tweening. Is it the loop?
• Move sleep colours to a common stylesheet