Fork of project-momentum-Hover

100%

Fork of project-momentum-Hover

✓ Published1🌍 Public

Last edited Oct 29, 2025

Created on Oct 28, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

89% match

Loading thumbnail…

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.

Ccsabavath@wpi.edu

89% 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

88% match

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

86% 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

86% 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

Loading thumbnail…

Fork of “Sleep Hours vs Stress Level – Scatter Plot”

This scatter plot visualizes the relationship between sleep duration and stress levels from a Kaggle dataset, with points colored by gender. Built with React and rendered as an SVG, the visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `schemeTableau10`, and `axisBottom`/`axisLeft` for axes, plus a legend and tooltips. The chart includes bold labels, a title, and interactive hover details showing person ID and sleep disorder.

Ccsabavath@wpi.edu

83% match