Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Data with React & D3 - Stylied scatter plot

Public visualization

Viewing a saved revision (read-only)

e5f7dda614f9403097abf76f7bdfcbf0

Rendering Data with React & D3 - Stylied scatter plot

0 stars1🌍 Public
Kkeitheade
Last edited Nov 4, 2021
Created on Nov 4, 2021

This scatter plot displays the Iris dataset, plotting sepal length against sepal width for individual flower samples. The visualization uses React components to structure the SVG rendering, with D3.js v7 handling the linear scaling, axis tick generation, and data loading via the `d3.csv` function. Custom React components for the axes and data marks demonstrate a hybrid approach, where D3's `scaleLinear` and `extent` functions compute the chart geometry while React's JSX syntax defines the SVG output, including styled tick marks and circles with hover tooltips.

AI-generated description

React Starter code.