AN Scratchpad

100%

✓ Published0🌍 Public

Last edited Nov 12, 2017

Created on Nov 12, 2017

A grid of small white rectangles with grey strokes appears on an SVG canvas, arranged in a loose formation based on coordinate pairs. Clicking any rectangle triggers a staggered transition where every block shifts diagonally by a fixed offset, using D3 v4’s `transition().duration()` and `delay()` methods. The animation recalculates each rectangle’s `x` and `y` attributes from updated array values, creating a cascading ripple effect across the entire grid.

AI-generated description

This is the code for Chapter 1, Figure 34 from D3.js in Action that creates various SVG elements and then animates them using D3 transitions.

forked from <a href='http://bl.ocks.org/emeeks/'>emeeks</a>'s block: <a href='http://bl.ocks.org/emeeks/5090dad12ed99da67e77'>Ch. 1, Fig. 34 - D3.js in Action</a>

mit Licensed

Similar vizzes

Loading thumbnail…

AN scratchpad

An empty SVG canvas is set up with placeholder text and unused variables for block dimensions and layout. The code initializes a 960×500 SVG using d3.select and d3.append, but no data or visualization is rendered. It appears to be a scratchpad for experimenting with D3 v4, where the layout parameters (block width, height, spacing, and display offsets) are defined but not yet applied to any graphical elements.

Aadamnieman

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

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

77% match

Loading thumbnail…

SVG Lots of Transitions

This example shows a grid of 19,200 small SVG rectangles that simultaneously reverse their positions and change color from steelblue to lightgreen over three seconds. The animation creates a sweeping wave effect as each rectangle’s transition delay is based on its original row and column index. The code uses D3 v4 with `selection.transition()`, `duration()`, and `delay()` to orchestrate the movement, while the SVG attributes `x`, `y`, `width`, and `height` define the grid layout. The data is generated with `d3.range()` and positioned using modular arithmetic.

Aandrew-reid

75% match

Loading thumbnail…

Rounded Rectangles

A grid of 25 rounded rectangles animates toward the mouse position while continuously rotating, with each rectangle’s fill color drawn from a categorical scale. Driven by a d3.timer, each tick updates the rectangles’ center coordinates and rotation angle based on their distance to the cursor. The SVG shapes use `rx` and `ry` attributes, and the code leverages D3’s data binding, `d3.scale.category20c`, and a `mousemove` event to track the pointer. This example adapts a Paper.js demo into D3 with animated transforms.

Mmbostock

75% match

Loading thumbnail…

Transform Transitions

A grid of colored squares animates in response to mouse hovers, demonstrating smooth interpolation between different 2D SVG transforms. Each rect transitions from its original translate to a combined translate, scale, and rotate, then shrinks and fades before being removed. The code uses d3.v3 transitions with `.attr("transform")` to leverage matrix decomposition, automatically decomposing transforms into canonical translate, rotate, scale, and skew components. The visualization is built with a data-joined SVG rect per grid cell, filled with HSL colors based on position, and rendered entirely through D3’s selection and transition APIs.

Mmbostock

75% match

Loading thumbnail…

Canvas, Lots of Transitions

A grid of 19,200 small rectangles fills the canvas, each transitioning from steelblue to lightgreen while moving from the top-left corner to the bottom-right. The animation uses d3.v4 transitions with staggered delays based on each cell’s grid position. Rendering is handled by Canvas 2D API calls within a `requestAnimationFrame` loop, while a detached custom D3 selection manages the rectangle attributes without creating DOM elements.

Aandrew-reid

74% match

Loading thumbnail…

Circles and rectangles grid

A grid of green rectangles is punctuated by circles that animate on top of them. Each circle transitions its position, moving from its initial coordinate to the center of its corresponding rectangle, then changes fill color to yellow with partial opacity. Built with D3 v5, the example uses SVG elements and chained `transition().duration()` calls to sequence the movement and color changes across the entire grid simultaneously.

NNita

74% match