Pedir acceso

Storyboard de datos

Secuencia de escenas con una cifra cada una.

Definición

El storyboard de datos cuenta una experiencia como una tira de viñetas, una por momento, en el orden en que se vive. Bajo cada viñeta, una pista marca el ánimo medido al terminar ese momento, y el peor se señala con su número. Se usa para explicar la experiencia de un cliente o un empleado y dónde se hunde.

Editar con tus datosSVGSpec JSON
La noche se hunde donde no hay cola que contar
Datos
category · value · label
Buena para
Señalar en qué momento de una experiencia cae el ánimo y con qué cifra.
Evítala cuando
Cuando los momentos tienen duraciones muy distintas y eso importa: todas las viñetas miden igual.
Se lee bien
Entre 3 y 8 elementos; dibuja hasta 14
Datos que faltan
Se niega a dibujar y dice qué valor falta.
Accesibilidad
Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

ColumnaTipoPara qué
categorystringLa ESCENA de la viñeta: lo que se ve en ese momento. Es la identidad de la fila, y el orden de las filas es el orden en que se vive la experiencia — no se reordena por ánimo, porque eso sería un ranking de momentos y lo hace «bar-horizontal». Una fila con ánimo y sin escena FALLA: una viñeta sin escena es un marco vacío con una cifra debajo.
valuenumberEl ánimo declarado al terminar ese momento: la ÚNICA cifra que esta forma dibuja. Se lee tal cual llega y se rotula como número desnudo — un NPS de −100 a 100 o un CSAT en tanto por uno se dibujan bien y no se les pega unidad ninguna. Un hueco aquí FALLA con la cifra: saltar la fila renumeraría las viñetas siguientes y uniría en la pista dos momentos que no son consecutivos.
label · opcionalstringEl PIE de la viñeta: lo que la persona dice o piensa en ese momento. Opcional — sin él la viñeta se dibuja con la escena sola y la tira reparte el alto que sobra entre las escenas.

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 sus rótulos no caben sin pisarse o recortarse, y el motor no la publica así. 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

¿El orden de los momentos forma parte del mensaje?

Si sólo importa cuál es el peor, unas barras ordenadas lo dicen sin la secuencia.

Sí: quédate con storyboard de datos

No: usa Gráfico de barras horizontales

¿Tienes una cifra de ánimo medida para cada momento?

Si sólo quieres describir las etapas, sin medir, el recorrido por etapas no finge datos.

Sí: quédate con storyboard de datos

No: usa Recorrido por etapas

¿Lo que mides es cómo se siente la persona, no cuántas llegan a cada paso?

Si cuentas cuántos usuarios pasan de un paso al siguiente, es un embudo de conversión.

Sí: quédate con storyboard de datos

No: usa Embudo de conversión

Código

La misma pieza, con tus datos

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

const spec = await getPreset('storyboard');
spec.data.rows = misFilas; // category, value
const { svg, warnings } = await renderComposition(spec);

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

Dudas

¿Por qué todas las viñetas miden igual?

Porque la tira es una secuencia, no un reloj. La única marca proporcional es el ánimo.

¿Qué escala usa el ánimo?

La que va del mínimo al máximo de tus propios datos, y la cifra se rotula sin unidad. Así vale igual para un NPS que para un CSAT.

¿Es obligatorio el pie de cada viñeta?

No. Si no hay lo que la persona dice o piensa, la viñeta se dibuja sólo con la escena.

¿Qué hace si faltan datos?

Se niega a dibujar y dice qué valor falta.

¿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 «flujos y recorridos»

Guía para elegir: flujos y recorridos →