A Star Wars dashboard deep dive: How to build your next visualization in less than 12 parsecs

Hello there! Earlier this year I created a Star Wars-themed dashboard featuring all sorts of fun visualizations from a galaxy far, far away, including a map of the Kessel Run, an overview of the Millenium Falcon’s specs, and a rundown of the Death Star’s vulnerabilities. I launched it on Star Wars Day, May 4, and I even tried to run this blog post the same day, but it didn’t quite come together. (I know, I know: “Do or do not, there is no try.") 

It felt like Star Wars Day was our last hope, but after consulting with some scifi fanatics here at Grafana Labs I quickly realized: No, there is another.

Yes, I’m talking about Life Day, the Wookiee holiday first introduced during the infamous “Star Wars Holiday Special,” which aired on Nov. 17, 1978. The broadcast featured all sorts of oddities, from Chewbacca’s never-to-be-seen-again family to a cameo by Bea Arthur, and over time it has found a special—albeit quirky—place in the hearts of Star Wars fans everywhere.

And while Life Day is less well known than May 4, it fits for our purposes. After all, if we’re going to nerd out on how to visualize data, we might as well go for the deep cut in the franchise lore. 

So as we come together for this Life Day, let’s explore how everything in my dashboard was put together. A lot of it was silly fun, but some of the techniques I used can be applied to more serious displays of real data. So let’s dive in, or, as Chewbacca would say, “GRAWWRRRAAAAR!”

Let’s start at the top!

The first thing you see when you load this dashboard is a headline referencing the beginning of a certain famous franchise, and this was intentional. Being at the very top of the page and fairly large, this would catch a lot of attention and draw people into the rest of the dashboard.

Normally, you can’t apply a lot of styling to a text panel, including text colors. That’s on purpose—Grafana will pick text colors that contrast with the background to make sure that your text is readable even if viewers change the dashboard theme.

In this case, I knew we’d be directing people specifically to the dark theme, since I wanted a dark background to mimic the initial scene from Star Wars. But the impact just wouldn’t be the same without the iconic blue text.

To accomplish this, I actually used a stat panel instead of a text panel. I added a blank query that I knew would return no data, then used the “No value” field to change the default “No data” display to the text I wanted to use, and set a base threshold color for the text to blue.

Use the (visualization) force:  Visualizations are only actually helpful if people use them. Be mindful to present data up top that is relevant and immediately engaging so people find it useful and want to come back. And don’t be afraid to experiment: Grafana has countless ways to customize your dashboards. 

Using TestData to build some readouts

I wanted to have some dynamic gauges and charts that simulated events on the ships I described in the dashboard. I used the TestData data source for this. TestData allows you to simulate many different types of data in Grafana without connecting to a “real” data source, including things like creating random data, simulating sine waves, or pasting CSV format data in directly.

The Millennium Falcon has two missile tubes, according to Wookiepedia. To display their status, a two-column table worked perfectly. I could have used text and color here the way I did for its other systems, but for something as critical as limited ammunition I thought that symbols you could read at a glance were a better fit. And using a table means that the icons would scale up and down with screen size more naturally than an iframe would

The icons themselves could have been loaded from a webpage like I did in the text panel above, but in this case they were small enough to base64 encode and just paste into the panel directly as CSV data. I could then set the cell type for the table to “Image” and Grafana would do the rest.

For more continuous numerical data, I used TestData again but chose the “Simulation” scenario. I stuck with simple simulations like a live-updating sine wave, which I applied a few simple mathematical formulas to in the Transformations tab to keep the values bound to the areas where I wanted.

(I could have used the “Random walk” scenario for this, which generates random time series data, and had truly random data appear in the panels.  But I decided that having shield strength jump around between 2%, then 90%, then back to 3% in a matter of seconds just didn’t look “realistic” enough.)

I set the data source to simulate real-time updates using the “Stream” switch in this scenario, which causes the shield and laser displays to update their values regularly without reloading the dashboard.

Use the (visualization) force: The TestData plugin is a fantastic way to mock up dashboards and experiment with how to represent data of all types. You can use this when planning your own dashboards when you don’t yet have enough data collected to visualize or when you want to see what happens when data goes outside of normal values.

Mapping the Kessel Run

To show the Falcon’s navigation system, I decided to create a map of the Kessel Run using the canvas panel. This would let me show a background image with the underlying map and then overlay things like arrows and other indicators on top.

I spent a lot of time creating circle icon objects and giving them descriptive names!

Making lines that follow a complex path in the canvas panel has a bit of a knack to it. You start with two objects, such as a source and a destination for the Falcon. Select the source and then drag a line from one of the dots around the object to start drawing a line. Drag it to a dot on the destination and you’ll get a nice straight line.

To create bends in the line, select the line itself and you’ll see a tiny dot appear in the middle of the line.

Drag that dot and the line will bend.

You can then select a segment of the line and repeat the process until you have the shape that you want.

The canvas panel itself has some nice animation features built-in. Making a line dashed or dotted gives you the ability to animate it, showing motion on your graph.

Use the (visualization) force: Canvas has a lot of hidden power. You can build custom visualizations that don’t quite fit into any other panel type. Animations should be used sparingly (too many are distracting) but can add an extra layer of information to a display.

Pretty pictures and alien text

The ship images and the Aurebesh text are text panels. The ships use the HTML tag and the text uses an iframe so that we can set a specific font for the Aurebesh characters. (There are some Easter eggs here if you look a bit!)

To make the images and ship stats blend into the rest of the page, I use a transparent background for those panels. This makes them have a bit less emphasis on the dashboard so they look like supporting details around the more dynamic panels. Consistency is important, so I kept this style the same for each ship on the dashboard.

Use the (visualization) force: Using subtle changes like transparent backgrounds for panels can help visually group information.  Keep it consistent across your dashboard to make it clear what is logically connected.

May the data be with you!

All in all, I had a lot of fun putting this dashboard together. While it isn’t the most serious topic, the techniques I used to create fake data are useful when mocking up new designs for real dashboards. And the images and styling can help take a standard dashboard from “blah” to “beautiful!”

If you want to see more of how any of the panels were constructed, head over to the dashboard on play.grafana.org and take a look! Hover over any panel and click the menu icon in the upper right corner when it appears and select “Edit.” You can then see how each panel was put together.

Grafana Cloud is the easiest way to get started with metrics, logs, traces, dashboards, and more. We have a generous forever-free tier and plans for every use case. Sign up for free now!