Skip to main content
SimilarExport ZIP
100%

Reusable scatter plot with different symbols

✓ Published0🌍 Public
SSUSHMA CHIRRA
Last edited Mar 30, 2023
Created on Mar 28, 2023

This example presents the classic Iris Dataset as an interactive scatter plot rendered with SVG. It maps petal length to the x-axis and sepal width to the y-axis, using distinct symbols and colors (yellow, orange, navy) to differentiate the three iris species. Built with D3 v6, the code defines a reusable `scatterPlot` component that leverages `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisBottom`/`axisLeft` to generate the chart. The visualization resizes to the full browser window and parses the CSV data via `d3.csv`.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable scatter plot with different symbols

This example presents the Iris dataset as a reusable scatter plot where each species is encoded with a distinct symbol shape. The visualization maps petal width to the x-axis and sepal length to the y-axis, with data points rendered as SVG paths. The code implements a reusable `scatterPlot` function using D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, and `symbol` to generate shapes, while `axisLeft` and `axisBottom` create the axes. The plot is sized to the full window, fetching data from a remote CSV file.

Ssaisreearibandi
95% match
Loading thumbnail…

Reusable scatter plot with different symbols

This example visualizes the Iris Dataset, mapping petal width to the x-axis and sepal length to the y-axis. Each data point is rendered as a distinct symbol from D3’s `symbols` set, with the species of iris determining which symbol shape is used. The visualization is built as a reusable D3 component using `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol().size(100)` to generate the scatter plot’s marks. The `scatterPlot` function is configured with margin, size, and accessor functions, while the SVG rendering fills the browser viewport.

Vvamshisoletii
94% match
Loading thumbnail…

Reusable scatter plot with different symbols

This example presents a scatter plot of the Iris dataset, using different symbol shapes and colors to distinguish the three plant species based on petal width and sepal length. The visualization is built as a reusable D3 component with a configured margin, scales, and axes. The code imports D3’s `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbols` APIs to map data values to chart positions and marker types, while `csv` loads the remote dataset. Rendered as SVG, the plot resizes to fit the window and includes custom tick styling.

Pprachow
94% match
Loading thumbnail…

Reusable scatter plot for iris data set with different symbols

This example renders the classic Iris dataset as a scatter plot, encoding species with different D3 symbols and using petal width and sepal length for the x- and y-axes. The reusable D3 chart is built with `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbols`, while axes are drawn using `axisLeft` and `axisBottom`. Data is loaded asynchronously from a GitHub Gist via the D3 `csv` function, and the result is rendered as SVG. The plot fills the browser window, with margins and symbol size configured through a chainable API.

Vvidhyanamini
94% match
Loading thumbnail…

Reusable scatter plot with different symbols

This example visualizes the Iris Dataset, plotting petal width against sepal length with each of the three species represented by a distinct D3 symbol (circle, cross, diamond, etc.) via `d3.scaleOrdinal` and `d3.symbol`. Rendering to SVG, the reusable `scatterPlot` function uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for scales and axes, while loading CSV data with `d3.csv`. Symbol size is fixed, and the chart adapts to the browser window dimensions.

HHarshavardhan
94% match
Loading thumbnail…

Reusable scatter plot with different symbols

This interactive scatter plot visualizes the Iris dataset, mapping petal width and sepal length along the x and y axes while using distinct symbols to represent different species. Built with D3 v6 and React, it renders as an SVG that fills the browser window. The reusable `scatterPlot` component leverages `scaleLinear`, `scaleOrdinal`, `symbols`, and `symbol` to generate the plot, with `axisLeft` and `axisBottom` for the axes. The chart also provides the 100-pixel marks and axis tick styling via CSS.

AAISWARYAMARAPATLA1999
94% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example presents the classic Iris dataset as a reusable D3 scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. Different species are distinguished through distinct SVG symbols, generated using D3’s `symbol` and `scaleOrdinal`. The visualization is built with a reusable `scatterPlot` function, which configures linear scales, axes, margins, and symbol size. Data is loaded as CSV via D3’s `csv` method, and the plot updates the DOM by joining path elements. The output is a clean, interactive-free scatter chart rendered as SVG.

LLakshmiManjushaReddyYarreddu
94% match
Loading thumbnail…

Reusable D3 Scatter Plot with symbols

This example demonstrates a reusable scatter plot implemented with D3 v7, visualizing the classic Iris dataset by mapping petal width and sepal length along the axes. The plot distinguishes the three Iris species using different SVG symbols, generated through `d3.symbol` and `d3.symbols`, with positions scaled by `d3.scaleLinear` and axes drawn via `d3.axisLeft` and `d3.axisBottom`. The chart is built as a custom function that accepts configurable width, height, margins, and accessor functions, and renders SVG elements after loading data asynchronously with `d3.csv`.

Lliu yang
93% match