Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Shape

✓ Published0🌍 Public
Ggeethikal
Last edited Mar 25, 2023
Created on Mar 25, 2023

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.

AI-generated description

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

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

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 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()`.

CCurran Kelleher
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…

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

scatter plot with shape

This example presents a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. It distinguishes the three iris species by rendering each data point with a distinct shape from the `symbolsFill` array, using `scaleOrdinal` and the `symbol` type generator. The visualization includes labeled axes built with `axisLeft` and `axisBottom`, alongside a custom shape legend positioned within the plot. The chart loads data via `csvParse` from a remote GitHub source and demonstrates modular ES6 imports for local visualization components.

Vvikramkotlo9@gmail.com
94% match
Loading thumbnail…

Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis, petal length on the y-axis, and encoding species using different marker shapes. The visualization includes axes with labels and a shape legend to identify species categories. Built with D3 v7, the code uses `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to generate the plot. The implementation relies on a custom `axes.js` module for axis rendering and a `shapeLegend.js` module for the legend, with data loaded asynchronously from a CSV file.

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

Fork of Scatter Plot with Shape

This scatter plot visualizes Iris flower measurements, mapping sepal length to the x-axis and petal length to the y-axis for 150 samples. Each species—setosa, versicolor, and virginica—is distinguished by a unique symbol shape using D3’s `d3.symbol()` and `symbolsFill` scale. The chart includes labeled axes via `d3.axisBottom` and `d3.axisLeft`, plus a custom shape legend positioned at a fixed coordinate. Data is loaded from a CSV file and parsed with `d3.csvParse`, with numeric fields converted before rendering.

Ssriharshithaanugu5@gmail.com
93% match