Scatter plot

100%

✓ Published0🌍 Public

Last edited Mar 30, 2026

Created on Mar 30, 2026

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.

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…

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

84% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a reusable scatter plot mapping study Hours on the x-axis against test Score on the y-axis, with five data points plotted as black circles. The visualization is built using D3 v6 modules including `scaleLinear`, `axisBottom`, `axisLeft`, and `extent`, all wrapped in a custom `scatterPlot` factory function that accepts configurable setters for width, height, data, and accessor functions. The SVG rendering includes labeled axes for Hours and Score, with margins and a fixed 800×500 canvas, while the page uses the Share Tech font from Google Fonts. The code demonstrates a modular pattern where `index.js` supplies a small hardcoded dataset and applies the reusable chart via `svg.call(plot)`.

YYash Raj Mathur

84% match

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

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

82% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example shows a reusable scatter plot of study hours versus test scores, with seven data points plotted on a fixed 500×400 SVG canvas. The code uses D3 v7 to create linear scales for both axes, append circles with steelblue fill, and render axis ticks via `d3.axisBottom` and `d3.axisLeft`. It also adds text labels for both axes. The visualization is implemented as a plain JavaScript function called `scatterPlot(container, data)`, which appends the SVG dynamically, while the included React starter demonstrates D3 selection in a `useEffect` hook. The dataset is hardcoded inline.

SSanjayRamaSwamyAdla@my.unt.edu

82% match

Loading thumbnail…

Fork of Fork of Fork of Fork of React & D3 Starter

This example shows a reusable scatter plot of study hours versus exam scores, using a compact D3 v7 script embedded in an HTML page. It displays seven data points as steelblue circles on an SVG canvas, with linear scales mapping hours to x-positions and scores to y-positions, plus labeled axes. The code defines a `scatterPlot` function that appends an SVG, computes scales via `d3.scaleLinear`, draws axes with `d3.axisBottom` and `d3.axisLeft`, and binds data using `selectAll().data().enter()`. The repository also includes a separate React component (index.jsx) that uses `useRef` and `useEffect` to integrate D3 selections, though the plot itself runs standalone.

SSanjayRamaSwamyAdla@my.unt.edu

82% match

Loading thumbnail…

Scatter Plot

This example renders a scatter plot of data points within an SVG using React. It leverages D3.js v5 to manage the visualization logic, while the rendering is handled through SVG elements defined in the JSX. The plot displays individual circles positioned on a 960 by 500 canvas, with a simple, uncluttered design. The code integrates D3 scales and axes to map data values to screen coordinates, though the specific dataset is not defined in the visible files.

Ppillliarun79

81% match