Double encoding represents the same category through two visual channels. In an accessible visualization, combining color with patterns or shapes prevents color from carrying information alone and helps people with color blindness differentiate categories. section 10.2.2 section 10.0
Apply double encoding progressively:
- Choose a categorical color palette, then add a distinct shape or pattern for each category. section 10.2.2
- Prefer patterns when another channel already carries information; different circle shapes could conflict with circle size encoding weight. section 10.2.2
- Create SVG patterns inside a defs element, define repeated tiles, and apply each pattern through a unique URL identifier. section 10.2.2 section 10.3
- Use the same pattern mapping in the chart and its legend so categories remain identifiable across the visualization. section 10.2.2
- Check contrast and avoid overcrowding; explain dense patterns or aggregate the visualization when too many elements compete for space. section 10.2.2 section 10.3
Conservation-status scatterplot
A cetacean scatterplot uses circle size for species weight, categorical color for conservation status, and SVG patterns for a second status encoding. Horizontal lines, dots, stars, vertical lines, or crosses distinguish statuses such as NT, LC, and EN; a getPattern function assigns each status its pattern URL. 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");
A compact D3.js listing shows how to append defs and configure a reusable horizontal-lines SVG pattern. section 10.2.2
