fresh block

100%

✓ Published0🌍 Public

Last edited Jan 2, 2019

Created on Jan 2, 2019

A single red square animates through a sequence of 180- and 360-degree rotations using SVG transitions. The example demonstrates chained `transition()` calls with `duration` and `delay` to create a two-step spinning effect around a fixed center point. Built with D3.js v1 modules including `d3-transition`, `d3-selection`, and `d3-color`, the code directly manipulates the `transform` attribute on a `<rect>` element. The square starts at coordinates (100,100) and rotates in place without moving its position, showcasing how D3 handles attribute tweening for transform strings. No data source is used; the visualization is purely a geometric animation.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

81% match

Loading thumbnail…

fresh block

This example shows four red circles of increasing size arranged diagonally on a blank SVG canvas. Each circle is scaled by a data value from the array [0.25, 0.5, 0.75, 1] using a translate and scale transform, producing a stepped progression. Built with D3 v4, the code uses `d3.select` to create the SVG, appends a base circle, then selects all circles with class "red" and applies the data-driven transforms. The data source is a simple inline array, with the rendering handled entirely through SVG attributes.

BBrunoDumas

80% match

Loading thumbnail…

fresh block

The visualization animates a grid of square cells that fills and empties to demonstrate count transitions, cycling between zero and a random number up to 9,999. It shows how a dynamic numeric label updates in sync with the cell layout. The code uses D3 v4 with SVG rendering, employing `transition.attr("width", ...)` and `transition.attr("width", 0)` for enter/exit animations, plus a text `tween` with `d3.interpolateNumber` to smoothly change the displayed count. The grid groups cells in blocks of ten, with spacing calculated from the viewport width.

GGerardoFurtado

80% match

Loading thumbnail…

fresh block

Ten dark circles orbit a central point in a ring, but clicking one sends it to the middle while the others reposition around it. Hovering highlights a circle in red. Built with D3 v4, the example uses `d3.range` to generate data, SVG `circle` elements, and chained `transition().duration()` calls to animate positions. Mouse events (`mouseover`, `mouseout`, `click`) control selection and recoloring, with the selected index driving the layout calculation.

MMicrobie

79% match

Loading thumbnail…

fresh block

This example displays a single vertical red rectangle at a fixed position on a light gray SVG canvas. Built with D3 v4, the visualization appends a 100-by-200 pixel rectangle to the SVG root using the `d3.select` and `append` methods, then fills it with the custom color `#EF4135`. The code sets the canvas size to 960 by 500 pixels and defines unused color variables for blue and white, though only the red shape is rendered. The visualization is generated entirely with the SVG rendering approach, using a hardcoded geometry without any data source or interactivity.

KKerchoo

78% match

Loading thumbnail…

fresh block

A single text label orbits a circular guide path in a continuous loop. A rotating line and the label itself move together, with the text flipping its anchor point and read direction at the halfway mark. The example uses D3 v4's `select` and `attr` methods within a recurring `setInterval` timer, updating an SVG group's `transform` to rotate around the circle’s center. The static SVG contains the circle, line, and text elements, and the animation demonstrates manual rotation and text-orientation handling without any data source.

11Cr18Ni9

78% match

Loading thumbnail…

fresh block

A single red circle floats on a blank canvas, positioned by fixed pixel coordinates, while a row of empty text elements is bound to an array of numbers. The example demonstrates basic SVG shape creation and data-join fundamentals with D3 v4, using `d3.select` and `d3.selectAll` to manipulate DOM elements. The circle’s fill color is set to Peru, and the code appends both SVG and HTML elements, though the text nodes remain without visible content. The visualization is minimal, focusing on core D3 syntax rather than presenting meaningful data.

335degrees

77% match