Gráfico de carámbanos

Jerarquía y pesos en bloques por niveles.

Definición

Un gráfico de carámbanos reparte un total en franjas, una por nivel de la jerarquía: el ancho de cada bloque es su parte del bloque padre. Se lee del total hacia las hojas, nivel a nivel. Se usa para presupuestos, estructuras de coste o cualquier árbol con valores.

Editar con tus datos SVG Spec JSON

Datos: parent · label · value · depth
Buena para: Ver a la vez el reparto de cada nivel de una jerarquía y de qué rama sale cada parte.
Evítala cuando: Cuando la jerarquía es muy profunda o con muchas hojas diminutas: los bloques finales se vuelven demasiado estrechos para rotular.
Se lee bien: Entre 3 y 40 elementos; dibuja hasta 260
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é
`parent` · opcional	string	Con Depth, la columna exacta Parent referencia un Name existente y la unica raiz tiene Parent vacio; no se inventan nodos. Sin Depth, nivel de agrupacion legado: ausente (o igual al nombre) deja las hojas bajo la raiz sintetica.
`label` · opcional	string	Con Depth, Name es el ID globalmente unico y no vacio de cada nodo, incluidas raiz y ramas. Sin Depth, nombre de hoja legado; si falta, usa el primer valor de cada fila.
`value` · opcional	number	Con Depth, Value es finito y no negativo: obligatorio en hojas; vacio o cero en internos, nunca un subtotal que se sumaria dos veces. Cero explicito se conserva y puede no superar el suelo visual de 1px. Sin Depth, falta de columna vale 1 por hoja y celda vacia conserva el zero-fill legado.
`depth` · opcional	number	Columna exacta opcional que selecciona Name/Depth/Parent/Value. En esa tabla es un entero seguro no negativo obligatorio en cada fila, igual a la profundidad real; raiz unica de profundidad 0. Las filas no necesitan estar ordenadas por padres.

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 · 568 × 483 px

Escritorio · 848 × 668 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Importa ver cada nivel de la jerarquía en su propia franja?

Si sólo cuentan las hojas y su peso, el treemap aprovecha mejor la superficie.

Sí: quédate con gráfico de carámbanos

No: usa Treemap

¿Prefieres bloques rectos alineados por nivel a un disco?

Si la jerarquía es corta y se busca una forma compacta, el gráfico de rayos solares la cierra en anillos.

Sí: quédate con gráfico de carámbanos

No: usa Gráfico de rayos solares

¿Pesa más la forma del reparto que la cifra exacta de cada partida?

Si hay que leer el valor de cada línea con su subtotal, el árbol con sangrías los alinea en una columna.

Sí: quédate con gráfico de carámbanos

No: usa Árbol con sangrías

Código

La misma pieza, con tus datos

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

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

¿Qué significa el ancho de un bloque?

Su parte del padre. Los hijos de un bloque ocupan exactamente su ancho, repartido según sus valores.

¿Y la profundidad?

Es jerarquía, no importancia: un bloque más abajo no pesa más ni menos por estar más abajo.

¿Puedo dar el subtotal en los nodos internos?

No en la tabla con profundidad: los nodos internos van vacíos o a cero y su tamaño sale de sus hojas. Un subtotal declarado se sumaría dos veces.

¿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»

Guía para elegir: partes de un todo →