Sliding puzzle

100%

Sliding puzzle

✓ Published0🌍 Public

Last edited Apr 4, 2017

Created on Apr 4, 2017

This sliding puzzle divides a neon background image into a grid of tiles, with one tile removed to create a hole. An animation continuously swaps the hole with a random adjacent tile, creating a perpetually shuffling mosaic. The code uses D3 v4 to bind data to HTML `div` elements and positions them via absolute CSS, while `d3.shuffle` and `d3.transition` orchestrate the tile movement. Each tile’s background offset is calculated from its grid position, revealing the underlying image fragment.

AI-generated description

Just an After Dark-style sliding puzzle.

forked from <a href='http://bl.ocks.org/veltman/'>veltman</a>'s block: <a href='http://bl.ocks.org/veltman/f26eeceed3ab15787daf9f5ea4ba1468'>Sliding puzzle</a>

Similar vizzes

Loading thumbnail…

Shuffle blocks

Eight colored blocks, each labeled with a Swedish party abbreviation, shuffle through a three-by-three grid before returning to their original positions. The animation alternates between a forward sequence and a backward sequence after an initial delay. Built with D3 v4, the code selects SVG groups containing rectangles and text, applying `transition.attr` with `duration` and `delay` to update each block's `transform` attribute. The data consists of a hardcoded array of party codes, with movements defined as index, row, and column targets.

PPatrick Wojda

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

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

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

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

64% match

Loading thumbnail…

Untitled

A grid of 4,002 small square divs cycles through a continuous color animation, shifting from light gray to steel blue, then to orange, and back to light gray. The page uses D3 v4 with `d3.interpolateRgb` for color transitions and `d3.active` to manage chained, repeating transitions with random delays. The example demonstrates modular JavaScript with ES6 imports, including a promise-based `getCars` function and data filtering from a JSON array, though the grid itself relies solely on D3's selection and transition methods.

Jjesramyep1263

64% match

Loading thumbnail…

Shuffle II

An array of 200 vertical lines rotates in place to visualize a Fisher–Yates shuffle, with shuffled elements rendered in black while unshuffled ones stay light gray. The animation plays the swap sequence in reverse, shuffling the array from a fully shuffled state back to its original order. Built with D3 v3, it uses ordinal and linear scales, SVG line elements, and chained transitions to update each line’s rotation transform after every swap. The shuffle function generates random pairwise swaps, and the code references DOM nodes directly to swap their positions efficiently.

Mmbostock

63% match

Loading thumbnail…

Argyle

An animated grid of diamond shapes endlessly shifts through a palette of ColorBrewer color schemes and d3 4.0 interpolated scales, such as Viridis and Rainbow, with random patterns including checker, wave, and bowtie layouts. Each diamond is rendered as an SVG path and a diagonal stitch line, and its fill and stroke colors are recomputed based on relative luminance contrast ratios. The code uses d3.transition with styleTween and d3.interpolateLab to smoothly recolor the scene every second, cycling through color schemes and pattern functions defined in the custom `argyle.js` module.

TThanaporn-sk

63% match