100%

Simple rect

✓ Published0🌍 Public

Last edited Feb 21, 2023

Created on Feb 13, 2023

Animated SVG rectangles appear in horizontal rows and grow to random heights and colors at regular intervals, then shrink and disappear. The visualization uses the d3 library’s `select`, `transition`, and `range` APIs to manage the lifecycle of each rectangle. Data is generated procedurally with JavaScript’s `setInterval` and `Math.random`, creating a constantly updating bar-like chart. The code defines a reusable `timePlot` function that handles enter, update, and exit states for smooth transitions.

AI-generated description

Simple rect

MIT Licensed

Similar vizzes

Loading thumbnail…

A simple rectangle

This example shows a set of circles moving randomly within an SVG canvas, with their positions and radii changing every 500 milliseconds. The visualization uses D3.js version 3 to generate random data points and animate the circles through the `transition()` API, while CSS styles define the circles’ blue fill with partial opacity and red stroke. The animation runs continuously via `setInterval`, creating an ever-shifting pattern of overlapping translucent circles.

JJn1532

78% match

Loading thumbnail…

SVG Example

Five static SVG rectangles form a simple bar chart, descending diagonally from the top-left to the bottom-right. The bars have equal widths and varying heights and y-positions, creating a staircase-like visual from a hardcoded JavaScript array of objects. The example uses D3 v4’s selection API to append rectangles to an SVG canvas, setting x, y, width, and height attributes from the data. The code demonstrates basic declarative binding of data to SVG shapes without animation or axes.

CCurran Kelleher

78% match

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

77% match

Loading thumbnail…

rect-blinds

The visualization shows a sequence of vertical rectangles that continuously slide and expand across the screen, each with a random color, creating an ever-shifting mosaic. The code uses D3.js and lodash to generate a set of rectangles with random widths, then animates their width and horizontal position using `transition.attr` for smooth movement. The rectangles are drawn with SVG `rect` elements inside a full-window `<svg>`, with each cycle restarting every six seconds. The animation relies on custom timing delays and durations tied to rectangle width, while colors are randomly generated as RGB strings.

11wheel

76% match

Loading thumbnail…

rect-spiral

An animated grid of squares repeatedly collapses to points and expands into colored rectangles against a dark background. Each cycle, a new set of squares appears, and the staggered delays create a cascading effect as they grow to full size. The code uses D3.js, lodash, and custom d3-starterkit helpers, appending `rect` elements to an SVG and animating their `width`, `height`, `x`, and `y` attributes via `transition()`. The grid positions are derived from dividing the viewport into a matrix, and each square’s fill color is randomly generated.

11wheel

76% match

Loading thumbnail…

d3 intro

This example renders a full-screen SVG filled with 100 horizontal rectangles, each stacked vertically with a fixed height of 10 pixels and a small gap between them. The visualization uses d3.select and d3.range to generate the data, then binds it to rect elements via a data join. The rectangles span the entire window width, creating a simple striped pattern that highlights D3’s declarative approach to binding data to SVG shapes using the .attr and .join methods.

Ssukumardunn

76% match

Loading thumbnail…

SVG starter

This example demonstrates a minimal SVG-based bar chart with three static rectangles rendered in steelblue, green, and red. The SVG canvas is created by appending an `svg` element to the HTML body via D3's selection API, with a height of 500 and width of 960. Each rectangle is positioned using explicit `x` and `height` attributes, with widths fixed at 50 pixels. A loop then appends additional red rectangles at intervals of 100 pixels, though the loop condition prevents it from executing properly.

NNita

76% match

Loading thumbnail…

Untitled

This example displays 100 horizontal SVG rectangles stacked vertically, each rendered with varying heights and widths across the viewport. The code uses D3’s `select` method to append an SVG element to the body and sets its dimensions from `window.innerWidth` and `window.innerHeight`. Inside a loop, it creates each rectangle via `document.createElementNS`, setting attributes for positioning and size, and appends them directly to the SVG using `appendChild`. The visualization shows a striped pattern of bars without any interactivity or data binding.

Nnreinig3@gatech.edu

75% match