fresh block

100%

✓ Published0🌍 Public

Last edited Apr 30, 2016

Created on Apr 30, 2016

Three blocky text elements, carrying the numbers 2, 3, 3, and 4, fade from deep red to light blue over three seconds on a full-screen SVG canvas. The code uses D3.js v3 to bind a simple static array to SVG text nodes, setting their positions with fixed coordinates and a data-driven y-offset. A `transition().duration(3000).ease("bounce")` animates the color change, while the initial dimensions and basic styling are applied directly via `.attr()` and `.style()` calls. No external data source is loaded; the visualization relies entirely on the inline array.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

fresh block

A series of text labels slide from right to left in an SVG canvas, each pausing briefly before the next enters. The animation cycles through a predefined sequence of values, including numbers and letters, using timed `setTimeout` calls. Built with D3.js (version 3.5.5), the code uses `selectAll`, `data` joins, and `transition` with `duration` and `delay` to animate elements. Data arrays are passed to a render function, which handles entering, updating, and exiting text nodes. The ordinals scale positions labels vertically, while a linear scale is defined but unused.

RRasinj

88% match

Loading thumbnail…

fresh block

A sequence of labels animates in a staggered leftward slide as the dataset changes over time. The initial empty array is replaced by successive arrays of increasing length containing numbers and letters, demonstrating how new elements enter from the right with a blue fill, while removed elements fade out. Built with D3 3.5.5, the code uses `d3.select`, `svg.selectAll`, and the `transition()` API with specified durations and easing to update text positions and styles along a fixed x-coordinate.

RRasinj

87% match

Loading thumbnail…

fresh block

A sequence of letters and numbers slides into place along a vertical scale, then exits in red, demonstrating a simple data join animation. The SVG text elements are bound to an array of values that changes over time using timed `setTimeout` calls. The code uses D3.js scales, including `d3.scale.linear` and `d3.scale.ordinal`, along with selection methods like `.enter()`, `.exit()`, and `.transition()` with a linear ease and per-element delay. The animation cycles through adding and removing items, showing enter, update, and exit states.

RRasinj

87% match

Loading thumbnail…

fresh block

A large red rectangle transitions to blue over three seconds using a bounce easing effect. Built with D3.js version 3.5.5, the code selects an SVG element, appends a rectangle with explicit x, y, width, and height attributes, and applies a `transition().duration(3000).ease("bounce")` to animate the fill color. The visualization demonstrates basic SVG shape creation and property animation, with the rectangle remaining static in position while its color shifts. The source is a gist created by Sokrates86, rendered as inline SVG within an HTML page.

SSokrates86

86% match

Loading thumbnail…

fresh block

This interactive animation demonstrates a dynamic text list where items slide into place from the right and then disappear. Using D3.js scales and the general update pattern, the code binds an array of numeric and alphabetic values to SVG text elements. Each new entry transitions horizontally to the left with a staggered delay, while exiting elements fade out. The visualization cycles through predefined data sets on timed intervals, showcasing the enter, update, and exit lifecycle with `transition.attr` and `style` changes.

RRasinj

86% match

Loading thumbnail…

fresh block

A single rectangular block animates its fill color from dark red to light blue over three seconds using a bounce easing effect. The visualization is built with D3.js version 3.5.5, using the `select` and `append` methods to create an SVG canvas and the `transition` API with a specified duration and easing function. The data source is a gist authored by ShuanWu, rendered as a static SVG animation without external datasets.

SShuanWu

85% match

Loading thumbnail…

fresh block

A single large rectangle sits against a plain background, initially drawn in dark red before transitioning to a bright blue over three seconds. The animation uses a D3 transition with a bounce easing, applied to the rectangle’s fill style. The visualization is built with D3.js (version 3.5.5) and rendered as an SVG element that fills the viewport. The code originates from a Blockbuilder.org gist and demonstrates a minimal, animated color change without any data or interactivity.

JJonasHeylen

85% match

Loading thumbnail…

fresh block

A red rectangle starts as a solid shape and then shifts to blue, demonstrating a simple color transition over three seconds. The example uses D3.js version 3.5.5 to append a single SVG `<rect>` element to the body and applies a `transition().duration(3000).ease("bounce")` to animate the `fill` style property. The page is built with Blockbuilder.org, and the rendering is entirely SVG-based with no external data source.

SSmith5mr

84% match