Dendrograma

Jerarquía de agrupaciones por similitud.

Definición

Un dendrograma dibuja una jerarquía como ramas que se van uniendo: las hojas al final y los grupos a los que pertenecen más arriba. En esta pieza la jerarquía la declara la columna de grupo, y las alturas de las ramas son reparto de dibujo, no una medida de parecido. Se usa para enseñar cómo se agrupan unos elementos.

Editar con tus datos SVG Spec JSON

Datos: group · name
Buena para: Enseñar a qué grupo pertenece cada elemento en una jerarquía corta.
Evítala cuando: Cuando quieres mostrar cuánto se parecen los elementos: las alturas no miden ninguna distancia.
Se lee bien: Entre 3 y 40 elementos; dibuja hasta 1000
Datos que faltan: No usa valores que puedan faltar.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`group` · opcional	string	Rama de primer nivel. Sin ella (o si coincide con `name`) todas las hojas cuelgan de la raíz y el árbol se queda en dos niveles.
`name` · opcional	string	La hoja. Sin ninguna columna de texto que case, la pieza LANZA con la cifra: antes cogía la PRIMERA columna de la fila, fuera la que fuera, y el árbol salía rotulado con una columna que nadie había señalado.

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 × 427 px

Escritorio · 1248 × 648 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Los grupos ya vienen declarados?

Si los grupos salen de medir el parecido entre elementos, el mapa de calor agrupado enseña esos valores.

Sí: quédate con dendrograma

No: usa Mapa de calor agrupado

¿Quieres ver la jerarquía como forma?

Si lo importante es leer nombres largos como una lista, usa el árbol con sangrías.

Sí: quédate con dendrograma

No: usa Árbol con sangrías

¿Basta con saber a qué grupo pertenece cada elemento, sin compararlos por tamaño?

Si cada elemento tiene un peso, el treemap lo enseña dentro de su grupo.

Sí: quédate con dendrograma

No: usa Treemap

Código

La misma pieza, con tus datos

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

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

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