Skip to main content
SimilarExport ZIP
100%

Reusable scatter plot with different symbols

✓ Published0🌍 Public
Pprachow
Last edited Mar 13, 2023
Created on Mar 13, 2023

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.

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
95% match
Loading thumbnail…

Reusable scatter plot with different symbols

This example displays the Iris Dataset in a scatter plot, encoding each flower species with a distinct symbol shape. The reusable scatter plot implementation, built with D3.js, maps petal width to the x-axis and sepal length to the y-axis. The `scatterPlot` module uses D3’s `scaleLinear` for axes, `scaleOrdinal` for symbol assignment, and `symbol` to generate SVG path data. It loads data from a remote CSV, renders axis ticks at 24px, and fills the browser window.

SSRI RAM REDDY KOTERU
94% match
Loading thumbnail…

Reusable scatter plot with different symbols

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

SSUSHMA CHIRRA
94% match
Loading thumbnail…

Reusable scatter plot with different symbols

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, encoding petal width on the x-axis, sepal length on the y-axis, and species with different SVG symbols. The code uses D3 version 6’s `csv` loader and `select` method to fetch and render the data, while a custom `scatterPlot` function encapsulates the chart’s configuration. The plot is drawn as an SVG with dynamic sizing based on the viewport, and symbol shapes differentiate the three species. The implementation highlights a modular, reusable approach to building charts with D3.

SSaivignesh-9176
94% match
Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

This example shows a reusable scatter plot of the Iris dataset, where each flower is represented by a distinct symbol indicating its species. The plot maps petal width to the x-axis and sepal length to the y-axis, with axes added via d3.axisLeft and d3.axisBottom. The code implements a modular scatterPlot component using d3.scaleLinear for positioning, d3.scaleOrdinal with d3.symbols for shape encoding, and a chainable API for configuration. Data is loaded as CSV from a remote URL, and the entire visualization is rendered as SVG.

Nnim@brejnholt.dk
94% match
Loading thumbnail…

Reusable d3 Scatter Plot with Symbols

This example shows a scatter plot of the Iris dataset, using distinct D3 symbols (circles, crosses, diamonds, etc.) to represent different species based on petal and sepal length. The visualization is built as a reusable `scatterPlot()` function that accepts configurable accessors for x, y, and symbol values, along with margins and symbol size. It relies on `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisLeft`, `d3.axisBottom`, and `d3.symbol` to render SVG paths, fetching data from a CSV via `d3.csv` and styled with custom CSS.

AAndrea Mignone
94% match
Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

This example illustrates a reusable D3.js scatter plot that visualizes the classic Iris dataset, mapping petal width against sepal length and using different symbols to distinguish species. The implementation leverages D3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` APIs to create a flexible, configurable chart component. The code loads data from a remote CSV file, parses numeric fields, and renders the plot as an SVG using a custom `scatterPlot` function with settable properties like margins and symbol size.

OOleg Zhernovoy
94% match