Gràfics de barres i de línies¶

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

La partida s'acaba i el joc et dona dues pantalles. La primera és la taula de classificació: tots els jugadors ordenats per puntuació, el millor a dalt. La segona és la cronologia de la partida: què va passar minut a minut, quan van arribar les eliminacions, quan es va ensorrar el teu equip.

Dues pantalles, dues preguntes diferents. Qui és al capdamunt? i què ha passat al llarg del temps? Ningú no les confon: una taula de classificació dibuixada com una cronologia no tindria cap sentit.

Aquestes dues pantalles són els dos gràfics que faràs servir més en la vida: el gràfic de barres i el gràfic de línies. Aquesta lliçó va de construir-los tots dos a partir de games_clean, i de la pregunta que decideix quin dels dos necessites.

Dimensió i mètrica: les dues meitats de tot gràfic¶

A Percepció visual vas construir el teu primer gràfic, jocs per franja de preu. Al darrere hi ha una consulta que hauries pogut escriure a la unitat 1:

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

Aquesta consulta té dues meitats, i també en té dues tot gràfic que construiràs mai.

Una dimensió és allò pel qual agrupes: la columna els valors de la qual es converteixen en les barres, els punts o els sectors.

Una mètrica és allò que calcules per a cada grup: un recompte, una mitjana, una suma.

flowchart LR
    D["<b>Dimensió</b><br>price_band<br>(els noms dels jugadors)"] --> Q["<b>GROUP BY</b> + agregat<br>Superset escriu el SQL"]
    M["<b>Mètrica</b><br>COUNT(*)<br>(la puntuació)"] --> Q
    Q --> C["<b>Gràfic</b><br>una barra per grup,<br>alçada de la barra = mètrica"]

La vista Explore¶

Tot gràfic de Superset es construeix en una sola pantalla, la vista Explore. Obre el gràfic desat UT3 · Games by price band des de Charts i mira'l d'esquerra a dreta. Té quatre zones:

La pestanya Data és la consulta. La pestanya Customize és la pintura. Avui treballes gairebé només a Data; la pintura té la seva pròpia lliçó, Configurar gràfics a Superset.

El gràfic de barres: una taula de classificació¶

Un gràfic de barres dibuixa una barra per categoria. La longitud de la barra és la mètrica. Respon la pregunta quina categoria és més gran?

Un gràfic de barres és una taula de classificació. La dimensió és una llista de categories: valors sense res entremig, com editors, franges de preu o tipus de Pokémon. Cadascuna té una barra, totes les barres comencen a la mateixa línia, i compares on acaben. Això és posició sobre una escala comuna, rang 1 a la taula de Cleveland i McGill.

Aquí tens la taula de classificació dels editors de Steam: els deu que han publicat més jocs a games_clean.

%%{init: {"themeVariables": {"xyChart": {"plotColorPalette": "#4051b5"}}}}%%
xychart-beta horizontal
    title "Top 10 d'editors per nombre de jocs a 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 "Jocs" 0 --> 300
    bar [284, 141, 129, 123, 95, 94, 92, 89, 85, 84]

Dues decisions han fet llegible aquest gràfic, i cap no té a veure amb el color:

El jugador fantasma anomenat Unknown¶

Si construeixes aquest top 10 sense pensar-hi, la cinquena barra és un editor anomenat Unknown, amb 120 jocs.

Unknown és un editor? No. És l'etiqueta que vas posar als jocs sense editor quan vas netejar les dades a la unitat 2. En una taula de classificació és un jugador fantasma: 120 jocs que no pertanyen a ningú en concret, plantats en cinquena posició.

Tens dues opcions honestes:

El que no pots fer és deixar-lo allà en silenci i fer pensar al lector que existeix una empresa anomenada Unknown.

El gràfic de línies: una cronologia¶

Un gràfic de línies situa un punt per a cada moment del temps i uneix els punts amb una línia. Respon la pregunta com ha canviat això al llarg del temps?

Un gràfic de línies és la cronologia de la partida. La seva dimensió no és una llista de categories. És el temps, i el temps té dues propietats que les categories no tenen: té un ordre i és continu. Entre el 2016 i el 2018 hi ha un 2017.

Això és el que vol dir la línia. Unir dos punts li diu a l'ull: aquests estan connectats, llegeix el pendent. Pujada pronunciada, creixement ràpid. Plana, no ha passat res.

