Skip to main content
SimilarExport ZIP
100%

“Sleep Hours vs Stress Level – Scatter Plot”

✓ Published3🌍 Public
Ccsabavath@wpi.edu
Last edited Sep 11, 2025
Created on Sep 9, 2025

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.

AI-generated description

Sleep Duration vs Stress Level (Scatter Plot)

Dataset

This visualization uses the Sleep Health and Lifestyle Dataset from Kaggle.
It includes 374 individuals with information on demographics, sleep duration, stress levels, lifestyle factors, and sleep disorders.

Visualization

I created a scatter plot comparing Sleep Duration (hours/night) with Stress Level (1–10).

  • Points are color-coded by Gender, with a clear legend.
  • Tooltips show details for each person.
  • Axis labels and title are bold for readability.

Goal

The goal was to build a first visual of the dataset and explore how sleep relates to stress levels.
This plot satisfies the assignment requirements and adds extra polish with legend, labels, and tooltips.

MIT Licensed

Similar vizzes

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
94% 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
91% 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
88% match
Loading thumbnail…

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.

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

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

This fork of “Sleep Hours vs Stress Level” plots sleep duration against self-reported stress from a Kaggle CSV, with circles colored by gender and a legend identifying the categories. The React app loads the data via `d3.csv`, then passes it to a reusable `viz()` function that renders an SVG scatter plot. `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal` with `schemeTableau10` handle scales, axes, and categorical colors, while a `d3.select` loop appends circles and title tooltips.

YYuXIA_2025
85% match
Loading thumbnail…

Fork of Fork of HTML Starter

This scatter plot visualizes the relationship between sleep duration and stress level from a Kaggle dataset on sleep health and lifestyle, with points colored by gender and a legend for reference. Built with React and D3 v7, the chart uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeTableau10` for categorical coloring, and `d3.axisBottom`/`axisLeft` for ticks. Hovering over a point reveals a tooltip with details on person ID, gender, sleep, stress, and sleep disorder, rendered as SVG circles via a `for..of` loop.

YYuXIA_2025
84% match
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
84% match