Fork of Scatter Plot with Shape

100%

Fork of Scatter Plot with Shape

✓ Published0🌍 Public

Last edited Jul 19, 2023

Created on Jul 19, 2023

This interactive scatter plot visualizes the Iris dataset, mapping sepal and petal lengths along the axes while encoding species with distinct D3 symbol shapes. The visualization includes a shape legend for species identification. It uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to render marks, along with custom axis and legend modules. Data loads asynchronously via CSV parsing, and the plot updates dynamically through a state management system.

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…

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

97% match

Loading thumbnail…

Fork of Scatter Plot with Shape

This example shows an interactive scatter plot of the Iris dataset, displaying sepal length against petal length with species encoded by marker shape. It uses D3 v7’s `scaleLinear` for axes and `scaleOrdinal` with `symbolsFill` to map species to distinct shapes. A custom-shape legend, built with `d3.symbol`, lists each species. Data is loaded asynchronously via `fetch` and parsed with `csvParse`, then rendered as SVG paths using `d3.symbol` generators.

VVishnu Sudireddy

96% match

Loading thumbnail…

Fork of Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, mapping sepal length and petal length on the x- and y-axes. Each point’s shape encodes the flower species, with a legend explaining the symbol mapping. Built with D3 v7, it uses `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbolsFill` to render marks, while custom modules handle axes and an interactive shape legend.

SSwapna1915

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

95% match

Loading thumbnail…

Fork of Scatter Plot with Shape

This scatter plot shows the Iris dataset, mapping petal length against sepal length while using different point shapes to distinguish between plant species. The visualization uses D3 v7's `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and `symbol()` to generate the glyphs. A shape legend is rendered via a custom module, with axis labels added through helper functions. The data is loaded as CSV from a GitHub repository and parsed using `csvParse` before being drawn.

Aanith462@gmail.com

95% match

Loading thumbnail…

Fork of Scatter Plot with Shape

This example visualizes the Iris dataset as a scatter plot of sepal length versus petal length, with symbols distinguishing iris species. It uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to draw shapes, plus custom modules `axes.js` and `shapeLegend.js` for labeled axes and a legend. The CSV data is loaded via `fetch`, parsed with `csvParse`, and numeric fields are coerced before rendering.

Lleftymadi

95% match

Loading thumbnail…

Fork of Scatter Plot with Shape

This interactive scatter plot displays Iris flower measurements, mapping sepal length along the x-axis and petal length along the y-axis, with species distinguished by different symbol shapes. The visualization uses d3.scaleOrdinal with symbolsFill to assign distinct shapes to each species, rendered via d3.symbol and path elements. A custom legend shows the shape-to-species mapping, while axes are generated using d3.axisLeft and d3.axisBottom. Data is loaded asynchronously from a CSV file using d3.csvParse and fetched from a GitHub repository, with numeric fields coerced before rendering.

Ppardha1411

95% match

Loading thumbnail…

Fork of Scatter Plot with Shape

A scatter plot of the Iris dataset displays sepal length against petal length, with points colored and shaped by species. The visualization uses D3 v7 with local ES6 modules for modularity. It leverages `scaleLinear`, `scaleOrdinal`, and `symbolsFill` to map data values to positions and categorical shapes, while a custom shape legend explains the species encoding. Data is loaded as CSV via `fetch` and parsed with `csvParse`.

Ssrikkanth05

95% match