intermediate sleep data

100%

intermediate sleep data

✓ Published1🌍 Public

Last edited Mar 8, 2021

Created on Mar 2, 2021

This interactive sleep data visualization charts nightly sleep duration against lunar phase. Rectangular marks show the end time and duration of each sleep session, while moon phases from new moon (1) to full moon (15) run along the x-axis. The SVG rendering uses React with D3 scales (scaleBand, scaleLinear) and custom axis components. Data is fetched from a Fitbit JSON file and processed client-side to calculate moon phase conversions, remove errant values, and unify duplicate days before sorting and averaging.

AI-generated description

This is a refactor of my simple sleep data project. Of note, in a real application I would not have the front end do all the data manipulation and calculation. I would have Node do this after the API call to fetch the data in a data model.

I'm currently stuck trying to get the average hours of sleep to show up as a scatter plot

Program that loads sleep data from my fitbit account

Moonphase calculated using "simple" from ben-daglish.net's Moon Phase Calculator 0 = New Moon, 15 = Full Moon

MIT Licensed

Similar vizzes

Loading thumbnail…

basic sleep data

This interactive scatter plot visualizes sleep duration and bedtime across moon phases, with each bar representing one night of Fitbit sleep-tracking data. The x-axis marks moon phase values from 1 to 29, while the y-axis displays time of day, showing end-of-sleep hour and duration in hours. The React app uses `scaleBand` and `scaleLinear` from d3.v5 to position rectangular marks in an SVG. Data is fetched asynchronously from a JSON gist, with moon phases calculated via a simple algorithm and timestamps parsed using `timeFormat`.

KKristopher Skelton

90% match

Loading thumbnail…

Scatter Plot of Hours Slept

A scatter plot compares hours slept against a lunar phase, with each individual night a gray circle and the average per phase a green circle. A bar chart underlying the plot uses the same axes. The React app fetches Fitbit sleep data, processes it with D3 v5’s `scaleBand` and `scaleLinear`, and renders SVG via React components for axes and circle marks. Moon phase values derive from a simple JavaScript calculation.

KKristopher Skelton

83% match

Loading thumbnail…

Sleep Cycles

This visualization plots daily sleep intervals across seven months, showing when a person falls asleep and wakes each day as a stepped horizontal bar. The y-axis represents time of day from evening to morning, while the x-axis shows the calendar date. The code converts each sleep interval into elapsed milliseconds since midnight and uses `d3.scaleUtc`, `d3.area`, and `d3.axisLeft` with SVG rendering. The fake data is loaded from a CSV file and parsed using `d3.utcParse`.

Mmbostock

76% match

Loading thumbnail…

Sleep Cycles

This visualization plots a person’s daily sleep intervals as a time-series graph in the style of Eric Boam’s “Seven Months of Sleep,” covering seven months of synthetic data. The y-axis shows time of day from evening to morning, while the x-axis spans consecutive dates, with each sleep period rendered as a filled step-area region. The code uses d3.scaleUtc and d3.utcFormat for time axes, d3.area with a step-after curve for the shapes, and parses the CSV data with d3.utcParse. The data is generated by a Node script using d3.randomNormal.

深深度碎片

74% match

Loading thumbnail…

FitBit Sleep data part - I

This visualization overlays seven nights of FitBit heart-rate data as a multi-series line chart, showing minute-by-minute heart-rate fluctuations during sleep from May 18-24, 2016. Each night is a distinct colored line, plotted over time on the x-axis (hours:minutes:seconds) with beats per minute on the y-axis, revealing patterns like elevated heart rates and nightly variation. The code uses the nv.d3 library's `lineChart` model built on d3.v3, loading CSV data via `d3.csv` and parsing times with `d3.time.format` to construct the series for display with interactive guidelines and tooltips.

JJverma

73% match

Loading thumbnail…

SleepData

This visualization compares recommended sleep hours against average reported sleep hours for students from kindergarten through 12th grade. Each grade level displays two horizontal bars, with teal representing averaged sleep and orange representing needed sleep, alongside a legend and axis labels. The chart uses React with D3 v5, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `d3.schemeSet2` for color encoding. The data is embedded as JSON and rendered as SVG rectangles within a fixed 960×500 viewport.

Jjesperenglund92

72% match

Loading thumbnail…

Fork of blood pressure

This visualization shows the relationship between age and sleep duration for a group of individuals, with each person represented as a point on a scatterplot and connected by a smooth line. The chart uses D3.js v5 to load CSV data from a GitHub gist, parse the numeric fields, and render the SVG visualization. It employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.line` with `curveBasis` to create the curved trend line. The line is styled in maroon with a thick stroke, while gridlines and axis labels are formatted with custom CSS. The data source is a public dataset on sleep health and lifestyle.

Bbhavana.bayyapu@gmail.com

69% match

Loading thumbnail…

Untitled

A lunar phase calendar displays each day of 2023 as a small orthographic moon, arranged by day along the x-axis and month along the y-axis. The SVG chart uses d3.geoCircle and d3.geoOrthographic projections within d3.geoPath to render moon phases from a computed lunar period. It includes axes via d3.axisLeft, d3.axisTop, and d3.axisBottom, with scales from d3.scaleLinear and d3.scalePoint. Clicking the SVG triggers a red animated pulse, expanding via a .transition().duration().attr() chain to highlight the current day's position.

HHéctor del Castillo

68% match