Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Untitled

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

9dac6378ac1e4a8798a61acad5a68358

Open

Untitled

0 stars0🌍 Public
Jjeffchengtw
Last edited Sep 27, 2022
Created on Sep 27, 2022
Forked from React & D3 Starter

This example shows a scatterplot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. It uses D3’s `scaleLinear` and `extent` to compute scales, and renders circles with `selection.join` for data binding. The visualization is built with React 18 and D3 7, where React manages the SVG container and a D3 function handles chart drawing. Axes are added via `axisBottom` and `axisLeft`, with SVG as the rendering output.

AI-generated description

This viz is a starter that demonstrates patterns used in real world projects in which complexity is anticipated to scale.

  • Decoupled React & D3 integration
  • Opening moves for scalable complexity
  • Industry standard ES modules and JSX
  • Copy-paste into existing projects

Any questions? Ask on Twitter!

Also viewable in:

MIT Licensed