dance

100%

✓ Published0🌍 Public

Last edited Feb 5, 2016

Created on Feb 5, 2016

The visualization shows a single large letter pair cycling through a sequence of dance-like poses, with each pose displayed in a monospaced Courier font. The text element updates every 400 milliseconds through a list of string pairs, such as "d<" and "q=", looping indefinitely. Built with D3.js (version 3.5.5), the code appends an SVG container and a grouped text element rotated 90 degrees, then uses JavaScript’s `setTimeout` inside a recursive function to sequence the pose changes. The data source is an inline array named `dance`, and the rendering relies solely on SVG text manipulation.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/21dd49a90c55348484f3'>dance</a>

Similar vizzes

Loading thumbnail…

People Dancing

Three stylized people, each composed of simple SVG shapes—a head, body, eyes, smiling mouth, arms, and legs—stand in a row and animate in a coordinated dance. The D3.js v6 code binds an array of three data objects to group elements and uses `selection.append` to draw each body part. Legs swing back and forth while arms wave repeatedly through chained `transition` calls with rotation transforms, creating a looping, cheerful motion.

AAsrar Al Qassem

75% match

Loading thumbnail…

SVG text experiment - Choreography of elements

A circular arrangement of text cards, each containing a category label and a body of related words, rotates continuously around a central statement. The central text repeatedly fades out and rewrites itself with a new sentence composed of words from the taxonomy dataset. D3.js (v5) constructs the SVG elements and performs the text transitions, while the GreenSock (GSAP) library animates the cards' rotation and the progress of text along SVG paths.

LLaurens

73% match

Loading thumbnail…

strange dancing behaviour

This example shows a moving chain of 120 colored points arranged in a circle, whose nodes link sequentially and appear to “dance” unpredictably as the simulation runs. The user can drag the first node with the mouse, which perturbs the whole chain. The code uses `d3.forceSimulation` with custom forces, including a “dance” force that pushes each node away from its predecessor, plus `d3.forceManyBody`, `d3.forceX`, `d3.forceY`, and `d3.forceCenter`. Rendering is done on a Canvas via `getContext("2d")`, drawing arcs for points and line segments for links. The data is generated procedurally from 360 degrees divided by a sample rate of 3.

KKcnarf

71% match

Loading thumbnail…

test

A continuously shuffling set of the 26 alphabet letters animates horizontally across an SVG canvas. The visualization demonstrates D3's general update pattern with a key function, showing how data joins handle enter, update, and exit selections. Each letter's x-position is recalculated based on its new index after each shuffle via `d3.shuffle`. An infinite loop triggers repeated updates, with a 750ms transition on position changes. The code primarily uses D3 v7 selections, `join()`, and `transition()` for the animation.

Aa15923647

71% match

Loading thumbnail…

Gist 7330771

This example demonstrates how D3 transitions make data joins easier to follow by animating the entry, update, and exit states of SVG text elements. It shows a sequence of randomly selected alphabet letters that change every 1.5 seconds, with entering letters sliding down from above, exiting letters dropping below, and updated letters gliding horizontally to their new positions. The code uses D3’s selection joins with key functions, `transition.attr` and `transition.style` to animate positions and opacity, and relies on SVG text elements rendered in a single group. The data is a shuffled subset of the alphabet, sorted and re-joined with each interval.

11wheel

70% match

Loading thumbnail…

circle dance

Two buttons trigger the animation of three red circles to new positions. The circles move between two predefined sets of coordinates over a two-second duration, demonstrating basic data updates in D3.js. The visualization uses D3 v4’s SVG rendering and the `transition()` method with a duration parameter to animate the changes. The code defines two data arrays containing `x`, `y`, and `r` properties for the circles, and the buttons call the `updatePoints` function to apply the new data.

KKyrand

70% match

Loading thumbnail…

Untitled

A vertical column of 50 circles animates across an SVG canvas, cycling horizontally in a loop. The circles are colored along a dark-to-light scale using `d3.scaleLinear` with HSL interpolation, creating subtle banding. D3 v4 selects the SVG, appends the circles, and chains `transition` calls with staggered `delay` and recursive `on("start", repeat)` to move each circle from left to right and back, demonstrating fundamental DOM manipulation and animation.

Jjesramyep1263

70% match

Loading thumbnail…

SVG text experiment - Choreography of elements

A text choreography experiment arranges four cards of poetic and reflective prose around a central, pre-defined circular path on a dark SVG canvas. Each card's text is bound to a hidden rectangular path using `textPath`, with D3.js v5 handling the initial positioning and rotation of the elements around the circle's center. The GreenSock Animation Platform (GSAP) timeline then animates each text's `startOffset` from `-100%` to `100%`, sequentially drawing the words along their paths. Finally, a centered invitation text fades in via `gsap.to`, completing the staged performance.

TThijs-hub

70% match