Skip to main content
100%

Reusable D3 Scatterplot Symbolised

✓ Published1🌍 Public
Rrespingu
Last edited Nov 18, 2022
Created on Oct 6, 2022

This example demonstrates a reusable D3.js scatterplot component that visualizes the classic Iris dataset, plotting sepal width against petal width with distinct symbols for each species. The visualization cycles through different column pairings every 200 milliseconds, smoothly updating the axes and points with animation. Built with React and D3 v7, the code uses `scaleLinear` for axes, `scaleOrdinal` and `symbol` for icons, and `axisLeft`/`axisBottom` for rendering. The scatterplot module exposes configurable setters for width, height, data, margins, and symbol size, making it fully reusable.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes