orientation

100%

✓ Published0🌍 Public

Last edited May 13, 2020

Created on May 7, 2020

This example demonstrates how to dynamically change a circle’s fill using a texture pattern. The circle, drawn with D3, initially has no fill, and clicking buttons applies or removes a texture generated by the `textures` library’s `paths()` API. The texture is set via `.url()` and passed to a `changeColor` function, which updates the circle’s `style("fill")`. Rendering is SVG-based, with the D3 v5 selection and attribute methods controlling the visualization.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

orientation

This example shows a large, dark square filled with two distinct path-based patterns created using the textures library. Each pattern is generated by a different custom path function and applied to the square as a fill. The code uses `textures.paths()` to define the patterns and `svg.call()` to register them, then assigns the texture URLs to the rectangle via `.style("fill", t1.url())`. The rendering is done with D3 v5 and SVG, with the square drawn as a single `rect` element.

Zzoniyac

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

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

77% match

Loading thumbnail…

button

Four buttons cycle a rectangle’s fill through four SVG textures generated by the textures library: circles, lines, crosses, and a custom banana-shaped path. The example demonstrates how to apply texture definitions to an SVG node via `svg.call(t1)`, then update the rectangle’s fill on button click with `changeColor(t.url())`. A slider, wired through `d3.select("#mySlider").on("change", ...)`, adjusts the line texture’s size, though the slider element itself is not defined in the visible markup. All rendering uses D3 v4 and SVG.

Zzoniyac

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

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

70% 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.

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

70% match