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

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This interactive scatter plot displays the Iris dataset, mapping sepal length against petal length while encoding species through distinct symbol shapes. The visualization uses d3.scaleLinear for both axes and d3.scaleOrdinal with d3.symbolsFill to assign unique geometric markers to each species. A custom legend, built with d3.symbol, explains the shape-to-species mapping. The code leverages d3.csvParse to load remote data and d3.axisLeft/axisBottom for labeled axes, with axes and legend implemented as reusable functions.

Aabjalshaik02@gmail.com

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

96% match

Loading thumbnail…

Fork of Scatter Plot with Shape

This interactive D3.js scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis. The chart distinguishes the three iris species by drawing each data point with a unique symbol, using the `symbolsFill` scale and the d3 `symbol()` generator to assign different glyph shapes. A legend on the right side, built with `d3.scaleOrdinal`, identifies the species associated with each shape. The plot reads data from a remote CSV file, parsing it with `d3.csvParse` and rendering the visualization using d3's join-based API for efficient updates.

Ppardha1411

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

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

96% match

Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This scatter plot displays Iris flower measurements, plotting sepal length against petal length for three species. The visualization uses SVG symbols from d3.symbol and d3.symbolsFill to differentiate species by shape, with a custom legend showing the shape-to-species mapping. The code imports from d3 modules (d3.axisLeft, d3.axisBottom, d3.scaleOrdinal, d3.extent) to build scales, axes, and marks, while asynchronously loading and parsing the iris dataset from a remote CSV via d3.csvParse.

BBhavanaGIrni

95% match

Loading thumbnail…

Fork of Scatter Plot with Shape

This interactive scatter plot visualizes the Iris dataset, mapping sepal and petal lengths along the axes while encoding species with distinct D3 symbol shapes. The visualization includes a shape legend for species identification. It uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to render marks, along with custom axis and legend modules. Data loads asynchronously via CSV parsing, and the plot updates dynamically through a state management system.

Hharsha

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

95% match