Skip to main content
SimilarExport ZIP
100%

Reusable D3 Scatter Plot with Symbols

✓ Published0🌍 Public
OOleg Zhernovoy
Last edited Dec 27, 2022
Created on Dec 27, 2022

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.

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

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 D3 Scatter plot with Symbol

This example demonstrates a reusable D3 scatter plot that visualizes the iris dataset, mapping petal length and sepal length along the x and y axes, with different species represented by distinct symbols. The chart is built using React and renders as SVG, with axes and symbols generated via d3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` APIs. The code loads the data asynchronously from a CSV URL and applies custom parsing to convert numeric fields.

WWasanta Pruttisarikorn
94% match
Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

This example presents a reusable D3 scatter plot visualizing the Iris Dataset, mapping petal width to the x-axis and sepal length to the y-axis. It uses an ordinal scale with D3’s built-in symbol generators to distinguish the three iris species by shape. The plot is rendered as SVG, with axes added via `axisLeft` and `axisBottom`. The code defines a configurable `scatterPlot` function, allowing custom setters for data, value accessors, margins, symbol size, and dimensions, and is invoked with chained methods in `index.js`.

RReyden Harris
94% match