Fork of Circles with D3

100%

Fork of Circles with D3

✓ Published1🌍 Public

Last edited Oct 7, 2025

Created on Oct 6, 2025

This example shows the classic Iris dataset as a scatterplot, with each point colored by species (setosa, versicolor, virginica) and positioned by sepal length and width. Clicking a circle highlights its selection with a black stroke and updates the React state. The visualization uses D3’s `scaleLinear` and `extent` for axes, and React’s `useRef` and `useEffect` to manage the SVG lifecycle. Data is loaded via `d3.csv` from a GitHub gist, and rendering is handled through D3’s `join` pattern.

AI-generated description

React with D3 visualization

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React & D3 Starter

This example shows a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each circle representing a flower sample. The visualization is built with React and D3 v7, using a custom `viz` function that creates linear scales via `d3.scaleLinear` and renders SVG circles with the data join pattern. Axes are added through `d3.axisLeft` and `d3.axisBottom` in a separate module. The code demonstrates a decoupled architecture where React manages the component lifecycle and D3 handles the drawing logic, with data loaded asynchronously via `d3.csv`.

CCheng Tang

87% match

Loading thumbnail…

Fork of Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the classic Iris dataset, showing the relationship between petal length on the x-axis and petal width on the y-axis. Points are colored by species (setosa, versicolor, virginica) using blue, red, and black, with circles that also encode sepal dimensions through their rx and ry attributes. The example demonstrates a decoupled React and D3 integration, where the `useData` hook loads and parses CSV data, and the `viz` function uses d3.scaleLinear, d3.extent, and d3.csv to render SVG circles and axes. The rendering approach combines React state management with D3’s selection and join methods inside a window-sized SVG.

VVenkata Sai Preetham

87% match

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a scatter plot of the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with circles colored by species. The visualization is built with React and D3 v7, using a decoupled architecture where React manages the SVG container and D3 handles scales, axes, and circle rendering via `d3.axisLeft`, `d3.axisBottom`, `d3.scaleLinear`, and `d3.extent`. Data is loaded asynchronously from a CSV file using `d3.csv`.

GGuna

87% match

Loading thumbnail…

Fork of Fork of React & D3 Starter-2

This example displays a scatterplot of the classic Iris flower dataset, using sepal length for the x-axis and petal length for the y-axis, with each point drawn as a semi-transparent circle. The visualization is implemented using React for the component structure and D3 v7 for the rendering logic, specifically leveraging D3's `scaleLinear`, `extent`, and axis functions to map data values to pixel coordinates. The SVG output is generated within a React wrapper that uses a `useRef` hook to pass the target element to the D3 visualization function. The data is loaded asynchronously via D3's `csv` parser, and the chart scales to the full size of the browser window.

RROU

87% match

Loading thumbnail…

D3 + React

This example shows a scatterplot of the classic Iris dataset, plotting sepal length against petal length. It uses React for component structure and state management, while D3 modules handle the data-driven visualization: `d3.csv` loads the data, `d3.scaleLinear` and `d3.extent` set the scales, and `d3.axisLeft`/`d3.axisBottom` draw the axes. The SVG circles are rendered via D3 selections within a React effect, bridging the two libraries.

SSubhendu Karmakar

87% match

Loading thumbnail…

Fork of Fork of React & D3 Starter

A scatter plot of the classic Iris flower dataset, mapping sepal length against petal length and rendering each sample as a semi-transparent circle. The visualization is built with React, which manages the interface and data loading, while D3 v7 handles the rendering logic, including linear scales, axes, and SVG circle elements. It serves as a template demonstrating a decoupled React-D3 integration pattern, loading data via D3's CSV parser and using D3's scaleLinear for coordinate mapping.

IIndhuKrishnaraj

87% match

Loading thumbnail…

Fork of CV: Scatter Plot

This example displays the classic Iris dataset as an interactive scatter plot, plotting sepal length against sepal width for 150 flowers. Each circle represents a sample, colored and stroked in red when clicked to highlight a specific data point. Built with React, the visualization uses D3 v7 APIs such as `scaleLinear` for axes and `axisBottom`/`axisLeft` for ticks, with the SVG rendered declaratively. Circle transitions use CSS for smooth hover effects, while a custom `ResizeObserver` hook ensures the plot adapts to its container’s dimensions.

AAaron

86% match

Loading thumbnail…

Fork of React & D3 Starter

This example visualizes the classic Iris dataset as a scatter plot, where users select which of the four flower measurements to display on the X and Y axes through dropdown menus, and points are colored by species. The visualization uses React for state management and component structure, while D3 v7 handles data loading, scales, axes, and SVG circle rendering. A custom `viz` function builds the chart, and D3's `scaleLinear` and `extent` are used for positioning, with `axisBottom` and `axisLeft` generating the axes.

YYang Shun Yu

86% match