Operational Data Graphics: A Visualization System for Infrastructure Teams
Designing and implementing a complete data visualization design system—from Figma tokens to interactive Vega charts 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
I designed and implemented a complete data visualization system for operational monitoring—targeting data engineers, analytics engineers, and infrastructure teams who need high-signal, low-noise graphics for real-time metrics, system health, and performance data.
The project covers the full stack of design systems work: defining visual foundations and interaction patterns in Figma, building design tokens in W3C format, and delivering production-ready interactive charts with full Vega implementations and a real-time simulation demo.
From design thesis to Figma variables to interactive Vega implementations with light/dark mode theming—all documented and shipped as a portfolio-ready demo.
The Problem
Generic BI Tools Don't Fit Operational Workflows
Most dashboards are built with business intelligence aesthetics—decorative elements, saturated colors, excessive whitespace. These work great for executive presentations. They don't work for engineers monitoring production systems at 2am.
There's no standardized visual grammar for operational graphics. Teams cobble together charts from generic libraries, resulting in inconsistent, high-noise monitoring 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
Position as a Design System, Not Just a Chart Library
Instead of building "another chart library," I positioned this as a visual grammar plus implementation proof. Grounded in Leland Wilkinson's Grammar of Graphics theory, the system defines primitives that compose—not templates that constrain.
I chose full Vega (not Vega-Lite) deliberately. Vega-Lite is great for quick charts. Full Vega gives you precise control over every visual element—exactly what design systems work requires. It also demonstrates technical depth in a way that Vega-Lite simply can't.
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 touching a single chart, I established the visual language. Color system with categorical, status, sequential, and diverging palettes. Typography pairing—Inter for UI labels, JetBrains Mono for metric values. A 4px base spacing unit with a documented scale.
All of this was captured in a tokens.json file following W3C format for import via Tokens Studio in Figma. The goal was that any decision I made in Figma would flow through to the 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 for light mode first and adapting to dark would have produced something that just felt ported. I designed dark-native and treated light mode as the variant.
Figma file — color variables, spacing system, typography styles
Chart Primitives
Designed 6 core chart types in Figma using TalkToFigma MCP for programmatic chart creation—which dramatically accelerated iteration. For each chart type, I documented when to use it, when not to use it, 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)
Caught a coordinate system bug early.
Initial programmatic chart creation placed elements outside frame bounds due to how Figma's API handles absolute vs. relative coordinates. I diagnosed the issue, documented the fix, and rebuilt all charts with proper positioning. The kind of bug that's invisible until you try to implement something real.
Figma designs — 6 chart primitives with usage annotations
Implementation
Implemented 4 of 6 charts in full Vega. Each spec uses declarative data transformations, custom scales and axes, and precise mark encoding. Dark mode styling and hover interactions are defined in the spec itself—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)
The spacing audit.
During implementation I caught that initial chart specs used padding: 5 instead of the documented {top: 10, left: 60, right: 20, bottom: 40}. I systematically audited all 5 files and applied proper labelPadding: 8px and symbolOffset: 8px throughout. Design systems only work when implementation matches documentation exactly.
Interactive Enhancements
Real-Time Simulations
Most visualization portfolios are static. I added Simulate buttons to each chart so you can watch them respond to real operational scenarios—live metric streaming, traffic spikes, performance degradation, cascading service incidents. It's the difference between showing a screenshot of a dashboard and showing someone how a dashboard actually behaves.
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
Light/Dark Mode Theming
All 50+ CSS custom properties update on toggle. Vega chart specs are re-rendered with updated color values. The system auto-detects OS preference on first load, saves the user's explicit choice to localStorage, and listens for OS theme changes in real time—only overriding the saved preference if none exists.
Theme UX flow
- First visit → matches OS theme automatically
- User toggles → saves preference, stays fixed
- OS changes → only updates if no saved preference
Toggle light/dark mode using the button in the nav — this chart re-renders instantly
Outcomes & Deliverables
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
What makes this different
Key Learnings
Design systems require implementation integrity
Documentation is worthless if the code doesn't match it. When I caught the spacing inconsistency mid-project, I didn't patch individual files—I audited the system and fixed the root cause across all of them. Every 8px matters.
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.
Theory + practice = credibility
Grounding the project in Grammar of Graphics proved I understand visualization theory, not just tools. Vega implementation proved I can execute at a systems level. Senior roles require both. Design without implementation is incomplete; implementation without theory is shallow.
Interactive beats static every time
Before simulations: technically correct charts that are easy to scroll past. After simulations: click "Simulate Incident" → watch cascading failure unfold → memorable. It's the difference between showing work and demonstrating understanding.
Reflection
What went well
- Rapid iteration in Figma — TalkToFigma MCP enabled programmatic chart creation that would have taken days by hand to do in a week.
- Documentation-first — Writing the design thesis before touching Figma clarified audience, constraints, and principles, which guided every decision after that.
- Systematic problem-solving — When the spacing inconsistency appeared, I didn't patch—I audited and fixed the root cause.
What I'd do differently
- Earlier alignment checks — Should have referenced spacing documentation while writing initial Vega specs, not discovered the mismatch afterward.
- User testing — Would test the simulations with actual engineers to validate that the operational scenarios are realistic.
- Complete the library — Charts 3 and 5 (Stacked Area and Throughput Bar) are designed but not yet implemented in Vega.
Why this project matters for companies like Fivetran, Datadog, or any infrastructure-focused team
This project proves I can define visual systems, implement them with precision, and understand operational workflows deeply enough to design for them—not just translate a Figma file into code, but make principled decisions about what a visualization should do, why, and for whom.
Try It Yourself
Toggle between light and dark mode. Click the Simulate buttons. Watch the Status Timeline incident unfold in real time.