El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta sección, vamos a explorar los conceptos y la terminología fundamental que necesitas conocer para trabajar con D3.js. Estos conceptos te proporcionarán una base sólida para entender cómo funciona D3.js y cómo puedes utilizarlo para crear visualizaciones de datos efectivas.

¿Qué es D3.js?

D3.js (Data-Driven Documents) es una biblioteca de JavaScript para producir visualizaciones dinámicas e interactivas en navegadores web. Utiliza estándares web como HTML, SVG y CSS para manipular documentos basados en datos.

Conceptos Clave

Selecciones

Las selecciones son una parte central de D3.js. Permiten seleccionar elementos del DOM (Document Object Model) y aplicarles cambios. Las selecciones en D3.js son similares a las de jQuery, pero están optimizadas para trabajar con datos.

// Selecciona todos los elementos <p> y cambia su texto
d3.selectAll("p").text("Nuevo texto");

Enlazado de Datos

El enlazado de datos es el proceso de asociar datos a elementos del DOM. Esto permite crear visualizaciones que se actualizan automáticamente cuando los datos cambian.

// Datos de ejemplo
var data = [10, 20, 30, 40, 50];

// Selecciona todos los elementos <div> y los enlaza con los datos
var selection = d3.selectAll("div").data(data);

// Crea nuevos elementos <div> para cada dato
selection.enter().append("div")
    .text(function(d) { return d; });

Escalas

Las escalas en D3.js son funciones que mapean un dominio de entrada (por ejemplo, valores de datos) a un rango de salida (por ejemplo, posiciones en la pantalla). Las escalas son esenciales para crear visualizaciones precisas y legibles.

// Escala lineal que mapea valores de 0-100 a 0-500
var scale = d3.scaleLinear()
    .domain([0, 100])
    .range([0, 500]);

// Uso de la escala
console.log(scale(50)); // 250

Ejes

Los ejes son componentes visuales que representan las escalas en una visualización. D3.js proporciona funciones para crear ejes fácilmente.

// Crear un eje basado en una escala
var axis = d3.axisBottom(scale);

// Añadir el eje a un elemento SVG
d3.select("svg")
    .append("g")
    .attr("transform", "translate(0, 500)")
    .call(axis);

SVG (Scalable Vector Graphics)

SVG es un formato de gráficos vectoriales que D3.js utiliza para crear visualizaciones. Los elementos SVG son manipulables mediante D3.js, lo que permite crear gráficos complejos y dinámicos.

// Crear un elemento SVG
var svg = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 500);

// Añadir un círculo al SVG
svg.append("circle")
    .attr("cx", 250)
    .attr("cy", 250)
    .attr("r", 50)
    .style("fill", "blue");

Ejercicio Práctico

Ejercicio 1: Crear un Gráfico de Barras Simple

Objetivo: Crear un gráfico de barras simple utilizando D3.js.

Instrucciones:

Crea un archivo HTML y enlaza la biblioteca D3.js.
Define un conjunto de datos.
Utiliza D3.js para crear un gráfico de barras basado en los datos.

Código de Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gráfico de Barras Simple</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <style>
        .bar {
            fill: steelblue;
        }
    </style>
</head>
<body>
    <script>
        // Datos de ejemplo
        var data = [10, 20, 30, 40, 50];

        // Dimensiones del gráfico
        var width = 500;
        var height = 300;
        var barWidth = width / data.length;

        // Crear un elemento SVG
        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

        // Crear barras
        svg.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d, i) { return i * barWidth; })
            .attr("y", function(d) { return height - d * 5; })
            .attr("width", barWidth - 1)
            .attr("height", function(d) { return d * 5; });
    </script>
</body>
</html>

Explicación del Código:

Datos de ejemplo: Un array de números que representan los valores de las barras.
Dimensiones del gráfico: Se define el ancho y alto del SVG, así como el ancho de cada barra.
Crear un elemento SVG: Se añade un elemento SVG al cuerpo del documento.
Crear barras: Se seleccionan todos los elementos .bar, se enlazan con los datos y se crean elementos <rect> para cada dato, configurando sus atributos x, y, width y height.

Conclusión

En esta sección, hemos cubierto los conceptos y la terminología básica de D3.js, incluyendo selecciones, enlazado de datos, escalas, ejes y SVG. Estos conceptos son fundamentales para trabajar con D3.js y crear visualizaciones de datos efectivas. En la próxima sección, profundizaremos en cómo trabajar con selecciones en D3.js.

Conceptos y Terminología Básica

¿Qué es D3.js?

Conceptos Clave

Selecciones

Enlazado de Datos

Escalas

Ejes

SVG (Scalable Vector Graphics)

Ejercicio Práctico

Ejercicio 1: Crear un Gráfico de Barras Simple

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