Skip to main content
100%

quilt block (random texture)

✓ Published0🌍 Public
Aannabsmylie
Last edited Sep 29, 2016
Created on Sep 29, 2016

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.

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 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
95% 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
91% match
Loading thumbnail…

quilt block (random color)

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.

Aannabsmylie
90% 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…

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
74% match
Loading thumbnail…

Texture Test

A grid of 144 circles displays a factorial combination of three colors and three textures, creating a visual test for encoding categorical data. The circles are grouped into nine blocks, each pairing one color from a ColorBrewer palette with one texture from the Textures.js library, including lines, circles, and paths. Every second, a transition animates the circles to new random radii, using D3’s `transition.attr` and `setInterval`. The code builds nested ordinal scales to map color and texture pairs, generating unique SVG patterns via `textures.lines()`, `textures.circles()`, and `textures.paths()`.

Aannabsmylie
74% match
Loading thumbnail…

orientation

A 2x5 grid of black-bordered squares displays ten distinct texture fills generated by the textures.js library. The patterns include hexagons, crosses, caps, woven lines, waves, squares, circles, a complemented circle set, and diagonally oriented lines. D3.js v5 selects the SVG element and appends each rectangle, assigning the texture’s `url()` as the fill style via `d3.select('svg')` and chained `.attr()` calls. The example demonstrates the variety of available texture API options, including shape, size, and line orientation parameters.

Zzoniyac
73% match
Loading thumbnail…

Texture Test

This example demonstrates a texture scale that combines separate ordinal and linear scales for pattern, color, and size into a single fill function. The visualization renders a 12×12 grid of circles, where each circle’s pattern, stroke color, and fill texture are determined by its row and column position. Using the textures.js library and D3 v3, the code creates a caching mechanism in `createTextureScale` to generate and reuse textures for unique combinations of pattern, color, and size. The animation periodically randomizes circle radii, showcasing how the texture scale adapts dynamically.

CCurran Kelleher
71% match