Skip to main content
SimilarExport ZIP
100%

First Project Prototype – Sleep & Stress Bar Chart

✓ Published0🌍 Public
Ccsabavath@wpi.edu
Last edited Sep 23, 2025
Created on Sep 23, 2025

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

Ccsabavath@wpi.edu
95% 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
90% match
Loading thumbnail…

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.

Ccsabavath@wpi.edu
90% 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
88% match
Loading thumbnail…

“Sleep Hours vs Stress Level – Scatter Plot”

This scatter plot visualizes the relationship between sleep duration and stress levels from the Sleep Health and Lifestyle dataset. Each circle represents an individual, positioned by their nightly sleep hours and stress rating, with color encoding gender and a legend explaining the categories. Built with React, the D3.js code uses `scaleLinear` and `scaleOrdinal` for positioning and color, while `axisBottom` and `axisLeft` create the axes. Tooltips reveal additional details per point, and the plot is rendered as an SVG with bold labels for readability.

Ccsabavath@wpi.edu
88% 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
87% match
Loading thumbnail…

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

This scatter plot visualizes the relationship between sleep duration (hours per night) and stress level (scale of 1–10) using data from a Kaggle sleep health and lifestyle dataset. Each circle represents an individual, colored by gender, with dashed trend lines showing the linear regression per gender. The React application renders an SVG visualization using D3 v7 APIs including `scaleLinear`, `extent`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with the Tableau 10 color scheme. Tooltips display detailed information on hover, while axis labels and a legend clarify the variables and categories.

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
85% match