d3 mapping

100%

✓ Published0🌍 Public

Last edited Oct 26, 2015

Created on Oct 26, 2015

A rectangle centered in an SVG canvas animates its fill color from dark red to light blue over three seconds, demonstrating a simple transition with a bounce easing. The example uses D3.js version 3.5.5, applying a `transition().duration(3000).ease("bounce")` to a `rect` element with explicit `x`, `y`, `width`, and `height` attributes. The SVG is sized to 960 by 500 pixels with margins, and the code runs directly in the browser, logging a confirmation message to the console. No external data source is involved; the visualization relies solely on hardcoded geometry and styling.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

Create an animated rectangle with D3

This example demonstrates how D3 transitions can animate the properties of an SVG rectangle. An initially short, 100-pixel-wide rectangle grows in height from zero to 400 pixels over two seconds after a one-second delay, while its fill color changes from steelblue to a warm orange in a second transition. The code uses D3 v5’s `d3.select` to append an SVG element, `selection.append('rect')` to create the shape, and chained `transition()` calls with `.delay()` and `.duration()` methods. The rectangle is rendered directly in the browser via SVG, with all styling and timing defined imperatively in JavaScript.

NNita

82% match

Loading thumbnail…

testing

A red rectangle fades to blue over three seconds, demonstrating a basic SVG transition. The visualization uses D3.js version 3.5.5 to select the body element and append an SVG canvas, then applies a `transition().duration(3000).ease("bounce")` to animate the rectangle’s fill style. The code is minimal, with no data source or interaction, and relies on the blockbuilder.org template. The animation shows a single shape changing color, highlighting D3’s ability to animate SVG attributes with custom easing functions.

UUtopiah

81% match

Loading thumbnail…

d3 Animation

This example demonstrates a single-circle animation using D3 transitions. The visualization shows a red-outlined circle that starts at the left side of an SVG canvas and moves downward while changing its fill color to green over one second. The code appends an SVG element sized to the browser window, creates a circle with initial x-coordinate 200, then chains a transition with a 1000-millisecond duration to animate the y-coordinate, radius, and fill style. It uses D3 v6's `selection.transition()` and `transition.attr()` methods within a minimal HTML page.

MMTR

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

81% match

Loading thumbnail…

fresh block

A red rectangle transitions to blue over three seconds on a blank SVG canvas. The animation uses D3’s `transition().duration(3000).ease("bounce")` to change the rectangle’s fill style, demonstrating basic shape rendering and tweening with d3.js 3.5.5. The code directly appends an SVG `rect` element to the body and logs a message to the console. No data source is involved; the example focuses solely on a single animated visual primitive.

Aanemochore

81% match

Loading thumbnail…

d3 course

This example demonstrates a single red rectangle that smoothly transitions to green and dramatically thickens its stroke when hovered, using CSS transitions on SVG `rect` elements. The code relies on plain HTML, CSS, and JavaScript, with no external libraries or data sources. It sets initial styles for the rectangle and defines a hover state, allowing the browser to interpolate the fill color and stroke width over three seconds. The empty script tag suggests the visualization is static, with all interaction handled purely through CSS.

AAlexander Garzo

80% match

Loading thumbnail…

fresh block

A blue square fades to magenta over nearly three seconds, with a bouncing ease that makes the color transition feel playful. The example uses D3.js version 3.5.5 to append a single SVG `rect` element and applies a `transition().duration(2954).ease("bounce")` to animate its `fill` style. The rendering is entirely SVG-based, with the square fixed at 350 by 350 pixels and positioned at coordinates (100, 100). No data is loaded; the visualization simply demonstrates a basic animated style change.

WWanagram

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

78% match