Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Shape

✓ Published0🌍 Public
MManideeprenikindi
Last edited Jul 11, 2023
Created on Jul 11, 2023
Forked from Hello VizHub

This example visualizes the Iris dataset as a scatter plot of sepal length against petal length, with three iris species distinguished by different D3 symbol shapes (circles, crosses, and diamonds) via `d3.scaleOrdinal` and `d3.symbol`. A custom shape legend renders the species labels. The code demonstrates modular ES6 imports, including local modules for axes and legend rendering, and loads data with `d3.csvParse` from a remote CSV file.

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 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 example visualizes the classic Iris dataset as a scatter plot, encoding sepal length on the x-axis and petal length on the y-axis. The species of each flower is distinguished by shape using D3’s `symbol` generator with `symbolsFill`, and a custom legend displays the shape-to-species mapping. Axes are rendered with `axisLeft` and `axisBottom`, while scales are created via `scaleLinear` and `scaleOrdinal`. Data is loaded asynchronously from a GitHub-hosted CSV and parsed with `csvParse`, with the visualization updating reactively through a state-based render cycle.

MManideeprenikindi
95% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This example shows a scatter plot of the Iris dataset, displaying sepal length against petal length with points shaped by species. It uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbolsFill` to map categorical species data to distinct shapes. The visualization also implements a custom shape legend and axes as local ES6 modules, with data loaded remotely via `csvParse` from a GitHub-hosted CSV file.

NNagateja99
95% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This example visualizes the Iris dataset, plotting sepal length against petal length with points shaped according to species. The code uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to generate the scatter plot, along with `axisLeft` and `axisBottom` for axes. A custom shape legend is rendered using `shapeLegend`, and data is loaded asynchronously via `fetch` and parsed with `csvParse`.

BBhavyaMammai
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 example uses a D3 v7 scatter plot to visualize the Iris flower dataset, mapping sepal length to the x-axis and petal length to the y-axis. The three species are distinguished by different symbol shapes from d3.symbol, rendered with `symbolGenerator.type()` and a `scaleOrdinal` mapping to `symbolsFill`. A custom legend, built with the shapeLegend module, displays the species-to-shape correspondence, while the axes module adds labeled axis scales via `d3.axisLeft` and `d3.axisBottom`. Data is fetched as CSV and parsed with `d3.csvParse`, with numeric values converted before plotting.

Iindushashi.g@gmail.com
94% match
Loading thumbnail…

Fork of 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 species differentiated by symbol shapes from d3.symbol and d3.scaleOrdinal. A custom shape legend displays each species’ symbol, while d3.axisBottom and d3.axisLeft render labeled axes. The code loads data via d3.csvParse from a GitHub-hosted CSV and uses d3’s join pattern to update SVG elements.

NNukaShravanKumar
94% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This example shows a scatter plot of the Iris dataset, encoding sepal length on the x-axis and petal length on the y-axis. Species is represented by three distinct shapes via a `scaleOrdinal` with `symbolsFill`, and a custom legend displays the shape-to-species mapping. The code builds reusable modules for axes and legends, loads data with `csvParse` from a remote URL, and renders the visualization using D3 v7’s data-join pattern with `selectAll` and `join`.

HHarshiiiiiiiip
94% match