Map
Maps connect performance to place — ideal for visualising regional delivery density, store results, or depot coverage.
Example do and don't images
Do's
-
Keep the basemap simple.
Neutral colours let data stand out.
-
Match granularity to accuracy.
Use regional or postal zones that reflect real aggregation levels.
-
Add interactivity for dense data.
Zoom or filter when regions overlap.
Don'ts
-
Don’t map irrelevant data.
If geography isn’t the story, skip the map.
-
Avoid identical markers on crowded areas.
Use transparency or clustering instead.
-
Don’t mix projections.
Stick with one projection for consistency.
Use cases
-
Delivery density by region
Spot geographic pockets of over- or under-performance.
-
Store performance heatmap
Show regional sales trends for field teams.
-
Incident hotspot mapping
Identify where accidents or delays cluster.
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
Maps tie insights to location — perfect when place matters as much as quantity.