rect-blinds

100%

✓ Published0🌍 Public

Last edited Aug 21, 2016

Created on May 30, 2015

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.

AI-generated description

Similar vizzes

Loading thumbnail…

rect-wave

The visualization displays a dynamic grid of colorful squares that grow and fade across the screen. It shows a patterned sequence of rectangles appearing in a staggered, wave-like manner, with each square expanding from zero size to full dimensions before the next wave begins. The animation continuously updates by creating new sets of squares at regular intervals, using a modulo condition to determine placement. It is rendered as SVG with smooth transitions, built using the D3.js library and its transition system to animate rectangle attributes over time. The grid size is calculated from the viewport dimensions, and random RGB colors are generated for each square.

11wheel

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

80% match

Loading thumbnail…

Simple rect

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.

BBart van Pelt

76% match

Loading thumbnail…

first D3

This example shows a fullscreen grid of 200 vertical rectangles, each a random color, animating upward indefinitely. The rendering approach uses raw SVG elements created via the `document.createElementNS` API, with styles set directly on each rectangle. The animation relies on the Web Animations API (`element.animate`) to translate each rectangle along the Y-axis with randomized durations and infinite iterations. No external JavaScript libraries are used; the page is a minimal HTML document with inline CSS and JavaScript, demonstrating basic D3-free DOM manipulation for a generative visual effect.

GGusnaRWX

75% match

Loading thumbnail…

shifting-blinds

A grid of forty multicolored horizontal slats forms a three-dimensional blind. Moving the mouse up and down rotates each slat, opening or closing the blind to reveal the space behind it. Built with Three.js and WebGL, the animation uses random colors for each slat and a trackball control system for camera rotation and zoom. The scene is rendered in a web browser with dynamic shadow mapping.

11wheel

73% match

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

73% match

Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel

72% match

Loading thumbnail…

Distribution Scatter 2

A grid of 700 narrow vertical rectangles spans the full height of the visualization, each sampled from a Pareto distribution using `d3.randomPareto` and scaled by 25. Every five seconds, the entire composition shifts color as the background rectangle and all foreground rectangles smoothly transition between one of six predefined color palettes, alternating between dark and light themes. The animation uses `transition().duration(1000)` on both the background and foreground elements, cycling randomly through palettes with contrasting pairs like teals, blues, or violets. Rendered as SVG with semi-transparent rectangles (0.02 opacity), the overlapping shapes create a dense, layered texture across the 960×500 canvas.

WWaseem Medhat

72% match