Skip to main content
100%

Texture Test

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

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()`.

AI-generated description

Built with blockbuilder.org

With much help from Curran Kelleher's Block

mit Licensed

Similar vizzes

Loading thumbnail…

Texture Test

This example demonstrates how to combine color and texture scales independently for categorical data, using a 12×12 grid of circles where each circle’s fill encodes a (color, texture) pair. The code pairs three color values with three texture generators from textures.js, then builds a nested ordinal scale to create unique SVG defs for every combination, since textures cannot change color per mark. Circles transition their radius randomly over one-second intervals. The visualization uses d3.scaleOrdinal, textures.lines, textures.circles, textures.paths, and d3.transition to animate the marks.

CCurran Kelleher
90% 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
85% 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
75% match
Loading thumbnail…

textured pie chart

This textured pie chart displays five categorical values using distinct geometric fill patterns. Built with D3.js v4 and the textures.js library, it applies five different path-based patterns—hexagons, crosses, caps, woven, and waves—to separate slices. Each slice uses an ordinal color scale with a black stroke, and the pie layout is generated via the `d3.pie` and `d3.arc` APIs. The SVG rendering shows how texture can supplement color for improved readability and accessibility.

Sswapnil
75% match
Loading thumbnail…

Circles Test

A grid of 1,000 semi-transparent circles animates and repositions itself every second. The circles vary in radius and color, and clicking one turns it black. Built with D3.js and the D3Kit Skeleton library, the visualization uses a linear scale for positioning and a category20 scale for colors. Data is generated randomly, with circle transitions handled by D3's `.transition()` method.

BBrideau
75% match
Loading thumbnail…

textured pie chart

This textured pie chart displays categorical data using SVG paths filled with five distinct pattern-based textures instead of solid colors. The visualization relies on the D3.js v4 library for chart construction and the textures package to generate repeating geometric motifs, including circles, lines, hexagons, and crosses. D3's pie function computes the arc segments from the input data, while `d3.arc` defines the path geometry. Each slice’s fill references a texture URL mapped through `d3.scaleOrdinal`, and the chart is centered within a 450×450 SVG canvas with a black stroke outlining every segment.

Zzoniyac
74% match
Loading thumbnail…

dot-density

Five square panels each display a distinct dot-density texture, ranging from a sparse chevron pattern to progressively denser grids of circles. The visualization demonstrates how varying dot sizes and spacing create different visual densities and surface textures. It uses the textures library to generate SVG pattern fills, with each rectangle importing a different texture via the `.url()` method. The code calls `textures.paths()` for the chevron design and `textures.circles()` at four different sizes to populate the remaining panels.

Zzoniyac
74% match
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
74% match