From Chart Components to Team Acceleration

Layla Laurio and Frank Elavsky from Visa's data experience team shared their progression from a basic chart library to a comprehensive design language. Initially, the goal was simple: speed up product teams building data visualizations across Visa's diverse products, from merchant analytics and fraud detection to government economic tools. They targeted 'better' viz defined as useful (drives decisions), usable (easy to read/interpret), and accessible.

The first release in 2018 delivered 12 core chart types (lines, bars, etc.) plus exotics like alluvial and circle packing, bundled with 90+ recipes—pre-configured variants like highlighted lines or interactions. As Visa's first open-source library, it included utility functions usable standalone. Key decision: web components for framework agnosticism (React, Angular, R, Python, Svelte, Vue), supporting legacy and future stacks without lock-in. Tradeoff: Web components were nascent then, risking adoption hurdles, but enabled broad reuse.

Engineering tackled hard basics out-of-the-box: intelligent axis labeling (truncation, spacing, date formatting), non-overlapping data labels, flexible annotations API (text/shapes anywhere, often abused for decoration), hover/selection states with internal strokes, and smooth animations for data updates (entering/exiting elements, stack growth). For live dashboards, transitions communicate changes without full re-renders, aiding exploratory analysis.

"Making visualizations is hard. Even the basics are hard. So, making a really good axis is no easy feat." — Frank Elavsky, highlighting why they automated low-level pains like drawing lines or spacing labels, freeing users for higher-level work.

Accessibility as a Non-Negotiable Pillar

Accessibility was the first principle, led by Frank. They rejected common pitfalls: screen readers announcing charts as mere "Image" or endless "Graphic symbol" loops (painful with thousands of points). Instead, charts offer hierarchical navigation—group levels (e.g., line groups), drill-down (product/date/value, with position like "point 6 of 12"), lateral comparison (across lines on same date), skippable sections, data tables for analysts, and semantic "alternative documents" (not just alt text) auto-generated from data, overrideable via props.

Enforced WCAG AA: Auto-boosts low-contrast inputs to 4.5:1 ratios; redundant encodings prevent color-alone reliance (line patterns like long-short-long, fill textures, scatter shapes like stars). Their public design system (released months ago, open-source) showcases 20 live accessible charts.

"We did not want people... to have to slog through a thousand points. We actually structured and grouped all of our data in ways that are meaningful." — Frank Elavsky, on navigation design, a turning point that made Visa an early leader in accessible viz systems.

"Visualizations can have thousands of data points. If you can't skip it, very painful." — Frank Elavsky, contrasting bad ARIA graphics APIs (navigable but unusable) with their grouped, skip-friendly approach.

Team proximity to product squads provided real-time feedback, refining via observed pains in design/dev workflows.

Real-World Data Demands Design Judgment

Components alone faltered with messy data. Same line chart component yielded dense, unreadable spaghetti or sparse clarity—context drove quality. Pie charts with dozens of categories exposed limits: no single prop fixes it. Solutions required viz expertise: aggregate tails into "Others" (top 3 + rest), hierarchical grouping (merchants → industries), or extreme simplification (one category vs. rest).

This revealed gaps: Components enable accessibility/effectiveness but can't enforce optimal designs for varied data/user contexts. Line charts suit trends but fail dense overlaps without tweaks; pies tempt but rarely scale.

"Is it possible to make charts, and chart components, accessible and effective out of the box? My answer would be probably not." — Layla Laurio, on why specialized knowledge bridges component capabilities to real products, prompting evolution beyond library.

Frank favored versatile lines; Layla leaned boring bars. Exotic types like GitHub commit calendars, dumbbells (dual trends), or alluvials shone in niches but reinforced: No universal chart—user/data context rules.

Scaling to a Communication Language

Act 1 built the library for speed. Act 2 broadened to a system accelerating teams with opinionated, tool-agnostic tools. Act 3: A language for insights, as usage revealed needs beyond components—unified patterns for consistent, insightful communication across Visa.

Mixed system/product work yielded advantages: Direct observation of wins/pains. Open-sourcing invited external validation. Tradeoffs named: Opinionated defaults guide but allow overrides; accessibility-first adds engineering overhead but prevents regressions.

Their system now lives in Visa's public design system, fully navigable/open-source. Evolution continues, guided by core principles.

"We weren't just gonna make 12 components. But we were also gonna push towards open source... web components... allowed us to support any... projects." — Frank Elavsky, on early bets enabling wide adoption despite web components' novelty in 2018.

Key Takeaways

  • Prioritize accessibility-first: Enforce contrast, redundant encodings, semantic navigation, and data tables out-of-the-box to avoid common screen reader failures.
  • Use web components for framework freedom: Supports React/Angular/etc. without rewriting, ideal for diverse enterprise stacks.
  • Bundle recipes (90+ variants) with cores (12 charts): Lowers barrier for non-experts while allowing customization.
  • Automate viz basics (axes, labels, animations): Frees teams for data/context decisions, not low-level drawing.
  • Design for real data mess: Aggregate/group/simplify beyond props—components enable, judgment delivers.
  • Evolve library → system → language: Observe product usage to expand from speed to insights.
  • Open-source early: Visa's first gained utilities/feedback; makes enforcement (e.g., contrast) a gift to users.
  • Test extremes: Dense lines, many pie slices, thousands of points—expose component limits.
  • Mix system/product roles: Real-time feedback accelerates iteration over siloed design.
  • No universal charts: Lines/bars for trends, but context (user/data) dictates; avoid pie overuse.