thing 0001

100%

✓ Published0🌍 Public

Last edited Sep 25, 2018

Created on Sep 25, 2018

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.

AI-generated description

thing 0001

playing with rasterizing font using techniques linked below.

The idea of drawing text on a <canvas> element and using the bitmap to identify points within the text came from Toph Tucker's block that reverse-engineers FizzyText.

forked from <a href='http://bl.ocks.org/armollica/'>armollica</a>'s block: <a href='http://bl.ocks.org/armollica/06a202c9f7df191ace8a1f97e33ffb97'>Slimy Text</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/f973a941606aa38fed321fbce0c8bd7f'>Particle viSFest</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/d5ee7ee1bb8dcbbdbfb0ecd1480aa640'>thing 0001</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Particles

Hundreds of small, colored rectangles converge into the word “FRISS” before scattering apart. They then reform and slosh around as the mouse moves, creating a gooey, viscous effect. The code rasterizes text by drawing it to a Canvas and using `getImageData` to identify pixel locations as target points. A `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` animates the elements, while an SVG filter applies the gooey blur and color matrix.

FFrissAnalytics

79% match

Loading thumbnail…

Particle viSFest

A grid of small colored rectangles forms the word “viSFest,” with each rectangle initially scattered across the black canvas before a force simulation pulls them toward their target positions. Moving the mouse creates a wrecking-ball node that repels nearby rectangles, causing the text to slosh and deform before settling back. The code uses d3.forceSimulation with forceX, forceY, and forceCollide, while d3.scaleSequential with interpolateRainbow colors each rectangle based on its x-coordinate. The initial text shape is rasterized via Canvas getImageData, and rendering uses SVG rect elements without the gooey filter.

FFrissAnalytics

72% match

Loading thumbnail…

Untitled

A word cloud layout algorithm arranges words of varying font sizes within a bounded space. The browserify.js example generates random words and sizes, then renders them as SVG text elements with rotations and Impact font, centered on a 500×500 canvas. The core d3-cloud library uses a canvas-based sprite collision detection technique via `getImageData` to place words without overlap, employing an Archimedean spiral search pattern and a dispatch event system to signal layout completion.

Ttharanitaran

71% match

Loading thumbnail…

stars

This example animates a multi-line text introduction by first drawing the words along SVG `<textPath>` elements, then replacing the text with thousands of small, glowing star-shaped particles. The visualization uses D3 v5 to lay out the text on curved and straight paths, computes path endpoints and text lengths to align the words, and then spawns a canvas-based particle system with custom star sprites and additive blending. Each word is revealed by a burst of stars that traces along its path, while gradient fills and blur/contrast filters create a luminous, space-like effect. The animation cycles through the phrases, with mouse interaction disabled to keep the focus on the choreographed particle motion.

EEE2dev

70% match

Loading thumbnail…

word random walk

The visualization displays a grid of small points that drift randomly across a dark canvas, forming a continuously evolving network of connected lines. It first renders the word “words” as a rasterized text mask using Canvas `getImageData` to identify which grid points lie inside the letters, then animates those active points with a random-walk motion. The animation, driven by `d3.timer`, updates each point’s position with slight random jitters, while drawing connections between neighboring points when they are within a Manhattan-distance threshold. Mouse movement repels nearby points, and clicking flips the entire grid horizontally or vertically, showcasing real-time interaction with the underlying point system.

11wheel

70% match

Loading thumbnail…

Untitled

This example shows a word cloud of eighteen basketball-themed phrases, such as "Jeremy Lin" and "Linpossible," rendered as orange Impact-font text on a white SVG canvas. The visualization uses the d3.layout.cloud API to compute word positions and rotations, with a fixed font size and rotation angle, and d3.v4 to append the SVG text elements. The word data is provided as a hardcoded JavaScript array, and the layout algorithm runs once to generate the final arrangement.

MMike Z

69% 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

69% 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

69% match