Isometric II

100%

✓ Published0🌍 Public

Last edited Mar 9, 2019

Created on Feb 10, 2016

An isometric grid of white cubes rotates and expands from the center of a canvas, creating a pulsing, geometric wave. Each cube spins and grows in size based on its distance from the origin, using a custom isometric projection library to map 3D coordinates to 2D space. The animation is powered by `d3-timer` and `d3-ease`, with the canvas cleared and redrawn each frame.

AI-generated description

A recreation of one of my favorite Bees & Bombs.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Isometric

A grid of white cubes is rendered on a canvas, each rotating around its vertical axis. The rotation angle for each cube is determined by the sine of the elapsed time plus a value derived from its grid position, creating a subtle, wave-like variation across the display. The animation is driven by d3-timer, while a custom isometric projection library handles the 3D-to-2D transformation by projecting vertices onto the canvas using a fixed camera angle.

Mmbostock

92% match

Loading thumbnail…

Isometric III

An animated field of white, wireframe cubes rotates and rises in an isometric grid. Each cube spins on its vertical axis, with the rotation amount and vertical position varying by its distance from the center, creating a wave-like motion across the diamond-shaped pattern. Built with D3’s `d3-timer` and `d3-ease` modules, it uses a custom `isometric` library to project 3D coordinates onto a 2D Canvas context, drawing paths with `moveTo` and `lineTo`. The animation is driven by the timer’s elapsed time, and cube placement uses both Manhattan and Cartesian distance calculations.

Mmbostock

92% match

Loading thumbnail…

Wave Motion

A grid of faint circular outlines fills the background, representing water parcels in a calm state. Overlaid on this, bright dots travel along the perimeters of each ring, rotating in coordinated, wave-like patterns that ripple across the canvas. The animation uses a d3-timer to update the rotation angle for each dot, with position and rotation calculated from the grid index and elapsed time. Two layered Canvas 2D contexts render the static rings and the moving dots, with devicePixelRatio scaling for sharp display on high-DPI screens.

Mmbostock

75% match

Loading thumbnail…

canvas-squares

The visualization displays a grid of small squares that animate across the canvas in rhythmic waves. Using D3.js and the Canvas API, the code schedules repeated intervals that spawn rectangular shapes, which grow from thin lines into full squares while moving in alternating directions. Each square’s animation is driven by a custom timer that interpolates between start and end coordinates, with colors cycling through a palette of blues, purples, and greens. The effect creates a cascading, kinetic pattern across the full viewport, with random elements influencing which squares appear and how they stagger.

11wheel

71% match

Loading thumbnail…

Transform Transitions II

A grid of 1,200 small colored squares, each assigned a position via inline CSS `transform` and a hue from `d3.hsl`, reacts to mouseover by flying to the center of the viewport. The selected square scales up and rotates 180 degrees using D3’s `transition().style("transform")`, which interpolates the CSS transform string, then shrinks and removes itself. Built with d3.v4 and `d3.range`, the animation leverages D3’s transform interpolation to smoothly tween translate, scale, and rotate values, while `raise()` brings the active square to the front.

Mmbostock

70% match

Loading thumbnail…

Geodesic Grid

A rotating geodesic polyhedron wireframe displays a shimmering, three-dimensional grid atop a fixed circular frame. The visualization uses d3.geodesic to generate a subdivided icosahedron’s edges, rendered as an animated SVG path via d3.geo.path with an orthographic projection. The d3.timer continuously updates the projection’s rotate parameters, creating smooth, continuous motion.

Mmbostock

70% match

Loading thumbnail…

canvas circles

The visualization displays a grid of randomly colored circles that continuously appear and expand across the screen. It shows a generative animation where each frame introduces new circles at shuffled grid positions, growing from zero to full size before fading away. The code uses D3.js with SVG elements, leveraging transitions to animate circle radius and removal. Rendering depends on the d3-starterkit and d3-jetpack libraries for concise element creation and data binding. Colors are randomly generated RGB values applied to fill and stroke. The animation runs indefinitely via recursive setTimeout calls, creating an evolving, ever-changing mosaic of overlapping rings on a dark background.

11wheel

69% match

Loading thumbnail…

Rotating Orthographic

A rotating orthographic projection of the world, rendered via canvas animation, shows the globe slowly spinning as landmasses and country borders move across the sphere. The code uses `d3.geo.orthographic` with a clip angle to define the projection, `d3.geo.path` to draw land, borders, and graticule, and `d3.json` to load world-110m GeoJSON data. A timer updates the rotation angle over time, clearing and redrawing the canvas each frame.

Mmbostock

69% match