Argyle

100%

✓ Published0🌍 Public

Last edited May 20, 2017

Created on May 20, 2017

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.

AI-generated description

Infinite argyle with random ColorBrewer and d3 4.0 color scales.

forked from <a href='http://bl.ocks.org/veltman/'>veltman</a>'s block: <a href='http://bl.ocks.org/veltman/f24fba4f6549639cacfd4d0a50e9d4b8'>Argyle</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Argyle <pattern>

A repeating argyle pattern fills a circle with rows of diamond shapes, where each diamond’s fill color and stitch color change smoothly over time. The pattern is drawn using SVG elements inside a `<pattern>` def, with colors selected from random ColorBrewer palettes or d3 interpolated scales like `d3.interpolateViridis`. Each recolor run uses `d3.transition` with `styleTween` and `d3.interpolateLab` to animate fill and stroke changes.

HHerst

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

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

71% match

Loading thumbnail…

Creative Coding — Circles Abhyudai Thakur

Four hundred twenty semi-transparent circles animate between grid, Phyllotaxis spiral, and parametric heart layouts, with color themes cycling through Turbo, Sinebow, Cool, and Warm interpolators. The D3 v7 SVG visualization responds to keyboard shortcuts for layout and theme changes, while hover and click interactions trigger radius transitions and elastic pulse effects via `transition.attr` and `easeElastic`. Circle radii incorporate deterministic jitter, and the responsive design recalculates positions on window resize.

Aabhyudaithakur7@gmail.com

70% match

Loading thumbnail…

Hexagonal SVG gradient experiment

A grid of hexagons fills the page, each one displaying a linear gradient oriented along one of three angles, with colors randomly drawn from a dark rainbow palette. The animation progressively reveals hexagons starting from the center, growing outward in a wave-like pattern. Built with D3 v5 and SVG, the code constructs hexagon paths using trigonometric calculations and applies randomized gradient definitions through the SVG `defs` element.

AAjayyy

70% match

Loading thumbnail…

Animated Arcs

Four concentric animated arcs rotate continuously around a central point, each with a distinct color and its own random start and end angles. The arcs periodically change their sweep length and position, creating a dynamic, looping visual rhythm. Built with D3 v4, the example uses SVG paths and `d3.interval` to trigger transitions, while `transition.attrTween` and `d3.interpolate` smoothly animate each arc’s angles. The code generates random data for four arcs with varying radii and colors, drawing them with the `d3.arc` shape generator.

FFrissAnalytics

70% match

Loading thumbnail…

Animated Arcs

Four colored arc segments rotate continuously around a central point, changing their start and end angles to new random positions every few seconds. The animation uses D3 v4’s `d3.interval` to trigger periodic updates, and each transition relies on `transition.attrTween` with a custom `arcTween` function that interpolates between angle values using `d3.interpolate`. The SVG paths are generated by a `d3.arc()` generator, with each arc assigned a fixed inner and outer radius, forming concentric rings. The data is procedurally generated JavaScript, with random start angles and arc lengths derived from a random score.

TThanaporn-sk

69% match

Loading thumbnail…

Radial Colors

This radial visualization generates a circular patchwork of colored arcs by iterating a Lindenmayer system 20 times, starting from a single symbol and expanding it through string-rewriting rules. Each iteration produces a ring of segments, with arc angles determined by d3.scaleBand and radii mapped from the iteration count. The SVG paths are rendered using d3.arc, while colors derive from d3.schemeAccent via d3.scaleOrdinal. The pseudorandom pattern emerges from the L-system rules defined in the code, with data generated procedurally rather than sourced externally.

CCurran Kelleher

69% match