Configurar gràfics a Superset¶

Exercici configuring-charts-annex.pdf · PDF

Fas un gràfic de línies dels jocs publicats a Steam cada any. És el gràfic correcte: evolució, una línia. El enganxes al xat del grup de classe, sense cap missatge. Trenta segons després: "Què compta això?" "Jocs de què?" "Quins anys?" "8.85k de què?" "I doncs... què se suposa que he de veure?"

El gràfic era correcte i ningú el podia llegir. Triar el gràfic adequat era la feina de Triar el gràfic adequat. Fer-lo llegible és la feina d'avui.

La prova de la captura de pantalla¶

Al joc de crafting d'aquest mòdul, un gràfic és part del HUD: la barra de vida, el minimapa, la puntuació. Ningú atura una partida per explicar què és la barra vermella. Si el HUD necessita un manual, el HUD està trencat.

Els teus gràfics tenen la mateixa vida. Un gràfic surt de casa. Algú en fa una captura de pantalla i l'enganxa en un xat, en una diapositiva, en un informe. Tu no hi seràs per explicar-lo. Tot el que no estigui escrit dins de la imatge es perd.

La prova de la captura de pantalla: podria un desconegut llegir aquest gràfic sol, sense peu de figura i sense ningú a qui preguntar?

Aquí tens el mateix gràfic, de la mateixa consulta, abans i després de la prova. L'esquerre és el que l'eina dibuixa per si sola. El dret té sis coses petites canviades.

Els dos panells estan redibuixats a partir de les dades de classe, no són captures. Cada diferència entre ells respon una pregunta que faria un desconegut. Aquestes sis diferències són els sis botons d'aquesta lliçó.

La vista Explore: on viu tot¶

La vista Explore és la pantalla on Superset construeix un gràfic a partir d'un dataset. S'hi arriba des de Charts → + Chart, o obrint qualsevol gràfic desat.

Llegeix-la d'esquerra a dreta. Té quatre zones:

flowchart LR
    DS["<b>Dataset</b><br>games_clean:<br>columnes i mètriques"] --> DATA["<b>Pestanya Data</b><br>què es calcula:<br>dimensió, mètrica,<br>filtre, granularitat temporal, ordre"]
    DATA -- "Superset escriu<br>el SQL" --> RES["<b>Resultats</b><br>les files que hi ha<br>darrere del gràfic"]
    RES --> CUS["<b>Pestanya Customize</b><br>com es veu:<br>títols, formats,<br>llegenda, colors"]
    CUS --> CH["<b>El gràfic</b><br>(el HUD)"]

La frase que cal recordar: els títols i l'aspecte viuen a *Customize; el que es compta, els filtres, l'ordre i les anotacions viuen a *Data. La majoria de la gent que es perd a Superset està buscant a la pestanya equivocada.

Què es dibuixa: dimensió, mètrica, filtre, granularitat temporal¶

Un gràfic és una consulta amb un dibuix a sobre. Agafa la consulta que escrius des de la Unitat 1:

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

Té dues meitats, i Explore té un control per a cadascuna.

Una dimensió és la columna per la qual agrupes: allò que representa cada barra, punt o sector. Una mètrica és l'agregat calculat per a cada grup: COUNT, AVG, SUM.

La granularitat temporal (time grain) és la mida dels passos de temps en què s'agrupa una columna de data. El mateix release_date dibuixat amb granularitat Year dona 15 punts; amb granularitat Month dona un punt per mes.

Aquesta és la recepta del gràfic del tema d'obertura, el que vas desar a Gràfics de barres i de línies com a UT3 · Games released per year:

El pas 4 és el motiu pel qual les Unitats 1 i 2 van importar: pots llegir què fa l'eina, i comprovar-ho.

Els sis botons¶

Cada botó respon una pregunta que faria el desconegut del xat del grup.

Botó 1: un títol que digui la conclusió¶

Games per year és una recepta: diu què s'ha cuinat. Els títols d'eix ja fan això. El títol és el primer que llegeix qualsevol persona, així que gasta'l en la conclusió: què ha de veure el lector?

Una prova ràpida: una conclusió té un verb. I ha de ser certa: Big Fish Games té 284 jocs i SEGA 141, i 284 ÷ 141 = 2.01, així que "el doble" és honest.

Botó 2: títols d'eix¶

Un títol d'eix diu què es compta i en quina unitat: Release year, Games released. Sense ell, un nombre a l'eix és només un nombre.

No tots els eixos en necessiten un. En un gràfic de barres d'editors, l'eix amb els noms no necessita títol: SEGA i Ubisoft s'expliquen sols. L'eix amb els nombres sempre en necessita.

Botó 3: formats de nombre¶

Un format de nombre és un codi curt que diu al gràfic com escriure un nombre: amb separadors de milers, com a percentatge, com a diners.

