Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Shape

✓ Published0🌍 Public
Hharipriyaa07
Last edited Jul 6, 2023
Created on Jul 6, 2023
Forked from Hello VizHub

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.

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
96% 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
96% 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
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 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
95% 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
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 scatter plot visualizes Iris flower measurements, mapping sepal length to the x-axis, petal length to the y-axis, and using different point shapes to distinguish species. The visualization loads CSV data from a remote URL and parses it with `d3.csvParse`. D3's `scaleLinear` and `scaleOrdinal` handle the continuous and categorical scales, while the `symbol` generator creates the shape-based marks. A custom legend shows the shape-to-species mapping, with axes added via D3’s `axisLeft` and `axisBottom`.

Mmn0658
95% match