Skip to main content
SimilarExport ZIP
100%

My second animation

✓ Published1🌍 Public
RRussell Watson
Last edited Feb 6, 2020
Created on Feb 6, 2020

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.

AI-generated description

TODO

Add removal of elements...

...which I THINK is

  • tricky
    • because the method chaining, together with transitioning (I THINK) means
      • we can't chain it all in one list
      • because transition does not return the original selection
      • we thus need to BRANCH in the method chaining
      • which is what the .call(…) is maybe for?
      • which is what the .join(enterFunc,updateFunc,exitFunc) avoids?
MIT Licensed

Similar vizzes

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
85% 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
73% 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
73% match
Loading thumbnail…

Untitled

This interactive word cloud visualizes repeating phrases from a COVID-19 care guide, using the d3.layout.cloud API to position words in a circular layout. The animation shows words entering, updating, and exiting via D3 v3 transitions that adjust font size, rotation, and fill opacity. Each word is rendered as an SVG text element with Impact font and category20 color scale, with random 0 or 90 degree rotations. The visualization uses sample text data embedded in the script, demonstrating a reusable module pattern for updating word clouds.

Ssdifferent0987
73% match
Loading thumbnail…

Untitled

This interactive word cloud visualizes repeating phrases from a COVID-19 care guide, using the d3.layout.cloud API to position words in a circular layout. The animation shows words entering, updating, and exiting via D3 v3 transitions that adjust font size, rotation, and fill opacity. Each word is rendered as an SVG text element with Impact font and category20 color scale, with random 0 or 90 degree rotations. The visualization uses sample text data embedded in the script, demonstrating a reusable module pattern for updating word clouds.

Ssdifferent0987
73% match
Loading thumbnail…

Untitled

This interactive word cloud visualizes repeating phrases from a COVID-19 care guide, using the d3.layout.cloud API to position words in a circular layout. The animation shows words entering, updating, and exiting via D3 v3 transitions that adjust font size, rotation, and fill opacity. Each word is rendered as an SVG text element with Impact font and category20 color scale, with random 0 or 90 degree rotations. The visualization uses sample text data embedded in the script, demonstrating a reusable module pattern for updating word clouds.

Ssdifferent0987
73% 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
72% 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
72% match