Skip to main content
SimilarExport ZIP
100%

fresh block

✓ Published0🌍 Public
AAdamBlaine1
Last edited Feb 4, 2016
Created on Feb 4, 2016

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.

AI-generated description

Built with blockbuilder.org

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

fresh block

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.

GGerardoFurtado
81% match
Loading thumbnail…

fresh block

This example demonstrates a simple gradient-filled rectangle drawn in an SVG canvas. It shows a black horizontal bar with a linear gradient that fades from fully opaque on the left to nearly transparent on the right, positioned near the top of the frame. The code uses D3 v4 to select the body, append an SVG element, and construct a linearGradient definition with two stop points via `selectAll` and `data`. A single `rect` is then appended and styled with the gradient, relying on D3's data-binding to set offset and opacity values.

CCoreyBurkhart
81% match
Loading thumbnail…

fresh block

A single gray-stroked, pink-filled arrow-like shape is drawn on an SVG canvas using D3 v4. The path is defined by a set of explicit coordinates in `pathData` and rendered with `d3.line()`. The shape is centered via a `transform` translation to `(480, 250)` on a 960 by 500 pixel SVG. The code demonstrates a basic static vector drawing without data binding or interaction, sourced from a Blockbuilder gist.

DDinoJay
80% match
Loading thumbnail…

fresh block

This example shows a blank SVG canvas containing a single dark rectangle positioned at the top-left corner. The visualization is minimal, demonstrating the basic setup of an SVG scene using D3 version 4. The code selects the document body, appends an SVG element with fixed dimensions, and then adds a group containing a rectangle of specified width and height. The rendering relies on D3’s selection and attribute methods to build the static graphic.

JJboulery
79% match
Loading thumbnail…

fresh block

A simple D3.js v4 visualization displays a greeting and three colored circles on an SVG canvas. The text "Hey O-Team!" appears in a large, centered font, while purple, yellow, and aqua circles are positioned at fixed coordinates. The code uses direct SVG append operations via D3 selections, setting attributes for positioning and styling, with no data binding or interactive behavior. The static composition serves as a basic demonstration of SVG element creation with D3, sourced from a Blockbuilder-generated file.

BBrieLewis
79% match
Loading thumbnail…

fresh block

This example displays a single line of static text, "Edit the code below to change me!", centered on a blank SVG canvas. The visualization demonstrates a minimal D3.js setup, using the `d3.select` method to append an SVG element to the document body with a fixed width and height. It then applies the SVG `text` element and sets attributes such as font size and family via chained `.attr()` calls. The code is a starting template built with Blockbuilder.org, requiring no external data source.

HHeywhoyou22
79% match
Loading thumbnail…

fresh block

This example displays a single line of static text, "Edit the code below to change me!", centered on a blank SVG canvas. The visualization demonstrates a minimal D3.js setup, using the `d3.select` method to append an SVG element to the document body with a fixed width and height. It then applies the SVG `text` element and sets attributes such as font size and family via chained `.attr()` calls. The code is a starting template built with Blockbuilder.org, requiring no external data source.

HHeywhoyou22
79% match