El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este módulo, aprenderás a crear gráficos de barras utilizando D3.js. Los gráficos de barras son una de las visualizaciones más comunes y útiles para representar datos categóricos. Vamos a desglosar el proceso en pasos claros y detallados para que puedas seguirlos fácilmente.

Configuración Inicial

1.1. Estructura del HTML

Primero, necesitamos una estructura básica de HTML donde insertaremos nuestro gráfico de barras.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gráfico de Barras con D3.js</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <style>
        .bar {
            fill: steelblue;
        }
        .bar:hover {
            fill: orange;
        }
        .axis-label {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="chart"></div>
    <script src="barchart.js"></script>
</body>
</html>

1.2. Archivo JavaScript

Crea un archivo barchart.js donde escribiremos el código D3.js para generar el gráfico de barras.

Preparación de los Datos

Para este ejemplo, utilizaremos un conjunto de datos simple. Puedes cargar datos desde un archivo CSV, JSON o una API, pero para simplificar, usaremos un array de objetos.

const data = [
    { name: 'A', value: 30 },
    { name: 'B', value: 80 },
    { name: 'C', value: 45 },
    { name: 'D', value: 60 },
    { name: 'E', value: 20 },
    { name: 'F', value: 90 },
    { name: 'G', value: 55 },
];

Configuración del SVG

3.1. Dimensiones y Margenes

Definimos las dimensiones del SVG y los márgenes para el gráfico.

const margin = { top: 20, right: 30, bottom: 40, left: 40 };
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

3.2. Creación del SVG

Creamos el elemento SVG y lo añadimos al DOM.

const svg = d3.select("#chart")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

Creación de las Escalas

4.1. Escala X

La escala X será una escala de bandas (band scale) para acomodar las categorías.

const x = d3.scaleBand()
    .domain(data.map(d => d.name))
    .range([0, width])
    .padding(0.1);

4.2. Escala Y

La escala Y será una escala lineal para los valores.

const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .nice()
    .range([height, 0]);

Añadir Ejes

5.1. Eje X

Añadimos el eje X al gráfico.

svg.append("g")
    .attr("class", "x-axis")
    .attr("transform", `translate(0,${height})`)
    .call(d3.axisBottom(x))
    .selectAll(".tick text")
    .attr("class", "axis-label");

5.2. Eje Y

Añadimos el eje Y al gráfico.

svg.append("g")
    .attr("class", "y-axis")
    .call(d3.axisLeft(y))
    .selectAll(".tick text")
    .attr("class", "axis-label");

Dibujar las Barras

Finalmente, dibujamos las barras utilizando los datos y las escalas definidas.

svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", d => x(d.name))
    .attr("y", d => y(d.value))
    .attr("width", x.bandwidth())
    .attr("height", d => height - y(d.value));

Ejercicio Práctico

Ejercicio

Modifica el gráfico de barras para que:

Las barras cambien de color al pasar el ratón por encima.
Añade etiquetas de valor en la parte superior de cada barra.

Solución

1. Cambiar de color al pasar el ratón

Ya hemos añadido una clase .bar:hover en el CSS para cambiar el color al pasar el ratón.

2. Añadir etiquetas de valor

svg.selectAll(".label")
    .data(data)
    .enter().append("text")
    .attr("class", "label")
    .attr("x", d => x(d.name) + x.bandwidth() / 2)
    .attr("y", d => y(d.value) - 5)
    .attr("text-anchor", "middle")
    .text(d => d.value);

Conclusión

En esta lección, hemos aprendido a crear un gráfico de barras básico utilizando D3.js. Hemos cubierto desde la configuración inicial hasta la creación de escalas, ejes y la representación de los datos en forma de barras. Este conocimiento te servirá como base para crear visualizaciones más complejas y personalizadas en los siguientes módulos. ¡Sigue practicando y experimentando con diferentes conjuntos de datos y estilos!

Creando Gráficos de Barras

Configuración Inicial

1.1. Estructura del HTML

1.2. Archivo JavaScript

Preparación de los Datos

Configuración del SVG

3.1. Dimensiones y Margenes

3.2. Creación del SVG

Creación de las Escalas

4.1. Escala X

4.2. Escala Y

Añadir Ejes

5.1. Eje X

5.2. Eje Y

Dibujar las Barras

Ejercicio Práctico

Ejercicio

Solución

1. Cambiar de color al pasar el ratón

2. Añadir etiquetas de valor

Conclusión

D3.js: De Principiante a Avanzado

Módulo 1: Introducción a D3.js

Módulo 2: Trabajando con Selecciones

Módulo 3: Datos y Escalas

Módulo 4: Creando Visualizaciones Básicas

Módulo 5: Visualizaciones Avanzadas

Módulo 6: Interactividad y Animación

Módulo 7: Trabajando con Datos Reales

Módulo 8: Rendimiento y Optimización

Módulo 9: Mejores Prácticas y Técnicas Avanzadas

Módulo 10: Proyecto Final