Small Multiples
Small multiples display the same visual repeated across categories โ perfect for comparing regions, carriers, or product groups with consistent scales.
Example do and don't images
Do's
-
Keep scales identical.
Consistent axes ensure fair comparison.
-
Limit to key categories.
Too many panels reduce legibility.
-
Provide clear titles per panel.
Short region labels orient readers quickly.
Don'ts
-
Donโt mix chart types.
Uniform visuals keep pattern recognition easy.
-
Avoid redundant legends.
Use shared legends or direct labels.
-
Donโt shrink panels excessively.
If details vanish, reduce categories or enable scrolling.
Use cases
-
Regional sales trends
Compare growth trajectories by territory.
-
Carrier performance by month
See which partners consistently meet SLAs.
-
Warehouse output by shift
Spot productivity differences over time.
Common Mistakes to Avoid
Even experienced analysts make these errors. Here's how to spot and fix them:
Overcomplicating the visual
Why it's bad: Too much information overwhelms the viewer and obscures the message.
Fix: Focus on one clear message per chart. Use multiple simple charts instead of one complex one.
Poor color choices
Why it's bad: Can make data hard to read or inaccessible to colorblind viewers.
Fix: Use colorblind-safe palettes and ensure sufficient contrast.
Missing context
Why it's bad: Data without context (targets, benchmarks, time period) is meaningless.
Fix: Always include titles, labels, units, and reference points.
Accessibility Guidelines
Make your visualizations accessible to everyone, including users with visual impairments, color blindness, or who rely on screen readers.
Color Considerations
Use colorblind-safe palettes:
- Avoid: Red-green combinations (8% of men are red-green colorblind)
- Use: Blue-orange, purple-yellow, or add patterns/textures
- Test: Use tools like Color Oracle or Coblis to simulate color blindness
Recommended palettes:
Contrast & Legibility
Meet WCAG 2.1 standards:
- Text contrast: Minimum 4.5:1 for normal text, 3:1 for large text
- Chart elements: 3:1 contrast between adjacent colors
- Labels: Use dark text on light backgrounds (or vice versa)
Font guidelines:
- Minimum 12pt for body text, 14pt+ preferred
- Avoid decorative or overly thin fonts
- Use bold for emphasis, not color alone
Screen Reader Support
Essential elements:
- Alt text: Describe the chart's key insight, not just "bar chart"
- Data tables: Provide raw data as an accessible table alternative
- Aria labels: Use aria-label for interactive elements
Example alt text:
"Bar chart showing sales increased 30% from Q1 to Q2, with Q2 reaching $2.5M. Technology had the highest growth at 45%."
Additional Techniques
Don't rely on color alone:
- Use patterns, textures, or shapes to differentiate categories
- Add direct labels to data points when possible
- Use icons or symbols alongside colors
Interactive features:
- Ensure keyboard navigation works (tab, arrow keys)
- Provide text summaries of key findings
- Allow users to toggle between visual and tabular views
๐ Helpful Resources
- Color Oracle: Free color blindness simulator for Windows, Mac, Linux
- WebAIM Contrast Checker: Test color contrast ratios
- ColorBrewer: Colorblind-safe color schemes for maps and charts
- WCAG 2.1 Guidelines: Full accessibility standards for web content
Story tip
Small multiples show pattern through repetition โ they replace colour with structure.