---

name: b2b-visualisation description: Design data visualisations for B2B dashboards displaying buying signals, composite scores, trends, and alerts. Apply when building charts, sparklines, score breakdowns, heatmaps, or any interface requiring rapid comprehension of multivariate data. Covers the 2-second rule, pre-attentive processing, visualisation selection by data type, trend surge detection, score explainability, and mobile-responsive patterns.

B2B Market Intelligence Visualisation

Purpose

Design visualisations for B2B buying signals with time-to-insight as the primary imperative. In high-velocity environments, the interface must facilitate comprehension of complex multivariate signals in under two seconds.

Related Skills

• adhd-interface-design — For cognitive load patterns
• action-oriented-ux — For lead card and queue designs
• uk-police-design-system — For colour tokens and typography
• notification-system — For alert severity and badging

---

Cognitive Foundations

Pre-Attentive Processing

Visual properties detected in under 200 milliseconds, before conscious attention engages:

Accuracy Hierarchy

Visual encodings ranked by reliability for accurate value judgement:

1. Position on common scale — Most accurate (bar charts, dot plots)
2. Length — Very accurate (bars, bullet graphs)
3. Angle/slope — Moderate (line charts)
4. Area — Poor (bubble charts, pie charts)
5. Colour saturation — Least accurate for precise values

Implication: For comparison tasks, prefer bar charts and dot plots over pie charts and gauges.

Cognitive Load Management

Every pixel must serve a data-communicating purpose. Eliminate:

• Unnecessary gridlines
• 3D effects
• Heavy borders
• Decorative backgrounds
• Redundant legends

---

The 2-Second Rule

A user must answer "Is this account interested?" and "Why?" within two seconds.

2-Second Test Checklist

1. What is it? — Clear label
2. Is it good/bad/urgent? — Direction + threshold indicator
3. What changed? — Delta value
4. What should I do? — CTA or driver hint visible

If any answer requires a legend, tooltip, or reading axis ticks, move that information to a detail view.

---

Visualisation Selection by Data Type

Sparklines vs Full Charts

Use Sparklines When:

• Task is "up/down/volatile?" not "what was the value on April 12?"
• Displaying many rows (account list, territory list)
• Paired with number + delta
• Time window is consistent

Use Full Charts When:

• User needs to answer "why did this spike happen?"
• Axes, annotations, or event markers required
• Interaction expected (zoom, filter)

Practical Pattern:

• List view (scan): Number + delta + sparkline + 1 badge
• Detail view (explain): Full chart with baseline band, annotations

Gauges vs Progress Bars vs Numbers

Research shows bullet graphs support more efficient reading than gauge graphs.

---

Trend Visualisation: Showing Surge at a Glance

Making "Surge" Binary First

For sales scanning, "surge" should read as a state (Yes/No + severity), then users inspect magnitude.

The Baseline Band Pattern

To show "surging relative to normal," add a typical-range band behind the line:

• Upward breakout → Green highlight, "SURGE" badge
• Downward breakout → Red highlight, "DECLINE" badge

Band Calculation:

• Median ± IQR (interquartile range)
• Mean ± 2σ (standard deviations)
• Rolling average ± percentage threshold

Period-over-Period Comparisons

Ghost Bar (Fastest in Lists):

• Solid bar = current period
• Light/outlined bar = previous period
• Delta text adjacent

Indexed Line (100 Baseline):

• Convert each series to index = 100 at start
• Divergence shows acceleration

---

Score Visualisation: Explainability

The Opacity Problem

Composite scores are often "black boxes." Teams disregard scores they don't understand.

Principle: Separate the score for triage (one glance) from the reasons for action (one click/expand).

Progressive Disclosure Architecture

Layer 1: Score (Always Visible)

• Large number + categorical label (Cold/Warm/Hot)
• Delta from previous period
• Optional percentile

Layer 2: Top Drivers (Compact)

• Up to 3 driver chips
• Each shows direction + contribution magnitude

Layer 3: Full Breakdown (Expanded)

• Sorted contribution bar list
• Waterfall chart showing how components sum
• Top positive and negative factors

---

Alert Design and Anomaly Highlighting

The Highlight Budget

Only ONE strong highlight per row/card:

• Badge OR border OR background tint OR icon — not all four

Reserve pre-attentive cues for top-priority signals only.

Severity Coding

Motion: Use sparingly. Reserve for states requiring immediate action.

Avoiding Alert Fatigue

Gate alerts by:

• Persistence: 2-3 consecutive periods above threshold
• Impact: Score contribution ≥ X points

Throttle display:

• Show "Top 5 today" by default
• Provide "view all" expansion

---

Sparklines and Small Multiples

Sparkline Specifications

• Aspect Ratio: Wide and short (4:1)
• Start point: Gray dot (anchor)
• End point: Coloured dot (current state)
• High/Low points: Optional markers
• Smoothing: Slight curve, avoid over-smoothing

Small Multiples

Use when comparing many entities with the same question.

Consistency Requirements:

• Same time window everywhere
• Shared Y-scale when magnitude matters
• Normalised Y-scale when shape matters
• 1 series ideal, 2 maximum

Coordinated Highlighting: Hover one account → highlight same time region across ALL sparklines.

---

Mobile-Responsive Data Visualisation

Adaptation Playbook

Touch-First Interactions

The Scrubber Pattern: Dragging anywhere on chart snaps to nearest data point; readout updates above.

---

Technical Implementation

Rendering Performance

Progressive Loading

1. Render chart skeleton immediately
2. Load macro trend line first
3. Progressively enhance with high-resolution data

---

Summary Principles

1. Velocity over Static State — Show rate of change, not just current value
2. Context over Raw Counts — Always provide baseline or comparison
3. Binary First, Quantitative Second — State (Hot/Cold) before magnitude
4. Progressive Disclosure — Triage → Detail → Full analysis
5. Pre-attentive for Priority — Reserve colour/size/motion for what matters
6. Position over Angle — Bars and dots over pies and gauges
7. Explain the Score — Show drivers, not just the number
8. Respect Cognitive Load — Every pixel earns its place
9. Mobile as Primary — Design for glanceability
10. 2 Seconds or Less — If it requires legend/tooltip, simplify