Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Shape

✓ Published0🌍 Public
HHarshiiiiiiiip
Last edited Jul 5, 2023
Created on Jul 5, 2023
Forked from Hello VizHub

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

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

Fork of Scatter Plot with Shape

This example demonstrates a scatter plot of Iris flower measurements, plotting sepal length against petal length. Each point is shaped according to the species of the flower, with a custom legend mapping the three species to distinct symbols. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbolsFill` to render the marks, and loads the Iris dataset from a remote CSV file via `csvParse`. The rendering pipeline is modular, with separate modules for axes, the scatter plot, and the shape legend.

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

Fork of Scatter Plot with Shape

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.

MManideeprenikindi
94% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This example uses D3 v7 to render a scatter plot of the Iris dataset, mapping sepal length and petal length to the x- and y-axes and using different point shapes to encode the species of each flower. A legend communicates the shape-to-species mapping. The code loads data from a CSV via `fetch` and `d3.csvParse`, and builds the visualization using `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbolsFill`, and `d3.axisLeft`/`d3.axisBottom` for the axes.

Vvineelaramulapalli32
94% match