Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Reusable D3 Scatter Plot

Public visualization

Viewing a saved revision (read-only)

33f25ac5774549c79bca27b418604110

Reusable D3 Scatter Plot

0 stars2🌍 Public
Mmax-31
Last edited Aug 28, 2022
Created on Aug 28, 2022
Forked from D3 Scatter Plot

This example presents a reusable D3.js scatter plot component built with React and D3 v7. It cycles through different Iris flower measurements (petal width, sepal width, petal length, sepal length) every two seconds, animating the x-axis while the y-axis remains fixed on sepal width. Using `d3.csv` to load the Iris dataset, it leverages `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render SVG circles and update axes dynamically. The scatter plot’s configuration is managed through getter/setter methods, allowing flexible parameter changes without redrawing the entire visualization.

AI-generated description

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

See also React Starter.