Per defecte Superset usa el format adaptatiu (Adaptive formatting), que escurça els nombres: és el que escriu 8,845 com 8.85k. Bo per a un primer cop d'ull, dolent per a un lector que vol la xifra. Tres formats són suficients per a tot el curs:

Aquests codis vénen d'un petit llenguatge estàndard anomenat format D3. Superset llista ,d i $,.2f al desplegable amb un exemple al costat de cadascun. El de percentatge apareix com ,.1%; també pots escriure .1% i prémer Enter.

Botó 4: l'ordre¶

L'ordre és la primera comparació que fa l'ull. Aquí tens els deu editors més grans de games_clean, dues vegades. Les mateixes deu barres, els mateixos nombres:

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

%%{init: {"themeVariables": {"xyChart": {"plotColorPalette": "#4051b5"}}}}%%
xychart-beta horizontal
    title "Jocs publicats (ordenat per valor)"
    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 publicats" 0 --> 300
    bar [284, 141, 129, 123, 95, 94, 92, 89, 85, 84]

Hi ha tres ordres honestos. Tria el que demana la pregunta:

Botó 5: color i llegenda¶

Una llegenda és la petita clau que diu quin color és quina sèrie. Una sèrie és una línia, o un conjunt de barres, del gràfic.

Una llegenda respon exactament una pregunta: "quin color és quin?" Així que compta primer les sèries.

Afegeix owners_tier a Dimensions i la línia única es converteix en tres. Ara la llegenda es guanya el lloc:

La mateixa lògica governa el color. El color serveix per distingir coses. Una sèrie, un color. Deu barres de la mateixa cosa, un color. Un Color Scheme es tria a propòsit: el que fa que les sèries siguin més fàcils de distingir, no el que té més colors.

Botó 6: una anotació¶

És molt, 1,352 jocs en un any? No ho pots dir sense alguna cosa amb què comparar.

Una anotació és una marca que tu afegeixes damunt de les dades, una línia de referència o una data etiquetada, perquè el lector tingui alguna cosa amb què comparar.

La més simple és una línia horitzontal a la mitjana. Per als 15 anys de 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;

El resultat és 1778.9, així que la línia va a 1,779. Un cop dibuixada, el lector veu d'un cop d'ull que només quatre anys hi són per sobre: del 2015 al 2018.

Una anotació no forma part de les dades. Dona-li un nom que digui què és (Average year: 1,779 games), perquè ningú la prengui per una altra sèrie.

Prova-ho: tres gràfics que passen la prova¶

Necessites tres gràfics desats en lliçons anteriors: UT3 · Games released per year i UT3 · Top 10 publishers de Gràfics de barres i de línies, i UT3 · Price band by owners tier de Triar el gràfic adequat. Cap dels tres passa encara la prova de la captura de pantalla.

Tasca 1: el gràfic de línies dels jocs per any. Obre UT3 · Games released per year des de Charts.

Per què el pas 4 va primer: un joc de la taula no té data de publicació. Si encara és a la consulta, la línia de la fórmula comença el 1970 i aixafa els teus 15 anys contra la vora dreta del gràfic.

Tasca 2: el gràfic de barres d'editors. Obre UT3 · Top 10 publishers.

Tasca 3: tres línies, una llegenda. Torna a obrir el gràfic de la Tasca 1.

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

Quan acabis, fes la prova de la captura de pantalla de veritat. Deixa el gràfic de la Tasca 1 a la pantalla i fes tres preguntes a un company, sense explicar res: Què es compta? Entre quins anys? Quina és l'única cosa que vull que vegis? Cada resposta equivocada assenyala un botó que has oblidat.

Idees clau¶

• La prova de la captura de pantalla: un gràfic ha de poder llegir-lo un desconegut, sol. Tot el que no estigui escrit dins de la imatge es perd.
• A la vista Explore, la pestanya Data decideix què es calcula (dimensió, mètrica, filtre, granularitat temporal, ordre, anotacions) i la pestanya Customize decideix com es veu (títols, formats, llegenda, colors).
• El títol diu la conclusió, amb un verb. Els títols d'eix diuen què es compta i en quina unitat.
• Un format de nombre canvia com s'escriu un nombre, mai el nombre: ,d per a recomptes, .1% per a proporcions, $,.2f per a diners.
• Ordena per valor, per temps o per ordre natural. L'ordre alfabètic respon una pregunta que ningú no ha fet.
• Una llegenda serveix per distingir sèries: desactivada amb una sèrie, activada (i a dalt) amb diverses. Una anotació dona al lector alguna cosa amb què comparar.

Comprovació ràpida¶

Els teus gràfics ja es poden explicar sols. Però els mateixos botons que fan un gràfic clar poden fer-lo mentir: una sola marca a un eix i una diferència petita sembla enorme. A continuació: Gràfics enganyosos, on aprendràs els trucs per dins.