Aquí tens els jocs publicats a Steam cada any, a partir de la columna release_date:

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

Llegeix el pendent. Deu anys de gairebé res: 53 jocs el 2004, 556 el 2013. Després la línia s'enlaira: 1,352 el 2014 i 8,845 el 2018.

Gra temporal: el zoom de la cronologia¶

Una columna de data conté dies. Per dibuixar una línia has de decidir com agrupar aquests dies: per any, per trimestre, per mes.

El gra temporal (time grain) és la mida del pas de temps a l'eix X: cada punt de la línia suma tot el que ha passat dins d'un pas.

Canvia el gra d'any a mes i les mateixes dades dibuixen una imatge diferent:

La línia anual deia "ha explotat". La línia mensual mostra quan, dins de cada any. El punt més alt és el març del 2018, amb 853 jocs, seguit del maig del 2018 (796), el novembre del 2018 (790) i l'octubre del 2017 (768).

Barres o línies? Una pregunta ho decideix¶

El tipus de gràfic segueix la dimensió. Pregunta't una sola cosa: hi ha alguna cosa entre dos valors veïns?

flowchart TB
    Q{"Què hi ha a l'eix X?"}
    Q -- "Categories:<br>editors, franges, tipus" --> B["<b>Gràfic de barres</b><br>(la taula de classificació)<br>compara alçades"]
    Q -- "Temps:<br>dies, mesos, anys" --> L["<b>Gràfic de línies</b><br>(la cronologia)<br>llegeix el pendent"]

Què passa si t'ho saltes? Aquí tens la taula de classificació d'editors dibuixada com una línia. Aquest gràfic és incorrecte a propòsit.

%%{init: {"themeVariables": {"xyChart": {"plotColorPalette": "#4051b5"}}}}%%
xychart-beta
    title "Incorrecte a propòsit: una línia a través de categories"
    x-axis ["Big Fish", "SEGA", "Strategy First", "Ubisoft", "Square Enix", "Sekai Project"]
    y-axis "Jocs" 0 --> 300
    line [284, 141, 129, 123, 95, 94]

L'ull hi llegeix una caiguda dramàtica i després un declivi lent. Un declivi de què? No hi ha cap camí entre Big Fish Games i SEGA. A mig camí entre elles no hi ha cap empresa amb 212 jocs. La línia connecta coses que no estan connectades, i la "tendència" només existeix per l'ordre que algú ha triat per als noms.

Prova-ho: la taula de classificació i la cronologia¶

Els dos gràfics fan servir el dataset games_clean (mira Recursos per a les dades).

Gràfic 2 — Top 10 d'editors. Quins editors han publicat més jocs a Steam?

El gràfic ha de coincidir amb aquesta consulta:

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

Gràfic 3 — Jocs publicats per any. Com ha canviat el nombre de publicacions entre el 2004 i el 2018?

La línia no dibuixa punts per defecte: marca Customize, Marker si vols veure els 15 punts. Quan hi passes el cursor, el quadre arrodoneix el valor (8.85k per al 2018); el número exacte és a Results, sota el gràfic.

Idees clau¶

• Tot gràfic té una dimensió (allò pel qual agrupes, la columna del GROUP BY) i una mètrica (allò que calcules, l'agregat). Superset escriu el SQL; View query te'l mostra.
• La vista Explore té quatre zones: panell del dataset, pestanya Data (què es calcula), pestanya Customize (quin aspecte té), gràfic i resultats.
• Un gràfic de barres compara categories: és la taula de classificació. Ordena'l per valor, i fes-lo horitzontal quan els noms són llargs.
• Un gràfic de línies mostra el canvi al llarg del temps: és la cronologia. La línia diu "aquests punts estan connectats, llegeix el pendent".
• El gra temporal és el zoom de la cronologia. Any i mes mostren les mateixes files amb una pregunta diferent.
• Una línia a través de categories s'inventa una tendència. Una etiqueta com Unknown no és una categoria real: filtra-la o explica-la.

Comprovació ràpida¶

Una barra per categoria funciona quan les categories ja existeixen. Però què passa si l'eix X és un número amb centenars de valors diferents, com un preu? Una barra per cada preu exacte seria il·legible. Aquesta és la feina del gràfic següent: Histograma i diagrama de dispersió.