El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Creant Gràfics de Barres

Següent ►
►

En aquest tema, aprendrem a crear gràfics de barres utilitzant D3.js. Els gràfics de barres són una de les visualitzacions més comunes i útils per representar dades categòriques. A través d'aquest mòdul, veurem com carregar dades, crear escales, i finalment, dibuixar les barres en un gràfic.

  1. Introducció als Gràfics de Barres

Un gràfic de barres és una representació gràfica de dades en la qual les dades es mostren mitjançant barres rectangulars. La longitud de cada barra és proporcional al valor que representa.

Conceptes Clau:

  • Eix X: Representa les categories.
  • Eix Y: Representa els valors.
  • Barres: Representen les dades.

  1. Configuració Inicial

HTML Bàsic

Primer, necessitem un fitxer HTML bàsic per contenir el nostre gràfic.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Gràfic de Barres amb D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .bar {
            fill: steelblue;
        }
        .bar:hover {
            fill: orange;
        }
        .axis-label {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <svg width="600" height="400"></svg>
    <script src="bar-chart.js"></script>
</body>
</html>

JavaScript Bàsic

Creem un fitxer bar-chart.js on escriurem el codi D3.js.

// Dimensions del gràfic
const width = 600;
const height = 400;
const margin = { top: 20, right: 30, bottom: 40, left: 40 };

// Dades d'exemple
const data = [
    { category: 'A', value: 30 },
    { category: 'B', value: 80 },
    { category: 'C', value: 45 },
    { category: 'D', value: 60 },
    { category: 'E', value: 20 },
    { category: 'F', value: 90 },
    { category: 'G', value: 55 },
];

// Crear SVG
const svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height);

// Crear escales
const x = d3.scaleBand()
    .domain(data.map(d => d.category))
    .range([margin.left, width - margin.right])
    .padding(0.1);

const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)]).nice()
    .range([height - margin.bottom, margin.top]);

// Afegir eix X
svg.append("g")
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x))
    .attr("class", "axis-label");

// Afegir eix Y
svg.append("g")
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y))
    .attr("class", "axis-label");

// Afegir barres
svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", d => x(d.category))
    .attr("y", d => y(d.value))
    .attr("width", x.bandwidth())
    .attr("height", d => y(0) - y(d.value));

  1. Explicació del Codi

Dimensions i Marges

Definim les dimensions del gràfic i els marges per deixar espai per als eixos.

const width = 600;
const height = 400;
const margin = { top: 20, right: 30, bottom: 40, left: 40 };

Dades d'Exemple

Utilitzem un conjunt de dades d'exemple per crear el gràfic.

const data = [
    { category: 'A', value: 30 },
    { category: 'B', value: 80 },
    { category: 'C', value: 45 },
    { category: 'D', value: 60 },
    { category: 'E', value: 20 },
    { category: 'F', value: 90 },
    { category: 'G', value: 55 },
];

Crear SVG

Creem un element SVG dins del qual dibuixarem el gràfic.

const svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height);

Crear Escales

Definim les escales per als eixos X i Y.

const x = d3.scaleBand()
    .domain(data.map(d => d.category))
    .range([margin.left, width - margin.right])
    .padding(0.1);

const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)]).nice()
    .range([height - margin.bottom, margin.top]);

Afegir Eixos

Afegim els eixos X i Y al gràfic.

svg.append("g")
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x))
    .attr("class", "axis-label");

svg.append("g")
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y))
    .attr("class", "axis-label");

Afegir Barres

Finalment, afegim les barres al gràfic.

svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", d => x(d.category))
    .attr("y", d => y(d.value))
    .attr("width", x.bandwidth())
    .attr("height", d => y(0) - y(d.value));

  1. Exercicis Pràctics

Exercici 1: Canviar els Colors de les Barres

Modifica el codi per canviar el color de les barres a verd.

Exercici 2: Afegir Etiquetes de Valors

Afegeix etiquetes de text a sobre de cada barra que mostrin el valor corresponent.

Exercici 3: Dades Dinàmiques

Modifica el codi per carregar dades des d'un fitxer CSV.

  1. Solucions

Solució 1: Canviar els Colors de les Barres

// Canviar el color de les barres a verd
svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", d => x(d.category))
    .attr("y", d => y(d.value))
    .attr("width", x.bandwidth())
    .attr("height", d => y(0) - y(d.value))
    .attr("fill", "green");

Solució 2: Afegir Etiquetes de Valors

// Afegir etiquetes de text a sobre de cada barra
svg.selectAll(".label")
    .data(data)
    .enter().append("text")
    .attr("class", "label")
    .attr("x", d => x(d.category) + x.bandwidth() / 2)
    .attr("y", d => y(d.value) - 5)
    .attr("text-anchor", "middle")
    .text(d => d.value);

Solució 3: Dades Dinàmiques

// Carregar dades des d'un fitxer CSV
d3.csv("data.csv").then(data => {
    data.forEach(d => {
        d.value = +d.value;
    });

    // Resta del codi per crear el gràfic
});

  1. Conclusió

En aquest tema, hem après a crear un gràfic de barres bàsic utilitzant D3.js. Hem vist com configurar l'entorn, crear escales, afegir eixos i dibuixar les barres. També hem practicat amb alguns exercicis per reforçar els conceptes apresos. En el següent tema, explorarem com crear altres tipus de gràfics amb D3.js.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats