Texture Test

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

91% match

Untitled

This example shows a 10-by-10 heatmap of categorical data, where each cell’s fill pattern encodes a numeric value instead of color. Four texture patterns with different circle sizes are mapped to value ranges via a `d3.scaleOrdinal`. The chart is built with D3 v4, using `d3.scaleBand` for axes and SVG `<rect>` elements for cells. Data is loaded from a remote CSV file, and textures are generated with the textures.js library.

75% match

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.

75% match

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

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.

textured pie chart

This example shows a pie chart whose five slices are filled with distinct geometric textures instead of solid colors. Each slice uses a different pattern generated with the `textures` library, including hexagons, crosses, caps, woven, and waves. The chart is built using `d3.pie` and `d3.arc` to compute the slice paths, while `d3.scaleOrdinal` maps each data category to a texture URL. Rendered as an SVG, the chart includes a black stroke around each slice to visually separate the textured areas.

textured pie chart

This example shows an area chart with three stacked series, where each series is filled with a distinct geometric texture pattern instead of color. The chart plots the number of individuals named Helen, Amanda, and Ashley over time from a CSV dataset. The code uses D3 v4 with `d3.stack`, `d3.area`, and `d3.scaleOrdinal` to build the chart, while the `textures` library generates SVG patterns for circles, lines, and crosses via `textures.circles()`, `textures.lines()`, and `textures.paths()`. The patterns are applied as fill URLs through the ordinal scale, with black strokes separating each area.

textured pie chart

This example displays a textured pie chart with five categorical segments, each filled with a distinct pattern and color derived from dummy data. It uses the D3.js `d3.pie` and `d3.arc` APIs to compute angles and render SVG paths, while the textures library (via `textures.paths`) generates hexagonal, cross, cap, woven, and wave patterns. The chart is styled with a black stroke and a categorical color scale.