Skip to main content
SimilarExport ZIP
100%

D3 Scatter Plot

✓ Published0🌍 Public
Sscott306lr
Last edited Sep 25, 2022
Created on Sep 19, 2022
Forked from D3 Visualization

This visualization reproduces the classic Iris flower dataset as a D3.js scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. Each circle represents a flower sample, colored by its variety (setosa, versicolor, or virginica) using a categorical color mapping. The chart uses an SVG rendering with D3 scales and axes, and includes tooltips showing variety and coordinates. Data is loaded from a CSV via `d3.csv`, with axes generated using `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the classic Iris dataset, plotting sepal length against petal length for 150 flower samples. Each circle represents an individual flower, with semi-transparent fill opacity to reveal overlapping points. The visualization is rendered as SVG, using d3.scaleLinear and d3.extent to map data values to screen coordinates, with axes generated via d3.axisLeft and d3.axisBottom. Data is loaded from a local CSV file using d3.csv, and the species of each sample is visible in the data but not encoded visually in this example.

CCurran Kelleher
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 example displays the classic Iris dataset as an interactive scatter plot, mapping petal length on the x-axis and sepal length on the y-axis to reveal patterns across the flower samples. The visualization uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct axes and render circles in SVG, with data loaded asynchronously via `d3.csv` from a GitHub gist. The plot fills the entire browser window, using a simple margin-based layout and a fixed point radius to represent each data point.

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

D3 Scatter Plot

This D3 scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal length on the y-axis. Each flower is represented by a circle, with scales derived from the data’s extent using d3.scaleLinear. The SVG rendering uses d3.select and .join() to create the circles, while d3.axisLeft and d3.axisBottom generate the labeled axes. Data is loaded asynchronously via d3.csv, and the plot fills the browser window, with margins and a fixed radius applied to all points.

DDINESH SAI BOPPANA
93% 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
93% match