Configuring charts in Superset¶

Exercise configuring-charts-annex.pdf · PDF

You make a line chart of the games released on Steam each year. It is the right chart: evolution, a line. You paste it in the class group chat, with no message. Thirty seconds later: "What is this counting?" "Games of what?" "Which years?" "8.85k what?" "So... what am I supposed to see?"

The chart was correct and nobody could read it. Picking the right chart was the job of Choosing the right chart. Making it readable is today's job.

The screenshot test¶

In the crafting game of this module, a chart is part of the HUD: the health bar, the minimap, the score. Nobody pauses a match to explain what the red bar is. If the HUD needs a manual, the HUD is broken.

Your charts have the same life. A chart leaves home. Somebody takes a screenshot and pastes it in a chat, a slide, a report. You will not be there to explain it. Whatever is not written inside the picture is lost.

The screenshot test: could a stranger read this chart alone, with no caption and nobody to ask?

Here is the same chart, from the same query, before and after the test. The left one is what the tool draws on its own. The right one has had six small things changed.

Both panels are redrawn from the class data, not screenshots. Every difference between them answers one question a stranger would ask. Those six differences are the six knobs of this lesson.

The Explore view: where everything lives¶

The Explore view is the screen where Superset builds one chart from one dataset. You reach it from Charts → + Chart, or by opening any saved chart.

Read it from left to right. It has four zones:

flowchart LR
    DS["<b>Dataset</b><br>games_clean:<br>columns and metrics"] --> DATA["<b>Data tab</b><br>what is computed:<br>dimension, metric,<br>filter, time grain, sort"]
    DATA -- "Superset writes<br>the SQL" --> RES["<b>Results</b><br>the rows behind<br>the chart"]
    RES --> CUS["<b>Customize tab</b><br>how it looks:<br>titles, formats,<br>legend, colours"]
    CUS --> CH["<b>The chart</b><br>(the HUD)"]

The one sentence to remember: titles and looks live in *Customize; what is counted, filters, sort and annotations live in *Data. Most people who get lost in Superset are looking in the wrong tab.

What is drawn: dimension, metric, filter, time grain¶

A chart is a query with a drawing on top. Take the query you have written since Unit 1:

SELECT price_band, COUNT(*) FROM games_clean GROUP BY price_band;

It has two halves, and Explore has a control for each one.

A dimension is the column you group by: the thing each bar, point or slice stands for. A metric is the aggregate computed for each group: COUNT, AVG, SUM.

The time grain is the size of the time steps a date column is grouped into. The same release_date drawn with grain Year gives 15 points; with grain Month it gives one point per month.

This is the recipe behind the chart of the hook, the one you saved in Bar and line charts as UT3 · Games released per year:

Step 4 is why Units 1 and 2 mattered: you can read what the tool does, and check it.

The six knobs¶

Each knob answers one question the stranger in the group chat would ask.

Knob 1: a title that states the finding¶

Games per year is a recipe: it says what was cooked. The axis titles already do that. The title is the first thing anybody reads, so spend it on the finding: what should the reader see?

A quick test: a finding has a verb. And it must be true: Big Fish Games has 284 games and SEGA 141, and 284 ÷ 141 = 2.01, so "twice as many" is honest.

Knob 2: axis titles¶

An axis title says what is counted and in which unit: Release year, Games released. Without it, a number on the axis is just a number.

Not every axis needs one. On a bar chart of publishers, the axis with the names needs no title: SEGA and Ubisoft explain themselves. The axis with the numbers always does.

Knob 3: number formats¶

A number format is a short code that tells the chart how to write a number: with thousands separators, as a percentage, as money.

By default Superset uses Adaptive formatting, which shortens numbers: it is the one that writes 8,845 as 8.85k. Good for a first look, bad for a reader who wants the figure. Three formats are enough for the whole course:

These codes come from a small standard language called D3 format. Superset lists ,d and $,.2f in the dropdown with an example next to each. The percentage one is listed as ,.1%; you can also type .1% and press Enter.

Knob 4: sort order¶

Order is the first comparison the eye makes. Here are the ten biggest publishers in games_clean, twice. Same ten bars, same numbers:

