Skip to main content
SimilarExport ZIP
100%

D3 Scatter Plot

✓ Published146🌍 Public
CCurran Kelleher
Last edited Sep 10, 2021
Created on May 1, 2021

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.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

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
95% match
Loading thumbnail…

D3 Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. The visualization renders circles as marks in an SVG, with scales defined using `scaleLinear` and axes created via `axisLeft` and `axisBottom`. Data is loaded asynchronously from a CSV URL using `d3.csv`, with numeric fields parsed through a custom row function. The chart fills the browser window, with margins applied to position the axes and plot area.

SSubhamChhetri
95% match
Loading thumbnail…

D3 Scatterplot

This example visualizes the Iris dataset as a scatterplot, mapping petal length on the x-axis and sepal length on the y-axis. Each flower is rendered as a circle using D3’s selection and data-join methods. The code loads the data via `d3.csv`, scales positions with `d3.scaleLinear`, and adds axes through `d3.axisLeft` and `d3.axisBottom`. The SVG is sized to the full window, and the plot includes customizable margins and tick font sizing.

Aajoua
95% match
Loading thumbnail…

D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. Each flower is represented by a circle, with positions scaled linearly using d3.scaleLinear and extents from the data. The visualization renders in SVG, drawing circles directly onto an appended svg element. Axes are generated with d3.axisLeft and d3.axisBottom, styled with a 20px font size for tick labels. Data is loaded asynchronously using d3.csv from a remote Gist URL, with numeric parsing applied to all four measurement columns.

Ttverdone
95% 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. It uses `d3.csv` to load and parse the data, then `d3.scaleLinear` with `d3.extent` to compute domains for both axes. Circles are rendered in an SVG canvas via `selectAll('circle').join('circle')`, with axes added using `axisLeft` and `axisBottom`. The plot fills the browser window, with a tick font size of 24 pixels.

OOleg Zhernovoy
95% match
Loading thumbnail…

D3 Scatter Plot

This example visualizes the Iris flower dataset as a scatter plot, mapping petal length to the horizontal axis and sepal length to the vertical axis. Each flower is rendered as a circle in an SVG canvas. The code loads CSV data using `d3.csv`, parses numeric fields, and applies linear scales via `d3.scaleLinear` with domains derived from `d3.extent`. Circles are joined to the data with `selectAll().data().join()`, sized with a fixed radius of 5 pixels, and positioned using the scaled coordinates.

Ttrongan765@gmail.com
94% 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
94% match
Loading thumbnail…

D3 Scatter Plot

A D3 scatter plot displays the Iris Dataset, plotting petal length on the x-axis against sepal length on the y-axis. Built with d3.v6, it uses `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.extent` to compute the domains. Circles are rendered via SVG elements in the HTML body. The chart includes `d3.axisLeft` and `d3.axisBottom` for tick labels.

PPlatoch
94% match