How We Created the Giraffe Libraries for Time Series Data

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.

7 min
24 Jun, 2021

AI Generated Video Summary

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

Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Do you know what’s really going on in your node_modules folder? Software supply chain attacks have exploded over the past 12 months and they’re only accelerating in 2022 and beyond. We’ll dive into examples of recent supply chain attacks and what concrete steps you can take to protect your team from this emerging threat.
You can check the slides for Feross' talk here.
Node Congress 2022Node Congress 2022
34 min
Out of the Box Node.js Diagnostics
In the early years of Node.js, diagnostics and debugging were considerable pain points. Modern versions of Node have improved considerably in these areas. Features like async stack traces, heap snapshots, and CPU profiling no longer require third party modules or modifications to application source code. This talk explores the various diagnostic features that have recently been built into Node.
You can check the slides for Colin's talk here. 
JSNation 2023JSNation 2023
22 min
ESM Loaders: Enhancing Module Loading in Node.js
Native ESM support for Node.js was a chance for the Node.js project to release official support for enhancing the module loading experience, to enable use cases such as on the fly transpilation, module stubbing, support for loading modules from HTTP, and monitoring.
While CommonJS has support for all this, it was never officially supported and was done by hacking into the Node.js runtime code. ESM has fixed all this. We will look at the architecture of ESM loading in Node.js, and discuss the loader API that supports enhancing it. We will also look into advanced features such as loader chaining and off thread execution.
JSNation Live 2021JSNation Live 2021
19 min
Multithreaded Logging with Pino
Almost every developer thinks that adding one more log line would not decrease the performance of their server... until logging becomes the biggest bottleneck for their systems! We created one of the fastest JSON loggers for Node.js: pino. One of our key decisions was to remove all "transport" to another process (or infrastructure): it reduced both CPU and memory consumption, removing any bottleneck from logging. However, this created friction and lowered the developer experience of using Pino and in-process transports is the most asked feature our user.In the upcoming version 7, we will solve this problem and increase throughput at the same time: we are introducing pino.transport() to start a worker thread that you can use to transfer your logs safely to other destinations, without sacrificing neither performance nor the developer experience.

Workshops on related topic

Node Congress 2023Node Congress 2023
109 min
Node.js Masterclass
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
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
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
JSNation 2023JSNation 2023
104 min
Build and Deploy a Backend With Fastify & Platformatic
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 ( Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow ( 
In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.
JSNation Live 2021JSNation Live 2021
156 min
Building a Hyper Fast Web Server with Deno
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.
React Summit 2022React Summit 2022
164 min
GraphQL - From Zero to Hero in 3 hours
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.
TestJS Summit 2023TestJS Summit 2023
78 min
Mastering Node.js Test Runner
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.