%%{init: {"themeVariables": {"xyChart": {"plotColorPalette": "#4051b5"}}}}%%
xychart-beta horizontal
    title "Games published (alphabetical order)"
    x-axis ["1C Entertainment", "Big Fish Games", "Choice of Games", "Dagestan Technology", "SEGA", "Sekai Project", "Square Enix", "Strategy First", "THQ Nordic", "Ubisoft"]
    y-axis "Games published" 0 --> 300
    bar [85, 284, 92, 89, 141, 94, 95, 129, 84, 123]

%%{init: {"themeVariables": {"xyChart": {"plotColorPalette": "#4051b5"}}}}%%
xychart-beta horizontal
    title "Games published (sorted by value)"
    x-axis ["Big Fish Games", "SEGA", "Strategy First", "Ubisoft", "Square Enix", "Sekai Project", "Choice of Games", "Dagestan Technology", "1C Entertainment", "THQ Nordic"]
    y-axis "Games published" 0 --> 300
    bar [284, 141, 129, 123, 95, 94, 92, 89, 85, 84]

There are three honest orders. Pick the one the question asks for:

Knob 5: colour and legend¶

A legend is the small key that says which colour is which series. A series is one line, or one set of bars, in the chart.

A legend answers exactly one question: "which colour is which?" So count your series first.

Add owners_tier to Dimensions and the single line becomes three. Now the legend earns its place:

The same logic rules colour. Colour is for telling things apart. One series, one colour. Ten bars of the same thing, one colour. A Color Scheme is chosen on purpose: the one where the series are easiest to tell apart, not the one with the most colours.

Knob 6: an annotation¶

Is 1,352 games in a year a lot? You cannot say without something to compare against.

An annotation is a mark that you add on top of the data, a reference line or a labelled date, so the reader has something to compare with.

The simplest one is a horizontal line at the average. For the 15 years of games_clean:

SELECT ROUND(AVG(games), 1)
FROM (SELECT release_year, COUNT(*) AS games FROM games_clean
      WHERE release_year IS NOT NULL GROUP BY release_year) y;

The result is 1778.9, so the line goes at 1,779. Once it is drawn, the reader sees at a glance that only four years are above it: 2015 to 2018.

An annotation is not part of the data. Give it a name that says what it is (Average year: 1,779 games), so nobody takes it for another series.

Try it: three charts that pass the test¶

You need three charts saved in earlier lessons: UT3 · Games released per year and UT3 · Top 10 publishers from Bar and line charts, and UT3 · Price band by owners tier from Choosing the right chart. None of them passes the screenshot test yet.

Task 1: the line chart of games per year. Open UT3 · Games released per year from Charts.

Why step 4 comes first: one game in the table has no release date. With it still in the query, the formula line starts in 1970 and squeezes your 15 years into the right edge of the chart.

Task 2: the bar chart of publishers. Open UT3 · Top 10 publishers.

Task 3: three lines, one legend. Open the Task 1 chart again.

CASE price_band WHEN 'Free'     THEN '1 · Free'      WHEN 'Under 5'  THEN '2 · Under 5'
                WHEN '5 to 15'  THEN '3 · 5 to 15'   WHEN '15 to 30' THEN '4 · 15 to 30'
                ELSE '5 · 30 or more' END

When you finish, run the screenshot test for real. Leave the Task 1 chart on screen and ask a classmate three questions, without explaining anything: What is being counted? Between which years? What is the one thing I want you to see? Every wrong answer points at a knob you forgot.

Key takeaways¶

• The screenshot test: a chart must be readable by a stranger, alone. Whatever is not written inside the picture is lost.
• In the Explore view, the Data tab decides what is computed (dimension, metric, filter, time grain, sort, annotations) and the Customize tab decides how it looks (titles, formats, legend, colours).
• The title states the finding, with a verb. The axis titles say what is counted and in which unit.
• A number format changes how a number is written, never the number: ,d for counts, .1% for shares, $,.2f for money.
• Sort by value, by time or by natural order. Alphabetical order answers a question nobody asked.
• A legend is for telling series apart: off with one series, on (and on top) with several. An annotation gives the reader something to compare against.

Quick check¶

Your charts can now explain themselves. But the same knobs that make a chart clear can make it lie: one tick on an axis and a small difference looks enormous. Next: Misleading charts, where you learn the tricks from the inside.