Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Shape

✓ Published0🌍 Public
VVenkat-Sumith-Thota
Last edited Jul 9, 2023
Created on Jul 9, 2023
Forked from Hello VizHub

This scatter plot displays iris flower measurements with sepal length on the x-axis and petal length on the y-axis, using d3.scaleLinear for position scales and d3.scaleOrdinal with d3.symbolsFill to map species to distinct shapes. A custom shapeLegend module renders the species key, while d3.axisLeft and d3.axisBottom generate the axes with labels. The visualization loads CSV data via fetch and d3.csvParse, and both local ES6 modules (axes, scatterPlot, shapeLegend) and D3 v7 imports demonstrate modular code organization.

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 interactive scatter plot displays Iris flower measurements, mapping sepal length along the x-axis and petal length along the y-axis, with species distinguished by different symbol shapes. The visualization uses d3.scaleOrdinal with symbolsFill to assign distinct shapes to each species, rendered via d3.symbol and path elements. A custom legend shows the shape-to-species mapping, while axes are generated using d3.axisLeft and d3.axisBottom. Data is loaded asynchronously from a CSV file using d3.csvParse and fetched from a GitHub repository, with numeric fields coerced before rendering.

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

A scatter plot of the Iris dataset displays sepal length against petal length, with points colored and shaped by species. The visualization uses D3 v7 with local ES6 modules for modularity. It leverages `scaleLinear`, `scaleOrdinal`, and `symbolsFill` to map data values to positions and categorical shapes, while a custom shape legend explains the species encoding. Data is loaded as CSV via `fetch` and parsed with `csvParse`.

Ssrikkanth05
94% 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
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 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