Bar and line charts¶

Exercise bar-and-line-annex.pdf · PDF

The match ends and the game gives you two screens. The first is the leaderboard: every player ranked by score, the best on top. The second is the match timeline: what happened minute by minute, when the kills came, when your team collapsed.

Two screens, two different questions. Who is on top? and what happened over time? Nobody mixes them up: a leaderboard drawn as a timeline would be nonsense.

Those two screens are the two charts you will use most in your life: the bar chart and the line chart. This lesson is about building both from games_clean, and about the one question that decides which of them you need.

Dimension and metric: the two halves of every chart¶

In Visual perception you built your first chart, games by price band. Behind it is a query you could have written in Unit 1:

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

That query has two halves, and so does every chart you will ever build.

A dimension is what you group by: the column whose values become the bars, the points or the slices.

A metric is what you compute for each group: a count, an average, a sum.

flowchart LR
    D["<b>Dimension</b><br>price_band<br>(the player names)"] --> Q["<b>GROUP BY</b> + aggregate<br>Superset writes the SQL"]
    M["<b>Metric</b><br>COUNT(*)<br>(the score)"] --> Q
    Q --> C["<b>Chart</b><br>one bar per group,<br>bar height = metric"]

The Explore view¶

Every chart in Superset is built on one screen, the Explore view. Open your saved chart UT3 · Games by price band from Charts and look at it from left to right. It has four zones:

The Data tab is the query. The Customize tab is the paint. Today you work almost only in Data; the paint has its own lesson, Configuring charts in Superset.

The bar chart: a leaderboard¶

A bar chart draws one bar per category. The length of the bar is the metric. It answers the question which category is bigger?

A bar chart is a leaderboard. The dimension is a list of categories: values with no in-between, like publishers, price bands or Pokémon types. Each one gets a bar, all bars start from the same line, and you compare where they end. That is position on a common scale, rank 1 in the Cleveland and McGill table.

Here is the leaderboard of Steam publishers: the ten that have released the most games in games_clean.

%%{init: {"themeVariables": {"xyChart": {"plotColorPalette": "#4051b5"}}}}%%
xychart-beta horizontal
    title "Top 10 publishers by number of games on Steam"
    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" 0 --> 300
    bar [284, 141, 129, 123, 95, 94, 92, 89, 85, 84]

Two decisions made this chart readable, and neither is about colour:

The ghost player called Unknown¶

If you build that top 10 without thinking, the fifth bar is a publisher called Unknown, with 120 games.

Is Unknown a publisher? No. It is the label you gave to games with a missing publisher when you cleaned the data in Unit 2. On a leaderboard it is a ghost player: 120 games that belong to nobody in particular, standing in fifth place.

You have two honest options:

What you cannot do is leave it there in silence and let the reader think a company called Unknown exists.

The line chart: a timeline¶

A line chart places one point per moment in time and joins the points with a line. It answers the question how did this change over time?

A line chart is the match timeline. Its dimension is not a list of categories. It is time, and time has two properties categories do not have: it has an order, and it is continuous. Between 2016 and 2018 there is a 2017.

That is what the line means. Joining two points tells the eye: these are connected, read the slope. Steep up, fast growth. Flat, nothing happened.

Here are the games released on Steam each year, from the column release_date:

%%{init: {"themeVariables": {"xyChart": {"plotColorPalette": "#4051b5"}}}}%%
xychart-beta
    title "Games released on Steam per year"
    x-axis ["2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"]
    y-axis "Games" 0 --> 9000
    line [53, 58, 112, 143, 183, 334, 340, 364, 426, 556, 1352, 2544, 4503, 6871, 8845]

Read the slope. Ten years of almost nothing: 53 games in 2004, 556 in 2013. Then the line takes off: 1,352 in 2014 and 8,845 in 2018.

Time grain: the zoom of the timeline¶

A date column holds days. To draw a line you must decide how to group those days: by year, by quarter, by month.

The time grain is the size of the time step on the X-axis: each point of the line adds up everything that happened inside one step.

Change the grain from year to month and the same data draw a different picture:

The year line said "it exploded". The month line shows when, inside each year. The highest point is March 2018, with 853 games, followed by May 2018 (796), November 2018 (790) and October 2017 (768).

Bar or line? One question decides¶

The chart type follows the dimension. Ask one thing: is there something in between two neighbouring values?

flowchart TB
    Q{"What is on the X-axis?"}
    Q -- "Categories:<br>publishers, bands, types" --> B["<b>Bar chart</b><br>(the leaderboard)<br>compare heights"]
    Q -- "Time:<br>days, months, years" --> L["<b>Line chart</b><br>(the timeline)<br>read the slope"]

What happens if you ignore the rule? Here is the publisher leaderboard drawn as a line. This chart is wrong on purpose.

%%{init: {"themeVariables": {"xyChart": {"plotColorPalette": "#4051b5"}}}}%%
xychart-beta
    title "Wrong on purpose: a line across categories"
    x-axis ["Big Fish", "SEGA", "Strategy First", "Ubisoft", "Square Enix", "Sekai Project"]
    y-axis "Games" 0 --> 300
    line [284, 141, 129, 123, 95, 94]

Your eye reads a dramatic fall and then a slow decline. A decline of what? There is no path from Big Fish Games to SEGA. Halfway between them there is no company with 212 games. The line connects things that are not connected, and the "trend" exists only because of the order somebody chose for the names.

Try it: the leaderboard and the timeline¶

Both charts use the dataset games_clean (see Resources for the data).

Chart 2 — Top 10 publishers. Which publishers have released the most games on Steam?

The chart must match this query:

SELECT publisher, COUNT(*) AS n FROM games_clean
WHERE publisher <> 'Unknown'
GROUP BY publisher ORDER BY n DESC LIMIT 10;

Chart 3 — Games released per year. How has the number of releases changed between 2004 and 2018?

The line draws no dots by default: tick Customize, Marker if you want to see the 15 points. When you hover, the box rounds the value (8.85k for 2018); the exact number is in Results, under the chart.

Key takeaways¶

• Every chart has a dimension (what you group by, the GROUP BY column) and a metric (what you compute, the aggregate). Superset writes the SQL; View query shows it.
• The Explore view has four zones: dataset panel, Data tab (what is computed), Customize tab (how it looks), chart and results.
• A bar chart compares categories: it is the leaderboard. Sort it by value, and make it horizontal when the names are long.
• A line chart shows change over time: it is the timeline. The line says "these points are connected, read the slope".
• The time grain is the zoom of the timeline. Year and month show the same rows with a different question.
• A line across categories invents a trend. A label like Unknown is not a real category: filter it or explain it.

Quick check¶

A bar per category works when the categories already exist. But what if the X-axis is a number with hundreds of different values, like a price? A bar per exact price would be unreadable. That is the job of the next chart: Histogram and scatter plot.