Scatter plot

100%

✓ Published0🌍 Public

Last edited Oct 19, 2025

Created on Oct 19, 2025

This example renders a scatter plot from CSV data fetched from a GitHub Gist via `fetch` and parsed with `d3.csvParse`. It automatically selects numeric columns for the x and y axes, with an optional categorical column mapped to colored dots. The visualization is drawn as an SVG using D3 v7, featuring labeled axes, a legend for categories when present, and a warm, minimalist styling theme. The code is designed to be adaptable, falling back to the first two numeric columns if no recognizable column names are found.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

reusable scatter plot

This example demonstrates an automated, reusable scatter plot built with D3.js (v6.7.0) that loads a CSV from a GitHub gist and dynamically selects the first two numeric columns for the x- and y-axes. It uses `csv()`, `scaleLinear()`, `axisBottom()`, and `axisLeft()` to render axes, and `scaleOrdinal()` with `schemeCategory10` to color points by the first categorical column. The visualization includes symbols from D3’s `symbol()` API, a simple hover tooltip, and automatically rotates through additional numeric x-columns every three seconds using `setInterval()`, re-rendering the SVG and scaling.

Llohitsai62@gmail.com

85% match

Loading thumbnail…

Scatter Plot

A simple scatter plot displays categorical labels on the vertical axis and numeric values on the horizontal axis, with circles sized at 18 pixels. The data comes from a CSV file, and the chart uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with a tick format converting large numbers to abbreviated units. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, and the visualization is built using SVG elements selected through `d3.select`. The chart includes a title and axis labels styled via CSS.

CChocoOrange

82% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between two numeric variables from a CSV dataset, plotting each point with x and y coordinates. It uses D3 version 6 with an SVG rendering approach, employing `d3.scaleLinear` to map the data domains to pixel ranges and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded asynchronously via `d3.csv`, and circles are appended and joined to the data using `.join('circle')`. The plot is styled with a teal fill and includes axis labels for "Numbers" and "Amount."

Bbugfree55

82% match

Loading thumbnail…

Scatter

This example demonstrates a scatter plot visualization that loads the classic Iris dataset from a GitHub Gist using the d3.csv function. The core functionality focuses on fetching and parsing the comma-separated data asynchronously, with the resulting records logged to the browser console rather than rendered graphically. The implementation uses D3 v7 alongside raw HTML and JavaScript, with no additional styling or interactive elements. The example serves as a minimal foundation for building data-driven visualizations, highlighting the import process of external CSV resources through D3’s built-in data handling capabilities.

DDuckGorilla

82% match

Loading thumbnail…

scatterPlot

A scatter plot displays letters from a CSV file against their corresponding numeric values as circles. The chart uses D3 v5 with an SVG rendering, loading data via `d3.csv` and scaling positions with `scaleLinear` for the x-axis and `scalePoint` for the y-axis. Axes are generated using `axisBottom` and `axisLeft`, with tick lines spanning the plot area.

VVvgupta

82% match

Loading thumbnail…

Scatterplot basic

This scatterplot displays clustered data from a CSV file, using color to distinguish clusters. Users can brush a region to zoom in, and double-click to reset the view. The visualization is built with D3 v4, using `d3.scaleLinear` for axes, `d3.brush` for selection, and SVG transitions for smooth animations. It renders data points as circles, with a legend for cluster identification.

MMNoichl

81% match

Loading thumbnail…

scatterplot using d3

A scatterplot displays name-number pairs from a local CSV file, mapping names to the y-axis and numeric values (scaled by 1000) to the x-axis using d3.scalePoint and d3.scaleLinear. Circles are rendered via SVG with fixed radius and semi-transparent steelblue fill. The code imports d3 functions like select, csv, and axisBottom, and includes a formatted x-axis with tick size and a custom text label, demonstrating basic D3 v6 data binding and margin-based layout.

RRITUZZ

80% match

Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes two distinct data series from a CSV file fetched via D3’s `d3.csv` function. Each series is rendered as a set of markers in three-dimensional space, using the Plotly.js `scatter3d` trace type, with the first trace appearing as the default marker style and the second using a green color and custom marker properties. The plot is displayed in a `myDiv` container using `Plotly.newPlot`, with margins set to zero. The data is sourced from a GitHub Gist, and the visualization relies on both D3 version 3.5.17 and Plotly 2.9.0.

Vvenkatajayanth03

80% match