Ecuación visual

Cómo se calcula una cifra a partir de otras.

Definición

La ecuación visual escribe una cifra como sus términos y la operación entre ellos: de 3 a 5 piezas del mismo tamaño, con más, menos o por entre ellas y el resultado al otro lado del igual. Un término declarado y sin medir se dibuja discontinuo y deja la cuenta abierta. Sirve para explicar una métrica compuesta o una fórmula de negocio.

Editar con tus datos SVG Spec JSON

El plazo que prometemos se calcula restando, no midiendo

Datos: label · group · operator · category
Buena para: Explicar de qué se compone una cifra y con qué operación.
Evítala cuando: Cuando hay que mostrar cuánto aporta cada término: todas las piezas miden lo mismo.
Se lee bien: Entre 3 y 5 elementos; dibuja hasta 5
Datos que faltan: Deja el hueco visible en la serie.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`label`	string	El nombre de la pieza: «Cuota anual del contrato», «Margen por cuenta». Una por fila, y obligatoria: una pieza sin nombre no se puede dibujar ni omitir en silencio.
`group`	string	De qué lado del igual vive la pieza: «termino» o «resultado». Es OBLIGATORIA y no se infiere del orden de las filas — reordenar el `data` para cambiar el orden de los sumandos convertiría el resultado en un término sin que nada fallara.
`operator` · opcional	string	El signo que precede a ESTE término: «mas» (+), «menos» (−) o «por» (×); se admiten los signos y sus nombres en inglés. Ausente se suma. Sobre el primer término y sobre el resultado FALLA: delante del primero no hay nada que operar, y el signo del resultado es el «=», que lo pone la forma.
`category` · opcional	string	El rol conceptual de la pieza: neutro · foco · alerta · ausente · favorable. Una pieza «ausente» sale con contorno discontinuo y su operador atenuado: existe en la especificación y no está medida.

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

¿Te basta con la fórmula, sin las cantidades?

Si hay que ver cuánto suma o resta cada término, un gráfico de cascada lo enseña.

Sí: quédate con ecuación visual

No: usa Gráfico de cascada

¿La cuenta cabe en una sola línea?

Si los términos se descomponen a su vez en otros, el árbol de palancas recoge los niveles.

Sí: quédate con ecuación visual

No: usa Árbol de palancas

¿Es una fórmula propia?

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

Sí: quédate con ecuación visual

No: usa Descomposición DuPont

Código

La misma pieza, con tus datos

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

const spec = await getPreset('concept-equation');
spec.data.rows = misFilas; // label, group
const { svg, warnings } = await renderComposition(spec);

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

Dudas

¿Qué operaciones admite?

Suma, resta y multiplicación. Un término sin signo se suma; el primero y el resultado no llevan signo, y ponérselo hace fallar la pieza.

¿Cómo marco un término que aún no se mide?

Con el rol «ausente»: sale con contorno discontinuo y su operador atenuado.

¿Puedo dar a cada pieza un tamaño según su peso?

No. Una columna de magnitud hace fallar la pieza en vez de dimensionarla.

¿Qué hace si faltan datos?

Deja el hueco visible en la serie.

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