First Project Prototype – Sleep & Stress Bar Chart
This grouped bar chart shows how average sleep duration varies across three stress-level bins (low, medium, high) for females and males, revealing that higher stress corresponds to fewer sleep hours. Built with D3 v7 and React, the visualization loads CSV data via `d3.csv`, aggregates with `d3.rollups` and `d3.mean`, and renders SVG bars through `d3.scaleBand` and `d3.scaleLinear`. A Tableau10 color scale encodes gender, while value labels and a small legend clarify the comparison.
AI-generated descriptionFirst Project Prototype – Sleep & Stress Bar Chart
Goal. Use a new technique (bar chart) to show how average sleep hours vary across stress categories, split by gender.
Dataset. Sleep Health & Lifestyle (survey). Columns
used: Sleep Duration (hours/night), Stress Level (1–10),
Gender.
Encoding.
- X: Stress Level binned → Low (1–3), Medium (4–6), High (7–10)
- Y: Average Sleep Duration (hours/night)
- Color: Gender (Male, Female)
- Labels: 1-decimal averages; annotation marks the lowest group
Key Insight. Higher stress is associated with fewer sleep hours; females are slightly lower than males in each bin.
Limitations. Prototype summarizes with simple means; no distribution, CIs, or confounders (age, BMI, caffeine) yet.
Next Steps. Add error bars (±SE), tooltips, and an interactive control to switch statistic (mean/median) or grouping.