Scatter Plot of Hours Slept

100%

Scatter Plot of Hours Slept

✓ Published0🌍 Public

Last edited Mar 9, 2021

Created on Mar 8, 2021

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.

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

89% match

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

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

71% match

Loading thumbnail…

Scatter Plot of Sleep Efficiency Dataset

This scatter plot visualizes the relationship between age and sleep efficiency using a dataset loaded from a GitHub-hosted CSV file. The visualization shows individual data points as red markers, with age plotted on the x-axis and sleep efficiency on the y-axis. The implementation uses Plotly.js, specifically the `Plotly.d3.csv` method to parse the remote data and `Plotly.newPlot` to render the interactive chart. The code defines a single scatter trace with marker styling and a layout that includes axis titles and a chart heading.

MManasa891-git

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

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

深深度碎片

71% match

Loading thumbnail…

Fork of 3D Scatter Plot

This fork of a 3D scatter plot visualizes sleep metrics from a CSV dataset, plotting sleep duration, sleep efficiency, and deep sleep percentage as points in three-dimensional space using the Plotly.js library (specifically the `Plotly.newPlot` API). Two overlapping marker traces render the same data with differing color schemes, line styles, and opacities, creating a contrast between highlighted and muted points. The visualization loads its data via `d3.csv` from a remote GitHub Gist and embeds the chart in a simple HTML page with a zero-margin layout, focusing purely on the interactive 3D representation.

SsreepavanKothapalli

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

70% match