Gráfico de puntos de Cleveland
Comparar valores ordenados con poca tinta.
Definición
El gráfico de puntos de Cleveland pone un ítem por fila, ordenados, con un punto en su valor y una línea fina que sale del cero. Se lee de arriba abajo: el orden es el mensaje y la distancia al cero se compara entre filas. Sirve para clasificaciones e índices con bastantes ítems, donde las barras cargarían demasiado la página.
- Datos
- category · value
- Buena para
- Ordenar muchos ítems por un valor y ver cuánto se separa cada uno de los demás.
- Evítala cuando
- Cuando el cero no tiene sentido en la medida: el eje arranca en cero y lo que se lee es la longitud desde ahí.
- Se lee bien
- Entre 3 y 25 elementos; dibuja hasta 300
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
category · opcional | string | El ítem que se ordena. Rotula la fila; sin ella la fila sale sin nombre (findStringColumn devuelve null y el chart sigue). |
value · opcional | number | La magnitud que ordena y fija la longitud desde el cero. Una celda vacía se lee como 0, no como hueco. |
Tamaños
Recompuesta, no encogida
El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.
Cuándo usarla
Tres preguntas antes de elegirla
¿Hay un solo valor por ítem?
Si cada ítem tiene dos valores —antes y después, dos grupos—, unas mancuernas enseñan la distancia entre ellos.
Sí: quédate con gráfico de puntos de cleveland
No: usa Gráfico de mancuernas
¿Son bastantes ítems como para que las barras pesen?
Con pocas categorías y nombres largos, las barras horizontales se leen igual de bien y con más presencia.
Sí: quédate con gráfico de puntos de cleveland
No: usa Gráfico de barras horizontales
¿Importa más el orden que la cifra exacta?
Si el lector necesita consultar la cifra de cada ítem, una tabla con marcas en las celdas lo sirve mejor.
Sí: quédate con gráfico de puntos de cleveland
No: usa Tabla gráfica
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('cleveland');
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é hay una línea desde el cero?
Porque lo que se mide es la longitud desde el cero hasta el punto. La línea ayuda a comparar filas alejadas sin la masa de tinta de una barra.
¿Cuántos ítems admite?
Se lee bien entre 3 y 25 ítems. Por debajo, unas barras dicen lo mismo con más claridad; por encima, conviene agrupar o filtrar.
¿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?
El motor la recompone a 360 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «quién va primero»
Gráfico de piruletacomparar valores con menos tinta que barras
Gráfico de rankingcambios de puesto a lo largo del tiempo
Importancia de variablesqué variables pesan más en un modelo- Gráfico de barras horizontalescomparar categorías con nombres largos
Cuadro de eliminatoriascruces y avance de un torneo
Curva de la ballenaqué clientes aportan o restan beneficio