Círculos anidados

Mercado total, alcanzable y objetivo.

Definición

Unos círculos anidados dibujan dos a cuatro niveles contenidos uno en otro, como mercado total, servible y alcanzable, con el área de cada círculo proporcional a su tamaño. Se lee de fuera adentro, cada nivel como parte del anterior. Se usa sobre todo para presentar TAM, SAM y SOM.

Editar con tus datos SVG Spec JSON

Datos: label · value · sub
Buena para: Enseñar que un tamaño está contenido en otro y cuánto representa de él.
Evítala cuando: Cuando los conjuntos se solapan sólo en parte: esta figura sólo afirma pertenencia.
Se lee bien: Entre 2 y 4 elementos; dibuja hasta 6
Datos que faltan: Omite el valor ausente y lo declara aparte.
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 nivel (TAM / SAM / SOM). Sin una columna de texto la pieza devuelve [].
`value` · opcional	number	PRIMERA columna numérica por posición: el ÁREA del círculo, no su radio.
`sub` · opcional	string	Segunda línea dentro de la forma. Se prefiere una columna llamada exactamente «sub»; si no, cualquier otra de texto.

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 · 408 × 613 px

Escritorio · 848 × 802 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Cada nivel está contenido entero en el anterior?

Si los conjuntos se solapan sólo en parte, hay que dibujar las intersecciones.

Sí: quédate con círculos anidados

No: usa Diagrama de Venn

¿Son tres o cuatro niveles?

Si hay muchos grupos con jerarquía, se empaquetan los círculos.

Sí: quédate con círculos anidados

No: usa Empaquetado de círculos

¿Basta con ver el orden de magnitud?

Si hay que leer razones exactas entre niveles, las barras se comparan mejor que las áreas.

Sí: quédate con círculos anidados

No: usa Gráfico de barras horizontales

Código

La misma pieza, con tus datos

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

const spec = await getPreset('nested-circles');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);

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