Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Shape

✓ Published0🌍 Public
Cchsaisriharsha@gmail.com
Last edited Jul 3, 2023
Created on Jul 3, 2023
Forked from Hello VizHub

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.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

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

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

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

Fork of Scatter Plot with Shape

This interactive D3.js scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis. The chart distinguishes the three iris species by drawing each data point with a unique symbol, using the `symbolsFill` scale and the d3 `symbol()` generator to assign different glyph shapes. A legend on the right side, built with `d3.scaleOrdinal`, identifies the species associated with each shape. The plot reads data from a remote CSV file, parsing it with `d3.csvParse` and rendering the visualization using d3's join-based API for efficient updates.

Ppardha1411
93% 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
93% match