10. Representación gráfica de funciones

10.1 Introducción

Una función puede representarse mediante una fórmula, una tabla o un gráfico. El gráfico muestra los pares (x, f(x)) como puntos dentro de un plano cartesiano.

Esta representación ayuda a comprender el comportamiento general de una función: si crece, si decrece, si tiene simetrías, si cruza los ejes o si presenta cambios importantes.

10.2 Del valor numérico al punto

Cuando evaluamos una función, obtenemos una salida. Ese par entrada-salida puede verse como un punto del gráfico.

El primer valor del punto representa la posición horizontal y el segundo representa la posición vertical.

10.3 Ejes cartesianos

El eje horizontal suele representar la variable independiente. El eje vertical suele representar la variable dependiente.

10.4 Construir un gráfico desde una tabla

Para graficar una función manualmente, se puede partir de una tabla de valores. Cada fila se transforma en un punto.

10.5 De puntos separados a una curva

Si evaluamos una función en pocos valores, vemos puntos separados. Si evaluamos muchos valores cercanos entre sí, podemos dibujar una curva más suave.

function cuadrado(x) {
  return x * x;
}

for (let x = -3; x <= 3; x += 0.5) {
  console.log(x, cuadrado(x));
}

Este código genera varios pares (x, f(x)). Una aplicación gráfica puede convertir esos pares en puntos visuales.

10.6 Aplicación JavaScript para graficar una función

La siguiente aplicación dibuja los ejes y representa la función f(x) = x² - 2. El programa evalúa muchos valores de x y une los puntos resultantes para formar la curva.

const canvas = document.getElementById("grafico-funcion");
const ctx = canvas.getContext("2d");

function funcion(x) {
  return x * x - 2;
}

function convertirX(x) {
  return canvas.width / 2 + x * 70;
}

function convertirY(y) {
  return canvas.height / 2 - y * 35;
}

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.strokeStyle = "#d8e8f7";
ctx.lineWidth = 1;
for (let x = -4; x <= 4; x++) {
  ctx.beginPath();
  ctx.moveTo(convertirX(x), 20);
  ctx.lineTo(convertirX(x), canvas.height - 20);
  ctx.stroke();
}
for (let y = -4; y <= 4; y++) {
  ctx.beginPath();
  ctx.moveTo(30, convertirY(y));
  ctx.lineTo(canvas.width - 30, convertirY(y));
  ctx.stroke();
}

ctx.strokeStyle = "#0b4f8a";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(30, convertirY(0));
ctx.lineTo(canvas.width - 30, convertirY(0));
ctx.moveTo(convertirX(0), 20);
ctx.lineTo(convertirX(0), canvas.height - 20);
ctx.stroke();

ctx.strokeStyle = "#d63384";
ctx.lineWidth = 3;
ctx.beginPath();

let primerPunto = true;
for (let x = -3.4; x <= 3.4; x += 0.05) {
  const pantallaX = convertirX(x);
  const pantallaY = convertirY(funcion(x));

  if (primerPunto) {
    ctx.moveTo(pantallaX, pantallaY);
    primerPunto = false;
  } else {
    ctx.lineTo(pantallaX, pantallaY);
  }
}

ctx.stroke();

Para experimentar, cambia el código de la función funcion. Por ejemplo, reemplaza return x * x - 2; por return x * x + 1; y vuelve a ejecutar la aplicación para ver cómo se desplaza la curva.

10.7 Escala del gráfico

Un detalle importante al dibujar funciones en pantalla es la escala. Las coordenadas matemáticas no coinciden directamente con los píxeles del navegador.

10.8 Interpretar la forma de la curva

La forma del gráfico ayuda a entender el comportamiento de la función sin calcular todos sus valores.

• Una recta indica un cambio constante.
• Una parábola muestra un comportamiento cuadrático.
• Una curva ascendente indica crecimiento en el intervalo observado.
• Una curva descendente indica decrecimiento en el intervalo observado.
• Los cruces con los ejes muestran valores especiales de la función.

10.9 Gráficos en programación

La representación gráfica de funciones aparece en muchas áreas del desarrollo de software.

10.10 Errores comunes

• Graficar puntos usando valores fuera del dominio.
• Elegir muy pocos puntos y obtener una curva poco representativa.
• Confundir coordenadas matemáticas con coordenadas de pantalla.
• No ajustar la escala del gráfico.
• Interpretar un gráfico sin mirar qué intervalo se está mostrando.

10.11 Qué debes recordar de este tema

• Un gráfico representa pares (x, f(x)) como puntos.
• La variable independiente suele ir en el eje horizontal.
• La variable dependiente suele ir en el eje vertical.
• Una curva se obtiene evaluando muchos valores de la función.
• Para dibujar en pantalla hay que convertir coordenadas matemáticas a píxeles.
• Los gráficos ayudan a interpretar el comportamiento de una función.

10.12 Conclusión

La representación gráfica convierte una función en una imagen que puede analizarse visualmente. Esto permite detectar patrones, cambios, cruces y formas características.

En el próximo tema veremos interpretación de gráficos, para aprender a leer información importante a partir de la forma de una función.