[NodeCongress2021] How We Created the Giraffe Libraries for Time Series Data – Zoe Steinkamp
Time series visualization poses unique demands, especially when datasets balloon into millions of points, requiring both performance and expressiveness. Zoe Steinkamp recounts the genesis of Giraffe, InfluxData’s open-source React-based library, designed to render such data fluidly within the InfluxDB UI and beyond. Her overview demystifies its architecture, showcasing how Flux query outputs translate into dynamic charts.
Giraffe ingests annotated CSV streams—enriched with metadata like group keys and data types—from InfluxQL or Flux, bypassing raw parsing overheads. This format, marked by hashed headers, facilitates layered rendering, where plots compose via React components. Zoe highlights its decoupling from InfluxDB, allowing integration into diverse apps, from solar monitoring dashboards to mobile analytics.
Core Mechanics: From Data Ingestion to Layered Rendering
Giraffe’s plot primitive accepts a config object housing CSV payloads and layer definitions, dictating visualization types—lines, bars, gauges, or histograms. Zoe dissects a line layer: specifying X/Y axes, color schemes, and themes yields customizable outputs, with algorithms downsampling dense series for smooth interpolation. A hardcoded example—plotting static coordinates—illustrates brevity: mere objects define series, rendering SVG or canvas elements reactively.
For InfluxDB synergy, the JS client fetches queried data via URL, token, and bucket parameters, piping annotated CSVs directly. Zoe notes server-side rendering limitations, favoring client hydration for interactivity, while the Storybook sandbox—launched via Yarn—exposes 30+ prototypes, including nascent maps and candlesticks, for tinkering.
Extending Giraffe: Samples and Ecosystem Integration
Zoe furnishes code snippets for HTML embeds or React apps, emphasizing modularity: swap Flux for custom sources, layer heatmaps atop gauges. This extensibility positions Giraffe as a versatile toolkit, empowering Node.js developers to embed time series prowess without bespoke engines, all while inviting community contributions via GitHub.