Data Visualization

Clear, accurate data visualization is essential for compliance professionals making critical decisions. Our charts prioritize clarity, accuracy, and accessibility over visual flair.

Core Principles

1

Accuracy First

Data integrity is non-negotiable. Never distort scales, truncate axes, or use visual tricks that misrepresent data.

2

Clarity Over Decoration

Remove chartjunk. Every element should serve the data. No 3D effects, unnecessary gradients, or decorative elements.

3

Accessible by Default

Design for all users. Color should support meaning, not carry it alone. Provide text alternatives.

4

Context Matters

Include labels, legends, and titles. The chart should be understandable without external explanation.

Chart Types & Usage

Bar Charts

Comparing discrete categories, rankings, or counts

Examples: Alert volumes by type, department comparisons, monthly totals

Best for:
  • Categorical comparisons
  • Rankings
  • Part-to-whole (stacked)

Line Charts

Showing trends over time or continuous data

Examples: Transaction volume trends, risk score changes, compliance metrics over time

Best for:
  • Time series
  • Trends
  • Multiple series comparison

Pie/Donut Charts

Showing composition of a whole (use sparingly)

Examples: Alert status distribution, case outcomes breakdown

Best for:
  • 2-5 categories only
  • Obvious majority/minority
  • Part-to-whole when % matters

Data Tables

Detailed, precise data that needs to be searchable or sortable

Examples: Transaction lists, alert queues, audit logs

Best for:
  • Precise values needed
  • Many dimensions
  • User needs to search/filter

Chart Color Palette

Use these colors consistently across all data visualizations. Order them by importance, with Marine for primary series.

1

Marine

#075156

Primary data series, key metrics

2

Green

#2C8248

Success, positive trends, secondary series

3

Navy

#17232D

Text, labels, tertiary data

4

Citrus

#ABDD65

Highlights, accents (never for text)

5

Warning

#F59E0B

Warning states, medium risk

6

Error

#BA1A1A

Errors, high risk, critical alerts

Recommended Sequence

When displaying multiple data series, use colors in this order:

1
2
3
4
5
6

For more than 3 series, consider using patterns or splitting into multiple charts.

Semantic Colors

Some colors carry inherent meaning. Use them consistently:

Success / Positive

Approved transactions, resolved alerts, compliance met

#2C8248 (Green)

Warning / Medium Risk

Pending review, medium-risk scores, attention needed

#F59E0B (Amber)

Error / High Risk

Critical alerts, SAR candidates, compliance failures

#BA1A1A (Red)

Neutral / Inactive

Closed cases, historical data, disabled states

#6B7280 (Gray)

Chart Anatomy

Alert Volume by Category — Q4 2024
100 75 50 25 0
80
45
65
30
Transactions KYC Sanctions PEP
High Priority Standard
Source: Internal AML System · Updated: 15 Jan 2025
Title: Clear, descriptive, includes time period
Y-axis: Labeled, starts at zero
Data labels: Optional, adds precision
X-axis: Category labels
Legend: Color key when needed
Source: Data provenance and timestamp

Accessibility Requirements

Never rely on color alone

Use patterns, labels, or icons alongside color to convey meaning.

Example: Error bars should have both red color AND an error icon or pattern.

Maintain sufficient contrast

Ensure data elements are distinguishable from each other and backgrounds.

Example: Adjacent bar segments should have >3:1 contrast ratio between them.

Provide text alternatives

Charts must have descriptive text or data tables for screen readers.

Example: Include aria-label or link to tabular data representation.

Allow keyboard navigation

Interactive charts must be operable via keyboard.

Example: Tooltips should be accessible via Tab key, not just hover.

Pattern Usage for Accessibility

When color alone isn't sufficient, add patterns to differentiate data series:

Solid
Diagonal stripes
Dots
Crosshatch

Best Practices

Do

  • Start Y-axis at zero for bar charts
  • Use consistent scales across related charts
  • Include clear titles and labels
  • Provide data source and timestamp
  • Use legends when there are multiple series
  • Test with colorblind simulators
  • Provide tabular alternative for screen readers

Don't

  • Use 3D effects or perspective distortion
  • Truncate axes to exaggerate differences
  • Use pie charts for more than 5 categories
  • Rely on color alone to convey meaning
  • Add decorative elements that don't serve data
  • Use dual Y-axes (very confusing)
  • Display too many data points on one chart

Visual Examples

Correct: Y-axis starts at zero

≈

Incorrect: Truncated axis exaggerates differences

Correct: 3 clear segments

Incorrect: Too many segments

Interactions & Tooltips

Tooltips

  • Show on hover AND focus (keyboard accessible)
  • Display precise values and context
  • Position to not obscure related data
  • Use consistent formatting for numbers
Transaction Alerts
Count: 1,234
Change: +15.2%

Interactive States

  • Hover: Subtle highlight, opacity change
  • Selected: Stronger highlight, other elements dimmed
  • Focus: Visible focus ring for keyboard users
  • Disabled: Reduced opacity, no interactions

Number Formatting

  • Use locale-appropriate separators (1,234 or 1.234)
  • Abbreviate large numbers: 1.5M, 2.3K
  • Show percentages with 1 decimal: 45.2%
  • Currency: $1,234.56 (2 decimals)
  • Always include units where ambiguous

Implementation Notes

Recommended Libraries

  • Chart.js — Lightweight, accessible, good defaults
  • Recharts — React-specific, composable
  • Apache ECharts — Feature-rich, good for complex dashboards
  • D3.js — Low-level, maximum flexibility

CSS Variables

:root {
  --chart-primary: #075156;
  --chart-secondary: #2C8248;
  --chart-tertiary: #17232D;
  --chart-success: #2C8248;
  --chart-warning: #F59E0B;
  --chart-error: #BA1A1A;
  --chart-neutral: #6B7280;
}

Responsive Behavior

  • Charts should resize with container
  • Simplify labels on small screens
  • Consider switching chart type (e.g., horizontal bars on mobile)
  • Maintain touch-friendly interaction areas (min 44px)
Style
Theme