How We Created the Giraffe Libraries for Time Series Data

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

In this talk, Zoe Steinkamp will talk about Giraffe, an open source visualization library that powers data visualizations in the InfluxDB 2.0 UI. Giraffe can be used to display your data within your own app and is Fluxlang-supported! It uses algorithms to handle visualizing high volumes of time series data that InfluxDB can ingest and query.

This talk has been presented at Node Congress 2021, check out the latest edition of this JavaScript Conference.

FAQ

Developers can integrate GIRAFFE into any React or JavaScript-based application to reuse InfluxDB visualizations externally, such as on websites, mobile apps, or other custom applications. Sample code and integration methods are available on the GIRAFFE GitHub repository.

GIRAFFE supports a variety of graph types including band, gauge, simple graph, line graph, heat map, histogram, scatter plot, and tables. Future updates will include additional types like candlestick and map graphs.

Data is input into GIRAFFE through annotated CSV files generated by InfluxQL or Flux queries. These CSV files must contain annotated headers to guide the data visualization process in GIRAFFE.

To run GIRAFFE locally, you need to set up a React application environment where you can import GIRAFFE as a library. You will also need data in the form of annotated CSV files to create visualizations. Examples and documentation are provided in the GIRAFFE GitHub repository to assist with setup.

Examples and comprehensive documentation for using GIRAFFE are available in its GitHub repository and within the library's sandbox environment based on storybook, which provides numerous graph type examples and code snippets.

No, GIRAFFE does not currently support server-side rendering. It is designed to be used client-side within React applications.

GIRAFFE is an open-source charting and mapping software developed by Influx Data. It's a JavaScript library built on the React framework, designed to visualize time series data by using annotated CSV inputs to generate various graph types like line graphs, heat maps, and histograms.

Zoe Steinkamp
Zoe Steinkamp
7 min
24 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
I will be presenting Influx Data's open source time series graphing library GIRAFFE, which powers the visualizations of the InfluxDB dashboard and the Data Explorer. GIRAFFE is a JavaScript library based on React for charting and mapping, supporting various graph types and data sources. It offers a sandbox with examples of different graphs and provides links to GitHub, quick start guides, demos, and code samples.

1. Introduction to GIRAFFE

Short description:

I will be presenting Influx Data's open source time series graphing library GIRAFFE. GIRAFFE powers the visualizations of the InfluxDB dashboard and the Data Explorer. It can be used in external applications and is particularly useful for displaying solar power data.

Hello, my name is Zoe Seinkamp and I've been a software engineer for over five years and I've been with Influx Data, my company, for about one and a half years. I will be presenting Influx Data's open source time series graphing library GIRAFFE. We use this library in our application to display the time series data our user's input, but recently we have been working on improving GIRAFFE so it can be used more easily outside of our Influx project. I will be briefly explaining how it's used and showing some examples of the graphs it supports, as well as the code you would need to get it running locally.

But GIRAFFE also has a large amount of documentation and a few sample apps you can reference. I've also included links to all of those as well in my slide deck. So let's go ahead and begin.

Why GIRAFFE? It powers the visualizations of the InfluxDB dashboard and the Data Explorer in all of the InfluxDB versions. We have an InfluxDB 1 and a InfluxDB 2. Developers can reuse InfluxDB visualizations in external applications such as websites, phone apps, or other custom apps. So it's not uncommon that we work with solar panels as like a client like, we have a few solar panel companies. They would put their data in InfluxDB and then they would pull it back out to display it to their customers. So that's one example of how this might be used is, you send your solar power data to Tesla. They get it. They put in us and then they send it back to you to show like, look, your solar panel is doing great or not so great.

2. Exploring GIRAFFE: A Versatile JS Charting Library

Short description:

GIRAFFE is an open source JavaScript library based on React for charting and mapping. It takes annotated CSV as input and supports various graph types. Data can be obtained using FluxQuery or the InfluxDB JavaScript client. Visualization involves a plot, config, and layers. The library can be called from any React or JavaScript application.

What is GIRAFFE? It's a charting mapping software. It is a JavaScript library based on the React framework. It's completely open source available in our GitHub repository. So you can see it, you can touch it. You can play with it. You can change it. We got it all.

It takes an annotated CSV as an input. The output type of the InfluxQL slash flux queries is streamable. It contains annotated headers denoted with the hashtag group, hashtag dataset and hashtag default. And I am going to show an example of this in the next slide. So I'm not going to go too in-depth into this, but basically GROUP contains true or false entries, data set describes data type beach entry and the default is the actual table. Like I said, I'm just going to show an example because it's a little hard to explain annotated CSV data. It's not really necessary. We also have an example here using this in our Dirac docs.

