ascii-animation

100%

ascii-animation

✓ Published0🌍 Public

Last edited Aug 22, 2016

Created on Nov 3, 2015

Two separate animations play side by side: a pre-rendered sequence of block characters cycles through slides showing the growth of urban versus rural population, while a second panel flips the characters of a Donald Trump ASCII portrait line by line to create a mirror effect. The population sequence loads its frames from a text file and swaps them every 500 milliseconds using `setInterval`, updating the text of a `pre` element with `d3.select`. The portrait animation reverses each line’s characters and swaps slash directions every 100 milliseconds, using D3’s `xhr` calls to fetch both text files.

AI-generated description

Similar vizzes

Loading thumbnail…

Code Speaking

Typed characters appear in a running transcript alongside their ASCII decimal codes, while a corresponding symbol image fades in for each code. The animation proceeds character by character, with a two-second delay between steps. D3 v5 loads a CSV table that maps ASCII values to image links, and the code also uses `d3.select` to update the text area. User input comes from an HTML form and is processed via a JavaScript loop with `setTimeout` to sequence the transitions.

JJoker-tr

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

69% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds an animated smiley face using D3.js, demonstrating fundamental DOM manipulation with SVG elements. It loads population data from a CSV file using `d3.csv` and binds it to rectangles via `data().enter().append('rect')`, though the visual face itself is constructed from SVG shapes. The code uses D3 v5 with `select` and `csv` imports, setting fixed rectangle dimensions of 300×300 pixels. The rendered SVG is 960×500, with the face representing population values for eight countries, though the interactive eyebrow movement hinted in the README is not yet implemented in the visible code.

TTheRoadSign

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

66% match

Loading thumbnail…

nyc-d3-live-code

This example demonstrates interactive SVG animations built with d3.v3. A row of circles oscillates vertically, first transitioning to a flat line, then responding to mouseover events with animated shifts in amplitude. A recursive rectangle-drawing function adds shrinking squares, and hovering over a rect triggers a d3.transition that randomly repositions it and changes its fill color. The sketch uses d3.select, d3.range, .transition(), and event listeners on SVG shapes.

11wheel

66% match

Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel

66% match

Loading thumbnail…

Text Transition II

A randomly generated integer fades in and out inside a large headline, replacing itself with a new value on each cycle. The example demonstrates a text transition technique that uses `d3.select` and `d3.transition` to create a repeating animation. On each start event, `d3.active` removes the old heading while a new `h1` element is appended, initially transparent, and its opacity is tweened from 0 to 1 using the `style` method. The process repeats indefinitely with a 1.5-second delay, showcasing D3’s ability to manage enter, update, and exit sequences for text elements.

Mmbostock

66% match

Loading thumbnail…

10.transition-update pattern

The visualization demonstrates the D3 update pattern by animating a changing subset of the alphabet as text elements enter, update, and exit. The code defines separate transition states for each lifecycle phase—green for entering, dark gray for updating, and brown for exiting—using the `d3.transition` API with a 750-millisecond duration. Elements move horizontally to their new indexed positions, while exiting items fade out and shift downward before removal. The data shuffles and slices randomly every second via `d3.interval`, with the SVG output repositioning based on the current array.

深深度碎片

66% match