En esta sección, aprenderás a dar tus primeros pasos con D3.js. Vamos a crear una visualización simple para que te familiarices con la biblioteca y sus capacidades básicas.

Antes de comenzar, asegúrate de que tu entorno esté configurado correctamente. Si no lo has hecho, revisa la sección anterior sobre cómo configurar tu entorno.

Crea una estructura básica de proyecto con los siguientes archivos:

En index.html, configura un documento HTML básico que incluya D3.js:

En style.css, agrega algunos estilos básicos:

En script.js, comenzaremos a escribir nuestro código D3.js.

Vamos a crear una visualización simple: un gráfico de barras.

Primero, definamos algunos datos de ejemplo en script.js:

Usaremos D3.js para seleccionar el contenedor #chart y crear barras para cada dato:

1. Definición de Datos: const data = [30, 86, 168, 281, 303, 365]; define un arreglo de datos que representarán las alturas de las barras.

2. Configuración del SVG:

   const width = 500;
   const height = 300;
   const barWidth = width / data.length;
   

   Aquí definimos el ancho y alto del SVG, así como el ancho de cada barra.

3. Creación del SVG:

   const chart = d3.select("#chart")
       .append("svg")
       .attr("width", width)
       .attr("height", height);
   

   Seleccionamos el contenedor #chart y le añadimos un elemento svg con las dimensiones especificadas.

4. Creación de Barras:

   chart.selectAll("rect")
       .data(data)
       .enter()
       .append("rect")
       .attr("width", barWidth - 1)
       .attr("height", d => d)
       .attr("x", (d, i) => i * barWidth)
       .attr("y", d => height - d)
       .attr("fill", "steelblue");
   

   • selectAll("rect"): Selecciona todos los elementos rect (inicialmente no hay ninguno).
   • .data(data): Vincula los datos al conjunto de elementos seleccionados.
   • .enter(): Crea un nuevo conjunto de elementos para cada dato.
   • .append("rect"): Añade un rect para cada dato.
   • .attr("width", barWidth - 1): Define el ancho de cada barra.
   • .attr("height", d => d): Define la altura de cada barra basada en el dato.
   • .attr("x", (d, i) => i * barWidth): Define la posición horizontal de cada barra.
   • .attr("y", d => height - d): Define la posición vertical de cada barra.
   • .attr("fill", "steelblue"): Define el color de las barras.

Modifica el código para que las barras tengan un color diferente basado en su altura. Usa una escala de colores de D3.js.

1. Escala de Colores:

   const colorScale = d3.scaleLinear()
       .domain([0, d3.max(data)])
       .range(["lightblue", "darkblue"]);
   

   Creamos una escala lineal que mapea los valores de los datos a un rango de colores.

2. Aplicación de la Escala de Colores:

   .attr("fill", d => colorScale(d));
   

   Usamos la escala de colores para definir el color de cada barra basado en su altura.

En esta sección, has aprendido a crear una visualización simple con D3.js. Has visto cómo seleccionar elementos, vincular datos y crear gráficos básicos. Estos son los primeros pasos fundamentales para trabajar con D3.js. En las próximas secciones, profundizaremos en cómo trabajar con selecciones y datos de manera más avanzada.