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

HOME

En aquest tema, aprendrem a crear gràfics de pastís utilitzant D3.js. Els gràfics de pastís són una manera visualment atractiva de mostrar dades categòriques en forma de sectors d'un cercle. Cada sector representa una categoria i la seva mida és proporcional al valor de la categoria.

Introducció als Gràfics de Pastís

Què és un Gràfic de Pastís?

Un gràfic de pastís és una representació circular de dades on cada sector del cercle representa una part del total. És útil per mostrar la proporció de diferents categories en un conjunt de dades.

Components Clau:

Arc: Cada sector del gràfic de pastís.
Radi: La distància des del centre del cercle fins a la vora.
Angles: Determinen la mida de cada sector.

Configurant l'Entorn

Abans de començar a crear el nostre gràfic de pastís, assegurem-nos que tenim el nostre entorn configurat correctament. Necessitarem un fitxer HTML amb un element <svg> on dibuixarem el nostre gràfic, i un fitxer JavaScript on escriurem el codi D3.js.

Exemple de Fitxer HTML:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Gràfic de Pastís amb D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <svg width="500" height="500"></svg>
    <script src="script.js"></script>
</body>
</html>

Exemple de Fitxer JavaScript (script.js):

// Codi D3.js per crear el gràfic de pastís

Preparant les Dades

Per crear un gràfic de pastís, necessitem un conjunt de dades. Les dades poden ser un array d'objectes on cada objecte representa una categoria i el seu valor.

Exemple de Dades:

const dades = [
    { categoria: 'A', valor: 30 },
    { categoria: 'B', valor: 70 },
    { categoria: 'C', valor: 45 },
    { categoria: 'D', valor: 85 },
    { categoria: 'E', valor: 50 }
];

Creant el Gràfic de Pastís

Passos per Crear el Gràfic:

Definir les Dimensions i el Radi:

const amplada = 500;
const alçada = 500;
const radi = Math.min(amplada, alçada) / 2;

Crear un Grup per al Gràfic de Pastís:

const svg = d3.select("svg")
    .attr("width", amplada)
    .attr("height", alçada)
    .append("g")
    .attr("transform", `translate(${amplada / 2}, ${alçada / 2})`);

Crear una Escala de Colors:

const color = d3.scaleOrdinal()
    .domain(dades.map(d => d.categoria))
    .range(d3.schemeCategory10);

Generar els Arcs:

const arc = d3.arc()
    .innerRadius(0)
    .outerRadius(radi);

Generar el Layout del Pastís:

const pie = d3.pie()
    .value(d => d.valor);

Dibuixar els Arcs:

const arcs = svg.selectAll("arc")
    .data(pie(dades))
    .enter()
    .append("g")
    .attr("class", "arc");

arcs.append("path")
    .attr("d", arc)
    .attr("fill", d => color(d.data.categoria));

Codi Complet:

const dades = [
    { categoria: 'A', valor: 30 },
    { categoria: 'B', valor: 70 },
    { categoria: 'C', valor: 45 },
    { categoria: 'D', valor: 85 },
    { categoria: 'E', valor: 50 }
];

const amplada = 500;
const alçada = 500;
const radi = Math.min(amplada, alçada) / 2;

const svg = d3.select("svg")
    .attr("width", amplada)
    .attr("height", alçada)
    .append("g")
    .attr("transform", `translate(${amplada / 2}, ${alçada / 2})`);

const color = d3.scaleOrdinal()
    .domain(dades.map(d => d.categoria))
    .range(d3.schemeCategory10);

const arc = d3.arc()
    .innerRadius(0)
    .outerRadius(radi);

const pie = d3.pie()
    .value(d => d.valor);

const arcs = svg.selectAll("arc")
    .data(pie(dades))
    .enter()
    .append("g")
    .attr("class", "arc");

arcs.append("path")
    .attr("d", arc)
    .attr("fill", d => color(d.data.categoria));

Exercicis Pràctics

Exercici 1:

Modifica el codi per afegir etiquetes amb els noms de les categories a cada sector del gràfic de pastís.

Solució:

arcs.append("text")
    .attr("transform", d => `translate(${arc.centroid(d)})`)
    .attr("text-anchor", "middle")
    .text(d => d.data.categoria);

Exercici 2:

Canvia els colors dels sectors utilitzant una escala de colors diferent.

Solució:

const color = d3.scaleOrdinal()
    .domain(dades.map(d => d.categoria))
    .range(d3.schemeSet3);

Resum

En aquest tema, hem après a crear gràfics de pastís utilitzant D3.js. Hem cobert els passos des de la configuració de l'entorn fins a la creació i personalització del gràfic. Els gràfics de pastís són una eina poderosa per visualitzar dades categòriques i amb D3.js podem crear visualitzacions dinàmiques i interactives.

Creant Gràfics de Pastís

Introducció als Gràfics de Pastís

Què és un Gràfic de Pastís?

Components Clau:

Configurant l'Entorn

Exemple de Fitxer HTML:

Exemple de Fitxer JavaScript (script.js):

Preparant les Dades

Exemple de Dades:

Creant el Gràfic de Pastís

Passos per Crear el Gràfic:

Codi Complet:

Exercicis Pràctics

Exercici 1:

Solució:

Exercici 2:

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