Scatter Plot of Sleep Efficiency Dataset

100%

Scatter Plot of Sleep Efficiency Dataset

✓ Published0🌍 Public

Last edited Mar 22, 2023

Created on Mar 22, 2023

Forked from Fork of Fork of Fork of ICE-6 Scatter Plot

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Fork of BONUS ICE 1: 3D Scatter Plot

This example visualizes the relationship between age, sleep duration, and sleep efficiency as a 3D scatter plot. Each point represents an individual, with yellow markers outlined in black, positioned along three axes that display the variables. The code loads CSV data from a GitHub gist using D3’s `d3.csv` function, then constructs the trace with Plotly’s `scatter3d` type and renders it via the `Plotly.newPlot` API. Axis titles and marker styling are configured through the layout and trace objects.

DDineshK2602

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

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

81% match

Loading thumbnail…

ICE 6 Scatter Plot Manasa V Jadda

This scatter plot visualizes sleep efficiency against age, with each circle colored by deep sleep stage and sized to reflect sleep duration and REM sleep percentage. It uses D3 v6’s `csv` loader to parse the sleep-efficiency dataset, `scaleLinear` for both axes, and `axisLeft`/`axisBottom` for tick marks. The SVG is rendered full-window with static circle markers, colored via a hardcoded switch on species-like values, and manually rotated axis labels styled with inline fonts.

MManasa891-git

81% match

Loading thumbnail…

Sleep Efficiency vs. Age

This scatterplot shows the relationship between age and sleep efficiency, revealing a linear trend among younger individuals that disappears after about age 20. The visualization uses d3.scaleLinear for both axes and d3.scaleOrdinal with schemeCategory10 to color points by age. Data is loaded from a CSV file via d3.csvParse and processed with d3.flatRollup to aggregate observations before rendering circles with d3’s join pattern.

MMartha Cash

80% match

Loading thumbnail…

Fork of Fork of Sleep Efficiency vs. Age

This scatterplot visualizes the relationship between age and sleep efficiency, with data points colored by smoking status. The chart reveals a linear trend until age 20, after which no clear correlation exists, answering the question of whether sleep efficiency correlates with age. Built with D3 v7, the visualization uses `scaleLinear` for axes, `schemeCategory10` for color encoding, and `axes.js` for labeled axis rendering. Data is fetched from a CSV and parsed via `csvParse`, then plotted with circles at 8-pixel radius with 0.6 opacity.

CCurran Kelleher

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

78% match

Loading thumbnail…

Fork of Sleep Efficiency vs. Age

This visualization plots sleep efficiency against age, showing a linear relationship until roughly age 20 and no relationship afterward. Each circle represents a person, colored by gender. The scatterplot uses `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for color encoding, and `d3.csvParse` to load the data. Axes are rendered with `axisLeft` and `axisBottom` from D3 v7.

CCurran Kelleher

78% match