Columnas enfrentadas

Contrastar dos o más posturas.

Definición

Las columnas enfrentadas ponen de dos a cuatro posturas en columnas del mismo ancho, cada una con su cabecera, sus fichas y, si hace falta, una cifra grande y su procedencia al pie. Las columnas no comparten eje: se comparan leyendo, no midiendo. Sirve para antes y después, opción A frente a B o modelos alternativos.

Editar con tus datos SVG Spec JSON

Lo que cambia no es el modelo: es la base contra la que se le mide

Datos: columna · cuerpo · hero · nota · rol
Buena para: Contrastar dos o más maneras de hacer lo mismo, punto por punto.
Evítala cuando: Cuando las cifras de una columna tienen que compararse con las de otra: la pieza las imprime tal cual, sin escala común.
Se lee bien: Entre 2 y 4 elementos; dibuja hasta 4
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

Columna	Tipo	Para qué
`columna`	string	La cabecera de la columna, y la clave que agrupa sus filas. Obligatoria EN TODAS las filas: una columna sin cabecera hace FALLAR con su número.
`cuerpo` · opcional	string	Las fichas apiladas dentro de la columna.
`hero` · opcional	string	La cifra grande de la columna. Se imprime tal cual: la pieza no la escala ni la compara con la de al lado, que es justamente el punto.
`nota` · opcional	string	La procedencia, al pie de la columna.
`rol` · opcional	string	neutro · foco · alerta · ausente · favorable. `ausente` dibuja la columna deliberadamente vacía.

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.

Móvil · 528 × 1095 px

Escritorio · 988 × 786 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Las cifras sirven de contexto y no de comparación?

Si el argumento es cuánto mayor es la cifra de una opción que la de otra, unas barras horizontales las ponen sobre la misma escala.

Sí: quédate con columnas enfrentadas

No: usa Gráfico de barras horizontales

¿Son pocas posturas, cuatro como mucho?

Con más opciones evaluadas por los mismos criterios, una tabla gráfica ordena mejor.

Sí: quédate con columnas enfrentadas

No: usa Tabla gráfica

¿Lo que interesa es en qué se diferencian?

Si interesa lo que comparten, el mapa de solapes lo enseña.

Sí: quédate con columnas enfrentadas

No: usa Mapa de solapes

Código

La misma pieza, con tus datos

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

const spec = await getPreset('concept-columns');
spec.data.rows = misFilas; // columna
const { svg, warnings } = await renderComposition(spec);

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