Animated Arcs

100%

✓ Published0🌍 Public

Last edited Sep 3, 2018

Created on Sep 3, 2018

Four concentric animated arcs rotate continuously around a central point, each with a distinct color and its own random start and end angles. The arcs periodically change their sweep length and position, creating a dynamic, looping visual rhythm. Built with D3 v4, the example uses SVG paths and `d3.interval` to trigger transitions, while `transition.attrTween` and `d3.interpolate` smoothly animate each arc’s angles. The code generates random data for four arcs with varying radii and colors, drawing them with the `d3.arc` shape generator.

AI-generated description

This little animation is used within the overview sneak-peek animation of the Stitch Fix Algorithms Tour. See Mike Bostock's heavily-commented Arc Tween example for an explanation of arc tweens in general. This animation is made only slightly more complex by the use of four arcs and by varying both the start and the end points.

forked from <a href='http://bl.ocks.org/bricof/'>bricof</a>'s block: <a href='http://bl.ocks.org/bricof/ebb8a73a41ca37955ab452bf99f68a76'>Animated Arcs</a>

forked from <a href='http://bl.ocks.org/Thanaporn-sk/'>Thanaporn-sk</a>'s block: <a href='http://bl.ocks.org/Thanaporn-sk/0aa6bd6aa537cecb05180c646c5034a2'>Animated Arcs</a>

mit Licensed

Similar vizzes

Loading thumbnail…

animated arc

This example animates a set of orange arc segments that expand and fade out over time, creating a wave-like effect. The visualization uses SVG paths generated by the `d3.arc` generator, with a `clipPath` (a 200×200 rectangle) to constrain the arcs' visibility. A single transition, invoked via `transition.attrTween`, interpolates each arc's inner and outer radii from 0 to 300, while `style("opacity", 0)` fades them out. The animation runs over 4 seconds with staggered delays of 200 milliseconds per arc, using `d3.easeLinear`. Ten arcs are created from an array of empty objects, and the code relies on D3 v4.

EEE2dev

85% match

Loading thumbnail…

arc tween example

An animated arc chart demonstrates pie-segment transitions using D3 v4’s `transition.attrTween`. A white foreground arc rotates to a new random angle every few seconds, while a segmented, multicolored ring around it sequentially fills or empties its sections. The code defines arc generators via `d3.arc`, binds data from a fixed array, and computes path interpolations between angles using `d3.interpolate`. SVG elements render the background ring and active arcs, with transitions triggered by `d3.interval`.

FFrissAnalytics

85% match

Loading thumbnail…

Arc Tween

A donut chart demonstrates arc transitions using D3 v4. An orange foreground arc repeatedly animates to a new random end angle, while a static gray background arc represents the full circle. The code uses `transition.attrTween` with a closure that interpolates between the current and target end angles via `d3.interpolate`, updating the bound datum before recomputing the SVG path with `d3.arc`. Rendering is SVG, with transitions triggered every 1.5 seconds by `d3.interval`.

Mmbostock

81% match

Loading thumbnail…

Arc

This example visualizes the four possible arc paths defined by the SVG elliptical arc command, using D3.js v6 to generate paths from a fixed start point, specified radii, a rotation angle, and four combinations of the large-arc and sweep flags. Each path is rendered in a distinct color from `d3.schemeSet3` and styled with a thick stroke, without any fill. The arcs are drawn in an SVG container and offset via a transformation, demonstrating the geometric differences between the arc flag choices in a clean, minimal setup. The dataset `socfb-Caltech36.json` is referenced but not used in the rendering logic.

Vvivianaaai@qq.com

80% match

Loading thumbnail…

arcsvghelp

This example demonstrates how D3.js v4 uses SVG to render circles with varying radii, each overlaid with a red arc path generated by the `d3.arc()` generator. It shows the relationship between circle size and arc geometry, with arcs using random start angles and a fixed end angle. The code binds an array of radius values to SVG circles, then appends a path element to each, applying the arc generator with an outer radius based on the data and a transform to position it. The visualization uses a simple data-driven approach with static positioning, filling circles in BlanchedAlmond with red strokes.

335degrees

79% match

Loading thumbnail…

2019 Arc Tween

A circular gauge displays a background arc and an orange foreground arc representing a value, which updates to a new random angle every few seconds. The animation uses a custom `transition.attrTween` on the `d` attribute, interpolating the endAngle in data space via `d3.interpolate`. The arc path is computed with `d3.arc`, and the transition duration is set to 100,000 milliseconds, creating a smooth, continuous rotation.

MMisunoKitara

79% match

Loading thumbnail…

pie chart transition example

This example shows a single, animated pie chart where the foreground arc transitions to a new random angle every 1.5 seconds, with the background arc remaining fixed at 100%. Built with D3 v5, it renders two SVG path arcs using a custom `d3.arc` generator with bound inner and outer radii. The animation is driven by `d3.interval` and `transition.attrTween`, which interpolates the `endAngle` value in data space before computing the new path string, ensuring smooth angular transitions.

SSchmittYannic

78% match

Loading thumbnail…

Banded Arcs

Twenty evenly spaced banded arcs radiate from the center of an SVG canvas, forming a circular pattern of lightblue segments with dark outlines. Built with D3 v3, the example uses an ordinal scale with `rangeBands` to divide 2π radians into angular bands, then renders each arc via the `d3.svg.arc` generator. Each path spans half of its allocated band, leaving gaps between segments, with radii fixed near the canvas edge. The code generates a static visualization, drawing all arcs in a single SVG group.

Mmbostock

77% match