Skip to main content
SimilarExport ZIP
100%

Scatter Plot

✓ Published0🌍 Public
YYash Raj Mathur
Last edited Mar 30, 2026
Created on Mar 30, 2026

A reusable D3 scatter plot displays the positive correlation between study Hours and exam Score across five custom data points. The chart uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and SVG circles for points. The scatterPlot function exports a configurable chart factory, invoked with chained setters for width, height, data, and accessor functions. Rendered via SVG with the Share Tech font, axes are labeled "Hours" and "Score" with fixed margins for clear presentation.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot

This scatter plot shows the relationship between study hours and test scores using five custom data points. Each black circle represents one observation, plotted with hours on the x-axis and scores on the y-axis. The visualization uses d3’s `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` within a reusable `scatterPlot` function to handle scaling, axes, and margins. The SVG rendering is configured with a fixed width of 800 and height of 500, and the chart displays labeled axes and axis tick marks.

Ggayathrisaxena23@gmail.com
89% match
Loading thumbnail…

Resusable Scatter Plot

A reusable scatter plot displays the relationship between students' study hours and exam scores, with each point representing a student. The chart uses axes, labels, and a title to clarify the positive correlation between the two variables. Built with D3 v7, it leverages the reusable `scatterPlot` component to render SVG elements. Data is loaded from a CSV file, and the code uses `d3.scaleLinear`, `d3.extent`, and `d3.axisBottom`/`d3.axisLeft` to construct and scale the plot dynamically.

SSai Vamshi B
89% 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
87% 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
86% match
Loading thumbnail…

StudentScore_ScatterPlot

This scatter plot visualizes the relationship between hours studied and exam scores for ten students. The chart displays a clear positive correlation, with data points plotted on a linear scale for both axes. Built with D3.js v7, the visualization loads data from a CSV file using `d3.csv` and constructs an SVG with `d3.select` and `append`. The code creates scales with `d3.scaleLinear` and renders axes via `d3.axisBottom` and `d3.axisLeft`. The reusable `scatterPlot` function applies steelblue, semi-transparent circles to represent each student's data.

AALIMINETI SPOORTHY REDDY
86% match
Loading thumbnail…

Scatter Plot Ice 7

This example demonstrates a reusable scatter plot visualizing the relationship between study hours and exam scores. The chart displays 15 data points as circles, with study hours on the x-axis and exam scores on the y-axis, using D3’s linear scales and axis functions. The `scatterPlot.js` module defines a configurable chart with settable width, height, margin, and radius parameters, loaded via `d3.csv` from a GitHub-hosted dataset. The implementation uses D3 v7’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, with a `join` operation to create the circles.

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

Scatter plot

This dark-themed scatter plot visualizes the relationship between hours studied and exam scores for 188 students, with each point colored by attendance percentage using a sequential turbo scale. The visualization loads data from a CSV file and renders it as SVG circles, employing D3 v7 scales for positioning and color encoding. Interactive tooltips display student details on hover, while grid lines and axis labels provide context for the academic performance metrics.

RRamdas Dheeraj
85% match
Loading thumbnail…

A4_ScatterPlot

This example visualizes the relationship between study hours and exam scores using a scatter plot, where each circle represents a student. The data comes from a CSV file loaded with D3’s `d3.csv` method and filtered to exclude zero-value pairs. The SVG chart uses `d3.scaleLinear` for both axes, `d3.axisBottom`, and `d3.axisLeft` for tick marks, while circles are appended with `d3.selectAll` and `enter`. Interactive tooltips appear on mouseover, displaying the exact hours and scores for each point. All rendering is done with React-compatible vanilla JavaScript and D3 v6.

DDuc Pham
85% match