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

HOME

En aquesta secció, aprendrem a crear la nostra primera visualització amb D3.js. Ens centrarem en els conceptes bàsics per començar a treballar amb aquesta potent llibreria de visualització de dades.

Configuració Inicial

1.1. Incloent D3.js en el teu Projecte

Per començar a utilitzar D3.js, primer hem d'incloure la llibreria en el nostre projecte. Hi ha diverses maneres de fer-ho:

CDN (Content Delivery Network): Pots incloure D3.js directament des d'un CDN com segueix:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Primers Passos amb D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <!-- El teu contingut aquí -->
</body>
</html>

Descarregant la llibreria: Pots descarregar D3.js des del lloc oficial i incloure'l localment en el teu projecte.

1.2. Estructura Bàsica del Document HTML

Per a la nostra primera visualització, necessitarem una estructura HTML bàsica:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Primers Passos amb D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <h1>Primera Visualització amb D3.js</h1>
    <svg width="600" height="400"></svg>
    <script src="script.js"></script>
</body>
</html>

En aquest exemple, hem creat un element <svg> on dibuixarem la nostra visualització. També hem inclòs un fitxer script.js on escriurem el nostre codi D3.js.

Creant la Primera Visualització

2.1. Seleccionant l'Element SVG

El primer pas és seleccionar l'element <svg> utilitzant D3.js:

// script.js
const svg = d3.select("svg");

2.2. Afegint un Cercle

Afegirem un cercle a l'element <svg> per veure com funciona D3.js:

// script.js
const svg = d3.select("svg");

svg.append("circle")
    .attr("cx", 300)  // Coordenada x del centre del cercle
    .attr("cy", 200)  // Coordenada y del centre del cercle
    .attr("r", 50)    // Radi del cercle
    .attr("fill", "blue");  // Color de farciment del cercle

2.3. Explicació del Codi

d3.select("svg"): Selecciona l'element <svg> del document.
svg.append("circle"): Afegeix un nou element <circle> dins de l'element <svg>.
.attr("cx", 300): Estableix l'atribut cx del cercle, que és la coordenada x del centre del cercle.
.attr("cy", 200): Estableix l'atribut cy del cercle, que és la coordenada y del centre del cercle.
.attr("r", 50): Estableix l'atribut r del cercle, que és el radi del cercle.
.attr("fill", "blue"): Estableix l'atribut fill del cercle, que és el color de farciment.

Exercici Pràctic

3.1. Objectiu

Crea una visualització que contingui un rectangle i un text dins de l'element <svg>.

3.2. Instruccions

Selecciona l'element <svg>.
Afegeix un rectangle amb les següents propietats:
- Coordenada x: 100
- Coordenada y: 100
- Amplada: 200
- Alçada: 100
- Color de farciment: verd
Afegeix un text amb les següents propietats:
- Coordenada x: 200
- Coordenada y: 150
- Contingut del text: "Hola, D3.js!"
- Color del text: negre
- Mida de la font: 20px

3.3. Solució

// script.js
const svg = d3.select("svg");

svg.append("rect")
    .attr("x", 100)
    .attr("y", 100)
    .attr("width", 200)
    .attr("height", 100)
    .attr("fill", "green");

svg.append("text")
    .attr("x", 200)
    .attr("y", 150)
    .attr("text-anchor", "middle")
    .attr("fill", "black")
    .attr("font-size", "20px")
    .text("Hola, D3.js!");

Conclusió

En aquesta secció, hem après a configurar un projecte bàsic amb D3.js i a crear la nostra primera visualització afegint elements SVG com cercles, rectangles i text. Aquests són els fonaments per començar a treballar amb D3.js i crear visualitzacions més complexes.

En la següent secció, explorarem com treballar amb seleccions en D3.js per manipular elements DOM de manera més eficient.

Primers Passos amb D3.js

Configuració Inicial

1.1. Incloent D3.js en el teu Projecte

1.2. Estructura Bàsica del Document HTML

Creant la Primera Visualització

2.1. Seleccionant l'Element SVG

2.2. Afegint un Cercle

2.3. Explicació del Codi

Exercici Pràctic

3.1. Objectiu

3.2. Instruccions

3.3. Solució

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