Operational Data Graphics: A Visualization System for Infrastructure Teams
A visualization design system for operational monitoring—from visual foundations and design tokens to production-ready Vega implementations with real-time simulations.
01 — High-Density Time-Series Line
02 — Multi-Series Comparison
03 — Stacked Area Trend
04 — Histogram / Distribution
05 — Throughput Bar Comparison
06 — Status Timeline (Health Bands)
Overview
Operational monitoring teams don't have a shared visual language. Every team assembles dashboards from generic libraries—inconsistent signals, inconsistent color semantics, no common foundation. The question this project addresses isn't how to make better-looking charts, but how to establish the grammar that makes any chart legible at 2am.
I built a complete visualization design system: defined primitives, composition rules, and design tokens that flow from Figma to Vega to production code. Not better-looking components—a shared grammar teams can build from consistently.
The Problem
Most dashboards are built with business intelligence aesthetics—decorative elements, saturated colors, excessive whitespace. Fine for executive presentations. Wrong for engineers monitoring production systems at 2am.
There's no standardized visual grammar for operational graphics. Teams cobble charts together from generic libraries, producing inconsistent, high-noise interfaces where the signal gets buried.
What engineers actually need
- →High information density—scan patterns quickly
- →Minimal visual noise—focus on anomalies
- →Semantic color—status and meaning, not decoration
- →Dark mode by default—terminal-first workflows
- →Precise, functional design over visual flair
Approach
Rather than another chart library, this is a visual grammar plus implementation proof. Grounded in Wilkinson's Grammar of Graphics, the system defines primitives that compose—not templates that constrain.
I chose full Vega over Vega-Lite. Vega-Lite is faster for prototyping; full Vega gives precise control over every visual element—which is what systems-level work requires.
Systems thinking
Define primitives that compose, not templates that constrain
Design + code
Figma designs and working Vega implementations, not one or the other
Theory-grounded
Grammar of Graphics (Wilkinson) as the foundation
Audience-specific
Designed for operational users, not generic BI consumers
Design Process
Foundations
Before any chart work, I established the visual language: color palettes (categorical, status, sequential, diverging), a typography pairing (Inter for labels, JetBrains Mono for metrics), and a 4px base spacing unit.
Everything captured in tokens.json (W3C format) for import via Tokens Studio—so design decisions propagate to implementation automatically.
Visual foundations established
- • Color palettes: categorical, status, sequential, diverging
- • Typography: Inter (UI) + JetBrains Mono (metrics)
- • Spacing: 4px base unit, documented scale
- • Axis standards: grid opacity, tick spacing, label hierarchy
- • Design tokens in W3C format (
tokens.json)
Key decision: dark mode first.
Operational teams work in terminals and dark UIs. Designing light-first and adapting to dark would feel ported. I designed dark-native and treated light as the variant.
Figma file — color variables, spacing system, typography styles
Chart Primitives
I designed 6 chart types in Figma using TalkToFigma MCP for programmatic creation. Each includes usage guidelines, data structure requirements, interaction patterns, and accessibility considerations.
6 chart primitives
- High-Density Time-Series Line
- Multi-Series Comparison Line
- Stacked Area Trend
- Histogram / Distribution
- Throughput Bar Comparison
- Status Timeline (Health Bands)
Identified and resolved a coordinate system issue during programmatic generation.
Initial programmatic creation placed elements outside frame bounds—Figma's API handles absolute vs. relative coordinates differently than expected. I diagnosed the root cause, documented the fix, and rebuilt all charts with correct positioning.
Figma designs — 6 chart primitives with usage annotations
Implementation
I delivered four of 6 charts in full Vega. Each spec uses declarative data transformations, custom scales and axes, and precise mark encoding—dark mode and hover interactions defined in the spec, not applied via CSS after the fact.
Charts implemented
- • Chart 1: Time-Series Line (13 data points, smooth interpolation)
- • Chart 2: Multi-Series Comparison (faceted marks, 3 series)
- • Chart 4: Histogram (5 bins, bell curve distribution)
- • Chart 6: Status Timeline (health bands, conditional rendering)
Systematic quality assurance: the spacing audit.
Initial chart specs used padding: 5 instead of the documented {top: 10, left: 60, right: 20, bottom: 40}. I ran a systematic audit and standardized labelPadding: 8px and symbolOffset: 8px across all files. Documentation and code must align.
Interactive Enhancements
Real-Time Simulations
Most portfolios show static mockups. These simulations demonstrate how charts behave under real operational conditions: live metric streaming, traffic spikes, performance degradation, cascading failures. Static displays tell; simulations prove it.
4 simulation scenarios
- Chart 1: Live metric stream — new data points every 1.5s, sliding window, CPU threshold alert at >90%
- Chart 2: Traffic spike — all environments increase, Production fastest, shows scale differences under load
- Chart 4: Performance degradation — distribution shifts right toward higher latency
- Chart 6: Cascading incident — Database fails → Auth degrades → full recovery over 10 seconds
Chart 01 — Live metric stream with CPU alert threshold
Chart 02 — Traffic spike across environments
Chart 06 — Click 'Simulate Incident' to watch the cascading failure unfold in real time
Chart 04 — Performance degradation as latency distribution shifts
Chart 07 — Error rate spike as 4xx/5xx responses increase
Light/Dark Mode Theming
All 50+ CSS custom properties update on toggle; Vega specs re-render with updated colors. The system auto-detects OS preference on first load, saves explicit choices to localStorage, and listens for OS changes—only applying them when no saved preference exists.
Theme UX flow
- First visit → matches OS theme automatically
- User toggles → saves preference, stays fixed
- OS changes → only updates if no saved preference
Chart 01 — Time-series line
Chart 02 — Multi-series comparison
Outcomes & Deliverables
The goal was a system complete enough to actually use—not a proof of concept, but a working foundation a team could extend.
Documentation
- • Design thesis and project plan
- • Grammar of graphics breakdown
- • Color system and spacing standards
- • Axis specifications
- • Interaction patterns
- • Chart usage guidelines
- • Theming system docs
- • Figma setup guide
Design Assets
- • Figma file with 6 chart primitives
- • Design tokens (W3C format)
- • Light/dark mode variables
- • Typography and color styles
- • Spacing documentation board
Implementation
- • 4 Vega chart specs (~500 lines each)
- • Interactive demo with simulations
- • Unified demo page with theming
- • Sticky nav, smooth scroll, active states
- • Real-time OS theme detection
Key Learnings
Design systems require implementation integrity
A design system is only as strong as the contract between its documentation and its code. When those diverge—even by a few pixels of padding—the system's credibility unravels. Precision in implementation isn't pedantry; it's the proof of concept.
Audience specificity drives design decisions
Grid lines over bars (not behind) in histograms. 40% opacity so grids don't overpower data. Dark mode as the primary experience. These aren't generic "best practices"—they're decisions made for a specific user in a specific context. Generic guidance fails operational users.
Writing specs is a design act
Once I was authoring Vega, I was thinking in the same terms as the design: marks, transforms, scales. The vocabulary maps directly. The boundary between design tool and implementation tool blurred in a way I didn't expect—and that changes how you think about handoff. When design and code share a conceptual language, most of the translation cost disappears.
Interactive demonstrations create deeper engagement
Static charts, even correct ones, get scrolled past. Simulations of real operational scenarios—cascading failures, traffic spikes—create experiences that showcase both design thinking and technical depth. The difference is displaying work versus demonstrating capability.
Explore the Source
The full system—Vega specs, design tokens, simulation logic—is on GitHub.