Gráfico de superficie
Una respuesta según dos variables.
Definición
Un gráfico de superficie levanta un relieve sobre una retícula de dos entradas continuas: cada cruce tiene una altura medida y el color repite esa misma altura. Se lee buscando crestas, valles y sillas, es decir, cómo cambia el efecto de una entrada según dónde esté la otra. Se usa para respuestas de un proceso, sensibilidades de un modelo o rendimientos según dos parámetros.
- Datos
- x · y · value
- Buena para
- Ver si dos variables interactúan y dónde está la zona alta: un óptimo, una cresta o una silla.
- Evítala cuando
- Cuando hay que leer el valor de cada cruce con precisión: la perspectiva oculta partes del relieve y deforma las alturas.
- Se lee bien
- Entre 9 y 400 elementos; dibuja hasta 900
- Datos que faltan
- Se niega a dibujar y dice qué valor falta.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
x | number | Primera entrada de la retícula — el eje que baja hacia la IZQUIERDA. Numérica y con al menos tres valores distintos: las columnas se colocan por su valor, no por su orden, así que una retícula de paso desigual conserva sus pendientes. |
y | number | Segunda entrada de la retícula — el eje que baja hacia la DERECHA. Numérica y con al menos tres valores distintos. Tiene que haber una fila por cada cruce de x e y: una celda sin medir deja una cara de la malla apoyada en un vértice inventado, y ahí la figura falla. |
value | number | La altura medida en cada cruce. Es lo que codifican a la vez el relieve y la rampa de color; su encabezado —unidad incluida— es el rótulo que se escribe sobre la rampa. |
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
¿Importa ver la forma del relieve más que leer cotas?
Si hay que leer valores sobre el plano sin perspectiva, las curvas de nivel lo enseñan todo de frente.
Sí: quédate con gráfico de superficie
No: usa Gráfico de contorno
¿Las mediciones forman una retícula completa?
Si son observaciones sueltas sin rejilla, cada una debe dibujarse como un punto en el espacio.
Sí: quédate con gráfico de superficie
No: usa Dispersión 3D
¿Las dos entradas son numéricas y continuas?
Si son categorías, no hay pendiente que dibujar y basta con una rejilla de celdas coloreadas.
Sí: quédate con gráfico de superficie
No: usa Mapa de calor
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('surface-plot');
spec.data.rows = misFilas; // x, y, value
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Pueden las entradas tener un paso desigual?
Sí. Cada columna se coloca por su valor y no por su posición, así que una retícula con pasos distintos conserva sus pendientes reales.
¿Qué indica el color?
La misma altura que el relieve. No añade un dato: refuerza la lectura de las zonas altas y bajas.
¿Cuántos valores necesita cada entrada?
Al menos tres valores distintos en cada eje, y una fila por cada cruce de los dos.
¿Qué hace si faltan datos?
Se niega a dibujar y dice qué valor falta.
¿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 «si dos cosas van juntas»
Correlograma de autocorrelaciónsi una serie se parece a sí misma con retardo
Punto de equilibriovolumen donde ingresos y costes se igualan
Gráfico de burbujastres variables: dos ejes y el tamaño
Curva de calibraciónsi las probabilidades predichas se cumplen
Tendencia con banda de confianzaajuste lineal e incertidumbre de la estimación
Dispersión conectadados variables siguiendo su trayectoria en el tiempo