Fork of Scatter Plot with Shape

100%

Fork of Scatter Plot with Shape

✓ Published0🌍 Public

Last edited Jun 28, 2023

Created on Jun 28, 2023

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.

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

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

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

A scatter plot shows sepal length against petal length for the Iris dataset, with each species represented by a distinct symbol shape and a legend mapping species to shapes. The visualization loads CSV data via `fetch` and `csvParse`, then renders marks using D3’s `symbol`, `scaleLinear`, `scaleOrdinal`, and `symbolsFill`. Axes and labels are added through custom ES6 modules (`axes.js`, `scatterPlot.js`) using `axisLeft`, `axisBottom`, and D3 selections.

LLakshmanRangisetti

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

Vvineelaramulapalli32

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

95% match