100%

Fork of Basic Scatter Plot with React & D3

✓ Published0🌍 Public

Last edited Sep 17, 2025

Created on Sep 15, 2025

Forked from Basic Scatter Plot with React & D3

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

Clone or Download this repository.
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.

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot for Iris DataSet

This scatter plot visualizes the Iris dataset, displaying petal length and width for three species of iris flowers, each marked by a distinct color. Built with React and D3 v6, the visualization uses `d3.csv` to load data and `d3.scaleLinear` with `d3.extent` to map values to SVG circle positions. The code creates axes with `d3.axisLeft` and `d3.axisBottom`, and applies non-standard `rx` and `ry` attributes to the circles, which are not used for scaling. Data is sourced from a GitHub gist.

Rrohinikotha

91% match

Loading thumbnail…

Fork of Scatter Plot with Color

A React and D3 v5 scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each point is colored by species using `d3.scaleOrdinal`. The chart uses `d3.scaleLinear` for axis scales, reusable React components for axes and marks, and SVG circles with tooltips. Data is loaded asynchronously from a CSV URL using `d3.csv`.

JJakob Waibel

91% match

Loading thumbnail…

Fork of D3 Scatter Plot

This fork of a D3 scatter plot visualizes the Iris dataset, plotting petal length against sepal length. It uses `d3.csv` to load data, `d3.scaleLinear` for axes, and SVG `circle` marks with a join operation. The chart is rendered in React with D3 v6, dynamically sized to the window, and includes axes via `axisLeft` and `axisBottom`.

JJetlinZ

91% match

Loading thumbnail…

Fork of D3 Scatter Plot

This is an interactive scatter plot built with React and D3, rendering as an SVG. It visualizes the Iris dataset, plotting petal width on the x-axis against sepal length on the y-axis. The example uses D3's scaleLinear, extent, axisLeft, and axisBottom to map data points and draw the chart axes. It employs a chainable setter pattern in the scatterPlot function to configure its properties. The code also demonstrates how to load CSV data using D3’s csv function and how to dynamically size the visualization to the viewport.

Rroyable88

90% match

Loading thumbnail…

Fork of D3 Scatter Plot2

This visualization shows the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Each of the 150 flowers appears as a small circle positioned using D3’s `scaleLinear`, with axes generated by `axisLeft` and `axisBottom`. The code loads the CSV data via `d3.csv`, parses numeric fields, and renders the marks as SVG circles, with the chart sized to fill the browser window. The example uses D3 v7 within a React-independent HTML page.

Rroyable88

90% match

Loading thumbnail…

Fork of Scatter Plot with Color

This fork of the classic scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each of the 150 data points is rendered as an SVG circle, with its fill color determined by the flower’s species via a `scaleOrdinal` color scale. The React component uses `d3.scaleLinear` for both axes and `d3.extent` to compute domains, while custom `AxisBottom` and `AxisLeft` components generate gridlines and tick labels. The code loads data asynchronously from a CSV URL using `d3.csv` and styles the visualization with the Poppins font.

RRupendra Pamisetty

90% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of a scatter plot visualizes the Iris Dataset using React and D3 v5, plotting petal length against sepal width for each flower sample. The chart renders as an SVG, with axes created through custom React components that map D3 scales to SVG elements. The code uses D3’s `csv`, `scaleLinear`, `extent`, and `format` utilities to load and transform the data, compute scales, and format tick labels. Each data point is drawn as a circle with a tooltip showing the petal length value, styled with a clean Poppins font and muted teal color scheme.

DDonald Bagwell

90% match

Loading thumbnail…

Fork of React & D3 Starter

This example shows a scatterplot of the Iris dataset, plotting sepal length against petal length for each flower sample. The visualization is built with React and D3 v7, where React manages the component lifecycle and D3 handles the rendering of circles, axes, and scales. The visualization uses D3's `csv` loader to parse the data, `scaleLinear` for coordinate mapping, and `axisLeft`/`axisBottom` for the axes, all output as SVG elements.

SSimone Tolomelli

90% match