Skip to main content
SimilarExport ZIP
100%

third

✓ Published0🌍 Public
Hh.harrycoding@gmail.com
Last edited Apr 21, 2026
Created on Apr 21, 2026
Forked from first

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.

AI-generated description
MIT Licensed

Similar vizzes

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
92% match
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
88% match
Loading thumbnail…

Fork of 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.

Kkoushika.3002@gmail.com
87% 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
79% match
Loading thumbnail…

final project

This bar chart displays the average student grades (on a 3-point scale where A=3, B=2, C=1) grouped by self-reported stress level, sorted from highest to lowest average grade. The visualization uses D3 v7’s `d3.csv` to load remote CSV data about student grades and mental health, then applies `d3.group` and `d3.mean` to aggregate values. Rendered as SVG rectangles with a `d3.scaleBand` x-axis and `d3.scaleLinear` y-axis, bars change color on hover via CSS.

Ssarikakannikanti@gmail.com
79% match
Loading thumbnail…

two bar charts

This visualization shows the distribution of current student grades (A, B, C, D, F) across three stress levels (Low, Medium, High) using a single bar chart. Users can click legend items to filter the display to a specific grade, highlighting the selected legend entry and updating the bars accordingly. The chart loads CSV data via d3.csv, aggregates counts and averages (study hours and social media platforms) per grade-stress combination, and renders SVG bars with a tooltip. Built with D3 v7, it uses d3.mean for aggregation and d3.select for DOM manipulation.

Ddeekshakondam@gmail.com
78% match
Loading thumbnail…

activity 7

This pie chart visualizes the distribution of stress levels among students, categorizing responses as Low, Moderate, High, or Very High. It uses d3.pie and d3.arc to generate the pie slices, d3.rollups to aggregate the CSV source data, and d3.scaleOrdinal with d3.schemeCategory10 for coloring. A legend and white stroke separators clarify the categories, with d3.arc centroid positioning for labels. The visualization renders as static SVG.

Mmanasapolisetty13@gmail.com
78% match
Loading thumbnail…

Final project

This bar chart shows the relationship between students' self-reported stress levels and their average grades, with the data grouped into Low, Medium, and High stress categories. The chart uses D3 v7 to load a CSV file, group the data with `d3.group`, and calculate means with `d3.mean`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while bars are rendered as SVG rectangles that change color on hover.

Ssarikakannikanti@gmail.com
78% match