Sunburst Chart

Categoría Jerarquía

Qué es

Treemap en formato radial: anillos concéntricos donde cada anillo representa un nivel de la jerarquía. El espacio angular es proporcional al valor.

Para qué sirve

Para explorar jerarquías de múltiples niveles de forma interactiva, cuando el formato circular es más apropiado que el rectangular.

Cómo leerlo

Anatomía

También llamado "radial treemap" o "multi-level pie chart": es, estructuralmente, varios pie charts anidados en anillos concéntricos, uno por cada nivel de la jerarquía. Los primeros ejemplos publicados de este formato radial datan de comienzos del siglo XX, mostrando desgloses de presupuestos gubernamentales; la formalización académica del método, con las reglas de anidación estrictas que usan las herramientas actuales, es bastante más reciente. El centro del gráfico es siempre la raíz de la jerarquía completa, y la distancia a ese centro es la profundidad: cuanto más afuera un segmento, más profundo su nivel. Cada segmento ocupa un ángulo proporcional a su valor dentro de SU padre, no del total del gráfico —la misma lógica que un pie chart anidado dentro de otro—, y todos los segmentos de un mismo anillo pertenecen siempre al mismo nivel jerárquico. La diferencia con su primo más cercano, el treemap, que representa la misma jerarquía con rectángulos anidados, es que el sunburst sacrifica la eficiencia de un layout rectangular a cambio de que el centro comunique de inmediato dónde está la raíz, algo que un treemap no puede mostrar con la misma claridad.

Anillos concéntricos de un tronco de árbol, cada uno más alejado del centro que el anterior: la misma estructura radial que organiza los niveles jerárquicos en un sunburst chart

Por qué funciona

Fundamento perceptivo

La navegación radial es intuitiva para jerarquías: el centro es el todo y los anillos exteriores son los detalles. Permite drill-down visual.

Errores comunes

Segmentos exteriores muy delgados

con más de 3 niveles de profundidad y muchas categorías se estrechan demasiado, así que requiere interactividad para ser útil más allá del nivel 2.

Dónde se usa

Contextos de aplicación

Estructura de carpetas y archivos

El anillo interior son carpetas; el exterior, su contenido.

Jerarquía organizacional con presupuesto

Divisiones y equipos anidados, cada anillo un nivel más de detalle.

Taxonomía de productos

Categorías y subcategorías en anillos concéntricos proporcionales.

Cómo construirlo

El mismo gráfico, en 11 librerías open source

Cada librería resuelve las mismas decisiones de diseño, como la escala, el espaciado entre barras o la inserción de la etiqueta de valor, de un modo distinto. Algunas las automatizan; otras las dejan explícitas en el código, a criterio de quien lo escribe. Comparar once implementaciones con los mismos datos y el mismo color de marca aísla esa diferencia, que de otro modo queda oculta detrás de estilos visuales distintos.

Matplotlib License (estilo BSD)

Wedge de nuevo, pero en dos anillos (radios distintos por nivel de profundidad) —sin d3-hierarchy ni un layout jerárquico integrado, los ángulos de cada nivel se acumulan a mano.

import matplotlib.pyplot as plt
from matplotlib.patches import Wedge

tree = [
    {"name": "Renovables", "value": 5414, "color": "#760D3E", "children": [
        {"name": "Solar", "value": 2329, "color": "#490827"},
        {"name": "Hidráulica", "value": 1728, "color": "#A85D82"},
        {"name": "Eólica", "value": 1127, "color": "#9B928C"},
        {"name": "Otras", "value": 232, "color": "#DCD4C8"},
    ]},
    {"name": "Térmica", "value": 2098, "color": "#D2601F", "children": []},
]
total = sum(n["value"] for n in tree)

# Wedge de nuevo, pero en dos anillos (radios distintos por nivel de
# profundidad) -- sin d3-hierarchy ni un layout jerarquico integrado,
# los angulos de cada nivel se acumulan a mano.
fig, ax = plt.subplots(figsize=(5, 5))
acc = 0
for node in tree:
    a0 = 360 * acc / total
    acc += node["value"]
    a1 = 360 * acc / total
    ax.add_patch(Wedge((0, 0), 0.6, 90 - a1, 90 - a0, width=0.6, facecolor=node["color"]))
    child_acc = a0
    for child in node["children"]:
        c0 = child_acc
        child_acc += (a1 - a0) * (child["value"] / node["value"])
        ax.add_patch(Wedge((0, 0), 1.0, 90 - child_acc, 90 - c0, width=0.4, facecolor=child["color"]))
ax.set_aspect("equal"); ax.axis("off")
plt.show()

No disponible en estas librerías

Chart.js

No tiene ningún tipo de gráfico jerárquico ni soporte para coordenadas polares con múltiples anillos concéntricos.

ApexCharts

No tiene ningún tipo de gráfico jerárquico ni un layout de anillos anidados —su radialBar solo admite un anillo por serie, no una jerarquía de profundidad arbitraria.

Observable Plot

No tiene coordenadas polares ni utilidades de layout jerárquico propias —construirlo a mano terminaría dependiendo de d3-hierarchy de todas formas, sin ninguna ventaja real sobre usar D3 directamente.

Plotnine

Esta versión no implementa coord_polar() —la misma ausencia que descarta la torta y el donut también descarta cualquier gráfico radial de varios anillos.