Iris Data With React and D3

TTaweewat Somboonpanyakul

Iris Data Set

This example visualizes the Iris flower dataset as a scatter plot, showing the relationship between petal length and sepal width for individual samples. Using React with d3.scaleLinear for both axes and d3.extent for domains, the plot renders SVG circles with native tooltips via <title> elements. The code loads CSV data through d3.csv, formats tick labels with d3.format, and includes custom axis components. A loading state displays "Loading..." text while the data fetch is in progress.

Iris Scatterplot - React & D3

An interactive scatterplot of the Iris dataset plots petal length against petal width, with points colored by species. Built with React, the chart renders as SVG using D3 scales, ordinals, and extents. Data is loaded via D3's CSV utility, and axes and marks are constructed as React components, with tick lines and labels generated directly from D3 scale methods.

Ddvinubius

Iris data

This scatterplot displays the Iris flower dataset, plotting petal length against sepal width for individual flowers. The visualization uses React with D3 v7’s `scaleLinear` and `extent` functions to map the data to SVG coordinates, rendering each sample as a circle. Axes are generated via custom components, with tick marks and labels styled through CSS. The data is loaded asynchronously from a remote CSV using D3’s `csv` function, and the chart includes tooltip formatting for x-axis values.

JJosh Zalcman

Iris Scatter Plot React & D3

This example visualizes the Iris flower dataset as a scatter plot, showing sepal length against sepal width. Built with React and D3 v5, it renders SVG circles for each data point, with axes and tick marks generated from D3 scales. The code uses `scaleLinear`, `extent`, and `format` from D3 for scaling and tick formatting, while React components like `AxisBottom`, `AxisLeft`, and `Marks` structure the visualization. Data is loaded asynchronously via D3's `csv` utility and parsed into numeric values.

JJeyasuriya M

Scatter Plot with React & D3

This scatter plot visualizes the Iris dataset, showing sepal length against sepal width for 150 flowers. The React `App` component loads CSV data via `csv` from D3 and renders an SVG, while a reusable `viz` function creates the scales, axes, and circles. It uses `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` from D3 v7, with helper modules for axes and labels. The plot displays black circles of radius 12 with labeled x and y axes on a fixed 960x500 canvas.

CCurran Kelleher

Iris Scatter Plot v2

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis. The React-based interface uses dropdown menus to swap the x and y variables, while d3.scaleLinear and d3.extent handle the scales and domains. Data is loaded from a CSV file using d3.csv, and the SVG rendering uses custom React components for axes and circular marks.

JJohn Lewis

iris

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements through dropdown menus that select the X and Y axes. The visualization displays each flower as a colored circle, with three distinct species (setosa, versicolor, virginica) distinguished by a categorical color scale. The React-based application uses D3 v5 scales (scaleLinear, scaleOrdinal) and extent functions to map data coordinates, while custom React components render the SVG axes, marks, and color legend. The dataset loads via d3.csv from a GitHub-hosted CSV file.

JJiaYu07

Iris Data Scatter Plot

This visualization shows the Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal width on the y-axis. Each circle represents an individual iris flower, with a tooltip displaying the exact x-value on hover. The chart uses React state via `useState` and `useEffect` to load the CSV data through d3.csv, while d3.scaleLinear and d3.extent compute the scales. Axes are rendered as custom React components using SVG, with d3.format for tick labels and the Poppins font from Google Fonts.

Kkbrookshire420