Streamgraph

Evolución de varias categorías con flujo orgánico.

Definición

El streamgraph apila varias series a lo largo del tiempo alrededor de un centro, sin línea base en el cero. Lo que se lee es el grosor de cada capa: cuánto crece o mengua cada categoría y cuándo. Se usa para la evolución de géneros, temas o fuentes cuando importa el conjunto más que la cifra exacta.

Editar con tus datos SVG Spec JSON

Datos: x · series
Buena para: Ver cómo crece y mengua el peso de muchas categorías a lo largo del tiempo.
Evítala cuando: Cuando hay que leer el total o valores concretos: sin eje desde cero no hay dónde medirlos.
Se lee bien: Entre 5 y 50 elementos; dibuja hasta 3000
Datos que faltan: Dibuja el valor ausente como cero.
Accesibilidad: Lector de pantalla: resumen en texto

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`x` · opcional	number	El instante de cada fila. Si ninguna columna casa, vale 0 en todas las filas y el flujo se apila sobre un único instante.
`series` · opcional	number	Una capa por cada columna numérica que no sea la del tiempo, en el orden del fichero.

Tamaños

Ancha por necesidad

Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.

A menos de 480 px el motor se niega y explica por qué: el eje X no puede pintar «2015»: mide 33.7 px y solo tiene 30. Es una CIFRA, así que no se elide —«201…» sería otro número—. Sube `dimensions.width (o baja `num. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.

Cuándo usarla

Tres preguntas antes de elegirla

¿Importa el grosor de cada capa más que el total?

Si el total también cuenta, las áreas apiladas lo leen contra un eje desde cero.

Sí: quédate con streamgraph

No: usa Áreas apiladas

¿Basta con ver qué capa crece y cuál mengua, sin valores exactos?

Si hay que leer cifras, un gráfico de líneas las da con eje.

Sí: quédate con streamgraph

No: usa Gráfico de líneas

¿Interesa el volumen de cada categoría, no su puesto en cada momento?

Si la pregunta es quién va primero en cada periodo, el gráfico de ranking lo enseña.

Sí: quédate con streamgraph

No: usa Gráfico de ranking

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('stream');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Por qué no hay línea base?

Para que ninguna serie tenga el privilegio de apoyarse en el cero: todas se comparan por grosor.

¿Qué columna es el tiempo?

Una columna numérica llamada «year», «date», «time» o «period»; si ninguna se llama así, la pieza toma la primera columna numérica como instante. Cada columna numérica restante es una capa, en el orden del fichero.

¿Qué hace si faltan datos?

Dibuja el valor ausente como cero. Si un hueco no es un cero en tus datos, rellénalo o elimina la fila antes de dibujar.

¿Cómo se ve en el móvil?

A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.

Relacionadas

Otras formas de responder «cómo cambia en el tiempo»

Guía para elegir: cómo cambia en el tiempo →