Árbol de palancas

Descomponer un objetivo en lo que lo mueve.

Definición

El árbol de palancas parte de una métrica en la raíz y la descompone en las palancas que la mueven, cada rama con su métrica y su contribución escrita sobre el conector. Se lee desde la palanca hacia la raíz. Sirve para planes de crecimiento, árboles de indicadores y priorizar iniciativas.

Editar con tus datos SVG Spec JSON

De las cuatro cosas que mueven el margen, la casa solo acciona dos

Datos: id · padre · palanca · metrica · contribucion · detalle · rol
Buena para: Enseñar qué palancas mueven una métrica y qué se espera de cada una.
Evítala cuando: Cuando las ramas tienen que sumar o multiplicarse hasta la raíz: la pieza no calcula.
Se lee bien: Entre 3 y 14 elementos; dibuja hasta 20
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é
`id`	string	La clave del nodo, con la que sus hijos lo citan. Obligatoria junto con `padre`: sin las dos no hay más que una raíz, y «una raíz sola no es un árbol de palancas».
`padre`	string	El `id` del nodo del que cuelga. Vacío = la raíz.
`palanca` · opcional	string	El rótulo de la palanca. Medido: sin él el nodo sigue dibujado.
`metrica` · opcional	string	La unidad o el KPI del nodo.
`contribucion` · opcional	string	Cuánto aporta la rama al padre, en la cartela sobre el conector. Se imprime tal cual: la pieza no la calcula, no la normaliza y no comprueba que los hermanos sumen nada.
`detalle` · opcional	string	La línea de apoyo dentro de la caja.
`rol` · opcional	string	neutro · foco · alerta · ausente · favorable.

Tamaños

Ancha por necesidad

Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.

A menos de 480 px sus rótulos no caben sin pisarse o recortarse, y el motor no la publica así. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.

Cuándo usarla

Tres preguntas antes de elegirla

¿Las contribuciones son estimaciones escritas y no una cuenta que cuadra?

Si la descomposición es una fórmula exacta, la ecuación visual la escribe con sus operaciones.

Sí: quédate con árbol de palancas

No: usa Ecuación visual

¿El objetivo es una métrica cualquiera?

Si es la rentabilidad sobre fondos propios, la descomposición DuPont ya trae su estructura.

Sí: quédate con árbol de palancas

No: usa Descomposición DuPont

¿Las ramas son palancas que mueven un número?

Si es una jerarquía sin métricas, el árbol jerárquico es más sencillo.

Sí: quédate con árbol de palancas

No: usa Árbol jerárquico

Código

La misma pieza, con tus datos

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

const spec = await getPreset('concept-drivertree');
spec.data.rows = misFilas; // id, padre
const { svg, warnings } = await renderComposition(spec);

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

Dudas

¿La pieza comprueba que las contribuciones cuadren?

No. Las imprime tal cual: no las calcula, no las normaliza y no comprueba que los hermanos sumen nada.

¿Por qué los conectores apuntan a la raíz?

Para que se lea de la palanca hacia la métrica: qué se toca y a qué número afecta.

¿Cómo se monta la jerarquía?

Cada nodo lleva un identificador y el de su padre; el que no tiene padre es la raíz. Una raíz sola no basta.

¿Qué hace si faltan datos?

No usa valores que puedan faltar.

¿Cómo se ve en el móvil?

A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.

Relacionadas

Otras formas de responder «partes de un todo»

Guía para elegir: partes de un todo →