D3 Spin Art

100%

✓ Published0🌍 Public

Last edited Sep 18, 2016

Created on Sep 18, 2016

This interactive visualization lets users draw freehand lines or dots on a rotating canvas, producing spiral-like patterns whose appearance changes with speed. A vertical slider controls revolutions per minute, a color palette selects stroke colors, and radio buttons toggle between line and circle draw styles. The code uses D3 v4 transitions with a linear easing function to animate the SVG group’s rotation, while drag events append polyline or circle elements to the rotating group.

AI-generated description

This is a sort of interactive version of <a href="http://bl.ocks.org/alexmacy/1e6f2b3d5c6dd475a019ffc3cf1660f6">Rotating Shape Transitions</a>.

You can adjust the rotational speed on the left, select form the color palette on the right, and chose between drawing a line or multiple small circles.

Interesting things start to happen at certain speeds, both with how the lines get drawn and how they appear.

mit Licensed

Similar vizzes

Loading thumbnail…

Spinny

This example visualizes a classic “spinny” loading icon using D3.js version 3. It shows a rotating ring of ten small circles that continuously spin around the center of the screen. The circles are positioned using sine and cosine functions based on a linear angle scale, with their radii varying from larger to smaller around the ring. The animation is driven by `d3.timer`, which updates the rotation attribute of a group element each frame, incrementing the angle by a fixed amount. The visualization uses SVG for rendering and relies on D3’s data join to bind an array of numbers to the circles.

CCurran Kelleher

80% match

Loading thumbnail…

spinning-spiral

A spiral of white line segments rotates continuously, expanding and contracting as its radial offset shifts over time. The animation uses D3’s `d3.timer` to update an array of 480 points each frame, computing polar coordinates with `d3.scale.linear` for angle and distance, then rendering them as SVG `path` elements with `join('L')`. The code draws a single path whose data changes cyclically based on a sine wave, producing a smooth pulsing motion against a dark background.

11wheel

80% match

Loading thumbnail…

Spiral Visualization with D3

This example renders a colorful spiral of 50 circles connected by thin, semi-transparent lines. Generated procedurally using trigonometric functions, the circles vary in size and hue, creating a dynamic, decorative pattern against a dark background. The visualization is built with D3 v7, using selections and data joins to efficiently draw and update both the `<circle>` and `<line>` elements. The code recalculates the layout on window resize to maintain its centered composition.

VVinayak Revankar

79% match

Loading thumbnail…

Fork of D3 spinner - 2

A circular loading spinner animation comprises ten evenly spaced blue dots arranged around a light blue SVG canvas. The dots rotate positions and vary their radius and opacity based on a rotating array of angles, creating a wave-like pulse effect. The code uses D3.js selection methods, including `data` joins with enter and update handling, alongside `d3.interval` to trigger periodic rotation of the dataset. All rendering is done via SVG, with parametric circle equations computing each dot’s coordinates.

SSubhendu Karmakar

77% match

Loading thumbnail…

Spiral Circle

Two groups of 200 white squares with black outlines form a spiral pattern, one rotating clockwise, the other counterclockwise, within circular clips. Animated by a timer, each square orbits a circle while spinning on its own axis, creating a hypnotic, ever-changing geometric illusion. This D3 v3 example uses SVG, `d3.range`, `d3.timer`, and `selectAll` with `append` to build and animate the rects, clipped by `clipPath` definitions for upper and lower halves.

Mmbostock

76% match

Loading thumbnail…

D3 Test

Fifteen circles with dynamically changing radii, positions, and colors pulse in a smooth, endless animation, driven by sine-wave values generated in the `makeData` function. The example uses the D3 library (v7.8.5) with its `select`, `range`, and data-join `join` pattern to render SVG circles directly to the document body. Animation runs via `setInterval` at roughly 60 frames per second, updating a time parameter that alters each circle’s `r`, `cx`, `cy`, and `fill` attributes. The visualization demonstrates real-time data binding and SVG attribute updates with a minimal, dependency-light setup.

NNick Hogle

76% match

Loading thumbnail…

D3 spinner

This example shows a minimalist loading spinner rendered as a single animated arc that rotates continuously around a circular track on a pale green background. The animation uses D3 transitions with a 20-second duration, where `transition.attrTween` interpolates the arc’s `endAngle` from 0 to 2π, and an `on("end")` callback restarts the spin indefinitely. The code builds the shape with `d3.arc()`, setting outer and inner radii relative to the container size, and positions it via an SVG `<g>` transform.

SSubhendu Karmakar

76% match

Loading thumbnail…

D3 Visualization

This work recreates a Sol LeWitt-inspired generative drawing as an animated SVG. It shows a shifting field of circles whose positions and radii oscillate along a sine wave, creating a flowing, rhythmic pattern across the browser window. The animation is driven by `setInterval` updating a time variable, with the D3.js library’s `select`, `range`, and `join` operations building the circles dynamically each frame. Data is synthesized in `makeData.js`, while `vizData.js` handles the visual rendering.

Sscott306lr

76% match