Gráficos de barras y de líneas¶

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

Termina la partida y el juego te muestra dos pantallas. La primera es la clasificación: todos los jugadores ordenados por puntuación, el mejor arriba. La segunda es la cronología de la partida: qué pasó minuto a minuto, cuándo llegaron las bajas, cuándo se hundió tu equipo.

Dos pantallas, dos preguntas distintas. ¿Quién va primero? y ¿qué pasó con el tiempo? Nadie las confunde: una clasificación dibujada como cronología no tendría ningún sentido.

Esas dos pantallas son los dos gráficos que más vas a usar en tu vida: el gráfico de barras y el gráfico de líneas. Esta lección trata de construir ambos a partir de games_clean, y de la pregunta que decide cuál de los dos necesitas.

Dimensión y métrica: las dos mitades de todo gráfico¶

En Percepción visual construiste tu primer gráfico, juegos por tramo de precio. Detrás hay una consulta que habrías podido escribir en la Unidad 1:

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

Esa consulta tiene dos mitades, y también la tiene todo gráfico que construyas jamás.

Una dimensión es aquello por lo que agrupas: la columna cuyos valores se convierten en las barras, los puntos o los sectores.

Una métrica es lo que calculas para cada grupo: un recuento, una media, una suma.

flowchart LR
    D["<b>Dimensión</b><br>price_band<br>(los nombres de los jugadores)"] --> Q["<b>GROUP BY</b> + agregado<br>Superset escribe el SQL"]
    M["<b>Métrica</b><br>COUNT(*)<br>(la puntuación)"] --> Q
    Q --> C["<b>Gráfico</b><br>una barra por grupo,<br>altura de la barra = métrica"]

La vista Explore¶

Todo gráfico de Superset se construye en una sola pantalla, la vista Explore. Abre desde Charts tu gráfico guardado UT3 · Games by price band y míralo de izquierda a derecha. Tiene cuatro zonas:

La pestaña Data es la consulta. La pestaña Customize es la pintura. Hoy trabajas casi solo en Data; la pintura tiene su propia lección, Configurar gráficos en Superset.

El gráfico de barras: una clasificación¶

Un gráfico de barras dibuja una barra por categoría. La longitud de la barra es la métrica. Responde a la pregunta ¿qué categoría es mayor?

Un gráfico de barras es una clasificación. La dimensión es una lista de categorías: valores sin punto intermedio, como editoras, tramos de precio o tipos de Pokémon. Cada una recibe una barra, todas las barras arrancan de la misma línea y comparas dónde acaban. Eso es posición sobre una escala común, rango 1 en la tabla de Cleveland y McGill.

Aquí tienes la clasificación de editoras (publishers) de Steam: las diez que han publicado más juegos en games_clean.

%%{init: {"themeVariables": {"xyChart": {"plotColorPalette": "#4051b5"}}}}%%
xychart-beta horizontal
    title "Top 10 editoras por número de juegos en 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 "Juegos" 0 --> 300
    bar [284, 141, 129, 123, 95, 94, 92, 89, 85, 84]

Dos decisiones hicieron legible este gráfico, y ninguna tiene que ver con el color:

El jugador fantasma llamado Unknown¶

Si construyes ese top 10 sin pensar, la quinta barra es una editora llamada Unknown, con 120 juegos.

¿Es Unknown una editora? No. Es la etiqueta que diste a los juegos sin editora cuando limpiaste los datos en la Unidad 2. En una clasificación es un jugador fantasma: 120 juegos que no pertenecen a nadie en concreto, plantados en quinto lugar.

Tienes dos opciones honestas:

Lo que no puedes hacer es dejarla ahí en silencio y dejar que el lector piense que existe una empresa llamada Unknown.

El gráfico de líneas: una cronología¶

Un gráfico de líneas coloca un punto por cada momento del tiempo y une los puntos con una línea. Responde a la pregunta ¿cómo ha cambiado esto con el tiempo?

Un gráfico de líneas es la cronología de la partida. Su dimensión no es una lista de categorías. Es el tiempo, y el tiempo tiene dos propiedades que las categorías no tienen: tiene un orden y es continuo. Entre 2016 y 2018 hay un 2017.

Eso es lo que significa la línea. Unir dos puntos le dice al ojo: estos están conectados, lee la pendiente. Muy empinada hacia arriba, crecimiento rápido. Plana, no pasó nada.

