Skip to main content
SimilarExport ZIP
100%

project-momentum–start-polishing

✓ Published1🌍 Public
Ccsabavath@wpi.edu
Last edited Nov 21, 2025
Created on Nov 5, 2025

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.

AI-generated description

Sleep Disorders by Stress × Gender

This week, I focused on polishing and finalizing my data visualization for the Sleep Health & Lifestyle Dataset.

The 100% stacked bar chart shows how stress levels relate to different sleep disorders, with a gender filter to compare results between males and females.

✨ Key Improvements

  • Added hover labels showing % and counts
  • Added interactive legend to toggle sleep disorder categories
  • Styled with Google Font (Poppins) for a polished look
  • Adjusted title/subtitle spacing and improved color balance
  • Added smooth hover transitions and refined tooltips
  • Finalized dropdown filter for gender view (All, Male, Female)

🧠 Insights

-High stress (7–10) → More Insomnia & Sleep Apnea - Low stress (1–3) → Mostly “None” (healthy sleep) - Females show slightly higher Sleep Apnea at high stress

🗓️ Week 11 — Project Momentum · Start Polishing

This week’s goal was to make the visualization * \presentation-ready****\ with balanced layout, smooth teractions, and clear storytelling.

MIT Licensed

Similar vizzes

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

Sleep Health- Interactive Visualization Dashboard

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.

Ccsabavath@wpi.edu
90% match
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
89% 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
88% 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
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
88% match
Loading thumbnail…

First Project Prototype – Sleep & Stress Bar Chart

This scatter plot visualizes the relationship between sleep duration and stress level, with points colored by gender and dashed trend lines showing the per-group linear regression. It uses D3 v7 functions like `d3.scaleLinear`, `d3.axisBottom`, and `d3.scaleOrdinal` on an SVG canvas, loading survey data from a Kaggle CSV. A legend and hover tooltips reveal additional details, while the chart highlights how higher stress correlates with reduced sleep, particularly for females.

Ccsabavath@wpi.edu
87% 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
87% match