Sleep vs Stress × Gender (Filters + Error Bars)

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.

88% match

“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.

87% match

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.

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.

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.

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.

sleep-vs-stress-gender-tooltips

A scatter plot displays sleep duration against stress level from a Kaggle sleep health dataset, with points colored by gender and a legend. D3.js v7 renders the SVG, applying linear scales, axes, gridlines, and per-gender dashed regression lines computed via least squares. Hovering a point triggers a custom tooltip showing person ID, gender, sleep, stress, and sleep disorder. React manages the component lifecycle, initializing the chart after asynchronously loading and parsing the CSV.

84% match

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.