Empaquetado de círculos
Jerarquía como círculos dentro de círculos.
Definición
El empaquetado de círculos dibuja cada elemento como un círculo con área proporcional a su valor y lo mete dentro del círculo de su grupo. Primero se lee la pertenencia y después el tamaño dentro de cada grupo. Sirve para enseñar una jerarquía de categorías y elementos cuando importa más la forma del conjunto que la cifra exacta.
- Datos
- group · name · value
- Buena para
- Ver qué elementos pesan más dentro de cada grupo y cómo se agrupan.
- Evítala cuando
- Cuando hay que comparar elementos de grupos distintos o leer cifras: entre grupos el área deja de ser una comparación limpia.
- Se lee bien
- Entre 3 y 50 elementos; dibuja hasta 2000
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: resumen en texto · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
group · opcional | string | El círculo contenedor. Ausente (o igual que el nombre de la hoja) → un solo nivel: todas las hojas cuelgan de la raíz. |
name | string | La HOJA. Obligatoria de verdad: `requireColumn` lanza con la cifra si no está («sin hoja no hay nada que empaquetar»). Se pide POR NOMBRE a propósito, sin caída por tipo: caer a «la primera columna de texto» la hacía coincidir con el grupo y aplanaba el árbol. |
value · opcional | number | El ÁREA de la hoja. Ausente = 1 para todas, y entonces el dibujo no afirma nada sobre magnitudes: sólo cuenta hojas. |
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
¿Importa más a qué grupo pertenece cada elemento que su tamaño exacto?
Si hay que comparar tamaños con precisión, un treemap aprovecha todo el espacio con rectángulos.
Sí: quédate con empaquetado de círculos
No: usa Treemap
¿Bastan dos niveles de jerarquía?
Si hay varios niveles que se quieren leer desde el centro hacia fuera, el gráfico de rayos solares los dibuja en anillos.
Sí: quédate con empaquetado de círculos
No: usa Gráfico de rayos solares
¿Los elementos se comparan dentro de su grupo?
Si hay que comparar elementos de todos los grupos entre sí, unas barras horizontales ordenadas lo hacen sobre un único eje.
Sí: quédate con empaquetado de círculos
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('pack');
spec.data.rows = misFilas; // name
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Puedo comparar un círculo de un grupo con uno de otro grupo?
La pieza está pensada para comparar dentro de cada grupo, porque el círculo que contiene a los elementos fija de qué se habla. Entre grupos distintos, unas barras son más fiables.
¿Cuántos elementos admite?
Se lee bien entre 3 y 50.
¿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 «partes de un todo»
Anidamiento conceptualconceptos contenidos unos dentro de otros
Gráfico de anilloreparto de un total en pocas partes
Matriz de puntosresultados de casos individuales en cuadrícula
Descomposición DuPontdescomponer el ROE en sus factores
Gráfico de carámbanosjerarquía y pesos en bloques por niveles
Árbol con sangríasjerarquía detallada con su valor