Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Basic Scatter Plot with React & D3

Public visualization

Viewing a saved revision (read-only)

f7232ef0e8d64fe0a5084b9b7335c3a3

Basic Scatter Plot with React & D3

0 stars2🌍 Public
BBismark Kofi Owusu Sarfo
Last edited Sep 10, 2025
Created on Sep 10, 2025

This example shows the classic Iris flower dataset in a basic scatter plot. It plots sepal length on the x-axis against sepal width on the y-axis, with each of the 150 data points rendered as a small black circle. The code uses React for component state and effects, while D3 v7’s `select`, `scaleLinear`, and `extent` functions handle the SVG element selection and linear scale mapping. The data is loaded from a CSV file using D3’s `csv` method and passed to a reusable `viz` function for rendering, following a clean separation between React and D3 logic.

AI-generated description