basic sleep data

100%

basic sleep data

✓ Published1🌍 Public

Last edited May 11, 2022

Created on Feb 25, 2021

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`.

AI-generated description

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…

intermediate sleep data

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.

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

89% 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

77% 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

75% 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

73% 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.

深深度碎片

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

70% match

Loading thumbnail…

Sleep Dataset Features vs. Age -- One Plot

Three linked scatter plots show how average sleep efficiency, sleep duration, and deep sleep duration vary with age. Each plot uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and `axisLeft`/`axisBottom` to render axes and colored points, with interactive tooltips on hover. Data is fetched as CSV, aggregated by age via `flatRollup`, and visualized using D3’s `select`, `join`, and `transition` APIs.

MMartha Cash

70% match