Texture Test

100%

✓ Published0🌍 Public

Last edited Jan 28, 2021

Created on Mar 24, 2015

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.

AI-generated description

A test of textures.js that shows one approach for creating a "texture scale" that combines individual scales for pattern, size, and color.

See also this discussion on GitHub: https://github.com/riccardoscalco/textures/issues/7

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

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

74% match

Loading thumbnail…

dot-density

Five square SVG rectangles display a graduated sequence of dot-density textures using the textures.js library for D3 v5. Each rectangle uses a `textures.circles()` pattern with progressively smaller circle sizes, from large to tiny dots, and applies the texture via `style("fill", t.url())`. The example demonstrates how varying pattern scale creates visual differentiation across identical shapes.

Zzoniyac

74% match

Loading thumbnail…

dot-size

Five square panels display a progression of dot-size textures, from fine to coarse, demonstrating how changing the radius and stroke width of a repeating circle pattern alters visual density. Each panel is filled using a distinct texture created with the D3 textures library, applied via `svg.call()` and referenced with `texture.url()`. The example uses D3 v5 to construct SVG rectangles, with circles generated programmatically as tiling patterns.

Zzoniyac

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

73% match

Loading thumbnail…

orientation

This example displays ten square panels arranged in two rows, each filled with a distinct geometric pattern such as hexagons, crosses, woven shapes, waves, and lines. It demonstrates the textures library’s ability to generate SVG patterns for filling shapes. Using d3 selections and the textures API, the code creates ten texture objects and applies them to the rectangles via `style.fill` with their `.url()` references.

Zzoniyac

73% match

Loading thumbnail…

Fork of orientation

This visualization showcases ten different texture patterns—hexagons, crosses, caps, woven, waves, squares, circles, complement circles, lines with varying orientations, and nylon—each rendered inside a distinct square outlined in black. Built with D3.js and the texture.js library, the patterns are generated using textures.paths(), textures.circles(), and textures.lines(), with each texture applied as a fill to an SVG rectangle via t.url(). Custom colors, stroke widths, and backgrounds differentiate the patterns.

Zzach b.

72% match

Loading thumbnail…

fresh block

This example demonstrates how to apply a line texture pattern to SVG shapes using the Texture.js library. It shows a blue-bordered rectangle and circle filled with diagonal line textures, overlaid on a light blue background. The code loads D3.js and Texture.js via CDN, then creates a line texture with `.thicker()` and applies it to both shapes by setting their fill style to the texture’s URL. The rendering is static SVG, with shapes positioned explicitly and styled with white fill before the texture replaces the fill.

CCurran Kelleher

72% match