Los gráficos permiten ver patrones que una tabla puede ocultar. Interpretarlos correctamente ayuda a entender tendencias, comparar datos, detectar errores y comunicar resultados.
Un gráfico convierte datos numéricos en una representación visual. En programación, los gráficos aparecen en paneles de control, reportes, estadísticas, monitoreo, videojuegos, simulaciones y ciencia de datos.
Leer un gráfico no significa solo mirar si una línea sube o baja. También hay que revisar ejes, escalas, unidades, intervalos, valores extremos y contexto.
En este tema trabajaremos la interpretación conceptual y algunos cálculos básicos con datos representables en gráficos.
Un gráfico suele tener título, ejes, escala, etiquetas, unidades y datos representados.
| Parte | Función |
|---|---|
| Título | Indica qué muestra el gráfico |
| Eje x | Suele representar tiempo, categorías o variable independiente |
| Eje y | Suele representar cantidad, medida o variable dependiente |
| Escala | Indica cómo se distribuyen los valores |
| Unidades | Explican qué mide cada valor |
Muchos gráficos usan puntos con coordenadas (x, y). Cada punto relaciona una entrada con una salida.
const puntos = [
{ x: 1, y: 120 },
{ x: 2, y: 150 },
{ x: 3, y: 170 }
];
console.log(puntos);La escala determina cuánto representa cada división del eje. Dos gráficos con los mismos datos pueden verse muy distintos si usan escalas diferentes.
const valores = [920, 940, 960, 980];
const minimo = Math.min(...valores);
const maximo = Math.max(...valores);
console.log(minimo);
console.log(maximo);
console.log(maximo - minimo);El rango del eje influye en la percepción visual.
Una tendencia describe la dirección general de los datos: creciente, decreciente o estable.
function tendencia(valores) {
const primero = valores[0];
const ultimo = valores[valores.length - 1];
if (ultimo > primero) return "Creciente";
if (ultimo < primero) return "Decreciente";
return "Estable";
}
console.log(tendencia([10, 12, 15, 18]));
console.log(tendencia([20, 18, 15, 12]));
console.log(tendencia([5, 6, 4, 5]));Este método es simple: compara solo el inicio y el final. Para análisis más finos se necesitan más datos.
Al leer un gráfico conviene identificar valores máximos y mínimos. Indican picos, caídas, límites o casos especiales.
const ventas = [120, 150, 90, 210, 180];
console.log(Math.max(...ventas));
console.log(Math.min(...ventas));Los máximos y mínimos ayudan a detectar puntos importantes dentro de una serie.
No basta con conocer el valor máximo: muchas veces necesitamos saber cuándo ocurrió.
const ventas = [120, 150, 90, 210, 180];
const maximo = Math.max(...ventas);
const indice = ventas.indexOf(maximo);
console.log(maximo);
console.log(indice);El índice puede representar día, período, posición o categoría, según el contexto.
En un gráfico de línea, la pendiente indica la velocidad de cambio entre dos puntos.
const p1 = { x: 1, y: 120 };
const p2 = { x: 4, y: 210 };
const pendiente = (p2.y - p1.y) / (p2.x - p1.x);
console.log(pendiente);Una pendiente positiva indica aumento. Una negativa indica disminución.
Muchos gráficos muestran más de una serie. Para compararlas, debemos mirar valores, diferencias y tendencias.
const productoA = [100, 130, 160, 200];
const productoB = [120, 125, 140, 150];
const crecimientoA = productoA[productoA.length - 1] - productoA[0];
const crecimientoB = productoB[productoB.length - 1] - productoB[0];
console.log(crecimientoA);
console.log(crecimientoB);El producto A crece más en términos absolutos durante el período.
El promedio ayuda a resumir una serie de valores, aunque puede ocultar picos o caídas.
const valores = [120, 150, 90, 210, 180];
const suma = valores.reduce((total, valor) => total + valor, 0);
const promedio = suma / valores.length;
console.log(promedio);Siempre conviene mirar el promedio junto con máximos, mínimos y distribución.
Una variación porcentual permite interpretar cuánto cambió una serie respecto de su valor inicial.
const inicial = 120;
const final = 180;
const variacion = (final - inicial) / inicial * 100;
console.log(variacion);Este cálculo es frecuente al leer gráficos financieros, métricas de usuarios o rendimiento.
Un gráfico puede confundir si usa una escala recortada, omite unidades, cambia intervalos o mezcla series que no son comparables.
const valores = [98, 99, 100];
const rangoCompleto = 100 - 0;
const rangoRecortado = 100 - 98;
console.log(rangoCompleto);
console.log(rangoRecortado);Un rango recortado puede hacer que una diferencia pequeña parezca visualmente grande.
No todos los gráficos sirven para lo mismo. Elegir bien el tipo de gráfico mejora la interpretación.
| Tipo | Uso típico |
|---|---|
| Línea | Evolución en el tiempo |
| Barras | Comparación entre categorías |
| Dispersión | Relación entre dos variables |
| Circular | Partes de un total, con pocas categorías |
const serie = [10, 10, 10, 10, 100];
const suma = serie.reduce((total, valor) => total + valor, 0);
const promedio = suma / serie.length;
console.log(promedio);
console.log(Math.max(...serie));El promedio no muestra por sí solo que hay un valor extremo.
Leer gráficos correctamente es una habilidad esencial para interpretar datos. En programación, permite construir mejores reportes, detectar errores y comunicar información con precisión.
En el próximo tema estudiaremos tablas de valores y representación gráfica, para construir datos que luego puedan visualizarse.