And then here are a few of the graphs that Dirac actually supports. We have the band, the gauge, the simple graph, line graph, all that good stuff. We actually have a few different variations of line graphs. Graph with a single stat, a heat map, a histogram, a scatter plot, a single stat, no graph just the single stat, and a table, which might remind you of what you see when you normally go to a database company, a table. We also have a few other graphs coming soon, which is going to be candlestick and map, but I'm not going to display them because they're obviously not out in production yet.

Some draft basics for getting the data is what type of data is used as an input. We can use a FluxQuery, which is called through a direct API, or the InfluxDB client, which is our JavaScript client, which makes it really easy for people using JavaScript to bring that data in. The basics of visualization are that it has a plot, which is a React element defined in the draft library, a config, which is a property of that plot, which contains CSV data. And then finally layers, which is a property of config, which basically is how you decide which graph type you want to display. I'm again going to show an example of this.

Calling giraffe from external applications. You can use, technically any React or JavaScript application can call to the draft library. And we provide sample codes on how to do this and several type of ways on the GitHub Giraffe repo. You can also just do like a simple HTML page. Again, I'm going to show this example actually, because I think it's really great to get a rough idea of how it works, but we do not currently support server side rendering.

3. Working with Giraffe Plots

Short description:

Working with the giraffe plots each pot requires the config property. You have your X and Y plot your colors, your theme, your type. Getting data into giraffe using our InfluxDB client, you just need your URL, token, org ID, and bucket. Giraffe has a sandbox with 30 to 40 examples of different types of graphs.

A really quick, you know, working with the giraffe plots each pot requires the config property. So as you can see, we get our data from the flux CSV data is, you know, the flux table line layers is the line layer. And then, you know, we have two examples of this config, but basically you have the layers and you have the actual CSV data. Pretty straightforward.

Then the actual line layer property is how you define, you know, in your graph. You're going to have a ton of options. You have your X and Y plot your colors, your theme, your your type. Like I said, we have actually multiple line types. Like we we have a lot of different graph types that I just didn't show an example of because we have so many. And like I said, here's the example that I was talking about. This one's very simple. You were literally hard coding the data right here. You know, this is your X data. This is your Y data. It's very simple. It's very brute force, but I think it really gets across how simple giraffe is to use. You know, this doesn't take very much to get it up and going and you don't have to use it with InfluxDB. We might be a time series provider, but you know, giraffe is open source. You can use it however you would see fit.

Getting data into giraffe using our InfluxDB client, so I didn't put in the API one because you know, this is a JavaScript talk. So I decided to do the JavaScript client. You basically just need your URL, your token, your org ID, and your bucket, which is all things that you would find in the InfluxDB client. From there, you just connected up, you send up your query which basically says, Hey, I want the data from, you know, the span of time, the span of dates, et cetera, et cetera. I want anything above 500, anything below 500, some queries get very intense. I didn't put an example here because it can get very long, but basically you're saying I want this amount of data, please give it to me in an annotated CSV format so I can display it in my giraffe app.

Now, the big thing I also wanted to mention is the fact that giraffe does have a sandbox. So our sandbox is based on storybook. So, you know, you come in here, you get the storybook up and running, which is pretty easy. You just do like a yarn start super simple command. And from here you can actually see, I think we have about 30 to 40 examples of different types of graphs in here.

4. Exploring the Sandbox and Links

Short description:

You can see the code and what we're doing in our sandbox. Some features are not in production yet, but you can explore the options available for your graphs. While not everything is fully functional, most things are stable and functional. We provide links to our GitHub repository, quick start guides, demos, code samples, and various storybook graphs.

And again, you can see the code, you can see what we're doing. Some of this is not actually currently even in production and in FluxDB. So it's a great way to see what we're up to. Like right now, I'm showing the map one, we're not done yet, but it's in here. So that is just one thing to note. If you choose to ever go through our sandbox and check out all of our graph types, you know, you can see all the options that you have for your graphs as well.

The map one doesn't have as many options, but some of these have like 20 options to, you know, play with on the side. Just be aware that it's our sandbox too. So not everything is like 100% functional, but I would say that most things are, you know, pretty stable, pretty functional, you know, we've been using them for years kind of thing.

