Building a dashboard in Superset¶

Exercise building-a-dashboard-annex.pdf · PDF

Most games have a hidden screen in the options called something like "customise HUD". You drag the health bar to another corner, make the minimap bigger, press save, and go back to playing. Nobody plays inside that screen. It exists only to arrange things.

Superset has the same screen. In the previous lesson you designed the Steam market dashboard on paper: an audience, a purpose, three bands. Today you build it. One warning first: Superset will not design it for you. It gives you a grid and some boxes. The sketch is the plan, and without it you are building blind.

First, the KPIs: the Big Number chart¶

The top band of the sketch needs four KPIs. A bar chart with one bar would be silly. Superset has a chart made for exactly this.

A Big Number is a chart that shows one single value, very large, with nothing around it. Its job is to be read from the door.

It is the ammo counter of the HUD: no axis, no legend, one number.

Build the first one, the share of free games:

In step 3 the number is correct but unreadable. 0.1159 and 11.6% are the same value. Only the second one is a KPI a human can read at a glance.

A number format is a short code that tells Superset how to write a number on screen: how many decimals, thousands separators, a percent sign. It changes how the number looks, never its value.

Now build the other three the same way. Only the metric and the format change:

Use those exact chart names. Later you will look for these charts by typing UT4 in a search box, and in a list of forty charts called "Untitled", nobody finds anything.

Edit mode: the "customise HUD" screen¶

Edit mode is the state of a dashboard in which you can add, move, resize and delete its pieces. View mode is what the reader sees: the finished screen, with no building tools.

Create the dashboard: Dashboards → + Dashboard. A new, empty dashboard opens, already in edit mode. Click the title and type Steam market.

On the right there is a panel with two tabs:

Drag a chart from the panel onto the empty area, the canvas, and it is on the dashboard.

The 12-column grid¶

Drag UT4 · KPI Games onto the canvas. Drag a second KPI and drop it next to the first: a blue area shows where it will land. Two charts side by side are in the same row.

Now drag the bottom-right corner of a chart. It does not move smoothly. It jumps.

The grid is the invisible ruler of the canvas. A row is 12 columns wide, and every chart is a whole number of columns wide.

The widths in a row can add up to 12 at most. This is all the arithmetic you need:

A chart arrives 4 columns wide. So three KPIs fill the row and the fourth has no room. The fix is to shrink first, then add: resize each KPI to 3 columns, and the fourth fits.

flowchart TB
    subgraph R1 ["<b>Row 1</b>: 3 + 3 + 3 + 3 = 12 columns"]
        direction LR
        A["<b>Games</b><br>3 columns"] ~~~ B["<b>Free share</b><br>3 columns"] ~~~ C["<b>Median price</b><br>3 columns"] ~~~ D["<b>Hits</b><br>3 columns"]
    end
    subgraph R2 ["<b>Row 2</b>: 8 + 4 = 12 columns"]
        direction LR
        E["<b>Line chart</b>: games per year<br>8 columns"] ~~~ F["<b>Bar or pie chart</b>: price band<br>4 columns"]
    end
    R1 --> R2

The six layout elements¶

Charts are not the only thing on a HUD. There are labels, groups, separators.

A layout element is a box that holds no data. It organises or explains the charts around it.

Two of them deserve a closer look.

Tabs. Remember the bottom band of the sketch: "detail for the curious". Tabs are how you keep detail available without spending screen space on it. The histogram goes in one tab, the scatter in another, and they share the same rectangle.

Text / Markdown. Markdown is a simple way to format text with plain characters: **bold** becomes bold. In a Text / Markdown element you write the note that tells the reader where the data comes from and what it cannot say. Double-click the element to type in it.

A dashboard holds references, not copies¶

You dragged UT4 · KPI Games onto the dashboard. How many charts called UT4 · KPI Games exist now?

Still one.

A reference is a pointer to something that lives somewhere else, like a shortcut on your desktop. The dashboard does not contain the chart. It points at it.

flowchart LR
    C["<b>Chart</b><br>UT4 · KPI Games<br>(exists once)"]
    D1["<b>Dashboard</b><br>Steam market"] -- "reference" --> C
    D2["<b>Dashboard</b><br>another dashboard"] -- "reference" --> C

This is good news and a responsibility. Good news: fix a typo once and it is fixed everywhere. Responsibility: your change reaches dashboards you may have forgotten about.

To change a chart from inside a dashboard, use the three dots on the chart → Edit chart. That is where you shorten a title that is too long for a narrow box.

Try it: Steam market, from paper to screen¶

Four short tasks. Press Save at the end of each one.

Task 1: the KPI row.

Task 2: the middle band.

Task 3: tabs for the detail.

**Source:** TidyTuesday 2019-07-30 (Steam Spy). 26,685 games released 2004–2018.
Free games count as price 0. Only 2,849 games (10.7 %) have a Metascore.

Do not copy numbers into a note without checking them. Run this in SQL Lab:

SELECT COUNT(*), MIN(release_year), MAX(release_year),
       COUNT(metascore), ROUND(100.0 * COUNT(metascore) / COUNT(*), 1)
FROM games_clean;

Task 4, if you want more. Put the heatmap in a third tab, Calendar. Then use a Column inside a row to stack two KPIs on top of each other next to a chart. Does it read better than the flat row? Decide, and be ready to say why.

The finished layout:

Key takeaways¶

• A Big Number chart shows one value, huge. Its metric goes in Custom SQL and its number format (,d, .1%, .2f) makes it readable.
• Edit mode is the "customise HUD" screen. Nothing is saved until you press Save.
• The canvas is a grid of 12 columns. Widths in a row add up to 12 at most: four KPIs are 3 + 3 + 3 + 3.
• Six layout elements organise the screen: header, row, column, tabs, text / Markdown, divider.
• A dashboard holds a reference to each chart. Edit the chart once and every dashboard changes.
• Layout is a decision about what the reader sees first: KPIs on top, detail in tabs, the source in a note.

Quick check¶

Your dashboard answers one question about the whole market. But what is the median price of the hits only? Do you need a second dashboard? No: next, Filters and cross-filters.