Skip to main content
SimilarExport ZIP
100%

Tiger 01

✓ Published0🌍 Public
WWill Carter
Last edited Sep 22, 2019
Created on Sep 21, 2019

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.

AI-generated description

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

mit Licensed

Similar vizzes

Loading thumbnail…

Tiger 04 (random corners)

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.

WWill Carter
86% match
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
84% 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
82% match
Loading thumbnail…

simple animation

This example demonstrates an interactive scatterplot of 1,000 randomly generated circles. The data is created on the fly and rendered as SVG circles within a full-window visualization. Using the D3.js library (version 7.8.5), the code applies linear scales to map random values to screen coordinates and circle radii. Hovering over a circle triggers a transition via the `transition` API, animating the circle to a new random position over one second with an elastic easing effect.

NNeeraj Kumar
71% 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
71% 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
71% match
Loading thumbnail…

Circles Test

A grid of 1,000 semi-transparent circles animates and repositions itself every second. The circles vary in radius and color, and clicking one turns it black. Built with D3.js and the D3Kit Skeleton library, the visualization uses a linear scale for positioning and a category20 scale for colors. Data is generated randomly, with circle transitions handled by D3's `.transition()` method.

BBrideau
70% match
Loading thumbnail…

D3 Test

Fifteen circles with dynamically changing radii, positions, and colors pulse in a smooth, endless animation, driven by sine-wave values generated in the `makeData` function. The example uses the D3 library (v7.8.5) with its `select`, `range`, and data-join `join` pattern to render SVG circles directly to the document body. Animation runs via `setInterval` at roughly 60 frames per second, updating a time parameter that alters each circle’s `r`, `cx`, `cy`, and `fill` attributes. The visualization demonstrates real-time data binding and SVG attribute updates with a minimal, dependency-light setup.

NNick Hogle
70% match