Skip to main content
SimilarExport ZIP
100%

Reusable D3 Scatter Plot with Symbols

✓ Published0🌍 Public
TToly
Last edited Dec 30, 2022
Created on Dec 30, 2022

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.

AI-generated description

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

MIT Licensed

Similar vizzes

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
96% 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 Scatterplot with Symbols

This reusable D3 scatterplot displays the Iris dataset, plotting petal width against sepal length with points colored by species. The visualization uses D3's `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `symbols`, and `symbol` APIs to generate scalable vector graphics (SVG) paths as scatterplot marks, with axis labels rendered as rotated text. Data is loaded asynchronously from a remote CSV file using `d3.csv`, and the plot is fully configurable through a fluent interface that accepts dimensions, margins, and value accessor functions.

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

Reusable D3 Scatter Plot w/ symbols

This reusable D3 scatter plot visualizes the Iris Dataset, mapping petal length against sepal length with each species represented by a distinct symbol from `d3.symbols`. The chart uses `d3.scaleLinear` for the x and y axes, `d3.scaleOrdinal` to assign symbols based on the species, and includes axis labels via SVG text elements. The code is structured as a configurable function that accepts width, height, data, margins, and label properties, with the dataset loaded asynchronously from a CSV using `d3.csv`. All rendered output is SVG.

MMichael Bergerson
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 scatter plot with different symbols

A reusable scatter plot displays the Iris Dataset, mapping petal width against sepal length and encoding species with distinct D3 symbols via `d3.symbol` and `d3.scaleOrdinal`. The D3 v6 code constructs the visualization using `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for ticks, and SVG `path` elements for marks. It follows the reusable chart pattern, exposing configurable width, height, margins, and accessor functions. The plot renders with a 100-pixel symbol size and includes a legend-less categorical differentiation of the three iris species.

Mmboinapally17
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