100%

96% Zeiterpannis

✓ Published0🌍 Public

Last edited Jan 29, 2026

Created on Jan 29, 2026

A D3.js and React visualization renders five circles loaded from a CSV file, scaling their positions to fit the viewport with `d3.scaleLinear`. Clicking a circle turns it red with a thicker border while others remain cyan. The code uses React hooks for state management and D3’s data join for interactive updates.

AI-generated description

React D3 Circle Visualization

An interactive data visualization built with React and D3.js that displays circles from a CSV file.

Features

Interactive Circles: Click circles to select them (they turn red with a border)
Responsive Layout: Automatically adjusts to container size
CSV Data Loading: Loads circle positions from data.csv
Smooth Scaling: Circle positions scale to fit the viewport

Project Structure

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles with D3 and React

The visualization displays fourteen circles of varying radii and colors positioned across a 960-by-500 SVG canvas, with each circle’s center, size, and fill defined by a static array of objects. Built with React 19 and D3 v7, the app uses a `useRef` hook to select the SVG element and applies a D3 `select` and `.join` operation to bind the data array to circle elements. The code sets each circle’s `cx`, `cy`, `r`, and `fill` attributes directly from the data source, showing a straightforward declarative mapping of data to SVG shapes.

BBismark Kofi Owusu Sarfo

84% match

Loading thumbnail…

Circles with D3 and React

This example renders a scatterplot of 14 colored circles on an SVG canvas using React and D3. Each circle’s position, radius, and color come from static data defined in a separate JavaScript module. The visualization integrates React’s `useRef` and `useEffect` hooks with D3’s `select` method to bind data and create circle elements via `join`. The D3 v7 code applies `attr` setters for cx, cy, r, and fill properties.

CCurran Kelleher

82% match

Loading thumbnail…

Clickable Circles with D3 and React

A grid of pastel-colored circles, each positioned by explicit pixel coordinates from a static data array, fills the visualization. React manages the application state while D3's `select` and `join` methods render the SVG `<circle>` elements. Hovering a circle triggers a `mouseover` event that calls `setSelectedId`, updating React state and re-running the D3 selection to draw a black stroke around the active circle, while `mouseout` clears the highlight.

223100098@lums.edu.pk

81% match

Loading thumbnail…

1 Circles with D3

A D3.js data visualization displays fourteen colored circles at fixed positions with varying radii and hex fills across an SVG canvas. The code imports circle data from a separate JavaScript module and uses D3's `select` API with a data join to append and configure each `circle` element. Rendering targets a 960 by 500 pixel SVG, with the visualization defined in a reusable function that binds the dataset to attributes like `cx`, `cy`, `r`, and `fill`.

BBismark Kofi Owusu Sarfo

81% match

Loading thumbnail…

Clickable Circles with D3 and React

Clickable circles rendered in an SVG canvas demonstrate a React and D3 integration. The visualization shows 14 circles with varied positions, sizes, and colors from a static array. Clicking a circle selects it, highlighting its outline with a black stroke. The App component manages selection state and re-renders the D3 visualization via `select()` and `.join()` for efficient DOM updates. The `viz` function uses D3’s SVG selection API to set attributes and attach click handlers, while React’s `useState` and `useEffect` control the interactive response.

CCurran Kelleher

81% match

Loading thumbnail…

Circles with D3 and React

This example shows a collection of pastel-colored circles positioned across a white SVG canvas. It demonstrates how to integrate D3's data-join pattern with a React component. The code uses a `useRef` hook to access the SVG element, then calls a D3 `viz` function in a `useEffect` to bind data from a static array via `selection.data()` and `.join('circle')`, setting each circle's `cx`, `cy`, `r`, and `fill` attributes directly. The data is hardcoded in a separate `data.js` module, and rendering is done through React's `createRoot` with plain `React.createElement`.

223100098@lums.edu.pk

81% match

Loading thumbnail…

Circles Part3

Three face-like clusters of circles are grouped and then re-sorted into rows by color when a button is clicked. The visualization uses React state to manage the SVG circles, with D3’s `selectAll`, `data`, and `transition` APIs to animate the `cy` attribute over one second. A `d3.nest` key operation groups circles by their color property, and the resulting groups trigger rendering of text labels. The example is built with React 16.9, D3 v5, and renders via SVG.

Mmbooch22

81% match

Loading thumbnail…

D3 scatter plot with react

This React-based scatter plot demonstrates animated data updates with D3.js. The visualization renders seven circles with distinct colors and sizes, positioned by x/y coordinates, with axes labeled X and Y. Data updates trigger a button click, which initiates D3 transitions using `transition().duration(1000).ease(easeLinear)` for enter animations and faster transitions for updates, while exit animations shrink circles to zero radius. The SVG rendering uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll('circle').join()` for binding data to DOM elements.

JJulien Tremblay

80% match