Interpretar gráficos

01 · Punto de partida

Un gráfico convierte números en posiciones

En el tema anterior analizamos tablas fila por fila. Un gráfico representa esos pares como puntos de un plano y permite percibir de inmediato patrones que en una lista extensa quedarían dispersos: ascensos, giros, oscilaciones, agrupamientos o saltos.

Supongamos que el tiempo de respuesta de un servicio pasa de 100 ms a 120 ms. Dos gráficos pueden mostrar exactamente los mismos datos. Si el eje vertical va de 0 a 500 ms, el cambio parece pequeño; si va de 98 a 122 ms, parece enorme. Ninguno altera los valores, pero cada elección enfatiza un aspecto diferente.

Interpretar responsablemente requiere separar tres niveles:

02 · Leer el marco

Ejes, origen, unidades y escala

En un gráfico cartesiano, la coordenada horizontal suele representar la variable independiente x y la vertical el valor dependiente y. Esta convención no sustituye los rótulos: un eje puede representar fechas, categorías o una transformación logarítmica.

Una lectura inicial debería responder:

• ¿qué magnitud representa cada eje y en qué unidades?
• ¿dónde comienza y termina cada escala?
• ¿las divisiones avanzan con incrementos constantes?
• ¿el cero está visible o el eje fue recortado?
• ¿cada punto es una medición o la línea representa todos los valores intermedios?
• ¿hay una leyenda, varias series o símbolos con significados diferentes?

El dominio visible es el intervalo horizontal mostrado; el rango visible es el intervalo vertical. No deben confundirse con el dominio y la imagen completos de la función, que pueden extenderse fuera de la ventana.

03 · De la posición al valor

Leer puntos e intervalos

Un punto (x,y) afirma que a la entrada x le corresponde el valor y. Para leerlo, se proyecta su posición hacia ambos ejes. Si cae entre divisiones, el valor obtenido es una estimación cuya precisión depende de la resolución gráfica.

Una línea gruesa, una imagen pequeña o una cuadrícula poco detallada no justifican muchos decimales. Si el gráfico permite distinguir aproximadamente décimas, informar seis decimales crea una precisión inexistente.

04 · Seguir de izquierda a derecha

Crecimiento, decrecimiento y tramos constantes

Para describir variaciones se recorre el gráfico aumentando x:

• si la altura aumenta, la función es creciente en ese tramo;
• si la altura disminuye, es decreciente;
• si conserva la altura, es constante;
• si cambia de comportamiento, conviene dividir el dominio en intervalos.

La dirección de lectura importa. Una curva que sube de izquierda a derecha representa crecimiento aunque visualmente pueda “bajar” si se la recorre en sentido contrario.

Una función puede terminar por encima de donde comenzó y, sin embargo, haber descendido varias veces. “Aumentó en total” y “fue creciente” son afirmaciones diferentes.

05 · Cuánto cambia por unidad

Pendiente y razón de cambio visual

La inclinación de una secante que une dos puntos resume la razón de cambio promedio:

La inclinación en pantalla no es por sí sola una medida numérica. Si una unidad horizontal ocupa 10 píxeles y una vertical ocupa 100, una pendiente matemática de 0.2 se verá pronunciada. Para calcular hay que usar valores de los ejes, no ángulos medidos en la imagen.

06 · Lugares que organizan la curva

Cortes, máximos, mínimos y giros

Algunos puntos condensan información útil:

Corte con el eje y

Valor f(0), siempre que cero pertenezca al dominio.

Ceros o raíces

Entradas donde la curva cruza o toca el eje horizontal: f(x)=0.

Máximo local

Valor mayor que los valores cercanos, aunque no sea el mayor de todo el dominio.

Mínimo local

Valor menor que los valores cercanos, sin exigir que sea el mínimo global.

En un máximo suave, la curva suele pasar de creciente a decreciente; en un mínimo, de decreciente a creciente. No todos los extremos son suaves: una punta o un extremo del dominio también puede alcanzar el valor mayor o menor.

Un gráfico recortado solo permite hablar de extremos en la ventana mostrada. El punto más alto visible no tiene por qué ser el máximo global de la función.

07 · Cuando el trazo se interrumpe

Saltos, huecos y crecimiento sin límite

No siempre es correcto dibujar una línea continua. Un trazo puede revelar —o esconder— comportamientos distintos:

Para f(x)=1/x, la entrada cero no está permitida. Al acercarse por la derecha los valores crecen sin cota y por la izquierda decrecen sin cota. Una herramienta gráfica que conecte muestras a ambos lados dibujará una falsa línea vertical si no separa los tramos.

También hay discontinuidades reales en programas: impuestos por tramos, precios escalonados, redondeos, condiciones if y límites de capacidad producen saltos o esquinas que no son errores del gráfico.

08 · El cambio también cambia

Curvatura y aceleración visual

Dos funciones pueden ser crecientes y comportarse de manera muy diferente. Si la pendiente positiva aumenta, la curva sube cada vez más rápido; si la pendiente positiva disminuye, sigue subiendo pero se aplana.

