Los gráficos de áreas son una extensión de los gráficos de líneas que llenan el área debajo de la línea con color. Son útiles para mostrar acumulaciones y cambios en valores a lo largo del tiempo. En este capítulo, vamos a aprender cómo crear gráficos de áreas utilizando D3.

Datos de Ejemplo

Vamos a usar 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 áreas:

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 del Área

D3 proporciona una función generadora de áreas que facilita el trazo de áreas basadas en datos:

javascript

Personalización del Gráfico de Áreas

Podemos personalizar el gráfico de áreas para hacerlo más atractivo. Por ejemplo, añadir puntos en las intersecciones del área:

javascript

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 áreas en D3. Comenzamos con la configuración básica del área de dibujo y luego creamos las escalas y ejes. Trazamos el área usando la función generadora de áreas y agregamos puntos para mejorar la visibilidad. Finalmente, añadimos interactividad básica con tooltips.

Los gráficos de áreas son útiles para mostrar acumulaciones y cambios a lo largo del tiempo, proporcionando una visualización clara de tendencias y volúmenes. Ahora tienes las herramientas necesarias para crear y personalizar tus propios gráficos de áreas utilizando D3.

En el siguiente capítulo, exploraremos cómo crear gráficos de dispersión para visualizar la relación entre dos variables.