Viewing a saved revision (read-only)
df153f57786c48d1b286e3136b0cc137
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
- -High sterss(7(–10) → More Insomnia & Sleep Apnea - Lo w sress( 1–3) → Mostly “None” (healthy sleep) - eemlaes hohw slightly higher Sleep Apnea at high stress
#- **
#🗓 ️ Week 11 Proje Mom Mentum · Start Polishing Th
wees k’goal w t to ma tkehe visualization p\presentation-ready**\ wh itbalancelad layout, smooth teractis,onncleaclr orstytorling.