And then these are just some general links that I put up. So we have, you know, the GitHub repository, the quick start guides, some of our demos, some of our code samples, the anti ATC as we reference. And then again, these are just all the different storybook graphs. And this isn't even all of them. This is just like the basic ones.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Top Content
The talk discusses the importance of supply chain security in the open source ecosystem, highlighting the risks of relying on open source code without proper code review. It explores the trend of supply chain attacks and the need for a new approach to detect and block malicious dependencies. The talk also introduces Socket, a tool that assesses the security of packages and provides automation and analysis to protect against malware and supply chain attacks. It emphasizes the need to prioritize security in software development and offers insights into potential solutions such as realms and Deno's command line flags.
ESM Loaders: Enhancing Module Loading in Node.js
JSNation 2023JSNation 2023
22 min
ESM Loaders: Enhancing Module Loading in Node.js
Top Content
ESM Loaders enhance module loading in Node.js by resolving URLs and reading files from the disk. Module loaders can override modules and change how they are found. Enhancing the loading phase involves loading directly from HTTP and loading TypeScript code without building it. The loader in the module URL handles URL resolution and uses fetch to fetch the source code. Loaders can be chained together to load from different sources, transform source code, and resolve URLs differently. The future of module loading enhancements is promising and simple to use.
Towards a Standard Library for JavaScript Runtimes
Node Congress 2022Node Congress 2022
34 min
Towards a Standard Library for JavaScript Runtimes
Top Content
There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.
Out of the Box Node.js Diagnostics
Node Congress 2022Node Congress 2022
34 min
Out of the Box Node.js Diagnostics
This talk covers various techniques for getting diagnostics information out of Node.js, including debugging with environment variables, handling warnings and deprecations, tracing uncaught exceptions and process exit, using the v8 inspector and dev tools, and generating diagnostic reports. The speaker also mentions areas for improvement in Node.js diagnostics and provides resources for learning and contributing. Additionally, the responsibilities of the Technical Steering Committee in the TS community are discussed.
The State of Node.js 2025
JSNation 2025JSNation 2025
30 min
The State of Node.js 2025
The speaker covers a wide range of topics related to Node.js, including its resilience, popularity, and significance in the tech ecosystem. They discuss Node.js version support, organization activity, development updates, enhancements, and security updates. Node.js relies heavily on volunteers for governance and contribution. The speaker introduces an application server for Node.js enabling PHP integration. Insights are shared on Node.js downloads, infrastructure challenges, software maintenance, and the importance of update schedules for security.
Node.js Compatibility in Deno
Node Congress 2022Node Congress 2022
34 min
Node.js Compatibility in Deno
Deno aims to provide Node.js compatibility to make migration smoother and easier. While Deno can run apps and libraries offered for Node.js, not all are supported yet. There are trade-offs to consider, such as incompatible APIs and a less ideal developer experience. Deno is working on improving compatibility and the transition process. Efforts include porting Node.js modules, exploring a superset approach, and transparent package installation from npm.

Workshops on related topic

Node.js Masterclass
Node Congress 2023Node Congress 2023
109 min
Node.js Masterclass
Top Content
Workshop
Matteo Collina
Matteo Collina
Have you ever struggled with designing and structuring your Node.js applications? Building applications that are well organised, testable and extendable is not always easy. It can often turn out to be a lot more complicated than you expect it to be. In this live event Matteo will show you how he builds Node.js applications from scratch. You’ll learn how he approaches application design, and the philosophies that he applies to create modular, maintainable and effective applications.

Level: intermediate
Build and Deploy a Backend With Fastify & Platformatic
JSNation 2023JSNation 2023
104 min
Build and Deploy a Backend With Fastify & Platformatic
Top Content
WorkshopFree
Matteo Collina
Matteo Collina
Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow (https://platformatic.dev/). 
In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.
Building a Hyper Fast Web Server with Deno
JSNation Live 2021JSNation Live 2021
156 min
Building a Hyper Fast Web Server with Deno
Workshop
Matt Landers
Will Johnston
2 authors
Deno 1.9 introduced a new web server API that takes advantage of Hyper, a fast and correct HTTP implementation for Rust. Using this API instead of the std/http implementation increases performance and provides support for HTTP2. In this workshop, learn how to create a web server utilizing Hyper under the hood and boost the performance for your web apps.
0 to Auth in an Hour Using NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
GraphQL - From Zero to Hero in 3 hours
React Summit 2022React Summit 2022
164 min
GraphQL - From Zero to Hero in 3 hours
Workshop
Pawel Sawicki
Pawel Sawicki
How to build a fullstack GraphQL application (Postgres + NestJs + React) in the shortest time possible.
All beginnings are hard. Even harder than choosing the technology is often developing a suitable architecture. Especially when it comes to GraphQL.
In this workshop, you will get a variety of best practices that you would normally have to work through over a number of projects - all in just three hours.
If you've always wanted to participate in a hackathon to get something up and running in the shortest amount of time - then take an active part in this workshop, and participate in the thought processes of the trainer.
Mastering Node.js Test Runner
TestJS Summit 2023TestJS Summit 2023
78 min
Mastering Node.js Test Runner
Workshop
Marco Ippolito
Marco Ippolito
Node.js test runner is modern, fast, and doesn't require additional libraries, but understanding and using it well can be tricky. You will learn how to use Node.js test runner to its full potential. We'll show you how it compares to other tools, how to set it up, and how to run your tests effectively. During the workshop, we'll do exercises to help you get comfortable with filtering, using native assertions, running tests in parallel, using CLI, and more. We'll also talk about working with TypeScript, making custom reports, and code coverage.