Gráfico mariposa

Dos grupos opuestos comparados por categoría.

Definición

Un gráfico mariposa pone dos grupos espalda con espalda: las categorías en el centro y las barras de cada grupo hacia un lado, con la misma escala. Se lee comparando la longitud de las dos alas fila a fila y la silueta de cada lado. Se usa para comparar hombres y mujeres, dos años o dos segmentos de una encuesta sobre las mismas categorías.

Editar con tus datos SVG Spec JSON

En gestión de excepciones, «nada automatizada» (44%) supera a «totalmente» (4%)

Datos: category · low · high
Buena para: Ver en qué categorías se diferencian dos grupos que comparten la misma estructura.
Evítala cuando: Cuando hay más de dos grupos: sólo hay dos lados.
Se lee bien: Entre 3 y 15 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	La fila (el grupo de edad): la primera columna de texto. Sin ella las bandas salen sin rótulo.
`low` · opcional	number	1.ª numérica POR POSICIÓN: el ala IZQUIERDA.
`high` · opcional	number	2.ª numérica por posición: el ala DERECHA. Con menos de dos numéricas devuelve [] y cae a su demo.

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 «20»: mide 16.8 px y solo tiene 14. Es una CIFRA, así que no se elide —«20…» sería otro número—. Sube `dimensions.width (o baja `numTic. 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

¿Son exactamente dos grupos?

Con tres o más grupos, unas barras agrupadas los ponen uno junto a otro en cada categoría.

Sí: quédate con gráfico mariposa

No: usa Barras agrupadas

¿Interesa la forma de cada lado?

Si sólo importa la diferencia entre los dos valores de cada fila, el gráfico de mancuernas los pone en una misma escala.

Sí: quédate con gráfico mariposa

No: usa Gráfico de mancuernas

¿Cada lado es un grupo distinto?

Si es una sola medida con signo —a favor y en contra, por encima y por debajo—, las barras divergentes la parten desde cero.

Sí: quédate con gráfico mariposa

No: usa Barras divergentes

Código

La misma pieza, con tus datos

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

const spec = await getPreset('butterfly');
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

¿Las dos alas tienen la misma escala?

Sí. Por eso una asimetría entre lados es un hallazgo y no un efecto del encuadre.

¿Qué columnas necesita?

Una de texto con la categoría y dos numéricas: la primera va al ala izquierda y la segunda a la derecha.

¿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 se reparten los valores»

Guía para elegir: cómo se reparten los valores →