Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Shape

✓ Published0🌍 Public
Ssusarlasruthi2000@gmail.com
Last edited Apr 4, 2024
Created on Apr 4, 2024

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of Scatter Plot with Shape

This interactive scatter plot visualizes the Iris Dataset, mapping sepal length to the x-axis and petal length to the y-axis. Each of the 150 points is colored and shaped according to its species (setosa, versicolor, or virginica). The visualization uses D3's `scaleOrdinal` and `schemeCategory10` for the color scale, while shapes are generated with a symbol generator. A shape legend, rendered via `shapeLegend.js`, displays the species symbols. The chart is built with an SVG canvas, using `scaleLinear` for both axes and `selection.join` for efficient element updates.

NNeeharikaGali
94% 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
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, 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 Iris dataset, showing sepal length on the x-axis and petal length on the y-axis. Each point’s shape encodes the iris species, with a legend mapping the three species to distinct symbols. The visualization uses D3.js and its `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to position marks and generate glyph shapes. Data is fetched from a remote CSV file and parsed with `csvParse`. The chart includes labeled axes and a shape legend, both styled via D3’s `axisLeft` and `axisBottom` helpers.

Hharsha
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