Aquí tienes los juegos publicados en Steam cada año, a partir de la columna release_date:

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

Lee la pendiente. Diez años de casi nada: 53 juegos en 2004, 556 en 2013. Luego la línea despega: 1,352 en 2014 y 8,845 en 2018.

Granularidad temporal: el zoom de la cronología¶

Una columna de fecha contiene días. Para dibujar una línea debes decidir cómo agrupar esos días: por año, por trimestre, por mes.

La granularidad temporal (time grain) es el tamaño del paso de tiempo en el eje X: cada punto de la línea suma todo lo que ocurrió dentro de un paso.

Cambia la granularidad de año a mes y los mismos datos dibujan otra imagen:

La línea por años decía "explotó". La línea por meses muestra cuándo, dentro de cada año. El punto más alto es marzo de 2018, con 853 juegos, seguido de mayo de 2018 (796), noviembre de 2018 (790) y octubre de 2017 (768).

¿Barras o líneas? Una pregunta decide¶

El tipo de gráfico sigue a la dimensión. Pregunta una sola cosa: ¿hay algo entre dos valores vecinos?

flowchart TB
    Q{"¿Qué hay en el eje X?"}
    Q -- "Categorías:<br>editoras, tramos, tipos" --> B["<b>Gráfico de barras</b><br>(la clasificación)<br>compara alturas"]
    Q -- "Tiempo:<br>días, meses, años" --> L["<b>Gráfico de líneas</b><br>(la cronología)<br>lee la pendiente"]

¿Qué pasa si ignoras la regla? Aquí tienes la clasificación de editoras dibujada como línea. Este gráfico está mal a propósito.

%%{init: {"themeVariables": {"xyChart": {"plotColorPalette": "#4051b5"}}}}%%
xychart-beta
    title "Mal a propósito: una línea que cruza categorías"
    x-axis ["Big Fish", "SEGA", "Strategy First", "Ubisoft", "Square Enix", "Sekai Project"]
    y-axis "Juegos" 0 --> 300
    line [284, 141, 129, 123, 95, 94]

Tu ojo lee una caída dramática y luego un declive lento. ¿Un declive de qué? No hay camino de Big Fish Games a SEGA. A medio camino entre ellas no hay ninguna empresa con 212 juegos. La línea conecta cosas que no están conectadas, y la "tendencia" existe solo por el orden que alguien eligió para los nombres.

Pruébalo: la clasificación y la cronología¶

Ambos gráficos usan el dataset games_clean (consulta Recursos para los datos).

Gráfico 2 — Top 10 editoras. ¿Qué editoras han publicado más juegos en Steam?

El gráfico debe coincidir con esta consulta:

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

Gráfico 3 — Juegos publicados por año. ¿Cómo ha cambiado el número de lanzamientos entre 2004 y 2018?

La línea no dibuja puntos por defecto: marca Customize, Marker si quieres ver los 15 puntos. Cuando pasas el ratón, el cuadro redondea el valor (8.85k para 2018); el número exacto está en Results, debajo del gráfico.

Ideas clave¶

• Todo gráfico tiene una dimensión (aquello por lo que agrupas, la columna del GROUP BY) y una métrica (lo que calculas, el agregado). Superset escribe el SQL; View query te lo muestra.
• La vista Explore tiene cuatro zonas: panel del dataset, pestaña Data (qué se calcula), pestaña Customize (cómo se ve), gráfico y resultados.
• Un gráfico de barras compara categorías: es la clasificación. Ordénalo por valor, y hazlo horizontal cuando los nombres sean largos.
• Un gráfico de líneas muestra el cambio en el tiempo: es la cronología. La línea dice "estos puntos están conectados, lee la pendiente".
• La granularidad temporal es el zoom de la cronología. Año y mes muestran las mismas filas con una pregunta distinta.
• Una línea que cruza categorías inventa una tendencia. Una etiqueta como Unknown no es una categoría real: fíltrala o explícala.

Comprobación rápida¶

Una barra por categoría funciona cuando las categorías ya existen. Pero ¿y si el eje X es un número con cientos de valores distintos, como un precio? Una barra por cada precio exacto sería ilegible. Ese es el trabajo del siguiente gráfico: Histograma y diagrama de dispersión.