33. Tablas de valores y representación gráfica

33.1 Introducción

Una función puede evaluarse en varios valores de entrada. Si organizamos esas entradas y salidas en filas, obtenemos una tabla de valores.

Las tablas son útiles porque permiten revisar cálculos, detectar patrones y preparar los puntos que luego se dibujan en un gráfico.

En programación, generar tablas de valores es un paso habitual antes de graficar datos, simular procesos o alimentar una biblioteca de visualización.

33.2 Qué es una tabla de valores

Una tabla de valores muestra pares de entrada y salida. Para una función f(x), cada fila puede escribirse como (x, f(x)).

function f(x) {
  return 2 * x + 1;
}

console.log(f(0));
console.log(f(1));
console.log(f(2));

33.3 Generar una tabla con un ciclo

En lugar de escribir cada evaluación manualmente, podemos usar un ciclo.

function f(x) {
  return 2 * x + 1;
}

for (let x = 0; x <= 5; x++) {
  console.log({ x: x, y: f(x) });
}

Cada objeto representa una fila de la tabla y un punto posible del gráfico.

33.4 Guardar la tabla en un arreglo

Para usar la tabla más adelante, conviene guardarla en un arreglo de objetos.

function f(x) {
  return x ** 2;
}

const tabla = [];

for (let x = -3; x <= 3; x++) {
  tabla.push({ x: x, y: f(x) });
}

console.log(tabla);

Este formato es fácil de recorrer, filtrar o enviar a una herramienta de gráficos.

33.5 Elegir el intervalo

El intervalo indica desde qué valor hasta qué valor evaluamos la función. Elegirlo bien afecta lo que veremos en el gráfico.

function generarTabla(funcion, desde, hasta) {
  const tabla = [];

  for (let x = desde; x <= hasta; x++) {
    tabla.push({ x: x, y: funcion(x) });
  }

  return tabla;
}

console.log(generarTabla(x => x ** 2, -2, 2));

33.6 Elegir el paso

El paso indica cada cuánto tomamos valores de entrada. Un paso pequeño da más puntos; un paso grande da menos puntos.

function generarTabla(funcion, desde, hasta, paso) {
  const tabla = [];

  for (let x = desde; x <= hasta; x = x + paso) {
    tabla.push({ x: x, y: funcion(x) });
  }

  return tabla;
}

console.log(generarTabla(x => x * 2, 0, 5, 0.5));

El paso debe ser positivo para que el ciclo avance correctamente.

33.7 Validar el paso

Si el paso vale 0 o es negativo en un ciclo ascendente, el programa puede quedar en un ciclo infinito. Conviene validar.

function generarTabla(funcion, desde, hasta, paso) {
  if (paso <= 0) {
    return "El paso debe ser mayor que cero";
  }

  const tabla = [];

  for (let x = desde; x <= hasta; x = x + paso) {
    tabla.push({ x: x, y: funcion(x) });
  }

  return tabla;
}

console.log(generarTabla(x => x + 1, 0, 3, 1));
console.log(generarTabla(x => x + 1, 0, 3, 0));

33.8 Tabla para una función lineal

En una función lineal, la tabla muestra cambios constantes.

function lineal(x) {
  return 3 * x - 2;
}

const tabla = [];

for (let x = 0; x <= 5; x++) {
  tabla.push({ x: x, y: lineal(x) });
}

console.log(tabla);

33.9 Tabla para una función cuadrática

En una función cuadrática, la tabla puede mostrar simetría y cambios no constantes.

function cuadratica(x) {
  return x ** 2;
}

const tabla = [];

for (let x = -3; x <= 3; x++) {
  tabla.push({ x: x, y: cuadratica(x) });
}

console.log(tabla);

33.10 Preparar datos para un gráfico

Muchas bibliotecas de gráficos esperan datos en forma de arreglos. A veces se separan etiquetas y valores.

const tabla = [
  { x: 1, y: 120 },
  { x: 2, y: 150 },
  { x: 3, y: 170 }
];

const etiquetas = tabla.map(punto => punto.x);
const valores = tabla.map(punto => punto.y);

console.log(etiquetas);
console.log(valores);

La estructura exacta depende de la biblioteca usada, pero la idea de separar o mapear datos es muy común.

33.11 Escalar valores para pantalla

Para dibujar puntos en una pantalla, muchas veces hay que convertir valores matemáticos a coordenadas de píxeles.

function escalar(valor, minOriginal, maxOriginal, minNuevo, maxNuevo) {
  return (valor - minOriginal) /
    (maxOriginal - minOriginal) *
    (maxNuevo - minNuevo) +
    minNuevo;
}

console.log(escalar(50, 0, 100, 0, 500));

Esta conversión conecta datos con representación visual.

33.12 Representación textual simple

Sin usar una biblioteca gráfica, podemos crear una representación textual básica para entender la relación entre valores.

const valores = [1, 3, 5, 2, 4];

for (const valor of valores) {
  console.log("*".repeat(valor));
}

No es un gráfico profesional, pero ayuda a visualizar diferencias de tamaño.

33.13 Detectar valores fuera de rango

Antes de graficar, conviene detectar valores que puedan quedar fuera del rango visible.

const valores = [10, 20, 150, 30, -5];
const minimo = 0;
const maximo = 100;

const fueraDeRango = valores.filter(valor => valor < minimo || valor > maximo);

console.log(fueraDeRango);

Esto ayuda a revisar errores, datos extremos o escalas mal elegidas.

33.14 Errores comunes

• Elegir un intervalo que no muestra la parte importante de la función.
• Usar un paso demasiado grande y perder detalles relevantes.
• No validar que el paso sea mayor que cero.
• Confundir el valor de x con el índice del arreglo.
• Graficar datos sin revisar unidades o rangos.
• No convertir valores matemáticos a coordenadas de pantalla cuando corresponde.

const tabla = [
  { x: 10, y: 100 },
  { x: 20, y: 150 }
];

console.log(tabla[0].x);
console.log(0);

El índice 0 no necesariamente significa que x valga 0.

33.15 Qué debes recordar de este tema

• Una tabla de valores relaciona entradas con salidas.
• Cada fila puede interpretarse como un punto (x, y).
• Los ciclos permiten generar tablas automáticamente.
• El intervalo define desde dónde hasta dónde se evalúa.
• El paso define cada cuánto se toman valores.
• Los datos para gráficos suelen almacenarse en arreglos de objetos o arreglos separados.
• Antes de graficar conviene revisar rangos, unidades y valores extremos.

33.16 Conclusión

Las tablas de valores son el puente entre una fórmula y su representación gráfica. Permiten generar puntos, revisar patrones y preparar datos para visualizarlos correctamente.

En el próximo tema estudiaremos aproximación, redondeo y errores numéricos, conceptos necesarios para manejar resultados que no siempre son exactos.