Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Shape

✓ Published0🌍 Public
SSwapna1915
Last edited Jul 3, 2023
Created on Jul 3, 2023
Forked from Hello VizHub

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.

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

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

Fork of Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each point’s shape encoding the species. The chart uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbolsFill` for shape encoding, and `d3.symbol()` to generate the mark paths. A shape legend is rendered using the `d3.selectAll().join()` pattern for ticks, while CSV data is fetched and parsed with `d3.csvParse`.

VVarshareddy2912
94% 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…

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

Fork of Scatter Plot with Shape

This scatter plot visualizes iris flower measurements, mapping sepal length and petal length along the axes while using distinct symbols to encode species type. It is built with D3 v7, leveraging `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and `symbolGenerator` to draw marks. The visualization includes a custom shape legend and loads data from a CSV file, then parses numeric fields before rendering.

JJayanthKumarkoni
94% 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
94% match