Project Momentum Sleep Efficiency Dataset

100%

Project Momentum Sleep Efficiency Dataset

✓ Published0🌍 Public

Last edited Apr 21, 2023

Created on Mar 27, 2023

This visualization compares average sleep metrics by gender using a bar chart of data from a sleep efficiency CSV dataset. A dropdown menu lets users switch between features like sleep efficiency, exercise frequency, caffeine consumption, and sleep-stage percentages. The chart is built with D3 v7, using `scaleBand` for the categorical x-axis and `scaleLinear` for the y-axis, with custom axis labels. Data is fetched as CSV, parsed with `csvParse`, and aggregated on the fly for male and female averages.

AI-generated description

New technique: Use a button that changes the color scheme of the data. This will be useful for implementing the interactivity element portion of this project.

Button element/color: https://d3-graph-gallery.com/graph/barplot_button_color.html Color scheme: https://observablehq.com/@d3/color-schemes Button implementation: https://vizhub.com/curran/9ccb874276ad4e1bac8b03b8eb233aee?edit=files&file=index.html

MIT Licensed

Similar vizzes

Loading thumbnail…

Average Sleep Efficiency vs. Gender

This visualization shows the average sleep efficiency for males and females as a two-bar bar chart. Using D3 v7, it computes the mean sleep efficiency from a CSV dataset loaded via `fetch`, then renders the results with `scaleBand` and `scaleLinear`. The bars are colored with `schemeDark2`, and the chart includes labeled axes created with `axisLeft` and `axisBottom`, along with custom axis labels.

MMartha Cash

84% match

Loading thumbnail…

Average Sleep Efficency per Gender

A bar chart shows the average sleep efficiency percentage for male and female participants, with two labeled bars using the Dark2 color scheme. The visualization loads CSV data from a GitHub gist, calculates mean sleep efficiency per gender in JavaScript, and renders the result using D3 v7’s scaleBand and scaleLinear, along with axis components built from d3.axisLeft and d3.axisBottom. The chart updates responsively to the window size and includes labeled axes for gender and average sleep efficiency.

MMartha Cash

82% match

Loading thumbnail…

project-momentum-color

This interactive 100% stacked bar chart visualizes the distribution of sleep disorders (None, Insomnia, Sleep Apnea) across binned stress levels for a synthetic "Sleep Health & Lifestyle" dataset, with a gender filter and clickable legend. Built with D3 v7 and React, the visualization computes proportional segments per stress bin, using an ordinal color scale and animated transitions via `transition().duration()` to update bars when the gender select changes. Hovering a segment reveals a tooltip with exact percentages and category counts, while the legend filters which disorder categories are displayed.

Ccsabavath@wpi.edu

78% match

Loading thumbnail…

Week 7 – Project Momentum: Color assignment.

This visualization presents a 100% stacked bar chart showing the distribution of sleep disorders (None, Insomnia, Sleep Apnea) across three stress-level bins (Low, Medium, High), with a dropdown filter for gender. Built with D3 v7, it uses `d3.scaleOrdinal` for color assignment, `d3.stack` for stacking, and SVG rendering with animated transitions via `transition().duration(400)`. The chart dynamically updates its title to reflect the selected gender and sample count, drawing from the Sleep Health & Lifestyle dataset.

Ccsabavath@wpi.edu

78% match

Loading thumbnail…

Fork of project-momentum-Hover

This visualization shows the percentage of people with different sleep disorders across three stress-level bins, filtered by gender via a dropdown. The chart uses stacked bar segments colored by disorder category, with a legend that supports highlighting and filtering on hover. Built with D3 v7, it uses `d3.stack`, `d3.scaleOrdinal`, and `d3.scaleBand` with transitions on rect joins to animate updates. Data comes from a CSV of sleep health records, summarized into percentages per stress bin.

Ccsabavath@wpi.edu

77% match

Loading thumbnail…

Fork of Week 7 – Project Momentum: Color assignment.

This visualization displays the prevalence of sleep disorders (None, Insomnia, Sleep Apnea) as a 100% stacked bar chart, segmented by binned stress levels (Low, Medium, High) and filterable by gender. A legend allows users to toggle categories on or off, with hover and click interactions updating the display. The chart uses D3 v7’s `d3.stack()`, `d3.scaleBand()`, and `d3.scaleOrdinal()` to compute and color the proportional segments, with smooth transitions applied to bar heights via `transition().duration()`. Data comes from a CSV file on sleep health and lifestyle.

Ccsabavath@wpi.edu

77% match

Loading thumbnail…

Fork of Project Momentum: Start Polishing

This interactive bar chart compares medical metrics between male and female patients, with a dropdown menu to switch the y-axis among five health indicators including Max Heart Rate, Resting Blood Pressure, and Cholesterol. Built with React and D3 v7, the visualization aggregates the CSV data by sex and renders average values as color-coded bars, using `d3.scaleBand` and `d3.scaleLinear` for positioning. Clicking a bar highlights that gender while dimming the other, and a legend identifies the male (steelblue) and female (pink) categories.

AAbhi Yammanuru

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

75% match