Reusable D3 Scatterplot with Symbols

100%

Reusable D3 Scatterplot with Symbols

✓ Published0🌍 Public

Last edited Mar 2, 2023

Created on Feb 27, 2023

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.

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 D3 scatter plot visualizes the Iris dataset by mapping petal length and sepal length along the x and y axes, with species encoded through distinct symbols. Built with D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` with `symbols` and `symbol` to render marks as SVG paths, and `axisLeft`/`axisBottom` for the chart framework. The `scatterPlot` function is configurable via chained setters for width, height, data, and margins, ingesting CSV data through `csv` and rendering in an SVG container.

Wwspwll@gmail.com

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

95% match

Loading thumbnail…

Reusable D3 Scatter Plot With Symbols Following Along

This reusable D3 scatter plot displays the classic Iris dataset, mapping petal length against sepal length with points colored by species. The chart uses d3.scaleLinear for axes, d3.scaleOrdinal with the symbols array to assign distinct shapes to each species, and a d3.symbol generator to render SVG paths. Axis ticks are styled via d3.axisLeft and d3.axisBottom, while the full-width responsive layout fills the browser window.

PParker-D5

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

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

A reusable D3 scatterplot displays the Iris dataset with species encoded by symbol type, plotting petal length against sepal length. The chart uses `scaleLinear` for axes, `scaleOrdinal` with `symbols` for species-specific shapes, and `symbolGenerator` to construct SVG paths. The `scatterPlot` function exposes chainable setters for width, height, data, margins, and accessors, applied via `svg.call()`. Axes are rendered with `axisLeft` and `axisBottom`, while `d3.csv` loads the data and parses numeric fields.

Aadityapalliyil0@gmail.com

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

95% match