Fork of first

100%

✓ Published0🌍 Public

Last edited Apr 24, 2026

Created on Apr 24, 2026

Forked from first

This interactive bubble chart visualizes student academic stress levels, grouped by study environment (Peaceful, Noisy, Disrupted, Unknown). Color encodes the stress index via a threshold scale (green, yellow, red), while circle radius scales with the stress value. A dropdown filters by academic stage. Built with d3.v7, it uses `d3.forceSimulation`, plus the `forceX`, `forceY`, and `forceCollide` forces to cluster data points. A tooltip reveals detailed pressure metrics on hover. The data is loaded from a raw CSV file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of D3 Starter

This visualization displays student academic stress levels as a force-directed bubble cluster, with each circle representing an individual student. Users can filter by academic stage via a dropdown menu. Bubble color encodes stress intensity using a threshold scale (green, yellow, red), while bubbles cluster by study environment category (peaceful, noisy, disrupted, unknown). Implemented with d3.csv, d3.forceSimulation, d3.forceX/Y, and d3.forceCollide, the SVG rendering includes interactive tooltips showing stress, peer pressure, and home pressure details. Data is loaded from a remote CSV dataset hosted on GitHub.

Kkoushika.3002@gmail.com

93% match

Loading thumbnail…

third

This visualization shows student academic stress levels as a bubble cluster chart, with circles colored by stress index (green, yellow, red) and grouped by study environment using d3.forceSimulation to position them around labeled cluster centers. A dropdown filters by academic stage, and hovering reveals tooltips with peer pressure and home pressure details. The code loads CSV data from a GitHub repository and renders the SVG using d3.v7, with a legend on the right side explaining the color scale.

Hh.harrycoding@gmail.com

87% match

Loading thumbnail…

fourth

This visualization shows how student academic stress levels cluster by study environment across different academic stages. An interactive dropdown filters the dataset by academic stage, while a force-directed layout positions each student as a bubble whose size corresponds to their stress index and color reflects the same scale. The code uses d3.forceSimulation with forceX, forceY, and forceCollide to group students into labeled clusters like “Peaceful” and “Noisy” based on their study environment. Data is loaded from a remote CSV, and a tooltip reveals detailed information on hover.

Hh.harrycoding@gmail.com

87% 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 Fork of Fork of Hello VizHub

This interactive pie chart visualizes student mental health and academic data, letting the viewer examine the distribution of records across categories like stress levels, depression, relationship status, and grades. Selecting a different attribute from the dropdown redraws the chart based on precomputed counts from the CSV data. Built with D3 v7, the example uses `d3.csv`, `d3.rollup`, `d3.pie`, and `d3.arc` to generate SVG paths and labels, with hover interactions that expand a slice and trigger a tooltip. A categorical color scale, `d3.scaleOrdinal`, with the `d3.schemeTableau10` palette colors each segment.

Jjayakrishnanallani5@gmail.com

76% match

Loading thumbnail…

stress levels by major

A pie chart visualizes the distribution of students across majors, with each slice sized by the total number of students in that major. Hovering over a slice pops it outward and displays a tooltip breaking down the count of students with high, medium, and low stress levels for that major. Clicking a slice updates a text box below the chart with the major’s name and total student count. The visualization uses d3.pie, d3.arc, and d3.rollup to process CSV data and render SVG paths, with transitions animating the slice offset on hover.

Ddeekshakondam@gmail.com

76% match

Loading thumbnail…

Fork of Donut

This bar chart displays the average stress level for various occupations, using a horizontal layout with a sequential plasma color scale. The visualization is built with D3.js (v7), utilizing `d3.select`, `d3.csv`, `d3.rollups`, and `d3.scaleBand`/`d3.scaleLinear` to process and aggregate data from a remote CSV file. Bars are drawn as SVG rectangles, with axis labels and a title, all rendered in an SVG container.

Vvaishumamidi3@gmail.com

75% match

Loading thumbnail…

final project

This bar chart visualizes the relationship between students’ stress levels and their average grades, grouping data by low, medium, and high stress. The visualization uses D3 v7 to load a CSV file from a GitHub gist, aggregate averages with `d3.rollup`, and render the results as SVG rectangles. It employs `scaleBand` for the categorical x-axis and `scaleLinear` for the y-axis, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The chart’s rotating axis labels and centered annotations clarify the stress-level categories and grade values.

Ssarikakannikanti@gmail.com

75% match