shish's scatterplot- ice6

100%

shish's scatterplot- ice6

✓ Published0🌍 Public

Last edited Oct 20, 2025

Created on Oct 20, 2025

This scatterplot visualizes the relationship between sleep duration and stress level, with each point representing a participant. The x-axis shows sleep duration in hours, while the y-axis tracks stress levels. Semi-transparent steelblue circles, each with a radius of five pixels, reveal the distribution and density of data points. Built with D3 v7, the visualization uses `d3.scaleLinear` for both axes, `d3.extent` for domain calculation, and `d3.axisBottom` and `d3.axisLeft` for tick marks. The data comes from a sleep health dataset loaded via `d3.csv`, and the chart is rendered as SVG within a styled HTML page.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

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

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

80% match

Loading thumbnail…

Shish's barchart- ice6

This bar chart shows the average sleep duration for various occupations, with each bar colored distinctly using D3’s `schemeTableau10`. The data is read from a CSV file via `d3.csv`, grouped by occupation with `d3.group`, and aggregated with `d3.mean`. The visualization is built using D3 v7’s SVG rendering, with a band scale (`d3.scaleBand`) for categories and a linear scale for the y-axis. Axis labels are rotated for readability, and the chart is rendered inside a styled HTML container.

SSai Shishir Koppula

78% match