Diagrama ternario

Reparto en tres componentes que suman 100.

Definición

Un diagrama ternario sitúa cada ítem dentro de un triángulo según cómo reparte su total entre tres partes: cuanto más cerca de un vértice, más pesa esa parte. Se lee por la posición, no por el tamaño. Se usa para mezclas de energía, composición de suelos o reparto de ingresos entre tres líneas.

Editar con tus datos SVG Spec JSON

Los independientes no reparten: viven en la OTA

Datos: label · a · b · c · series
Buena para: Comparar el reparto entre tres componentes de muchos ítems a la vez.
Evítala cuando: Cuando importa el tamaño del total: dos ítems con el mismo reparto caen en el mismo punto aunque uno sea mil veces mayor.
Se lee bien: Entre 3 y 30 elementos; dibuja hasta 40
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é
`label` · opcional	string	El nombre del ítem — es lo que rotula el punto.
`a`	number	Primera parte del reparto — vértice SUPERIOR.
`b`	number	Segunda parte — vértice INFERIOR IZQUIERDO.
`c`	number	Tercera parte — vértice INFERIOR DERECHO.
`series` · opcional	string	Segmento que agrupa ítems por color; sin ella, una sola tinta y sin leyenda. `resuelveGrupo` acepta además los roles canónicos `group` y `color`, y en su defecto casa por nombre de columna (segmento, grupo, serie, tipo…).

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

¿Son exactamente tres partes?

Si el todo se reparte en más de tres componentes, las barras apiladas al 100 % los admiten.

Sí: quédate con diagrama ternario

No: usa Barras apiladas

¿Importa el reparto y no el tamaño?

Si también cuenta cuánto pesa cada ítem en el total, el ancho de las columnas puede llevarlo.

Sí: quédate con diagrama ternario

No: usa Gráfico de Marimekko

¿Las tres partes son de un mismo todo?

Si son tres variables independientes que no suman un total, dos ejes y un tamaño las enseñan mejor.

Sí: quédate con diagrama ternario

No: usa Gráfico de burbujas

Código

La misma pieza, con tus datos

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

const spec = await getPreset('ternary-plot');
spec.data.rows = misFilas; // a, b, c
const { svg, warnings } = await renderComposition(spec);

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

Dudas

¿Tienen que sumar 100 las tres partes?

No hace falta. Cada fila se normaliza con su propia suma antes de colocarse.

¿Por qué no se recorta el triángulo a la zona con puntos?

Para que cada vértice siga valiendo el 100 % y la posición se lea siempre igual.

¿Puedo distinguir grupos?

Sí, con una columna de segmento que colorea los ítems. Sin ella todo va en una sola tinta y sin leyenda.

¿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 «partes de un todo»

Guía para elegir: partes de un todo →