Tiger 04 (random corners)

100%

Tiger 04 (random corners)

✓ Published0🌍 Public

Last edited Sep 22, 2019

Created on Sep 22, 2019

The visualization reconstructs a tiger image from pixel data, where each pixel is represented by a small colored rectangle. The data points fly in from one of four randomly chosen corners of the chart, creating an animated assembly effect as they settle into their correct positions. The rectangles transition with staggered delays, gradually revealing the full image as the opacity increases from 0 to 1. The color of each rectangle is determined by the pixel color of the original tiger bitmap. The animation is rendered in SVG with D3 v4, with the image being built from a shuffled sequence of data points that each move from a random corner to their final location, producing a lively, scatter-like effect before the tiger image becomes apparent.

AI-generated description

D3.js Tiger 04 (random corners)

The data point flies in from a random corner.

Image processing (get color of each pixel in bitmap source image): https://pillow.readthedocs.io/en/stable/#

mit Licensed

Similar vizzes

Loading thumbnail…

Tiger 02 (rectangle points)

This example reveals a hidden tiger through a pixelated mosaic built from small rectangles. Each rectangle’s color is sampled from a bitmap source image of a tiger, and its position is initially jumbled in the center of the canvas. When the page loads, the rectangles animate outward to their correct grid positions, creating a satisfying "unscramble" effect. The visualization uses D3 v4 with SVG and a smooth transition that sorts the shuffled points into place, showcasing the power of data-driven animation and the visual appeal of image reconstruction.

WWill Carter

90% match

Loading thumbnail…

Tiger 03 (inverted)

This animation renders a pixelated image of a tiger, where the color of each rectangular cell is inverted from the original pixel color of the source bitmap. The D3.js code shuffles the order of the pixels and animates each square from a single starting point to its target position with a staggered delay, creating a sweeping "wipe" effect. As the rectangles settle into place, the inverted palette produces a striking negative-color representation of the tiger. The visualization uses an SVG canvas and is driven by D3 v4 transitions, with the underlying image data sourced from a gist.

WWill Carter

86% match

Loading thumbnail…

Tiger 01

This example uses D3.js to animate a scatterplot of 2,500 circles, each colored according to a pixel value from a bitmap image of a tiger. The data, stored as an array of coordinate-color pairs, is shuffled before rendering so the tiger emerges pixel by pixel. Circles transition from the top-right corner to their final positions over time, using a linear scale to map the image coordinates to the chart area. The result is a playful, animated reconstruction of the tiger image, with each circle’s fill color corresponding to its source pixel.

WWill Carter

86% match

Loading thumbnail…

Delete Me

This example displays a grid-based pixel art rendering of a tiger, with each cell colored according to a hex value stored in a flat data array. The visualization uses React and D3.js (v5), where the `tiger.js` file provides the coordinate and color data for each grid point. The code sets up an SVG canvas with fixed dimensions and margins, though the chart area is left empty in this starter template, as the rendering logic is not yet implemented. The project structure includes a React component that would eventually map the data to visual elements.

WWill Carter

67% match

Loading thumbnail…

Delete Me

WWill Carter

67% match

Loading thumbnail…

Distribution Scatter 4

A grid of semi-transparent rounded rectangles rotates about the center, with each rectangle’s angle determined by a sample from a beta distribution with parameters 1 and 4. The rectangles are drawn using d3.v6’s selection and transition APIs, with a background rectangle that also transitions its fill color. Every five seconds, the visualization randomly selects a new color palette from a predefined list, causing both the background and the foreground rectangles to smoothly fade to their new colors. The data consists of 600 random samples generated via `d3.randomBeta`, mapped through a linear scale to rotation angles between 0 and 80 degrees.

WWaseem Medhat

66% match

Loading thumbnail…

animated distortion

A single kitten image is displayed on an SVG canvas, with its appearance continuously shifting through two different distortion effects. The visualization alternates between two SVG filters, each combining a `feTurbulence` fractal noise generator with a `feDisplacementMap` to warp the image’s pixels. A recursive `setTimeout` function in plain JavaScript toggles the active filter every 400 milliseconds for ten iterations, creating a rhythmic pulsing distortion. The code uses D3 v4 for SVG selection and attribute manipulation, while the image itself is loaded from an external placeholder service.

PPatrick Wojda

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

64% match