Skip to main content
SimilarExport ZIP
100%

D3 scatterplot

✓ Published1🌍 Public
SSamuele Greco
Last edited Feb 9, 2022
Created on Feb 9, 2022
Forked from HTML Starter

This scatterplot visualizes the Iris flower dataset, plotting petal length against sepal length for individual specimens. The visualization uses D3 v7’s `scaleLinear` and `extent` functions to map data values to screen coordinates within a full-window SVG. Circles are rendered via `selectAll` and `join` after loading the CSV with `d3.csv`. The example demonstrates a minimal, unadorned approach to data-driven point placement, with no axes or labels, focusing purely on the raw distribution of the flower measurements.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

D3 scatter plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each flower is rendered as an SVG circle using D3 v7, with positions scaled linearly via `d3.scaleLinear` and extents computed from the data. The axes are drawn using `d3.axisLeft` and `d3.axisBottom`, and the visualization fills the browser window. Data is loaded asynchronously with `d3.csv` from a remote GitHub gist, and circles are joined to the SVG using `selection.join`.

Yyankesswang
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 classic Iris dataset, plotting sepal length against petal length for each flower specimen. The visualization uses D3 v7 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data coordinates to SVG circle positions with a fixed radius of 5 pixels. Circles are rendered via SVG `<circle>` elements appended through D3's selection and join operations, with axes positioned using margin-based transforms. The chart fills the browser window, with data loaded asynchronously from a remote CSV file using `d3.csv`.

Aalexscott-untitled
94% 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
94% 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
94% match
Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the classic Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis for each flower sample. The visualization uses D3 v7's `csv` loader to fetch and parse the remote dataset, then applies `scaleLinear` and `extent` to compute the axis domains from the numeric columns. SVG circles are drawn using a data join, with axes generated via `axisLeft` and `axisBottom`. The chart is rendered in vanilla HTML and JavaScript, filling the browser viewport dynamically.

Ccharlieronchetti@gmail.com
94% match