quilt block (random color)

100%

quilt block (random color)

✓ Published0🌍 Public

Last edited Sep 30, 2016

Created on Sep 29, 2016

A grid of 1,500 small squares fills the screen, each cell randomly assigned a harmonious golden-ratio-based color from a custom HSL-to-RGB function. The visualization shows how a quilt-like pattern emerges from uniform geometry with varied fills. Built with D3 v4, the code generates row and column data arrays, then binds them to SVG rectangles using `selectAll`, `data`, and `enter`. The `randomColor` closure iterates through hues via the golden ratio, while white strokes separate each square, creating a subtle grid structure.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/annabsmylie/'>annabsmylie</a>'s block: <a href='http://bl.ocks.org/annabsmylie/0ad5c50200d5ef47a0129b99b1db004c'>quilt block</a>

mit Licensed

Similar vizzes

Loading thumbnail…

quilt block (random texture)

This example generates a 50-by-30 grid of colored and textured rectangles, forming a quilt-like pattern where vertical bands define colors and horizontal bands define texture patterns. The visualization uses D3 v4 with SVG rendering, plus the textures library to create circle and path-based patterns. A nested ordinal scale maps three color categories from ColorBrewer to three texture generators, applying each texture in each color. The code initializes texture definitions using D3’s selection `.call` method, then binds grid data to rectangles positioned in a fixed 25-pixel cell layout.

Aannabsmylie

90% match

Loading thumbnail…

quilt block

The visualization displays a grid of 7 by 10 quilt squares, each filled with a randomly selected geometric texture pattern. Every 500 milliseconds, the entire grid regenerates with new textures and color combinations, creating an animated patchwork effect. The code uses d3.js v4 to construct SVG rectangles, textures.min.js to generate patterns like lines, circles, and paths, and d3-timer to manage the looping updates. Each square’s fill is set to a texture URL, producing a continuously shifting mosaic.

Aannabsmylie

89% match

Loading thumbnail…

quilt block

A quilt-like grid of 1,500 small squares fills an SVG canvas, each tile rendered with a yellow circular texture pattern over a dark background. The code generates the grid data programmatically with nested loops, assigning each cell an x, y, width, and height. It uses the textures library’s `textures.circles()` to create the pattern, applies it via `t.url()` as the fill, and relies on D3 v4 selections to append and position the rectangles.

Aannabsmylie

88% match

Loading thumbnail…

quilt block (random texture)

This example generates a quilt-like grid of 50 by 30 rectangles, each filled with one of three random texture patterns. The textures—lines, circles, and lighter lines—are applied using the `textures` library, and each cell selects a texture via a random index. The SVG is built with D3 v4, using data joins to create rows and columns, while the texture API’s `.url()` method assigns the fill. The result is a visually varied, patterned mosaic whose texture placement is entirely stochastic.

Aannabsmylie

87% match

Loading thumbnail…

D3 Random Abstract Art

This example generates a grid of 100 colored rectangles whose fills use randomized pairs from the d3 `schemeCategory10` palette via `d3.scaleLinear`. As the mouse hovers over a square, that rectangle and its entire row are re-appended to the SVG to bring them to the foreground, while the square’s width and height are scaled up or down by a factor of three or four. Clicking anywhere reloads the page to generate a fresh random composition. The visualization is built with D3 v6 selections and SVG rendering, and includes a small instruction bar.

CCaroline Ghisolfi

74% match

Loading thumbnail…

Square Grid

A grid of gray squares fills the view, with each square representing a single unit, arranged so that rows of ten, blocks of one hundred, and groups of one thousand are visually distinct. The count, displayed as a large number, animates upward or downward as the grid randomly updates to a new total between zero and ten thousand, using transitions to add or remove squares. The visualization uses D3 v4 with data joins and tweens to interpolate the numeric label, while the grid’s layout is computed via `d3.range` and positional math. This example is forked from Mike Bostock’s original block.

GGerardoFurtado

72% match

Loading thumbnail…

fresh block

A grid of four square rectangles is drawn on an SVG canvas, each positioned along the x-axis with identical y-values, and colored with a cool-tone gradient that shifts based on each square's x-coordinate. The visualization uses d3.v4 and the data-binding pattern `selectAll().data().enter().append()` to create the shapes. The x- and y-positions are mapped through `d3.scaleLinear` domains, while a `d3.scaleSequential` with `d3.interpolateCool` determines the fill color. The static dataset is hardcoded in the script, and margins are applied via a translated SVG group.

RRobertDelgado

71% match

Loading thumbnail…

simple grid

A 200-by-200 pixel SVG canvas displays a 4x4 grid of 50-pixel squares, each filled with the same circular texture pattern. The example uses D3 v4 to append the SVG container and rect elements, while the texture is generated with the textures.js library, specifically via `textures.circles()`. Each square’s fill is set to `t.url()`, which returns a data URI referencing the shared texture, demonstrating how to apply a repeating pattern across multiple shapes without duplicating the pattern definition.

Aannabsmylie

70% match