Un punto de inflexión marca un cambio en el sentido de la curvatura. No tiene que ser un máximo ni un mínimo: la función puede seguir creciendo a ambos lados mientras cambia la evolución de su pendiente.

Estas lecturas anticipan ideas del cálculo diferencial. Por ahora se apoyan en comparar pendientes promedio de tramos pequeños, sin asumir que la apariencia reemplaza una demostración.

09 · Leer el gráfico críticamente

Ejes recortados, proporciones y escalas no lineales

Las decisiones de escala pueden facilitar una comparación o distorsionar su impresión:

• Eje vertical recortado: amplifica diferencias pequeñas. Es útil para examinar variaciones, pero debe mostrarse con claridad.
• Rango demasiado amplio: comprime cambios relevantes hasta hacerlos casi invisibles.
• Relación de aspecto: un gráfico alto y estrecho se ve más abrupto que uno bajo y ancho.
• Escala logarítmica: intervalos iguales representan multiplicaciones, no sumas constantes.
• Doble eje vertical: permite superponer unidades distintas, pero sus escalas pueden crear correlaciones visuales engañosas.

En una escala lineal, pasar de 10 a 20 ocupa lo mismo que pasar de 80 a 90. En una escala logarítmica, pasar de 10 a 100 ocupa lo mismo que pasar de 100 a 1000 porque ambos cambios multiplican por 10.

10 · Exploración

Laboratorio: la ventana modifica la apariencia

Elegí un modelo, cambiá el intervalo horizontal, la densidad de muestras y el encuadre vertical. Los valores de la función no cambian; cambia la porción y la resolución con que los observamos.

La línea se construye a partir de muestras. En modelos discontinuos, los tramos se separan para no inventar conexiones.

Preguntas para explorar

1. En la cuadrática, compará escala automática, comprimida y detalle. ¿Cambian el mínimo o los ceros?
2. En la función con salto, reducí las muestras. ¿Por qué unir todos los puntos sería engañoso?
3. En la recíproca, ampliá la ventana. ¿Cómo cambia la importancia visual de lo que ocurre cerca de cero?
4. En la oscilación, reducí muestras y aumentá la ventana. ¿Cuántos giros dejan de verse?

11 · Del valor matemático al píxel

Representar coordenadas con JavaScript

Un lienzo usa píxeles: el origen está arriba a la izquierda y la coordenada vertical crece hacia abajo. Para dibujar un intervalo matemático debemos transformarlo:

function crearTransformacion({ xMin, xMax, yMin, yMax, ancho, alto }) {
  const px = x => (x - xMin) / (xMax - xMin) * ancho;
  const py = y => alto - (y - yMin) / (yMax - yMin) * alto;
  return { px, py };
}

const { px, py } = crearTransformacion({
  xMin: -5, xMax: 5,
  yMin: -5, yMax: 25,
  ancho: 800, alto: 400
});

console.log(px(0), py(0)); // posición en píxeles del origen

La fórmula para py invierte el sentido vertical. El mismo principio permite hacer zoom: no se modifica la función, sino los límites xMin, xMax, yMin e yMax.

No atravesar discontinuidades

let dibujando = false;

for (const { x, y } of muestras) {
  if (!Number.isFinite(y)) {
    dibujando = false;
    continue;
  }

  if (!dibujando) contexto.moveTo(px(x), py(y));
  else contexto.lineTo(px(x), py(y));
  dibujando = true;
}

Este control básico separa tramos con valores no finitos. Para detectar saltos finitos también hace falta conocer el modelo o fijar un criterio: una diferencia grande puede ser una discontinuidad real o simplemente una curva pronunciada con pocas muestras.

12 · Comprensión

Confusiones frecuentes

13 · Práctica guiada

Ejercicios de comprensión

Ejercicio 1: crecimiento frente a cambio neto

Una curva pasa por (0,2), (1,5), (2,3) y (3,7). Describí sus tramos y el cambio neto.

Ejercicio 2: pendiente y escala

Entre (2,10) y (6,18), calculá la razón de cambio promedio. ¿Puede alterarla un gráfico más alto?

Ejercicio 3: escala recortada

Dos mediciones pasan de 98 a 100. Compará la impresión producida por un eje de 0 a 100 y otro de 97 a 101.

Ejercicio 4: identificar puntos notables

Para f(x)=x²−4, indicá el corte vertical, los ceros y el mínimo.

Ejercicio 5: dibujar sin inventar un puente

Modificá un recorrido de muestras para que inicie un tramo nuevo cuando el valor no sea finito.

contexto.beginPath();
let tramoAbierto = false;

for (const punto of muestras) {
  if (!Number.isFinite(punto.y)) {
    tramoAbierto = false;
  } else if (!tramoAbierto) {
    contexto.moveTo(px(punto.x), py(punto.y));
    tramoAbierto = true;
  } else {
    contexto.lineTo(px(punto.x), py(punto.y));
  }
}

contexto.stroke();

14 · Síntesis

Ideas para recordar

En el próximo tema usaremos tablas y gráficos para realizar experimentación computacional: generar datos, modificar parámetros y convertir observaciones en conjeturas que luego podamos poner a prueba.