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

HOME

En aquest tema, aprendrem com afegir animacions a les nostres visualitzacions amb D3.js. Les animacions poden fer que les visualitzacions siguin més atractives i ajudar a comunicar millor les dades. Explorarem com crear transicions suaus i com controlar les animacions per obtenir els efectes desitjats.

Conceptes Clau

Transicions: Canvis suaus d'un estat a un altre.
Durada: Temps que triga una transició.
Retard: Temps d'espera abans que comenci una transició.
Easing: Funcions que defineixen la velocitat de la transició al llarg del temps.

Exemples Pràctics

Exemple 1: Transició Bàsica

Comencem amb un exemple senzill on animem la posició d'un cercle SVG.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transició Bàsica</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <svg width="500" height="500"></svg>
    <script>
        const svg = d3.select("svg");

        // Afegim un cercle al SVG
        const circle = svg.append("circle")
            .attr("cx", 50)
            .attr("cy", 50)
            .attr("r", 20)
            .style("fill", "blue");

        // Afegim una transició per moure el cercle
        circle.transition()
            .duration(2000) // Durada de 2 segons
            .attr("cx", 450) // Nova posició en x
            .style("fill", "red"); // Canvi de color
    </script>
</body>
</html>

Explicació del Codi

Creació del Cercle: Utilitzem d3.select per seleccionar l'element SVG i afegir un cercle amb atributs inicials.
Transició: Utilitzem .transition() per iniciar una transició. La durada es defineix amb .duration(2000), i canviem la posició cx i el color fill.

Exemple 2: Transició amb Retard i Easing

Afegim un retard i una funció d'easing a la transició.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transició amb Retard i Easing</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <svg width="500" height="500"></svg>
    <script>
        const svg = d3.select("svg");

        const circle = svg.append("circle")
            .attr("cx", 50)
            .attr("cy", 50)
            .attr("r", 20)
            .style("fill", "blue");

        circle.transition()
            .delay(1000) // Retard de 1 segon
            .duration(2000)
            .ease(d3.easeBounce) // Funció d'easing
            .attr("cx", 450)
            .style("fill", "red");
    </script>
</body>
</html>

Explicació del Codi

Retard: Utilitzem .delay(1000) per afegir un retard de 1 segon abans de començar la transició.
Easing: Utilitzem .ease(d3.easeBounce) per aplicar una funció d'easing que fa que la transició tingui un efecte de rebot.

Exercicis Pràctics

Exercici 1: Animar un Gràfic de Barres

Crea un gràfic de barres on les barres creixin des de la base fins a la seva alçada final amb una animació.

Solució

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gràfic de Barres Animat</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <svg width="500" height="300"></svg>
    <script>
        const data = [30, 80, 45, 60, 20, 90, 50];

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

        const x = d3.scaleBand()
            .domain(d3.range(data.length))
            .range([0, width])
            .padding(0.1);

        const y = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height, 0]);

        svg.selectAll("rect")
            .data(data)
            .enter().append("rect")
            .attr("x", (d, i) => x(i))
            .attr("y", height)
            .attr("width", x.bandwidth())
            .attr("height", 0)
            .style("fill", "steelblue")
            .transition()
            .duration(1000)
            .attr("y", d => y(d))
            .attr("height", d => height - y(d));
    </script>
</body>
</html>

Explicació del Codi

Dades i Escales: Definim les dades i les escales x i y.
Creació de les Barres: Afegim les barres amb atributs inicials y i height per començar des de la base.
Transició: Utilitzem .transition() per animar les barres fins a la seva alçada final.

Resum

En aquesta secció, hem après com afegir animacions a les nostres visualitzacions amb D3.js. Hem explorat conceptes com les transicions, la durada, el retard i les funcions d'easing. També hem vist exemples pràctics i hem realitzat un exercici per reforçar els conceptes apresos. Les animacions poden millorar significativament la presentació de les dades i fer que les visualitzacions siguin més atractives i informatives.

Animant Visualitzacions

Conceptes Clau

Exemples Pràctics

Exemple 1: Transició Bàsica

Explicació del Codi

Exemple 2: Transició amb Retard i Easing

Explicació del Codi

Exercicis Pràctics

Exercici 1: Animar un Gràfic de Barres

Solució

Explicació del Codi

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