Viewing a saved revision (read-only)
3d2f2ae1ff7d48f088d8c69f8e5f8f31
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 sterses (7–0) → More Insomnia & Sleep Apnea - Lo wsrerss( 1(3) → Mostly “None” (healthy sleep) - eFemael hshowslightly higher Sleep Apnea at high stress
#- ** * #🗓 ️eek 11 P — Pje Mct Momenm · Start Polishing Th
is week’gos w to tma tkehe t sualization pre\psentation-ready***\ wh itbah ncelad yout, smooth teractis,s, and clear storytelngli.