Skip to main content
SimilarExport ZIP
100%

Reusable D3 Scatter Plot with symbols

✓ Published0🌍 Public
Lliu yang
Last edited Nov 23, 2023
Created on Nov 23, 2023

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

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable D3 Scatter Plot w/ symbols

This example demonstrates a reusable D3 scatter plot that visualizes the Iris dataset, mapping petal length and sepal length on the x and y axes. Different Iris species are distinguished using D3 symbols (circles, crosses, diamonds, etc.) via `d3.symbol` and a `scaleOrdinal` mapping. The chart is built with an SVG rendering, utilizing `d3.csv` for data loading, `scaleLinear` for scales, and `axisLeft`/`axisBottom` for axes, while the chart’s dimensions, margins, and labels are configured through a custom reusable function pattern.

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

Reusable D3 Scatter Plot with Symbols

This example shows a reusable D3 scatter plot displaying the Iris dataset, with each species represented by a distinct symbol (circle, diamond, and triangle). The chart maps petal length on the x-axis and sepal length on the y-axis, using axes generated with `d3.axisLeft` and `d3.axisBottom`. The implementation uses `d3.scaleLinear` for positioning, `d3.scaleOrdinal` and `d3.symbol` to assign symbols to species, and a modular JavaScript structure with getter-setter functions to configure width, height, margins, and accessor functions. Data is loaded via `d3.csv` from a GitHub gist URL.

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

Reusable D3 Scatter Plot with Symbols

A reusable D3 scatter plot displays the Iris Dataset, mapping petal width against sepal length and encoding species with distinct SVG symbol shapes from `d3.symbol`. The chart uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` to assign symbols, and `d3.axisLeft`/`d3.axisBottom` for ticks. A `scatterPlot` factory function configures dimensions, margins, and accessors via chained methods, then renders paths using `d3.symbolGenerator`. Data is loaded asynchronously with `d3.csv` from a GitHub Gist, and the plot fills the window with a 24px tick font.

TToly
95% 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 presents a reusable scatter plot of the Iris dataset, where each flower species is represented by a distinct D3 symbol shape. The code uses `d3.scaleLinear` to map petal length and sepal length to x and y positions, `d3.scaleOrdinal` with `d3.symbols` to assign symbol types by species, and `d3.axisLeft` and `d3.axisBottom` for axes. Data is loaded as CSV via `d3.csv`, and the plot is rendered as SVG within a customizable margin.

UUzoemeka Okechukwu Innocent
94% match
Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

This reusable scatter plot displays the Iris dataset, mapping petal width and sepal length while encoding species with distinct D3 symbols. Built with D3 v6, it uses `scaleLinear` for axes, `scaleOrdinal` to map species to symbol types, and a custom `symbol` generator to render SVG paths. The chart renders into a full-window SVG and includes labeled axes with a large font size.

CCurran Kelleher
94% match