Skip to main content
SimilarExport ZIP
100%

Reusable D3 Scatter Plot with symbols

✓ Published0🌍 Public
KKhanin Sisaengsuwanchai
Last edited May 22, 2023
Created on May 19, 2023

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, mapping sepal length and width while using different D3 symbols (circles, crosses, diamonds, and squares) to distinguish flower species. The visualization renders as an SVG and leverages d3.scaleLinear for axes, d3.scaleOrdinal for symbol types and colors, and d3.symbol to generate the mark paths. The chart is built with a custom scatterPlot function that accepts configurable accessors and margin settings, making it adaptable for other datasets and variables.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Reusable D3 Scatterplot with Symbols

This example presents a reusable D3 scatterplot that visualizes the Iris dataset, mapping petal length against sepal length. It employs SVG rendering within a React framework, using d3.csv to load data and d3.scaleLinear for axes. Distinct species are encoded using d3.scaleOrdinal for colors and d3.symbols for varied point shapes, with d3.axisLeft and d3.axisBottom providing labeled axes. The chart is configured fluently via a custom scatterPlot function, demonstrating a modular approach to building interactive visualizations.

Mmegan-grannan
95% match
Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

A reusable D3 scatter plot displays the Iris dataset, encoding petal width against sepal length and distinguishing species by symbol type. The code builds a custom chart function using d3.scaleLinear, d3.axisLeft, d3.axisBottom, d3.scaleOrdinal, and d3.symbol to generate SVG paths. Data loads via d3.csv, with numeric parsing handled by a row function. The chart adapts to the window size and applies a fixed margin, rendering symbols sized 50 pixels within an SVG container.

Ppawelsapiecha
95% match
Loading thumbnail…

Reusable D3 Scatter Plot with symbols

This example presents a reusable scatter plot built with D3 v7 and React, displaying the Iris dataset with sepal length on the y-axis and petal length on the x-axis. Each species of iris is distinguished by a different SVG symbol shape, drawn using `d3.symbol` and `d3.symbols`, with axes rendered via `d3.axisLeft` and `d3.axisBottom`. The chart uses `d3.scaleLinear` for positioning and `d3.scaleOrdinal` to map species to symbols, while the reusable `scatterPlot` function is configured through a fluent interface.

Ccharlieronchetti@gmail.com
95% match
Loading thumbnail…

Reuseable D3 Scatter Plot Exercise with Symbols

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, encoding petal width and sepal length on the x and y axes while using different D3 symbols to distinguish species. The chart is built as a custom `scatterPlot` function that leverages D3 scales like `scaleLinear` and `scaleOrdinal`, along with `axisLeft`, `axisBottom`, and the `symbol` generator to render SVG paths. Data is loaded asynchronously via `d3.csv`, and the plot is rendered into a full-window SVG using a React-compatible approach.

Ppkdvalis
95% match
Loading thumbnail…

Reusable ScatterPlot with Symbols

This example shows a reusable scatterplot of the Iris dataset, where each point is drawn as a distinct symbol based on flower variety. It uses D3’s `scaleOrdinal` to map varieties to D3 symbols, and `symbol` to generate the SVG paths. The chart axes are created with `axisLeft` and `axisBottom`, while a `scaleLinear` maps petal length and sepal width. The chart is packaged as a configurable function, allowing the data, accessors, margins, and symbol size to be set by the caller.

WWRCIECH
94% match