Activity 7 - Scatter Plot with Shape

100%

Activity 7 - Scatter Plot with Shape

✓ Published0🌍 Public

Last edited Jun 28, 2023

Created on Jun 28, 2023

This scatter plot displays the relationship between sepal length and petal length in the Iris dataset, with species encoded through distinct point shapes. The visualization uses D3 v7 to load data from a GitHub-hosted CSV file and applies d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbolsFill for shape mapping, and a custom shape legend. Points are rendered as SVG paths using d3.symbol, while axes and labels are generated via custom axis functions.

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…

Activity 7 Scatter Plot with Shape

This scatter plot displays sepal length versus petal length for iris flowers, using distinct shapes to encode the species of each sample. Data is loaded from a remote CSV file and parsed with `d3.csvParse`. The visualization is built with D3 v7, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbolsFill` to map species to symbols, and `d3.symbol` to generate the shape paths. A legend is rendered manually to identify each species shape.

Mmandadi1999

95% match

Loading thumbnail…

Activity7 Fork of Scatter Plot with Shape

This scatter plot displays the Iris dataset, mapping sepal and petal lengths on the x and y axes while using different shapes to distinguish the three species. The visualization loads data from a remote CSV file and uses D3 v7 APIs including `csvParse`, `scaleLinear`, `scaleOrdinal`, and `symbolsFill` to render the marks. A custom shape legend, built with `symbol` and `shapeLegend`, shows the species-to-shape mapping, while axes are added using `axisLeft` and `axisBottom`. The chart updates dynamically when the data is fetched and parsed.

SSharankumar02

92% match

Loading thumbnail…

Fork of Scatter Plot with Shape - Activity7-4

This interactive scatter plot visualizes the Iris dataset, displaying sepal length against petal length for three iris species. Each species is represented by a distinct geometric shape, with a legend positioned on the right identifying the corresponding labels. The visualization uses d3.scaleLinear for the axes, d3.scaleOrdinal with d3.symbolsFill for shape encoding, and d3.symbol to generate the SVG path marks. Data is loaded via CSV parsing and rendered using the d3.v7 library's selection and join methods.

VVinay Vemuri

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

90% match

Loading thumbnail…

Scatterplot with shape

This example plots the classic Iris flower dataset on a scatterplot, using sepal length and petal length as the x- and y-axes. Species are distinguished by different symbol shapes, with a legend that supports interactive filtering by clicking on a species. The visualization is built with D3 v7, using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` for shape encoding. Data loads from a CSV file, and hover interactions update the legend’s opacity to highlight the selected species.

SSubhendu Karmakar

90% match

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, showing petal length and petal width on the x- and y-axes, with points colored by species (setosa, versicolor, and virginica). The visualization uses D3 v6 to load CSV data from a GitHub gist, scales the axes with `scaleLinear`, and renders circular marks via SVG. It also maps sepal length and width to each circle’s horizontal and vertical radius, creating an additional layer of variation. Axis labels and tick text are styled through D3’s `axisBottom` and `axisLeft` APIs.

Mmandadi1999

90% match

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot displays the Iris dataset, mapping petal length and petal width on the axes while coloring each point by species (setosa, versicolor, or virginica). The visualization encodes sepal length and width as the `rx` and `ry` radius properties of each circle, effectively creating ellipse-like markers. Built with D3 v6, the code loads CSV data via `d3.csv`, uses `scaleLinear` and `extent` for scaling, and renders SVG circles with `selectAll` and `join`. Axis labels are added manually, and the plot fills the entire browser window.

NNukaShravanKumar

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

90% match