Configurar gráficos en Superset¶

Ejercicio configuring-charts-annex.pdf · PDF

Haces un gráfico de líneas con los juegos publicados en Steam cada año. Es el gráfico correcto: evolución, una línea. Lo pegas en el chat de grupo de clase, sin ningún mensaje. Treinta segundos después: "¿Qué está contando esto?" "¿Juegos de qué?" "¿Qué años?" "¿8.85k qué?" "Entonces... ¿qué se supone que tengo que ver?"

El gráfico era correcto y nadie podía leerlo. Elegir el gráfico adecuado era el trabajo de Elegir el gráfico adecuado. Hacerlo legible es el trabajo de hoy.

La prueba de la captura de pantalla¶

En el juego de crafteo de este módulo, un gráfico forma parte del HUD: la barra de vida, el minimapa, la puntuación. Nadie pausa una partida para explicar qué es la barra roja. Si el HUD necesita un manual, el HUD está roto.

Tus gráficos viven lo mismo. Un gráfico sale de casa. Alguien hace una captura de pantalla y la pega en un chat, en una diapositiva, en un informe. Tú no estarás ahí para explicarlo. Todo lo que no esté escrito dentro de la imagen se pierde.

La prueba de la captura de pantalla: ¿podría un desconocido leer este gráfico solo, sin pie de figura y sin nadie a quien preguntar?

Aquí tienes el mismo gráfico, de la misma consulta, antes y después de la prueba. El de la izquierda es lo que la herramienta dibuja por sí sola. Al de la derecha se le han cambiado seis cosas pequeñas.

Los dos paneles están redibujados a partir de los datos de clase, no son capturas. Cada diferencia entre ellos responde a una pregunta que haría un desconocido. Esas seis diferencias son los seis mandos de esta lección.

La vista Explore: donde vive todo¶

La vista Explore es la pantalla donde Superset construye un gráfico a partir de un dataset. Se llega desde Charts → + Chart, o abriendo cualquier gráfico guardado.

Léela de izquierda a derecha. Tiene cuatro zonas:

flowchart LR
    DS["<b>Dataset</b><br>games_clean:<br>columnas y métricas"] --> DATA["<b>Pestaña Data</b><br>qué se calcula:<br>dimensión, métrica,<br>filtro, granularidad temporal, orden"]
    DATA -- "Superset escribe<br>el SQL" --> RES["<b>Resultados</b><br>las filas detrás<br>del gráfico"]
    RES --> CUS["<b>Pestaña Customize</b><br>cómo se ve:<br>títulos, formatos,<br>leyenda, colores"]
    CUS --> CH["<b>El gráfico</b><br>(el HUD)"]

La frase que hay que recordar: los títulos y el aspecto viven en *Customize; lo que se cuenta, los filtros, el orden y las anotaciones viven en *Data. La mayoría de la gente que se pierde en Superset está buscando en la pestaña equivocada.

Qué se dibuja: dimensión, métrica, filtro, granularidad temporal¶

Un gráfico es una consulta con un dibujo encima. Toma la consulta que escribes desde la Unidad 1:

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

Tiene dos mitades, y Explore tiene un control para cada una.

Una dimensión es la columna por la que agrupas: aquello que representa cada barra, punto o sector. Una métrica es el agregado calculado para cada grupo: COUNT, AVG, SUM.

La granularidad temporal (time grain) es el tamaño de los pasos de tiempo en que se agrupa una columna de fecha. El mismo release_date dibujado con granularidad Year da 15 puntos; con granularidad Month da un punto por mes.

Esta es la receta del gráfico del gancho, el que guardaste en Gráficos de barras y de líneas como UT3 · Games released per year:

El paso 4 es la razón por la que las Unidades 1 y 2 importaban: puedes leer lo que hace la herramienta, y comprobarlo.

Los seis mandos¶

Cada mando responde a una pregunta que haría el desconocido del chat de grupo.

Mando 1: un título que enuncia el hallazgo¶

Games per year es una receta: dice qué se ha cocinado. Los títulos de los ejes ya hacen eso. El título es lo primero que lee cualquiera, así que gástalo en el hallazgo: ¿qué debe ver el lector?

Una prueba rápida: un hallazgo tiene un verbo. Y tiene que ser verdad: Big Fish Games tiene 284 juegos y SEGA 141, y 284 ÷ 141 = 2.01, así que "twice as many" es honesto.

Mando 2: títulos de ejes¶

Un título de eje dice qué se cuenta y en qué unidad: Release year, Games released. Sin él, un número en el eje es solo un número.

No todos los ejes necesitan uno. En un gráfico de barras de editoras, el eje con los nombres no necesita título: SEGA y Ubisoft se explican solos. El eje con los números siempre lo necesita.

