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