Chuck's Academy

Gráficos con D3

Creación de Gráficos de Líneas

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.


Pregúntame lo que sea