Scatter plot

100%

✓ Published0🌍 Public

Last edited Mar 30, 2026

Created on Mar 30, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

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.

YYash Raj Mathur

89% match

Loading thumbnail…

Scatter plot

This example shows a scatter plot of five custom data points relating study hours to test scores, with hours on the x-axis and scores on the y-axis. It draws fixed-size SVG output (800 by 500 pixels) into the page body using a reusable `scatterPlot` component built with D3’s `select` API. The component is configured via chained methods (`.width`, `.height`, `.data`, `.xValue`, `.yValue`) and attached to the SVG through `svg.call(plot)`. The data is hardcoded in the `index.jsx` file, and rendering relies on SVG elements generated through D3’s selection and layout functions.

Ggayathrisaxena23@gmail.com

89% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This gallery example demonstrates a reusable scatter plot showing the relationship between study hours and test scores across five data points. The visualization uses d3.scaleLinear to map data domains to pixel coordinates, with axisBottom and axisLeft generating the labeled x- and y-axes. Data points render as black circles via SVG path elements appended through the join pattern. The code separates the chart logic into a scatterPlot.js module, exposing chainable setter methods such as .width and .xValue for configuration. The index.js file initializes the visualization by importing necessary D3 functions and calling the plot on an SVG container with fixed dimensions.

Ggayathrisaxena23@gmail.com

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

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…

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

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

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

84% match