100%

Assignment 7

✓ Published1🌍 Public

Last edited Mar 29, 2026

Created on Mar 29, 2026

This reusable D3.js scatter plot visualizes the relationship between math and physics scores for 40 students, with points colored by group membership. The chart uses `d3.csv` to load the dataset and custom scales via `d3.scaleLinear` for both axes and `d3.scaleOrdinal` for the categorical color encoding. The reusable function accepts parameters for data, axis value accessors, labels, dimensions, and title, rendering the chart as SVG with axes, labels, a legend, and semi-transparent circles. This design allows the same function to be applied to different datasets and attributes without modification.

AI-generated description

Reusable Scatter Plot - Assignment 7

This project shows a reusable scatter plot using D3.js.

Dataset

File used: student_scores.csv

Visualization

X-axis: Math Score
Y-axis: Physics Score
Color: Group

Why this chart is reusable

This chart is reusable because the same function can be used again with different:

datasets
x-axis attributes
y-axis attributes
chart size
color categories

Example

In this chart, each point represents one student. The chart shows the relationship between Math score and Physics score.

Author

Ariful Hasan

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between students' math and reading scores, with each circle representing a student's performance on both subjects. The plot uses a procedural, reusable D3 module that defines a configurable `scatterPlot` function, which encodes data coordinates into circle positions using `scaleLinear` and `extent` for axis domains. The visualization renders as an SVG graphic, drawing steel-blue circles and adding left and bottom axes via `axisLeft` and `axisBottom`. It loads CSV data from a GitHub gist containing student test scores, and the code demonstrates a modular approach to building a scatter plot with D3 v6.

445.saiful@gmail.com

83% match

Loading thumbnail…

Assignment Q1

A reusable scatter plot compares math and reading scores, with each student’s gender indicated by color. The visualization uses D3 v7’s `d3.csv` and `d3.autoType` to load the data, `scaleLinear` for axes, and `scaleOrdinal` for color mapping. Hovering reveals a tooltip with gender and scores, while an adjacent legend clarifies the encoding. The plot is rendered as SVG circles with `mouseover` and `mouseout` event handlers, demonstrating a modular chart-building pattern common in D3 examples.

BBhargav Reddy

83% match

Loading thumbnail…

Reusable Scatter Plot

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.

PP Manisha

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

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

81% match

Loading thumbnail…

Assignment 7-Part 4- Area chart

This area chart visualizes the relationship between hours of study and average math scores, showing a clear positive trend. The D3.js visualization uses `d3.csv` to load the student_scores.csv dataset, then employs `d3.rollup` to group the data by study hours and calculate the mean math score using `d3.mean`. The chart is rendered as an SVG using `d3.area` to create the filled region, with blue fill and stroke, orange circles marking individual data points, and axes created via `d3.axisBottom` and `d3.axisLeft`. The visualization includes labeled axes and a title, with scales defined by `d3.scaleLinear` and domain adjustments using `d3.extent` and `d3.max`.

AAriful Hasan

81% match

Loading thumbnail…

Fork of scatter plot

This scatter plot visualizes the relationship between math and science scores for 93 students, with each dot colored by department. It uses D3.js v7 to load data from a CSV file, map scores to x/y coordinates with `d3.scaleLinear()`, and color-code points using `d3.scaleOrdinal()` with the `d3.schemeSet2` palette. The SVG rendering includes axes via `d3.axisBottom` and `d3.axisLeft`, plus a legend identifying the seven academic departments. Hovering reveals a tooltip with the student's name, department, and scores.

Ssainishanthreddyk@gmail.com

81% match

Loading thumbnail…

Assignment7 Reusable Scatter Plot2

This example shows the positive relationship between study hours and exam scores for 50 students, with each circle representing one student’s performance. The reusable scatter plot function takes a data array and configuration object to create scales, axes, labels, and points using D3 v7. The code uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.csv to load the student performance dataset with StudyHours and ExamScore fields. The chart is rendered as an SVG, with teal semi-transparent dots positioned according to the study hours on the x-axis and exam scores on the y-axis.

445.saiful@gmail.com

81% match