Los gráficos de barras son una de las visualizaciones de datos más comunes y útiles. En este capítulo, aprenderemos cómo crear gráficos de barras utilizando D3. Veremos cómo unir datos a elementos del DOM, usar escalas y ejes, y personalizar la apariencia del gráfico.

Datos de Ejemplo

Para este capítulo, usaremos un conjunto de datos simple:

javascript

Configuración del SVG

Primero, configuramos el área del SVG donde se dibujará el gráfico de barras:

javascript

Escalas

Necesitamos escalas para mapear los datos a las dimensiones del SVG.

Escala X

Usamos una escala de bandas para el eje X, ya que estamos trabajando con categorías:

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 las Barras

Ahora vinculamos los datos a los elementos rect para crear las barras del gráfico:

javascript

Personalización del Gráfico de Barras

Podemos personalizar el gráfico de barras para hacerlo más atractivo. Por ejemplo, añadir etiquetas a las barras para mostrar los valores:

javascript

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

style.css

css

Resumen

En este capítulo, aprendimos a crear un gráfico de barras en D3. Empezamos con la configuración básica del área de dibujo y luego creamos las escalas y ejes. A partir de ahí, vinculamos los datos a los elementos rect para formar las barras y personalizamos el gráfico agregando etiquetas y estilos.

Los gráficos de barras son fundamentales para muchas aplicaciones de visualización de datos, y ahora tienes los conocimientos necesarios para crear y personalizar tus propios gráficos de barras utilizando D3.

En el próximo capítulo, exploraremos cómo crear gráficos de líneas para visualizaciones de datos temporales o secuenciales.