Sleep Health- Interactive Visualization Dashboard

100%

Sleep Health- Interactive Visualization Dashboard

✓ Published0🌍 Public

Last edited Dec 4, 2025

Created on Dec 4, 2025

This interactive dashboard visualizes sleep disorder prevalence across low, medium, and high stress levels, using 100% stacked bars with animated transitions. Users filter by gender and toggle between all categories or disorders only, with hover tooltips and clickable legend items that isolate healthy versus disordered sleep groups. Built with React and D3 v7 (d3.scaleBand, d3.stack), the SVG chart renders from a CSV dataset and updates bins and counts dynamically. The animation and ordinal color scale highlight how higher stress correlates with increased Insomnia and Sleep Apnea rates.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

fork of Finishing Touches

This visualization shows a 100% stacked bar chart of sleep disorder prevalence across stress levels, using data from a sleep health and lifestyle dataset. The chart displays the proportion of people with no disorder, insomnia, or sleep apnea, with a gray and two blue color scheme to distinguish healthy from disordered sleep. Users can filter by gender and view only disorder categories through dropdown menus, while hovering reveals exact percentages via a tooltip. The implementation uses D3 v7 with d3.stack, d3.scaleOrdinal, and d3.axisBottom/Left to render the SVG with interactive animation.

Ccsabavath@wpi.edu

90% match

Loading thumbnail…

project-momentum–start-polishing

This 100% stacked bar chart explores how stress levels relate to sleep disorders, allowing viewers to filter by gender and toggle categories through an interactive legend. Built with D3 v7 and React, it bins stress scores into low, medium, and high groups, displaying the proportion of people with no disorder, insomnia, or sleep apnea. Hovering reveals exact percentages and counts, while the chart uses a sequential color palette with SVG animation for smooth transitions, sourced from the Sleep Health & Lifestyle dataset.

Ccsabavath@wpi.edu

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

90% match

Loading thumbnail…

“Sleep disorders % by stress — 100% stacked bar”

This chart displays the percentage distribution of sleep disorders (None, Insomnia, Sleep Apnea) across low, medium, and high stress categories, with each bar representing a 100% stacked composition. The visualization uses D3 v7’s `d3.rollup` for data aggregation, `d3.stack` for layer generation, and SVG for rendering. It reads from a CSV file containing lifestyle and health metrics, binarizes stress levels into three groups, and employs an ordinal color scale with a custom tooltip for interactive detail inspection.

Ccsabavath@wpi.edu

89% match

Loading thumbnail…

Sleep vs Stress × Gender (Filters + Error Bars)

This interactive visualization displays the percentage distribution of sleep disorders—None, Insomnia, and Sleep Apnea—across three stress-level bins (Low, Medium, High). A dropdown filter restricts the visual to All, Male, or Female respondents, dynamically updating the stacked bar chart and title with the selected gender and sample size. Built with d3.v7 and React, the chart uses D3’s `scaleBand`, `stack`, and `transition` APIs to animate bar segments, with tooltips showing exact counts and percentages. Data comes from the bundled `data.csv` file.

Ccsabavath@wpi.edu

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

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

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

86% match