Los gráficos de líneas son útiles para visualizar datos continuos a lo largo del tiempo, mostrando tendencias y cambios. En este capítulo, aprenderemos a crear gráficos de líneas utilizando D3. Veremos cómo unir datos, configurar escalas y ejes, y trazar líneas sobre un SVG.

Datos de Ejemplo

Para este capítulo, usaremos un conjunto de datos de ejemplo que representa mediciones en diferentes días:

javascript

Configuración del SVG

Primero, configuramos el área del SVG donde se dibujará el gráfico de líneas:

javascript

Escalas

Necesitamos escalas para los ejes X e Y.

Escala X

Usamos una escala de tiempo para el eje X:

javascript

Escala Y

Para el eje Y, utilizamos una escala lineal:

javascript

Ejes

Creamos y añadimos los ejes X e Y utilizando las escalas definidas:

javascript

Creación de la Línea

D3 proporciona una función generadora de líneas que facilita el trazo de líneas basadas en datos:

javascript

Personalización del Gráfico de Líneas

Podemos personalizar el gráfico de líneas para hacerlo más atractivo. Por ejemplo, añadir puntos en las intersecciones de la línea:

javascript

Y podemos añadir estilos CSS para mejorar su apariencia:

style.css

css

Interactividad

Vamos a añadir interactividad básica, como un tooltip que muestra el valor al pasar el mouse por encima de un punto:

javascript

Resumen

En este capítulo, aprendimos a crear un gráfico de líneas en D3. Comenzamos con la configuración básica del área de dibujo y luego creamos las escalas y ejes. Trazamos la línea usando la función generadora de líneas y agregamos puntos para mejorar la visibilidad. Finalmente, añadimos interactividad básica con tooltips.

Los gráficos de líneas son fundamentales para mostrar datos continuos y tendencias en el tiempo. Ahora tienes las herramientas para crear y personalizar tus propios gráficos de líneas utilizando D3.

En el siguiente capítulo, exploraremos cómo crear gráficos de áreas, que son una extensión natural de los gráficos de líneas.