Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published1🌍 Public
YYuXIA_2025
Last edited Sep 11, 2025
Created on Sep 11, 2025

This example shows a scatter plot of sleep duration versus stress level, with each point colored by gender, drawn from a Kaggle sleep health dataset. It uses React to manage the SVG container and d3.csv to load and parse the data. The reusable viz.js function builds the chart with d3-scale, d3-axis, and d3-shape, including a Tableau10 ordinal color scale, a legend, and hover tooltips rendered as SVG `<title>` elements.

AI-generated description
MIT Licensed

Similar vizzes

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
96% 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
90% 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…

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
89% 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
88% 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
86% 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
82% 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
80% match