El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem a crear visualitzacions jeràrquiques utilitzant D3.js. Les visualitzacions jeràrquiques són útils per representar dades que tenen una estructura d'arbre, com ara organigrames, arbres genealògics o estructures de carpetes.

Objectius

Entendre què són les disposicions jeràrquiques.
Aprendre a utilitzar les funcions de D3.js per crear visualitzacions jeràrquiques.
Crear un arbre jeràrquic bàsic.
Personalitzar la visualització jeràrquica.

Què són les Disposicions Jeràrquiques?

Les disposicions jeràrquiques són una manera de representar dades que tenen una estructura d'arbre. En una estructura d'arbre, cada node pot tenir zero o més nodes fills, i hi ha un únic node arrel que no té cap node pare.

Exemples de Disposicions Jeràrquiques

Organigrames: Representen la jerarquia d'una organització.
Arbres Genealògics: Mostren les relacions familiars.
Estructures de Carpetes: Representen la jerarquia de carpetes i fitxers en un sistema de fitxers.

Utilitzant D3.js per Crear Disposicions Jeràrquiques

D3.js proporciona diverses funcions per treballar amb dades jeràrquiques. En aquest tema, ens centrarem en la funció d3.hierarchy i en la disposició d'arbre (d3.tree).

Exemple de Dades Jeràrquiques

{
  "name": "Arrel",
  "children": [
    {
      "name": "Fill 1",
      "children": [
        { "name": "Nét 1" },
        { "name": "Nét 2" }
      ]
    },
    {
      "name": "Fill 2",
      "children": [
        { "name": "Nét 3" }
      ]
    }
  ]
}

Creant un Arbre Jeràrquic Bàsic

Configuració de l'Entorn

Assegura't de tenir un fitxer HTML amb un element <svg> on es dibuixarà l'arbre.

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>Arbre Jeràrquic</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    .node circle {
      fill: steelblue;
    }
    .node text {
      font: 12px sans-serif;
    }
    .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 2px;
    }
  </style>
</head>
<body>
  <svg width="960" height="600"></svg>
  <script src="script.js"></script>
</body>
</html>

Script per Crear l'Arbre

// script.js

// Dades jeràrquiques
const data = {
  name: "Arrel",
  children: [
    {
      name: "Fill 1",
      children: [
        { name: "Nét 1" },
        { name: "Nét 2" }
      ]
    },
    {
      name: "Fill 2",
      children: [
        { name: "Nét 3" }
      ]
    }
  ]
};

// Dimensions i marges
const width = 960;
const height = 600;
const margin = { top: 20, right: 120, bottom: 20, left: 120 };

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

// Crear una disposició d'arbre
const tree = d3.tree().size([height - margin.top - margin.bottom, width - margin.left - margin.right]);

// Convertir les dades en una estructura jeràrquica
const root = d3.hierarchy(data);

// Assignar posicions als nodes
tree(root);

// Crear enllaços (línies entre nodes)
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 nodes
const node = svg.selectAll(".node")
  .data(root.descendants())
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", d => `translate(${d.y},${d.x})`);

// Afegir cercles als nodes
node.append("circle")
  .attr("r", 10);

// Afegir etiquetes als nodes
node.append("text")
  .attr("dy", 3)
  .attr("x", d => d.children ? -12 : 12)
  .style("text-anchor", d => d.children ? "end" : "start")
  .text(d => d.data.name);

Explicació del Codi

Dades Jeràrquiques: Definim les dades en una estructura jeràrquica.
Dimensions i Marges: Definim les dimensions del SVG i els marges.
Crear un SVG: Creem un element SVG i afegim un grup <g> per contenir l'arbre.
Disposició d'Arbre: Utilitzem d3.tree per crear una disposició d'arbre.
Estructura Jeràrquica: Convertim les dades en una estructura jeràrquica utilitzant d3.hierarchy.
Assignar Posicions: Assignem posicions als nodes de l'arbre.
Crear Enllaços: Creem les línies que connecten els nodes.
Crear Nodes: Creem els nodes i afegim cercles i etiquetes.

Exercici Pràctic

Exercici 1: Afegir més Nodes

Modifica les dades jeràrquiques per afegir més nodes i actualitza la visualització.

Solució

{
  "name": "Arrel",
  "children": [
    {
      "name": "Fill 1",
      "children": [
        { "name": "Nét 1" },
        { "name": "Nét 2" },
        { "name": "Nét 4" }
      ]
    },
    {
      "name": "Fill 2",
      "children": [
        { "name": "Nét 3" },
        { "name": "Nét 5" }
      ]
    }
  ]
}

Actualitza el codi JavaScript amb les noves dades i observa com es modifica la visualització.

Resum

En aquest tema, hem après a crear visualitzacions jeràrquiques utilitzant D3.js. Hem vist com utilitzar d3.hierarchy i d3.tree per crear un arbre jeràrquic bàsic i com personalitzar-lo. També hem practicat afegint més nodes a les dades jeràrquiques.

En el següent tema, explorarem altres tipus de disposicions jeràrquiques, com ara els clústers i els paquets.

Creant Disposicions Jeràrquiques

Objectius

Què són les Disposicions Jeràrquiques?

Exemples de Disposicions Jeràrquiques

Utilitzant D3.js per Crear Disposicions Jeràrquiques

Exemple de Dades Jeràrquiques

Creant un Arbre Jeràrquic Bàsic

Explicació del Codi

Exercici Pràctic

Exercici 1: Afegir més Nodes

Solució

Resum

D3.js: De Principiant a Avançat

Mòdul 1: Introducció a D3.js

Mòdul 2: Treballant amb Seleccions

Mòdul 3: Dades i Escales

Mòdul 4: Creant Visualitzacions Bàsiques

Mòdul 5: Visualitzacions Avançades

Mòdul 6: Interactivitat i Animació

Mòdul 7: Treballant amb Dades Reals

Mòdul 8: Rendiment i Optimització

Mòdul 9: Millors Pràctiques i Tècniques Avançades

Mòdul 10: Projecte Final