---

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:

Attribute	Detection Speed	Best Use Case
Colour intensity/hue	~50ms	Status, urgency, category
Position on common scale	~100ms	Comparison, ranking
Length	~100ms	Magnitude, progress
Size	~150ms	Importance, volume
Orientation/slope	~150ms	Trend direction
Motion/flicker	Immediate	Critical alerts (use sparingly)

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

User Task	Visualisation Type	Rationale
Scan/triage many entities	Sparklines, micro-charts	Word-sized, pattern recognition
Diagnose/explain one entity	Full charts with axes	Precision, interaction
Compare values	Bar charts, dot plots	Position on common scale
Show progress vs target	Bullet graphs	Length encoding, compact
Indicate status category	Badges, colour coding	Pre-attentive, categorical
Show exact value	Number + delta	Precision with context

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

Element	Best For	Efficiency
Numbers	Exact values needed quickly	High precision
Progress/Bullet bars	Value vs target/thresholds	High comparison
Gauges	Capacity/utilisation metaphor	Low (use rarely)

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

Severity	Colour	Icon	Use Case
Critical	Red/Orange	⚠️	Competitor contract signed, Champion left
Warning	Yellow/Amber	⚡	Usage dropped 10%, Stalled in stage
Info	Blue/Gray	ℹ️	New CFO hired, Press mention

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

Desktop	Mobile
Horizontal bar chart	Vertical list of bars
Multi-series line chart	Single series + toggle
Data table	Card stack
Dashboard grid	Vertical scroll of cards
Detailed chart	Sparkline + tap to expand

Touch-First Interactions

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

---

Technical Implementation

Rendering Performance

Technology	Use Case
SVG	Interactive elements, <1000 elements
Canvas	High-density plots, >1000 elements

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