Skip to main content
SimilarExport ZIP
100%

SleepData

✓ Published0🌍 Public
Jjesperenglund92
Last edited Mar 8, 2020
Created on Mar 8, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
73% 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
73% match
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
73% match
Loading thumbnail…

Fork of Anv_ICE-6 Scatter plot

This scatter plot visualizes the relationship between age groups and their average deep sleep percentage, with each data point representing an individual. The visualization uses D3.js v7 within a React framework, rendering as an SVG. The code employs `d3.csv` to load the dataset, `d3.scaleLinear` for both axes, `d3.extent` to determine domains, and `d3.axisBottom` and `d3.axisLeft` for axes. A legend is added using color ticks. The data comes from a GitHub gist, and the page uses a light blue background with Arial font.

TTekmal-Bhavana
72% 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
72% match
Loading thumbnail…

Average Sleep Duration vs. Age

This visualization shows how average sleep duration varies with age, plotting aggregated data from a sleep efficiency dataset as circles on a scatterplot. The display updates to show other sleep metrics—including efficiency, deep sleep, light sleep, and REM sleep—through a dropdown menu. Built with D3 v7, the code uses scaleLinear for axes, flatRollup to aggregate data by age, and the scatterPlot module to render circles. Data is loaded from a remote CSV file, with axis labels provided by a separate axes module.

MMartha Cash
71% match
Loading thumbnail…

Average Sleep Efficiency and Duration vs. Age

This visualization displays the average sleep efficiency and duration across different ages, sourced from a sleep efficiency dataset. Users can select different sleep metrics—such as REM sleep percentage or deep sleep duration—from dropdown menus to view their relationship with age. The scatter plot uses circles colored by gender, rendered with D3.js (v7), leveraging `scaleLinear`, `scaleOrdinal`, and `flatRollup` to aggregate and plot the data. The chart includes labeled axes and a dropdown for metric selection.

MMartha Cash
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