Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Shape

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

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.

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 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 displays the classic Iris flower dataset, plotting sepal length against petal length with dots colored and shaped to represent different species. The visualization uses a D3.js scatter plot, with points positioned by linear scales and a legend that maps species names to their corresponding shapes via a shape scale. The axes and legend are all built with D3’s selection API, while the data is loaded asynchronously from a CSV file and parsed with `csvParse`.

Bbogasamudramvamsikrishnareddy
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
Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This scatter plot visualizes Iris flower measurements, mapping sepal length to the x-axis and petal length to the y-axis, with species encoded by distinct shapes. The chart uses d3.scaleLinear for position scales and d3.scaleOrdinal with d3.symbolsFill to assign geometric symbols to each species. A custom shape legend explains the species-to-symbol mapping, while d3.axisLeft and d3.axisBottom render the labeled axes. Data is loaded from a remote CSV and parsed with d3.csvParse before being plotted.

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