Skip to main content
SimilarExport ZIP
100%

fresh block

✓ Published0🌍 Public
SShuanWu
Last edited May 11, 2016
Created on May 11, 2016

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.

AI-generated description

Built with blockbuilder.org

Similar vizzes

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
91% 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
90% 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
88% 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
88% match
Loading thumbnail…

fresh block

A single red rectangle sits on a blank canvas and gradually changes to blue over three seconds. The example demonstrates a basic shape transition using D3.js version 3.5.5, appending a rectangle to an SVG and applying a `transition().duration(3000).ease("bounce")` to animate its fill color between two hex values. The code is minimal, serving as a straightforward introduction to SVG rendering and animation with D3.

SSmith5mr
87% match
Loading thumbnail…

fresh block

A rectangular block changes color from red to blue with a bounce easing over three seconds. Data loaded from a CSV file via `d3.csv` is bound to an SVG selection, though only circle elements are appended, each positioned horizontally based on its index using `attr` with a `cx` function. The visualization uses D3.js version 3.5.5 and renders entirely through SVG elements, including a transition applied to the rectangle's fill style. The animation is triggered on page load.

TTheLady
87% match
Loading thumbnail…

fresh block

A single turquoise square animates horizontally across an empty SVG canvas, moving from the left edge toward the center over three seconds. The block demonstrates D3.js version 3.5.5’s transition system, using the `transition().duration(3000).ease("bounce")` API to apply a bouncing ease to the rectangle’s `x` attribute change from -100 to 250. The visualization is minimal, showing only the rect element, with no data source or additional marks.

SSmith5mr
86% match
Loading thumbnail…

fresh block

A blank burgundy rectangle fades to sky blue over three seconds inside an SVG canvas. The example demonstrates D3.js version 3.5.5 transitions and easing functions, using `d3.select` to append a `rect` and apply a `.transition()` with a `"bounce"` easing effect. The source is a Blockbuilder-generated single-file project, rendered entirely in SVG with no external data—only static shape attributes and CSS styling define the visual output.

AAdamBlaine1
85% match