Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Fork of React & D3 Starter Scatter plot

✓ Published1🌍 Public
Mmichael_chuxs@yahoo.com
Last edited May 29, 2026
Created on May 29, 2026

This scatter plot shows the relationship between daily study hours and grade change for students, comparing those who use AI against those who do not. The D3.js v7 code loads CSV data via `d3.csv`, filters incomplete records, and renders SVG circles colored by AI usage with an ordinal scale. Interactive tooltips appear on mouseover, while axes and a legend are generated using `d3.axisBottom`, `d3.axisLeft`, and scale functions for linear positioning.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of React & D3 Starter

A bar chart compares average grade improvement across AI tool purposes, with each bar height representing the mean grade change for that category. The chart highlights how different reasons for using AI correspond to varying academic outcomes. Built with D3 v7, it loads CSV data via `d3.csv`, aggregates values using `d3.rollups` and `d3.mean`, and scales axes with `d3.scaleBand` and `d3.scaleLinear`. Rendered as SVG, bars include hover tooltips for detail, and the chart is sorted from highest to lowest average improvement.

Mmichael_chuxs@yahoo.com
87% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of React & D3 Starter LINE cHART

This line chart compares average student grades before and after AI usage across age groups, using two colored lines with circular markers for each data point. Hovering over a marker displays a tooltip with the exact age and grade value. The visualization loads CSV data from a GitHub repository, processes it with `d3.rollups` and `d3.mean` to aggregate averages per age, and renders the chart as SVG using `d3.line`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. A custom legend distinguishes the two grade series.

Mmichael_chuxs@yahoo.com
86% match
Loading thumbnail…

Fork of Fork of Fork of React & D3 Starter PIE

This example presents a pie chart visualizing the distribution of students who use AI compared to those who do not, based on a CSV dataset loaded from GitHub. The chart uses d3.pie and d3.arc to generate SVG slices, with d3.rollups aggregating counts from the loaded data. Interactive tooltips display exact student counts and percentages on hover, while percentage labels appear inside each slice and a legend shows category totals. The color scale uses d3.scaleOrdinal with a custom palette.

Mmichael_chuxs@yahoo.com
85% match
Loading thumbnail…

Fork of React & D3 Starter

This scatter plot visualizes the relationship between student study hours and exam marks, with a summary showing total students and averages. It uses D3 v7’s `d3.csv` to load data, `scaleLinear` for axes, and `d3.axisBottom`/`axisLeft` for the coordinate system. The React wrapper (index.jsx) renders an SVG, while the standalone HTML version draws semitransparent steelblue circles for each student. Data comes from a raw GitHub CSV file hosted by the author, and the chart includes axis labels for hours and marks.

YYash Raj Mathur
84% match
Loading thumbnail…

Scatter Plot - Study Hours vs Grade Change

A scatter plot visualizes the relationship between study hours per day and grade change, with each point colored red or green to indicate whether a student uses AI. The tooltip reveals detailed attributes per student, including AI usage, tools used, and grades before and after AI. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and SVG circles with mouseover events for interactivity. Data comes from a cleaned CSV file hosted on GitHub, filtered to include only valid records.

Mmichael_chuxs@yahoo.com
84% match
Loading thumbnail…

Fork of Fork of React & D3 Starter

This dashboard visualizes student AI usage data, showing how study habits, grades, and screen time relate to the adoption of tools like ChatGPT, Copilot, and Gemini. It presents four coordinated views—a pie chart, bar chart, scatter plot, and line chart—built with React 19 and D3 v7. Data is loaded from a remote CSV using `d3.csv` and processed with D3's array methods. Each chart is rendered by separate functions, `drawPieChart`, `drawBarChart`, `drawScatterPlot`, and `drawLineChart`, which use D3 selections and scales to encode the dataset's variables.

Mmichael_chuxs@yahoo.com
83% match
Loading thumbnail…

Fork of D3 Starter - ice 7 - scatter plot

This scatter plot visualizes the relationship between study hours and exam scores for 120 students, with each point colored by category (A–D) and a legend mapping colors to these groups. The D3 v7 code loads data from a CSV file, converts the numeric columns, and uses `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG chart. Axes are labeled, and the plot uses a built-in color scheme (`d3.schemeSet2`).

Vvijaysaichigullapally1@gmail.com
83% match
Loading thumbnail…

Fork of Fork of Fork of React & D3 Starter

This interactive scatter plot visualizes the relationship between salary (in USD) and AI risk score for various job titles, with each point colored by job category based on data loaded from a GitHub Gist. It uses d3.csvParse or d3.tsvParse to handle the data, d3.scaleLinear for both axes, d3.scaleOrdinal with combined color schemes, and d3.axisBottom/axisLeft to render gridlines and tick labels. Hovering over a circle triggers a tooltip showing job title, country, salary, and AI risk score, while a legend displays the first twelve job categories.

Llohithkumar51001@gmail.com
82% match