Rotating Disks

100%

Rotating Disks

✓ Published2🌍 Public

Last edited Sep 27, 2019

Created on Sep 27, 2019

Forked from Rendering Data with React & D3

Three sets of nested donut charts, each composed of three concentric rings colored by CSS named colors from a CSV file, rotate around their shared center. The outermost and innermost rings rotate in opposite directions while the middle ring remains stationary. The rotation is driven by `d3.timer`, and the donut arcs are generated using `d3.arc` and `d3.pie`. The visualization uses React to manage state and render SVG elements, with three identical clusters positioned at different locations on the canvas.

AI-generated description

This variant uses d3-timer to introduce rotation to the disks.

MIT Licensed

Similar vizzes

Loading thumbnail…

Rotating Disks

Three concentric rings of colored disks rotate in opposite directions across three clusters, creating a dynamic geometric pattern. The visualization loads CSS named colors from a CSV file and renders them as pie-chart arcs using D3’s `pie` and `arc` generators. React manages state, while a `d3.timer` drives continuous rotation by updating the SVG transform of each ring. The inner and outer rings spin clockwise and counterclockwise, while the middle ring remains stationary, highlighting the contrast between the static and moving layers.

NNita

91% match

Loading thumbnail…

Rotating Disks

This example shows a cluster of rotating color wheels built from CSS named colors loaded via d3.csv from a GitHub gist. Each wheel is composed of four concentric rings, rendered as SVG pie arcs using d3.arc and d3.pie, with React components creating the ring structure. The rotation is driven by d3.timer, updating a rotation state that applies different rotation speeds and directions to each ring via transform attributes. Twelve ring components are arranged in a triangular grid around a central point, creating a dynamic, layered visual pattern.

Yyuzhang21

86% match

Loading thumbnail…

Donut of Rendering Data with React & D3

A donut chart displays CSS named colors as equal-sized slices, with each slice filled by its corresponding hex value. The entire donut rotates continuously, creating a slow animation driven by a React interval updating state. D3’s `arc` and `pie` utilities compute the slice geometries from CSV data loaded via `d3.csv`, while React renders the SVG paths. The visualization uses React hooks (`useState`, `useEffect`, `useRef`) to manage the animation loop and data fetching from a gist URL.

HHarr

83% match

Loading thumbnail…

Tasty donut

A rotating, five-layer donut chart spins continuously in the center of the screen. Each ring segment displays a number and uses a rainbow sequential color scale based on the overall donut's layer count. Built with D3 v6, the visualization creates arcs via `d3.arc` and `d3.pie`, while a CSS animation and a JavaScript interval with `setInterval` rotate the entire SVG group and counter-rotate the text labels.

MMTR

82% match

Loading thumbnail…

Rendering Data into React Program and D3 II

A donut chart displays every CSS named color as a single slice, with each slice's fill set to the hexadecimal RGB value it represents. The chart uses an SVG rendering approach, with React managing the component state and data loading via `d3.csv`, while `d3.arc` computes the geometric path for each slice based on the dataset's index. The visualization loads color data from a remote CSV file and renders it as a complete ring, with a large outer radius that extends beyond the viewport to create a full circular band.

DDavid

82% match

Loading thumbnail…

Rotating Rendering Data with React & D3

A circular burst of CSS named colors rotates continuously, with each color occupying an equal-width arc segment radiating from the center. The visualization loads color data from a CSV file using D3’s `csv` utility, then processes it with `d3.pie` and `d3.arc` to generate SVG paths. React manages the animation state via `useState`, `useRef`, and `useEffect`, incrementing a rotation degree every 10 milliseconds to spin the entire group. The example demonstrates combining D3’s data manipulation and shape generation with React’s declarative rendering and lifecycle hooks for smooth, ongoing motion.

HHarr

82% match

Loading thumbnail…

Play with React & D3

This example shows CSS named colors as concentric donut rings, with three nested pie charts rendered at three positions on the screen. Each ring segment’s fill equals the hex value of the corresponding color from the dataset. The code uses React’s `useState` and `useEffect` to load the CSV named-color data, then renders SVG paths using `d3.csv`, `d3.pie`, and `d3.arc` with fixed inner and outer radii. Three separate arc configurations create the layered rings, and the same pie layout is reused for each cluster.

MMoooYang

81% match

Loading thumbnail…

Rendering data with react and D3

A donut chart renders the CSS named colors dataset, loaded from a GitHub gist as CSV, with each color name represented by a slice colored by its RGB hex value. The React component uses the `useState` and `useEffect` hooks to fetch and store the data asynchronously, then maps it through D3's `pie()` layout and `arc()` generator to produce SVG paths. All slices have equal value, creating a uniform ring, and the chart appears at the center of a 960×500 SVG canvas.

KKIRRAN P L

80% match