Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Basic Scatter Plot with React & D3

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

c667797065c346168654536a2091d02a

Open

Fork of Basic Scatter Plot with React & D3

0 stars0🌍 Public
KKal
Last edited Sep 17, 2025
Created on Sep 15, 2025

This fork of a React & D3 scatter plot displays the classic Iris dataset, plotting petal length against petal width for all three species as a single series of burnt-orange circles on a cream background. Built with React 19 and D3 v7, the visualization uses `d3.csv` to load data, `d3.scaleLinear`, `d3.extent`, and `d3.axisBottom`/`axisLeft` to construct scales and axes, with charcoal-gray styling applied throughout.

AI-generated description

React + D3 Iris Petal Scatter Plot

This project is a simple starter for data visualization using React (via CDN ESM imports) and D3.js, displayed as a scatter plot of Iris flower petal lengths vs petal widths. The dataset used is a subset of the classic Iris dataset.

Features

  • React 19 (from CDN, no build step)
  • D3.js v7 (from CDN)
  • Visualization is created by D3 within a React component
  • Data loaded from data.csv

How to Use

  1. Clone or Download this repository.

  2. Open index.html directly in your browser (no build tools required).

ℹī¸ All dependencies are loaded via CDN ESM imports, so you only need a modern browser.

  1. The scatter plot will appear:
    • X axis: Petal Length
    • Y axis: Petal Width

Project Structure

  • index.html: The main HTML file. Loads the React app.
  • index.js: Bootstraps the React app.
  • App.js: Main React component. Loads data and renders the SVG.
  • viz.js: Contains the D3 code that creates the visualization.
  • data.csv: Iris flower data (only the first species).
  • README.md: Project documentation (this file).

Customization

  • To use a different dataset, replace data.csv with your own in the same format.
  • To change the fields plotted, edit the xValue and yValue in App.js and axis labels in viz.js.

License

MIT or public domain