Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Shape

✓ Published6🌍 Public
CCurran Kelleher
Last edited Mar 2, 2023
Created on Mar 2, 2023

This example visualizes the Iris Dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with each of the three iris species distinguished by a distinct symbol shape. A legend encoded with the same shapes identifies the species. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbol` to position and shape the data points, alongside `axisLeft` and `axisBottom` for the axes. Data is loaded from a CSV file and parsed with `csvParse`, with symbols rendered using `symbolGenerator.type().size()`.

AI-generated description

A scatter plot of the Iris Dataset with a color legend.

See also:

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Shape

This scatter plot displays the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with each species represented by a distinct symbol shape. The visualization loads CSV data via `fetch`, parses it with `d3.csvParse`, and renders circular, triangular, and other shapes using `d3.symbol` and `symbolsFill`. A custom shape legend, built with `scaleOrdinal`, identifies species, while `d3.axisLeft` and `d3.axisBottom` provide labeled axes. The chart updates responsively to the browser window size.

Cchsaisriharsha@gmail.com
96% match
Loading thumbnail…

Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, comparing sepal length against petal width for three iris species—setosa, versicolor, and virginica—using distinct symbols for each species. A custom legend maps species to shapes, generated via d3.symbol and d3.scaleOrdinal. Axes are rendered with d3.axisLeft and d3.axisBottom, while the plot is built as a reusable scatterPlot function called within an SVG container. Data is loaded asynchronously from a CSV file and parsed with d3.csvParse.

Ggeethikal
95% match
Loading thumbnail…

Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, plotting sepal length against petal length for individual flowers. Each point’s shape encodes the flower species using D3’s `symbolsFill` and `symbol()`, with a legend generated via a custom `shapeLegend` component. The chart uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` APIs, pulling data from a remote CSV file. A custom `symbolGenerator` renders distinct geometric markers (circles, squares, etc.) for each species, while axes and labels are assembled through the reusable `axes` module.

Rrikhitakoganti12
94% match
Loading thumbnail…

Scatterplot with shape

This example plots the classic Iris flower dataset on a scatterplot, using sepal length and petal length as the x- and y-axes. Species are distinguished by different symbol shapes, with a legend that supports interactive filtering by clicking on a species. The visualization is built with D3 v7, using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` for shape encoding. Data loads from a CSV file, and hover interactions update the legend’s opacity to highlight the selected species.

SSubhendu Karmakar
94% match
Loading thumbnail…

Scatter Plot with Shape

This scatter plot visualizes the Iris Dataset, encoding petal width on the x-axis, sepal length on the y-axis, and species through distinct symbol shapes from `d3.symbol` with a custom shape legend. The D3 v7 code uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for shape mapping, and imports utilities for axis rendering and legend generation. A color-coded symbol legend, labeled "Species," identifies the three iris types.

SSharmaAshwini
94% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This scatter plot visualizes the relationship between sepal length and petal length for three iris species, using different symbol shapes to distinguish species categories. The visualization loads CSV data from a GitHub-hosted iris dataset, converts numeric fields, and renders it with d3.scaleLinear for both axes and d3.scaleOrdinal with symbolsFill to assign shape encodings. A custom shape legend displays the mapping between species and symbols. The code relies on d3.csvParse, d3.extent, and the d3.symbol generator to create the marks.

Rrushithareddyy
93% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This example uses a D3 v7 scatter plot to visualize the Iris flower dataset, mapping sepal length to the x-axis and petal length to the y-axis. The three species are distinguished by different symbol shapes from d3.symbol, rendered with `symbolGenerator.type()` and a `scaleOrdinal` mapping to `symbolsFill`. A custom legend, built with the shapeLegend module, displays the species-to-shape correspondence, while the axes module adds labeled axis scales via `d3.axisLeft` and `d3.axisBottom`. Data is fetched as CSV and parsed with `d3.csvParse`, with numeric values converted before plotting.

Iindushashi.g@gmail.com
93% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This example visualizes the iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with species differentiated by symbol shapes from d3.symbol and d3.scaleOrdinal. A custom shape legend displays each species’ symbol, while d3.axisBottom and d3.axisLeft render labeled axes. The code loads data via d3.csvParse from a GitHub-hosted CSV and uses d3’s join pattern to update SVG elements.

NNukaShravanKumar
92% match