Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot - vijq1

✓ Published0🌍 Public
Vvijaysaichigullapally1@gmail.com
Last edited Oct 25, 2025
Created on Oct 25, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of Scatter Plot Ice 7

This reusable scatter plot visualizes the relationship between study hours and exam scores using a green circular mark for each data point. Built with D3 v7, the visualization implements a functional chart factory pattern with configurable accessor functions for x and y values, margins, dimensions, and point radius. The chart renders SVG axes via `d3.axisBottom` and `d3.axisLeft`, with linear scales computed using `d3.scaleLinear` and `d3.extent` on the loaded CSV dataset. The modular design allows the plot to be easily reused with different datasets.

HHarshithaDontha@my.unt.edu
87% match
Loading thumbnail…

Fork of D3 Starter 2

A scatter plot visualizes the relationship between study hours and exam scores for 120 student records from a CSV file. Each point is colored by student group (A, B, C, or D) using an ordinal color scale with the Tableau10 scheme. The D3 v7 code loads the external dataset via `d3.csv`, converts string values to numbers, and maps data to SVG circles with linear `d3.scaleLinear` axes. Interactive tooltips appear on `mousemove`, displaying group, study hours, and exam score.

Vvijaysaichigullapally1@gmail.com
87% match
Loading thumbnail…

Fork of question678

This scatter plot visualizes the relationship between study hours and exam scores for a group of students, using data from a CSV file. Each circle represents a student, positioned by study hours on the x-axis and exam score on the y-axis, with colors assigned via `d3.scaleOrdinal` based on student ID. The visualization uses D3.js v7 to render an SVG, drawing circles and axes with `d3.axisBottom` and `d3.axisLeft`, and labels for each axis.

Kkaushikreddy901@gmail.com
86% match
Loading thumbnail…

scatterplot

This scatter plot visualizes the relationship between students’ study hours and their exam scores. The chart uses D3.js v7 to render SVG circles, with a linear scale mapping study hours on the x-axis and exam scores on the y-axis. The data is loaded from a CSV file via `d3.csv`. Axes are added using `d3.axisBottom` and `d3.axisLeft`, with labels for both variables. The code defines a reusable `createScatterPlot` function that takes data and a container ID, setting fixed margins and a 600x400 pixel drawing area.

Vvishnupriya eupuri
85% match
Loading thumbnail…

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

Mmsahithipatel@gmail.com
85% match