words

100%

✓ Published0🌍 Public

Last edited Feb 13, 2018

Created on Feb 13, 2018

A short text passage cycles through individual words, rendering each word in large Helvetica Neue type that is repeatedly redrawn with an expanding, alternating purple and gold outline. The animation uses the Canvas API with `fillText` and `strokeText`, layered across two canvas elements via `drawImage`, while a `d3.timer` loop drives the stroke width and color changes. The word list comes from a hardcoded string in the source, split on whitespace.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/TylerVaughan/'>TylerVaughan</a>'s block: <a href='http://bl.ocks.org/TylerVaughan/94da5320586d8fee0e0f9c8095360a50'>words</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Hello

This example animates the lyrics of Adele’s “Hello” as a sequence of individual words. Each word is briefly rendered as a large, thick outline that rapidly flickers between black and white while alternating line widths, creating a shimmering, glitch-like effect before the next word appears. The visualization runs on a canvas and uses a double-buffering technique with two canvases: the first renders the text outline, and the second composites the stroked text and previously drawn frames. The animation is driven by a d3-timer callback that steps through each character, using Canvas strokeText and drawImage to build the layered, pulsing appearance. The word list is derived by splitting the song’s lyrics on whitespace.

Mmbostock

75% match

Loading thumbnail…

Hello

This animation cycles through a LinkedIn connection request phrase, displaying each word briefly before moving on. A word renders in large black text on a canvas, then a second hidden canvas progressively draws a white outline with a thick, alternating white-and-black stroke, creating a glitch-like contour effect. The result is composited back to the main canvas, producing a decaying visual echo. It uses the d3-timer library to drive frame updates and the Canvas 2D API’s `fillText`, `strokeText`, `drawImage`, and `clearRect` methods.

SStephen

74% match

Loading thumbnail…

thing 0001

A word rendered as text is represented by hundreds of small squares that drift randomly across the screen before settling into the letterforms. The visualization rasterizes the word "enj" onto a hidden canvas using `fillText` and `getImageData`, sampling pixel coordinates as target positions. Each square is a `<rect>` whose position is animated by `d3.forceSimulation`, using `forceX`, `forceY`, and `forceCollide` to move particles toward their targets while preventing overlap. The color and stroke width vary with distance from the center, drawn on both SVG and canvas elements using D3 v4 and the `d3-scale-chromatic` color scale.

FFrissAnalytics

73% match

Loading thumbnail…

My second animation

Words fly in from the center, enlarge, then snap into a grid ordered by their size while transitioning colors across a rainbow scale. The animation repeatedly adds random words from a duplicated dataset and occasionally removes one, demonstrating D3's `.enter()` and `.transition()` chaining with SVG `text` elements. The `refresh` function handles the branching method calls needed because transitions do not return the original selection, using the Cairo-inspired word cloud layout with columns and row offsets.

RRussell Watson

73% match

Loading thumbnail…

My first working animation

Words fall like rain across an SVG canvas, each word shrinking from oversized, transparent text into its final position with rainbow colors. Words are randomly selected from a repeated dataset and appended every 100 milliseconds for 20 seconds. The animation uses D3 v5's `selectAll`, `data`, `enter`, `transition`, and `duration` methods, with `scaleSequential` and `interpolateRainbow` for coloring. A custom `playAnimation` function drives `setInterval` and `setTimeout`.

RRussell Watson

71% match

Loading thumbnail…

fresh block

The animation displays the lyrics of Adele’s “Hello” as large words that are sequentially drawn and then stroked with expanding, alternating black-and-white outlines. Each word is rendered on a canvas, then copied to a second canvas where the outline effect is applied before being drawn back, creating a flickering, ghostly transition. The code uses d3-timer for the animation loop and the Canvas 2D API’s `fillText`, `strokeText`, and `drawImage` methods. The text is sourced from the song’s lyrics split into individual words.

TTylerVaughan

71% match

Loading thumbnail…

Word Cloud

A word cloud visualizes a hardcoded list of words (e.g., “Hello,” “Coding,” “Van”) from `words.js` and `data.csv`. The layout uses the `d3.layout.cloud` library, which employs an Archimedean spiral and collision detection to position words. Rendered as SVG and canvas, the words appear in steelblue with a text-anchor, and the animation (via `timeInterval` and `dispatch`) progressively places each term. The `index.js` code uses canvas `getImageData` for font metrics and a bitmask board for collision checks.

BBaraneedharan N M

71% match

Loading thumbnail…

chief keef

The visualization cycles through the lyrics of Chief Keef’s monologue, displaying each word in large 300px Helvetica Neue type on a canvas. A d3-timer drives the animation, alternating white and black outline strokes that thicken and overlay in a flickering, glitch-like effect. The code uses two canvas layers—one for the base filled text and another for the stroked outlines—combined via `drawImage` to create the shifting stroke pattern. It renders each word sequentially, clearing and redrawing as the timer progresses through the text.

TTylerVaughan

71% match