Skip to main content
SimilarExport ZIP
100%

Reusable Scatter Plot

✓ Published0🌍 Public
PP Manisha
Last edited Oct 26, 2025
Created on Oct 26, 2025

This scatter plot from the D3.js gallery visualizes the relationship between math and reading scores for individual students, with each point positioned by d3.scaleLinear scales and rendered as an SVG circle. The reusable ScatterPlot function, exported from scatterPlot.js, accepts data, accessor functions, and margin/width/height parameters to generate axes via d3.axisLeft and d3.axisBottom. It loads student performance data from a GitHub-hosted CSV file, parsing numeric fields before plotting steelblue circles, with axis labels added using SVG text elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

StudentPerformanceScatter

This scatter plot visualizes the relationship between math and reading scores for a student performance dataset. Each circle represents a student, positioned by their math score on the x-axis and reading score on the y-axis, with steelblue marks at a radius of five units. The example uses D3’s `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs to construct the coordinate system and axes. Data is loaded remotely from a GitHub-hosted CSV file using `d3-fetch`’s `csv` function, with numeric parsing applied to the relevant score columns before rendering to an SVG canvas.

PP Manisha
87% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot displays individual student math scores against science scores from a CSV dataset, with each circle representing one student. The code builds the chart using D3 v6 APIs including `d3.csv`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, rendered as SVG within a full-window container. A custom `scatterPlot` generator function uses getter-setter methods to configure width, height, data, margins, and circle radius, while the axes and labels are added inside the chart’s rendering loop.

Bbharathavulapati@gmail.com
86% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes student scores across subject pairs, cycling through Math-Science, Math-English, and Science-English comparisons. Built with d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft, the chart renders SVG circles on axes with labels. The plot supports configurable dimensions, value mappings, and labels through setter methods, and it redraws dynamically when the metric combination changes. Data loads from a CSV file containing raw marks, which are converted to numeric values for plotting with animation updates.

Bbharathavulapati@gmail.com
85% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between math and reading scores for individual students, with each point's color indicating whether the writing score exceeds 70. Built with D3 v7, the SVG chart uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` with `d3.autoType` to parse the student performance data. Points are rendered as circles with a fixed radius and 70% fill opacity.

RRohith Reddy
85% match
Loading thumbnail…

D3 reusable Scatter Plot

This scatter plot visualizes a student dataset with marks, study time, and course count. Built with D3 v6, it uses a reusable chart pattern with scaleLinear, axisBottom, axisLeft, and SVG circles. The plot cycles its x-axis variable through three columns every five seconds, animating the data transition via setInterval. Data comes from a CSV loaded with d3.csv, and the chart updates in place when the x-value changes.

AArun Pratap
85% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot - q1

A reusable scatter plot shows the relationship between study hours and exam scores across four categories (A–D), with points colored by category and a legend identifying each group. The chart uses D3.js v6 with the reusable chart pattern, implementing scales via `scaleLinear` and `scaleOrdinal`, axes through `axisLeft` and `axisBottom`, and `schemeSet2` for colors. Data is loaded from a CSV file using `d3.csv`, and the plot is rendered as SVG with circles positioned using the configured x and y accessor functions.

Vvijaysaichigullapally1@gmail.com
84% match
Loading thumbnail…

Fork of reusable scatter plot

This scatter plot visualizes the relationship between math and science marks, with each point colored by performance category: green for 'Excellent', orange for 'Average', and red for 'Needs Improvement'. Built using D3 v6, it uses a reusable chart function with setter methods for customization, d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.symbolCircle for point shapes. SVG renders axes, labels, a title, and a legend showing the categories.

Bbharathavulapati@gmail.com
83% match
Loading thumbnail…

Students Performance in Exams Example Scatter Plot

This example visualizes the relationship between reading and math scores for students, using a scatter plot where each point represents an individual student's performance. The SVG markup is rendered with D3 v6, employing `scaleLinear` and `extent` to map data values to pixel coordinates, with `axisLeft` and `axisBottom` providing labeled scales. Data loads asynchronously from a CSV file sourced from Kaggle, and the plot includes custom text labels for axes and a title. Point radius is fixed at three pixels, and axes display scores from zero to one hundred.

Kkwmcclintick
83% match