Viewing a saved revision (read-only)
b7b9ff8eb6fb4da5bfc7d560fddb9f08
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.
AI-generated descriptionSleep 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
- -Hig s tress (7–10)** → More Insomnia & Sleep Apnea - *Lo wstress (1–3) → Mostly “None” (healthy sleep) - emeales show slightly higher Sleep Apnea at high stress
#-**
#🗓️ eeWWk11 — Project Momentum · Start Polishing Th
week’gos al was to make the visualization p \presentationeady, *\ with lalceand layout, smooth inacertnsio, nsd clear storytelling.