Skip to main content
SimilarExport ZIP
100%

Fork of Basic Scatter Plot with React & D3

✓ Published1🌍 Public
MMatt Hagger
Last edited Sep 17, 2025
Created on Sep 8, 2025

This scatter plot visualizes the relationship between employee Stress Level and Burnout Level, using data from a CSV file. Each circle represents an employee, positioned by stress on the x-axis and burnout on the y-axis, using D3's `scaleLinear` and `extent` functions. The React app loads the data with `d3.csv`, formats it, and renders the visualization via a `viz` function that uses D3's `select` and `.join` API to create and position the circles.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Basic Scatter Plot with React & D3 with Diabetes Data

A scatter plot visualizes the relationship between Glucose and Insulin levels in a diabetes dataset, with each circle representing a patient. The React app loads the CSV data and passes it to the D3 visualization module. D3's `scaleLinear` and `extent` functions calculate the axis domains, while the `join` operator binds data points to SVG circles, setting their positions, radius, and fill color.

Rrpkupfer@wpi.edu
78% match
Loading thumbnail…

Fork of React & D3 Starter

This visualization presents a scatter plot of emotional states, with each point positioned by x and y coordinates derived from survey responses. The chart encodes user-reported emotions like "Desire," "Enthusiastic," and "Loved" in a 2D space, likely representing dimensions of emotional valence and arousal. Built with React and D3 v7, the code uses a `useData` hook to load CSV data and a `viz` function that constructs an SVG via D3's selection API. The project demonstrates a decoupled React-D3 integration pattern, where the `VizWrapper` component manages the SVG element and invokes the D3 rendering logic through a ref.

CCheng Tang
78% 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
78% 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
78% match
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.

YYuXIA_2025
77% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive bar chart visualizes how average study hours vary across self-reported stress levels, using Red as the bar color with darker and lighter opacities to indicate selected points. The React application loads a student lifestyle dataset with D3's `csv` method, groups data by stress level via `d3.group`, and computes averages with `d3.mean`. Bars are rendered as SVG rectangles with click handlers that toggle selection, while axes, gridlines, and titles are generated using `axisBottom` and `axisLeft`. A ResizeObserver tracks container dimensions to responsively update the chart.

Ssravya7136@gmail.com
77% match
Loading thumbnail…

Fork of Basic Scatter Plot with React & D3 Emissions

This example uses a React app to render a basic scatter plot of CO2 emissions over time. The chart displays data points for various countries and regions from 1960 onward, sourced from a CSV file. The visualization is created using D3.js version 7, with the `select`, `csv`, `scaleLinear`, and `extent` APIs. A React `useEffect` hook loads the data and calls a custom `viz` function to render circles, mapping the year to the x-axis and emission value to the y-axis.

BBrian Hulbert
77% 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
76% match