El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este módulo, aprenderemos a crear visualizaciones jerárquicas utilizando D3.js. Las visualizaciones jerárquicas son útiles para representar datos estructurados en niveles, como árboles genealógicos, organigramas y estructuras de carpetas.

Conceptos Clave

Antes de comenzar con los ejemplos prácticos, es importante entender algunos conceptos clave:

Jerarquía: Una estructura de datos en la que los elementos están organizados en niveles, con un elemento raíz y varios niveles de nodos hijos.
Nodo: Cada elemento en la jerarquía.
Enlace: La conexión entre dos nodos, representando la relación padre-hijo.

Tipos de Diseños Jerárquicos en D3.js

D3.js proporciona varios tipos de diseños jerárquicos, entre los que se incluyen:

Árbol (Tree Layout): Representa la jerarquía en una estructura de árbol.
Cluster: Similar al árbol, pero con un enfoque en la agrupación de nodos.
Treemap: Representa la jerarquía en un espacio rectangular, dividiendo el área en sub-rectángulos.
Pack: Representa la jerarquía en un espacio circular, con círculos anidados.

Ejemplo Práctico: Creando un Árbol Jerárquico

Paso 1: Preparar los Datos

Primero, necesitamos definir nuestra estructura de datos jerárquica. Utilizaremos un formato JSON para representar la jerarquía.

{
  "name": "Root",
  "children": [
    {
      "name": "Child 1",
      "children": [
        { "name": "Grandchild 1" },
        { "name": "Grandchild 2" }
      ]
    },
    {
      "name": "Child 2",
      "children": [
        { "name": "Grandchild 3" }
      ]
    }
  ]
}

Paso 2: Configurar el Entorno

Asegúrate de tener un archivo HTML con un contenedor SVG donde se renderizará el árbol.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hierarchical Layout</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <style>
    .node circle {
      fill: #999;
    }
    .node text {
      font: 12px sans-serif;
    }
    .link {
      fill: none;
      stroke: #555;
      stroke-width: 1.5px;
    }
  </style>
</head>
<body>
  <svg width="960" height="600"></svg>
  <script src="hierarchical-layout.js"></script>
</body>
</html>

Paso 3: Crear el Árbol en D3.js

En el archivo hierarchical-layout.js, escribiremos el código para crear el árbol jerárquico.

// Definir las dimensiones y márgenes del SVG
const width = 960;
const height = 600;
const margin = { top: 20, right: 120, bottom: 20, left: 120 };

// Crear un contenedor SVG
const svg = d3.select("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

// Crear un layout de árbol
const treeLayout = d3.tree().size([height - margin.top - margin.bottom, width - margin.left - margin.right]);

// Definir la raíz de los datos
const root = d3.hierarchy(data);

// Generar el árbol
treeLayout(root);

// Crear enlaces (links)
const link = svg.selectAll(".link")
  .data(root.links())
  .enter().append("path")
  .attr("class", "link")
  .attr("d", d3.linkHorizontal()
    .x(d => d.y)
    .y(d => d.x));

// Crear nodos
const node = svg.selectAll(".node")
  .data(root.descendants())
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", d => `translate(${d.y},${d.x})`);

// Añadir círculos a los nodos
node.append("circle")
  .attr("r", 5);

// Añadir etiquetas a los nodos
node.append("text")
  .attr("dy", 3)
  .attr("x", d => d.children ? -8 : 8)
  .style("text-anchor", d => d.children ? "end" : "start")
  .text(d => d.data.name);

Explicación del Código

Definir las Dimensiones y Márgenes: Configuramos el tamaño del SVG y los márgenes para el contenedor.
Crear el Contenedor SVG: Añadimos un grupo (<g>) dentro del SVG para aplicar las transformaciones.
Crear el Layout de Árbol: Utilizamos d3.tree() para crear el layout de árbol y definimos su tamaño.
Definir la Raíz de los Datos: Convertimos los datos JSON en una jerarquía utilizando d3.hierarchy().
Generar el Árbol: Aplicamos el layout de árbol a la jerarquía de datos.
Crear Enlaces: Dibujamos las líneas que conectan los nodos utilizando d3.linkHorizontal().
Crear Nodos: Añadimos grupos (<g>) para cada nodo y los posicionamos.
Añadir Círculos y Etiquetas: Dibujamos círculos y etiquetas de texto para cada nodo.

Ejercicio Práctico

Ejercicio 1: Añadir Colores a los Nodos

Modifica el código para que los nodos tengan diferentes colores según su nivel en la jerarquía.

Solución

// Añadir colores a los nodos según su nivel
node.append("circle")
  .attr("r", 5)
  .style("fill", d => d.depth === 0 ? "#ff0000" : d.depth === 1 ? "#00ff00" : "#0000ff");

Ejercicio 2: Añadir Interactividad

Añade interactividad para que los nodos cambien de color cuando se haga clic en ellos.

Solución

// Añadir interactividad a los nodos
node.append("circle")
  .attr("r", 5)
  .style("fill", d => d.depth === 0 ? "#ff0000" : d.depth === 1 ? "#00ff00" : "#0000ff")
  .on("click", function(event, d) {
    d3.select(this).style("fill", "#ff00ff");
  });

Conclusión

En esta sección, hemos aprendido a crear visualizaciones jerárquicas utilizando D3.js, específicamente un árbol jerárquico. Hemos cubierto los conceptos clave, configurado el entorno, y creado un ejemplo práctico. Además, hemos proporcionado ejercicios para reforzar los conceptos aprendidos. En el próximo módulo, exploraremos otros tipos de diseños jerárquicos y cómo utilizarlos en nuestras visualizaciones.

Creando Diseños Jerárquicos

Conceptos Clave

Tipos de Diseños Jerárquicos en D3.js

Ejemplo Práctico: Creando un Árbol Jerárquico

Paso 1: Preparar los Datos

Paso 2: Configurar el Entorno

Paso 3: Crear el Árbol en D3.js

Explicación del Código

Ejercicio Práctico

Ejercicio 1: Añadir Colores a los Nodos

Solución

Ejercicio 2: Añadir Interactividad

Solución

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