Skip to main content
SimilarExport ZIP
100%

D3 Scatterplot Viz (D3 Tutorial)

✓ Published1🌍 Public
CCasualWanderer20XX
Last edited Sep 19, 2025
Created on Sep 18, 2025
Forked from HTML Starter

A D3.js scatterplot visualizes the Iris dataset, mapping petal width on the x-axis and sepal width on the y-axis. Each of the 150 data points is rendered as a circle in an SVG canvas that fills the browser window. The code uses `d3.csv` to load the data, `scaleLinear` and `extent` to compute scales, and `axisLeft` and `axisBottom` to draw the axes. The visualization demonstrates a minimal, full-screen scatterplot with no color encoding or labels beyond the axes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis using circular marks. The code loads CSV data via `d3.csv`, scales it with `scaleLinear` and `extent`, and renders the points as SVG circles. Axes are generated with `axisLeft` and `axisBottom`, with the visualization sized to the full browser window. The example uses D3 v7 within a minimal HTML page, styling tick text via CSS.

KKhanin Sisaengsuwanchai
93% match
Loading thumbnail…

D3 Scatter Plot

This example visualizes the classic Iris dataset as a scatter plot, using petal length on the x-axis and sepal length on the y-axis. The code loads the data via `d3.csv`, maps values to screen coordinates with `d3.scaleLinear` and `d3.extent`, and renders SVG circles. Axes are drawn using `d3.axisLeft` and `d3.axisBottom`. Each point includes a `<title>` element for hover tooltips. The visualization fills the browser window and is implemented with D3 v7.

Wwspwll@gmail.com
93% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. Using D3 v7, it loads CSV data via `d3.csv`, applies linear scales with `scaleLinear`, and renders circles as marks. Axes are drawn with `axisLeft` and `axisBottom`, and the SVG canvas fills the browser window. The code explicitly parses numeric fields and converts data values into pixel coordinates for each point.

SScott-Collier
92% match
Loading thumbnail…

D3 Scatter Plot

This example visualizes the classic Iris dataset as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. Circles represent individual flowers, with axes labeled via D3’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs. The code loads CSV data using `d3.csv`, parses numerical fields, and renders the plot as SVG circles sized with a fixed radius. The visualization fills the browser window, using viewport dimensions for the chart’s width and height, and demonstrates a straightforward data-joining workflow with `selectAll` and `join`.

Lliu yang
92% match
Loading thumbnail…

D3 Scatter Plot

This D3 v6 scatter plot visualizes the Iris Dataset, plotting petal length against sepal length for individual flower specimens. It uses the `csv()` loader to fetch data, `scaleLinear()` with `extent()` for scaling, and `axisLeft()` and `axisBottom()` to render axes. The SVG canvas fills the browser window, and circles are drawn with a fixed radius using the `join('circle')` operation. The sample displays all data points as a simple 2D projection, enabling pattern recognition in the measurements across the dataset's species.

YYash_Mistry
92% match
Loading thumbnail…

D3 Scatter Plot

This D3.js scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. The code loads CSV data from a remote Gist, converts string values to numbers, and uses `d3.scaleLinear` with `d3.extent` to map data domains to screen coordinates. Individual data points are rendered as SVG circles with tooltips showing their coordinates. Axis ticks are generated using `d3.axisLeft` and `d3.axisBottom`, with the chart filling the entire browser window.

GGullyPlook
92% match
Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. The SVG rendering uses d3.scaleLinear to transform raw CSV values into pixel coordinates, with d3.min and d3.max defining the domains. Circles represent individual flowers, colored in a teal tone, while d3.axisLeft and d3.axisBottom generate labeled axes. The code loads data via d3.csv and appends text labels for both axes, using a full-window responsive layout with fixed margins.

Aainhoadieruiz@gmail.com
92% match
Loading thumbnail…

D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. Using D3 v6, it loads data via `d3.csv`, applies linear scales with `scaleLinear` and `extent`, and renders circles as marks. Axes are drawn with `axisBottom` and `axisLeft` in an SVG container. The plot fills the entire window and displays all 150 samples without color or categorical encoding.

CCurran Kelleher
92% match