fork of Finishing Touches

100%

fork of Finishing Touches

✓ Published1🌍 Public

Last edited Nov 30, 2025

Created on Nov 21, 2025

Forked from project-momentum–start-polishing

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.

AI-generated description

Week 12 — Finishing Touches (Polished Update)

This week I focused on final cleanup instead of adding new charts. I updated the color scheme so “None” is a neutral gray and both disorder categories (Insomnia + Sleep Apnea) use related blues, which makes the healthy vs disordered grouping clearer. I also improved the subtitle and axis labels to mention the original 1–10 stress scale. A new View dropdown was added (All categories / Disorders only) so users can quickly focus on just Insomnia and Sleep Apnea. I refined legend spacing, added a small legend note (“Healthy: None · Disordered: Insomnia + Sleep Apnea”), and adjusted layout so everything fits neatly on screen. Overall, the chart is cleaner, easier to read, and highlights the patterns much better.

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

Ccsabavath@wpi.edu

90% match

Loading thumbnail…

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.

Ccsabavath@wpi.edu

89% match

Loading thumbnail…

Fork of project-momentum-Hover

This visualization shows the percentage of people with different sleep disorders across three stress-level bins, filtered by gender via a dropdown. The chart uses stacked bar segments colored by disorder category, with a legend that supports highlighting and filtering on hover. Built with D3 v7, it uses `d3.stack`, `d3.scaleOrdinal`, and `d3.scaleBand` with transitions on rect joins to animate updates. Data comes from a CSV of sleep health records, summarized into percentages per stress bin.

Ccsabavath@wpi.edu

89% match

Loading thumbnail…

Fork of Week 7 – Project Momentum: Color assignment.

This visualization displays the prevalence of sleep disorders (None, Insomnia, Sleep Apnea) as a 100% stacked bar chart, segmented by binned stress levels (Low, Medium, High) and filterable by gender. A legend allows users to toggle categories on or off, with hover and click interactions updating the display. The chart uses D3 v7’s `d3.stack()`, `d3.scaleBand()`, and `d3.scaleOrdinal()` to compute and color the proportional segments, with smooth transitions applied to bar heights via `transition().duration()`. Data comes from a CSV file on sleep health and lifestyle.

Ccsabavath@wpi.edu

87% match

Loading thumbnail…

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.

Ccsabavath@wpi.edu

87% match

Loading thumbnail…

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

Ccsabavath@wpi.edu

87% match

Loading thumbnail…

Week 7 – Project Momentum: Color assignment.

This visualization presents a 100% stacked bar chart showing the distribution of sleep disorders (None, Insomnia, Sleep Apnea) across three stress-level bins (Low, Medium, High), with a dropdown filter for gender. Built with D3 v7, it uses `d3.scaleOrdinal` for color assignment, `d3.stack` for stacking, and SVG rendering with animated transitions via `transition().duration(400)`. The chart dynamically updates its title to reflect the selected gender and sample count, drawing from the Sleep Health & Lifestyle dataset.

Ccsabavath@wpi.edu

85% match

Loading thumbnail…

Fork of Assignment 5 - Prototype 2

This interactive scatter plot visualizes the relationship between sleep duration and stress level, with individual data points colored by gender. The visualization, built with React and D3 v7, loads data from a Kaggle CSV file and renders an SVG chart. It includes axes with labels, a legend, and per-gender dashed trend lines computed via least-squares regression. Tooltips display detailed information about each person’s ID, gender, sleep duration, stress level, and sleep disorder. The chart employs D3’s `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` functions for scaling and axes, with `schemeTableau10` providing the color palette.

Ccsabavath@wpi.edu

84% match