Skip to main content
SimilarExport ZIP
100%

Reusable ScatterPlot with Symbols

✓ Published1🌍 Public
WWRCIECH
Last edited Dec 31, 2022
Created on Dec 30, 2022

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.

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

Reusable Scatter PLot with Symbols

This example demonstrates a reusable scatter plot that displays the Iris dataset, mapping petal length and width along the axes while encoding species with distinct symbols and colors. The chart uses d3.scaleLinear for positioning, d3.scaleOrdinal with d3.symbols to generate symbol paths, and d3.axisLeft/axisBottom for ticks. The SVG is rendered via React, and the plot is built as a configurable closure function, with hover tooltips added using SVG `<title>` elements.

Sserebryanaya.n@gmail.com
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
94% match
Loading thumbnail…

Reusable D3 Scatter Plot with symbols

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.

KKhanin Sisaengsuwanchai
94% 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
94% match
Loading thumbnail…

Reusable ScatterPlot with Symbols & Axis Labels

This reusable scatter plot visualizes the Iris dataset, mapping petal length against sepal width and encoding the flower variety with different D3 symbols. Built with React and rendered as SVG, the chart uses d3.scaleLinear for axes, d3.scaleOrdinal for symbol types, and d3.axisLeft/axisBottom for ticks. It displays labeled axes and highlights points in red on hover via CSS, with the main chart logic encapsulated in a configurable scatterPlot function.

WWRCIECH
94% 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
94% 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
94% match