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

HOME

En aquest tema, explorarem els conceptes fonamentals i la terminologia essencial per treballar amb D3.js. Aquest coneixement és crucial per comprendre com funciona D3.js i com podem utilitzar-lo per crear visualitzacions de dades efectives.

Què és D3.js?

D3.js (Data-Driven Documents) és una biblioteca de JavaScript per produir visualitzacions de dades dinàmiques i interactives en navegadors web. Utilitza estàndards web com HTML, SVG i CSS per crear gràfics i altres formes de representació visual de dades.

Conceptes Clau

DOM (Document Object Model)

El DOM és una representació estructurada del document HTML. D3.js manipula el DOM per crear i actualitzar visualitzacions de dades.

Seleccions

Les seleccions són un concepte central en D3.js. Permeten seleccionar elements del DOM per manipular-los. Les seleccions es fan amb els mètodes d3.select i d3.selectAll.

// Selecciona un element amb l'ID 'myElement'
d3.select("#myElement");

// Selecciona tots els elements de tipus 'div'
d3.selectAll("div");

Enllaç de Dades

L'enllaç de dades és el procés d'associar dades a elements del DOM. Això permet que els elements del DOM es creïn, actualitzin o eliminin en funció de les dades.

// Enllaça un array de dades a elements 'div'
d3.selectAll("div")
  .data([10, 20, 30])
  .enter()
  .append("div")
  .text(d => d);

Escales

Les escales són funcions que mapegen un domini de dades a un rang de valors. S'utilitzen per transformar dades en coordenades o altres propietats visuals.

// Crea una escala lineal
const scale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 500]);

// Utilitza l'escala per transformar un valor
console.log(scale(50)); // 250

SVG (Scalable Vector Graphics)

SVG és un format de gràfics vectorials que D3.js utilitza per crear visualitzacions. Els elements SVG es poden manipular amb D3.js per crear formes, línies, textos, etc.

// Crea un cercle SVG
d3.select("body")
  .append("svg")
  .attr("width", 100)
  .attr("height", 100)
  .append("circle")
  .attr("cx", 50)
  .attr("cy", 50)
  .attr("r", 40)
  .style("fill", "blue");

Terminologia Essencial

Termini	Descripció
DOM	Model d'Objectes del Document, una representació estructurada del document HTML.
Selecció	Mètode per seleccionar elements del DOM (`d3.select`, `d3.selectAll`).
Enllaç de Dades	Associació de dades a elements del DOM (`.data()`, `.enter()`, `.exit()`).
Escala	Funció que mapega un domini de dades a un rang de valors (`d3.scaleLinear`).
SVG	Gràfics Vectorials Escalables, un format per crear gràfics vectorials.

Exercici Pràctic

Objectiu

Crear un simple gràfic de barres utilitzant D3.js per reforçar els conceptes apresos.

Passos

Configura l'entorn: Assegura't de tenir un document HTML amb D3.js inclòs.
Crea un contenidor SVG: Afegeix un element SVG al document.
Enllaça les dades: Utilitza un array de dades per crear les barres.
Dibuixa les barres: Utilitza elements rect per representar les barres.

Codi Exemple

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gràfic de Barres Simple</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <style>
    .bar {
      fill: steelblue;
    }
  </style>
</head>
<body>
  <script>
    // Dades
    const data = [30, 86, 168, 281, 303, 365];

    // Dimensions del gràfic
    const width = 500;
    const height = 300;
    const barWidth = width / data.length;

    // Crea un contenidor SVG
    const svg = d3.select("body")
      .append("svg")
      .attr("width", width)
      .attr("height", height);

    // Crea les barres
    svg.selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("class", "bar")
      .attr("x", (d, i) => i * barWidth)
      .attr("y", d => height - d)
      .attr("width", barWidth - 1)
      .attr("height", d => d);
  </script>
</body>
</html>

Explicació del Codi

Dades: Definim un array de dades.
Dimensions del gràfic: Establim l'amplada i l'alçada del gràfic, així com l'amplada de cada barra.
Contenidor SVG: Creem un element SVG dins del cos del document.
Barres: Utilitzem selectAll, data, enter i append per crear elements rect per a cada dada, establint les seves propietats x, y, width i height.

Conclusió

En aquesta secció, hem après els conceptes bàsics i la terminologia essencial per treballar amb D3.js. Hem explorat com seleccionar elements del DOM, enllaçar dades, utilitzar escales i crear elements SVG. A més, hem aplicat aquests conceptes en un exercici pràctic per crear un simple gràfic de barres. Amb aquests fonaments, estem preparats per aprofundir en temes més avançats en els següents mòduls.

Conceptes Bàsics i Terminologia

Què és D3.js?

Conceptes Clau

DOM (Document Object Model)

Seleccions

Enllaç de Dades

Escales

SVG (Scalable Vector Graphics)

Terminologia Essencial

Exercici Pràctic

Objectiu

Passos

Codi Exemple

Explicació del Codi

Conclusió

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