YuXIA_2025

@yuxia2025·3 public vizzes

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.

Sep 11, 2025

Loading thumbnail…

Fork of HTML Starter

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.

Sep 11, 2025

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.

Sep 11, 2025