Fork of one

100%

✓ Published0🌍 Public

Last edited Oct 28, 2025

Created on Oct 28, 2025

Forked from one

This example presents a reusable scatter plot that visualizes student performance, mapping study hours on the x-axis, scores on the y-axis, and gender as a categorical color. Built with D3 v7, the chart is rendered as SVG and uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` for color encoding. Data is loaded from an external CSV file, and tooltips reveal additional attributes. The scatter plot function is designed for reusability, allowing it to be applied to any dataset with matching fields.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

one

A reusable D3.js scatter plot visualizes student performance, mapping study hours on the x-axis and test scores on the y-axis, with circles colored by gender (blue for Male, pink for Female). Built with d3.v7, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color encoding, and `d3.axisBottom`/`d3.axisLeft` for tick marks. The chart loads `students.csv` via `d3.csv` and appends `title` elements for tooltips, rendering as SVG with margins and labeled axes.

Mmsahithipatel@gmail.com

85% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot - vijq1

This example presents a reusable scatter plot that visualizes the relationship between study hours and exam scores, with points colored by four categories (A through D). Built with D3 v7, the chart uses `scaleLinear` for both axes, `scaleOrdinal` with `schemeSet2` for categorical coloring, and `axisLeft`/`axisBottom` for labeling. A legend is rendered manually, while the `scatterPlot` module follows the “Towards Reusable Charts” pattern with chainable setters. The data comes from an external CSV file, parsed with numeric conversion before rendering as SVG circles.

Vvijaysaichigullapally1@gmail.com

85% match

Loading thumbnail…

Fork of Fork of Fork of scatter plot

A forked D3.js v7 scatter plot visualizes the relationship between Math and Science scores for students in a CSV dataset, with points colored by academic department. It uses `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `d3.schemeSet2` for categorical coloring. Points are rendered as SVG circles with hover tooltips, alongside a legend identifying departments.

Ssainishanthreddyk@gmail.com

84% 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

83% match

Loading thumbnail…

Fork of Fork of Fork of Fork of scatter plot

A scatter plot visualizes the relationship between math and science scores for 90 students. Each dot is positioned by score, colored by academic department, and includes a hover tooltip with the student’s name and scores. The D3.js v7 code uses `d3.csv` to load `scatter.csv`, `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeSet2` for color, and `d3.axisBottom`/`d3.axisLeft` to render the chart with an SVG-based legend.

Ssainishanthreddyk@gmail.com

83% 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

83% 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…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes the relationship between hours studied and test scores for a small student dataset. It uses `d3.scaleLinear` for both axes, with a steelblue, semi-transparent circle for each data point. The chart is rendered as an SVG, created by a `createScatterPlot` function that clears any existing SVG for reuse. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and labels are added for both “Hours Studied” and “Test Score”. The code is written for D3 v3 and is licensed under the MIT license.

Ssdarsi2404@gmail.com

82% match