An SVG pattern element defines a small tile whose shapes repeat horizontally and vertically, creating a fill for graphical elements. In accessible visualizations, patterns add a second visual encoding alongside color. section 10.2.2 section 10.3
Build and apply a pattern progressively:
- Append a defs element to the SVG container, then append a pattern with a unique ID, tile dimensions, and patternUnits set to userSpaceOnUse. section 10.2.2
- Create the tile from SVG shapes such as a background rectangle and a line, circle, or polygon. section 10.2.2
- Reference the pattern with fill="url(#pattern-id)" on the target shape. section 10.2.2
- Choose patterns by category, alongside a color scale, so viewers do not need color alone to distinguish data. section 10.2.2 section 10.3
Patterned scatterplot circles
A conservation-status scatterplot can assign circles, horizontal lines, vertical lines, stars, or crosses through a getPattern(status) function. The resulting fills combine the categorical palette with distinct texture, helping people with color blindness differentiate statuses. section 10.2.2
const defs = d3.select("#scatterplot svg")
.append("defs");
const horizontalLinesPattern = defs
.append("pattern")
.attr("id", "pattern-horizontal-lines")
.attr("width", 4)
.attr("height", 4)
.attr("patternUnits", "userSpaceOnUse");
Inspect the minimal D3 construction for a defs container, a uniquely identified pattern, tile dimensions, and user-space units. section 10.2.2