Mando 3: formatos numéricos¶

Un formato numérico es un código corto que le dice al gráfico cómo escribir un número: con separadores de miles, como porcentaje, como dinero.

Por defecto Superset usa Adaptive formatting, que acorta los números: es el que escribe 8,845 como 8.85k. Bueno para un primer vistazo, malo para un lector que quiere la cifra. Tres formatos bastan para todo el curso:

Estos códigos vienen de un pequeño lenguaje estándar llamado formato D3. Superset lista ,d y $,.2f en el desplegable con un ejemplo al lado de cada uno. El del porcentaje aparece como ,.1%; también puedes escribir .1% y pulsar Enter.

Mando 4: orden¶

El orden es la primera comparación que hace el ojo. Aquí tienes las diez mayores editoras de games_clean, dos veces. Las mismas diez barras, los mismos números:

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

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

Hay tres órdenes honestos. Elige el que pide la pregunta:

Mando 5: color y leyenda¶

Una leyenda es la pequeña clave que dice qué color es cada serie. Una serie es una línea, o un conjunto de barras, del gráfico.

Una leyenda responde exactamente a una pregunta: "¿qué color es cuál?" Así que cuenta primero tus series.

Añade owners_tier a Dimensions y la línea única se convierte en tres. Ahora la leyenda se gana su sitio:

La misma lógica rige el color. El color sirve para distinguir cosas. Una serie, un color. Diez barras de lo mismo, un color. Un Color Scheme se elige a propósito: el que hace más fáciles de distinguir las series, no el que tiene más colores.

Mando 6: una anotación¶

¿Son muchos 1,352 juegos en un año? No puedes decirlo sin algo con lo que comparar.

Una anotación es una marca que tú añades encima de los datos, una línea de referencia o una fecha etiquetada, para que el lector tenga algo con lo que comparar.

La más simple es una línea horizontal en la media. Para los 15 años 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 resultado es 1778.9, así que la línea va en 1,779. Una vez dibujada, el lector ve de un vistazo que solo cuatro años quedan por encima: de 2015 a 2018.

Una anotación no forma parte de los datos. Ponle un nombre que diga lo que es (Average year: 1,779 games), para que nadie la confunda con otra serie.

Pruébalo: tres gráficos que pasan la prueba¶

Necesitas tres gráficos guardados en lecciones anteriores: UT3 · Games released per year y UT3 · Top 10 publishers de Gráficos de barras y de líneas, y UT3 · Price band by owners tier de Elegir el gráfico adecuado. Ninguno pasa todavía la prueba de la captura de pantalla.

Tarea 1: el gráfico de líneas de juegos por año. Abre UT3 · Games released per year desde Charts.

Por qué el paso 4 va primero: un juego de la tabla no tiene fecha de lanzamiento. Con él todavía en la consulta, la línea de la fórmula empieza en 1970 y aprieta tus 15 años contra el borde derecho del gráfico.

Tarea 2: el gráfico de barras de editoras. Abre UT3 · Top 10 publishers.

Tarea 3: tres líneas, una leyenda. Abre otra vez el gráfico de la Tarea 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

Cuando termines, haz la prueba de la captura de pantalla de verdad. Deja en pantalla el gráfico de la Tarea 1 y hazle tres preguntas a un compañero, sin explicar nada: ¿Qué se está contando? ¿Entre qué años? ¿Cuál es la única cosa que quiero que veas? Cada respuesta equivocada señala un mando que olvidaste.

Ideas clave¶

• La prueba de la captura de pantalla: un gráfico tiene que poder leerlo un desconocido, solo. Todo lo que no esté escrito dentro de la imagen se pierde.
• En la vista Explore, la pestaña Data decide qué se calcula (dimensión, métrica, filtro, granularidad temporal, orden, anotaciones) y la pestaña Customize decide cómo se ve (títulos, formatos, leyenda, colores).
• El título enuncia el hallazgo, con un verbo. Los títulos de ejes dicen qué se cuenta y en qué unidad.
• Un formato numérico cambia cómo se escribe un número, nunca el número: ,d para recuentos, .1% para proporciones, $,.2f para dinero.
• Ordena por valor, por tiempo o por orden natural. El orden alfabético responde a una pregunta que nadie ha hecho.
• Una leyenda sirve para distinguir series: desactivada con una serie, activada (y arriba) con varias. Una anotación da al lector algo con lo que comparar.

Comprobación rápida¶

Tus gráficos ya pueden explicarse solos. Pero los mismos mandos que hacen claro un gráfico pueden hacerlo mentir: una marca en un eje y una diferencia pequeña parece enorme. A continuación: Gráficos engañosos, donde aprendes los trucos desde dentro.