Skip to main content
SimilarExport ZIP
100%

Scatter plot shapes

✓ Published0🌍 Public
DDouglas mochama
Last edited Apr 15, 2024
Created on Apr 15, 2024
Forked from Activity6_Task4

A scatter plot uses the Iris dataset to compare sepal length against sepal width, with each species distinguished by a unique geometric symbol rendered as SVG path data. D3’s `scaleOrdinal` maps species names to symbol strings from `d3.symbols`, which are then applied to `d3.symbol` shapes. The chart encodes data points as translucent steel-blue markers, with axes labeled using `axisBottom` and `axisLeft`. Data is loaded via `d3.csv` and scaled using `scaleLinear` for position.

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…

Scatter Plot with Shape

This scatter plot displays the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with each species represented by a distinct symbol shape. The visualization loads CSV data via `fetch`, parses it with `d3.csvParse`, and renders circular, triangular, and other shapes using `d3.symbol` and `symbolsFill`. A custom shape legend, built with `scaleOrdinal`, identifies species, while `d3.axisLeft` and `d3.axisBottom` provide labeled axes. The chart updates responsively to the browser window size.

Cchsaisriharsha@gmail.com
93% match
Loading thumbnail…

Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, comparing sepal length against petal width for three iris species—setosa, versicolor, and virginica—using distinct symbols for each species. A custom legend maps species to shapes, generated via d3.symbol and d3.scaleOrdinal. Axes are rendered with d3.axisLeft and d3.axisBottom, while the plot is built as a reusable scatterPlot function called within an SVG container. Data is loaded asynchronously from a CSV file and parsed with d3.csvParse.

Ggeethikal
92% match
Loading thumbnail…

Scatter Plot with Shape

This example visualizes the Iris Dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with each of the three iris species distinguished by a distinct symbol shape. A legend encoded with the same shapes identifies the species. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbol` to position and shape the data points, alongside `axisLeft` and `axisBottom` for the axes. Data is loaded from a CSV file and parsed with `csvParse`, with symbols rendered using `symbolGenerator.type().size()`.

CCurran Kelleher
92% match
Loading thumbnail…

Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, plotting sepal length against petal length for individual flowers. Each point’s shape encodes the flower species using D3’s `symbolsFill` and `symbol()`, with a legend generated via a custom `shapeLegend` component. The chart uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` APIs, pulling data from a remote CSV file. A custom `symbolGenerator` renders distinct geometric markers (circles, squares, etc.) for each species, while axes and labels are assembled through the reusable `axes` module.

Rrikhitakoganti12
91% match
Loading thumbnail…

scatter plot with shape

This example presents a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. It distinguishes the three iris species by rendering each data point with a distinct shape from the `symbolsFill` array, using `scaleOrdinal` and the `symbol` type generator. The visualization includes labeled axes built with `axisLeft` and `axisBottom`, alongside a custom shape legend positioned within the plot. The chart loads data via `csvParse` from a remote GitHub source and demonstrates modular ES6 imports for local visualization components.

Vvikramkotlo9@gmail.com
91% match
Loading thumbnail…

Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis, petal length on the y-axis, and encoding species using different marker shapes. The visualization includes axes with labels and a shape legend to identify species categories. Built with D3 v7, the code uses `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to generate the plot. The implementation relies on a custom `axes.js` module for axis rendering and a `shapeLegend.js` module for the legend, with data loaded asynchronously from a CSV file.

Ssusarlasruthi2000@gmail.com
91% match
Loading thumbnail…

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 for 150 samples. Each species—setosa, versicolor, and virginica—is distinguished by a unique symbol shape using D3’s `d3.symbol()` and `symbolsFill` scale. The chart includes labeled axes via `d3.axisBottom` and `d3.axisLeft`, plus a custom shape legend positioned at a fixed coordinate. Data is loaded from a CSV file and parsed with `d3.csvParse`, with numeric fields converted before rendering.

Ssriharshithaanugu5@gmail.com
90% match
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
90% match