Skip to main content
SimilarExport ZIP
100%

scatter plot with shape

✓ Published1🌍 Public
Aamarnadhkari98@gmail.com
Last edited Oct 25, 2024
Created on Oct 25, 2024
Forked from Hello VizHub

This example uses a scatter plot to visualize the Iris dataset, displaying sepal length against petal length. Points are color-coded, with distinct shapes distinguishing the three Iris species, supported by a legend for reference. Built with D3 v7, the visualization uses the `select()` and `join()` APIs to efficiently manage SVG elements, while `scaleLinear` and `scaleOrdinal` handle positional and shape encodings. The chart loads data from a remote CSV file and includes axis labels and tick marks for readability.

AI-generated description
MIT Licensed

Similar vizzes

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…

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

fork of scatterplot with shape

This example shows an Iris dataset scatter plot of sepal length against petal length, with points colored and shaped by species. A legend on the right maps each species to its corresponding symbol shape. The visualization is built using D3 v7, employing `scaleLinear` for the axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and `symbol` to generate the point markers. Data is loaded asynchronously from a GitHub-hosted CSV and parsed with `csvParse`.

DDee
92% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This example displays the classic Iris flower dataset, plotting sepal length against petal length with dots colored and shaped to represent different species. The visualization uses a D3.js scatter plot, with points positioned by linear scales and a legend that maps species names to their corresponding shapes via a shape scale. The axes and legend are all built with D3’s selection API, while the data is loaded asynchronously from a CSV file and parsed with `csvParse`.

Bbogasamudramvamsikrishnareddy
92% 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
92% match