El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este módulo, aprenderemos a crear gráficos de líneas utilizando D3.js. Los gráficos de líneas son una herramienta poderosa para visualizar datos continuos a lo largo del tiempo. Vamos a desglosar el proceso en pasos claros y concisos, proporcionando ejemplos prácticos y ejercicios para reforzar los conceptos.

Conceptos Clave

SVG (Scalable Vector Graphics): Utilizaremos SVG para dibujar los gráficos.
Escalas: Necesitamos escalas para mapear los datos a coordenadas en el gráfico.
Ejes: Los ejes nos ayudan a interpretar los datos en el gráfico.
Líneas: Utilizaremos la función line de D3 para crear las líneas del gráfico.

Paso 1: Configuración del Entorno

Antes de comenzar, asegúrate de tener un entorno de desarrollo configurado con D3.js. Puedes incluir D3.js en tu proyecto mediante un CDN:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gráfico de Líneas con D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <div id="chart"></div>
    <script src="line-chart.js"></script>
</body>
</html>

Paso 2: Preparación de los Datos

Para este ejemplo, utilizaremos un conjunto de datos simple que representa las ventas mensuales de una tienda:

const data = [
    { month: 'January', sales: 30 },
    { month: 'February', sales: 40 },
    { month: 'March', sales: 45 },
    { month: 'April', sales: 50 },
    { month: 'May', sales: 55 },
    { month: 'June', sales: 60 }
];

Paso 3: Crear el SVG y Definir las Dimensiones

Primero, creamos un contenedor SVG donde dibujaremos nuestro gráfico:

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

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})`);

Paso 4: Definir las Escalas

Definimos las escalas para el eje X (meses) y el eje Y (ventas):

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

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

Paso 5: Añadir los Ejes

Añadimos los ejes X e Y al gráfico:

svg.append("g")
    .attr("transform", `translate(0,${height})`)
    .call(d3.axisBottom(x));

svg.append("g")
    .call(d3.axisLeft(y));

Paso 6: Crear la Línea

Utilizamos la función line de D3 para crear la línea del gráfico:

const line = d3.line()
    .x(d => x(d.month) + x.bandwidth() / 2)
    .y(d => y(d.sales));

svg.append("path")
    .datum(data)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 1.5)
    .attr("d", line);

Ejercicio Práctico

Ejercicio 1: Añadir Puntos a la Línea

Añade puntos en cada intersección de la línea para resaltar los valores de ventas.

Solución:

svg.selectAll("dot")
    .data(data)
    .enter().append("circle")
    .attr("cx", d => x(d.month) + x.bandwidth() / 2)
    .attr("cy", d => y(d.sales))
    .attr("r", 5)
    .attr("fill", "red");

Ejercicio 2: Añadir Etiquetas a los Puntos

Añade etiquetas a cada punto para mostrar el valor de ventas.

Solución:

svg.selectAll("text")
    .data(data)
    .enter().append("text")
    .attr("x", d => x(d.month) + x.bandwidth() / 2)
    .attr("y", d => y(d.sales) - 10)
    .attr("text-anchor", "middle")
    .text(d => d.sales);

Resumen

En esta lección, hemos aprendido a crear un gráfico de líneas básico utilizando D3.js. Hemos cubierto cómo preparar los datos, definir escalas, añadir ejes y dibujar la línea. También hemos añadido puntos y etiquetas para mejorar la visualización. En el próximo módulo, exploraremos cómo crear gráficos de pastel con D3.js.

¡Sigue practicando y experimentando con diferentes conjuntos de datos y estilos para dominar la creación de gráficos de líneas con D3.js!

Creando Gráficos de Líneas

Conceptos Clave

Paso 1: Configuración del Entorno

Paso 2: Preparación de los Datos

Paso 3: Crear el SVG y Definir las Dimensiones

Paso 4: Definir las Escalas

Paso 5: Añadir los Ejes

Paso 6: Crear la Línea

Ejercicio Práctico

Ejercicio 1: Añadir Puntos a la Línea

Ejercicio 2: Añadir Etiquetas a los Puntos

Resumen

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