Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Scatter Plot with React & D3

Public visualization

Viewing a saved revision (read-only)

a1f87fa7dc1a424daf0b317bcb8810b7

Scatter Plot with React & D3

0 stars1🌍 Public
223100098@lums.edu.pk
Last edited Oct 10, 2025
Created on Oct 9, 2025

This example shows a scatter plot of the classic Iris dataset, displaying sepal length on the x-axis and sepal width on the y-axis for 150 individual flowers. The visualization is built using React's `useRef` and `useEffect` hooks to manage the SVG element and coordinate the loading of CSV data via D3's `csv` function, after which the `viz` function from `viz.js` renders the chart. The rendering relies on D3 v7 utilities including `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to compute scales and draw axes, while D3's `select` and `.join` operations efficiently append the circles, axis labels, and axis groups to the SVG.

AI-generated description