Integració de continguts interactius

La visualització de dades és una eina crucial per a la comprensió i l’anàlisi de conjunts de dades. A través de gràfics, diagrames i altres tipus de representacions visuals, es poden destacar patrons, tendències i relacions entre diferents variables que poden passar desapercebudes en dades numèriques o text.

Hi ha moltes biblioteques i eines disponibles per a la visualització de dades, cada una amb les seves pròpies característiques i funcionalitats. Tres de les biblioteques més conegudes per a la visualització de dades són: ChartJS, D3.js i Google Charts.

• Chart.js és una biblioteca JavaScript que permet crear gràfics dinàmics i interactius amb poca configuració.
• D3.js és una biblioteca JavaScript que proporciona eines per a la representació de dades en el navegador web. És especialment útil per a la creació de gràfics personalitzats i visualitzacions de dades molt complexes.
• Google Charts és una eina de Google que permet crear gràfics i diagrames personalitzats en poc temps, amb diferents opcions de personalització i integració amb altres eines de Google com ara Google Sheets.

Cada biblioteca presenta característiques i funcionalitats concretes que es poden veure amb exemples d’ús per a diferents tipus de gràfics.Els avantatges i desavantatges de cada biblioteca ens permeten decidir la millor opció segons les necessitats de visualització de dades.

Chart.js és una biblioteca JavaScript de codi obert que permet crear gràfics dinàmics i interactius amb poca configuració. Està disponible com a biblioteca autònoma o com a part d’entorns de treball (frameworks) de JavaScript com ara Angular, React i Vue.js.

Les característiques principals de Chart.js inclouen:

• Suport per a diferents tipus de gràfics: línia, barra, àrea, torta, radar, circular, polar, diana, etc.
• Personalització dels eixos, llegendes i etiquetes de dades
• Suport per a dades de múltiples conjunts i conjunts de dades mixtes
• Eines per a l’animació i el control de l’aspecte visual de les gràfics
• Suport per a l’interacció amb els gràfics mitjançant hovers i clics
• Integració amb altres eines de visualització de dades com ara Google Maps

Els principals avantatges de fer servir Chart.js per integrar gràfics a les pàgines web són:

• És una biblioteca lleugera i ràpida de carregar, cosa que la fa ideal per a projectes que requereixen una visualització ràpida de dades.
• Té una gran varietat de tipus de gràfics disponibles, cosa que la fa útil per a diferents usos.
• Proporciona moltes opcions de personalització per adaptar els gràfics a les necessitats de cada projecte.
• És fàcil d’utilitzar, ja que disposa de documentació detallada i exemples d’ús.

Els seus principals inconvenients són:

• Algunes de les opcions de personalització poden ser complexes de configurar, especialment per a usuaris menys experimentats.
• No és tan potent com altres biblioteques de visualització de dades, com ara D3.js, cosa que pot limitar la complexitat de gràfics creats amb Chart.js.
• No és recomanable utilitzar Chart.js per a la visualització de grans conjunts de dades de manera eficient, ja que pot resultar lent.

En resum, Chart.js és una biblioteca molt útil per a la visualització ràpida i senzilla de dades, però pot ser limitada en algunes situacions o per a projectes més complexos. És important valorar les característiques i funcionalitats de Chart.js i altres biblioteques similars per determinar quina és la més adequada per a cada projecte en qüestió.

Es pot usar un exemple bàsic de codi per crear una gràfic de línia amb Chart.js. El primer pas és incloure la biblioteca de ChartJS a la pàgina web utilitzant l’etiqueta <script>. A continuació, es crea un llenç (canvas) en HTML on es mostra el gràfic.

Després, a JavaScript, es crea una referència al context del llenç mitjançant la funció getContext. A partir d’aquest context, es crea un nou objecte Chart passant el context i unes opcions de configuració. Les opcions inclouen el tipus de gràfic (en aquest cas, un gràfic de línia), les dades a mostrar i la configuració de les escales (en aquest cas, la configuració de l’eix Y perquè comenci a zero).

Aquests són només els elements bàsics per crear un gràfic amb Chart.js. La biblioteca ofereix moltes més opcions i personalitzacions per ajudar a crear gràfics més elaborats i atractius.

<!-- Incloure la biblioteca de Chart.js. -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
 
<!-- Crear un llenç on es mostri el gràfic. -->
<canvas id="myChart"></canvas>
<script>
  // Obtenir el context del llenç.
  var ctx = document.getElementById('myChart').getContext('2d');
 
  // Crear un nou gràfic a partir del context i les opcions de configuració.
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      datasets: [{
        label: 'Temperatura mensual',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });
</script>

Podeu veure l’aspecte d’aquest gràfic a la figura:

Podeu veure el codi d’aquest exemple en funcionament a: codepen.io/iocdawm9/pen/LYJPPpV.

En el codi de l’exemple de CodePen s’ajusta la mida de la finestra del gràfic amb un contenidor amb amplada relativa al viewport, perque s’ajusti a la finestra de previsualització de codepen.io. Aquesta tècnica és útil per fer que el gràfic s’ajusti al disseny de la pàgina web on s’ha d’incrustar.

<div class="chart-container" style="position: relative; width:35vw">

El codi per crear un gràfic de barres utilitzant la biblioteca Chart.js és molt similar al del gràfic de línies, però té algunes diferències.

A la secció <head> del document HTML, s’hi inclou la biblioteca de Chart.js mitjançant una etiqueta <script>. A la secció <body> es crea un llenç on es mostra el gràfic.

Després, a la secció de <script> es crea un context per al llenç utilitzant document.getElementById(‘myChart’).getContext(‘2d’). A continuació, es crea una nova instància de Chart, passant-li el context i les opcions de configuració.

Les opcions de configuració són similars a les del gràfic de línies, amb la diferència que el tipus de gràfic ara és bar en lloc de line. A més, en aquest cas, hi ha una sèrie de dades per a cada mes, anomenades datasets, que inclouen informació sobre el color de fons i el color de la vora per a cada barra, així com la quantitat de dades que s’han de mostrar.

Finalment, les opcions de les escales són les mateixes que en el gràfic de línies, però cal especificar que les marques de l’eix Y han de començar en zero.

<html>
<head>
  <title>Gràfic de barres amb Chart.js</title>
  <!-- Incloure la biblioteca de Chart.js. -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
</head>
<body>
  <!-- Crear un llenç on es mostri el gràfic. -->
  <canvas id="myChart"></canvas>
  <script>
    // Obtenir el context del llenç.
    var ctx = document.getElementById('myChart').getContext('2d');
 
    // Crear un nou gràfic a partir del context i les opcions de configuració.
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: 'Vendes mensuals',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  </script>
</body>
</html>

L’aspecte final d’aquest gràfic es pot apreciar a la figura:

Podeu veure el codi d’aquest exemple en funcionament a: codepen.io/iocdawm9/pen/XWBvyXj.

Per crear un gràfic de pastís (pie chart) amb Chart.js el procés és semblant al dels gràfics de línies i de barres, amb algunes diferències en les opcions de configuració.

Primer s’ha d’afegir la biblioteca de Chart.js a la pàgina web. A continuació, es crea un llenç (canvas) on es mostra el gràfic. Després, es fa una referència al context del llenç per poder crear el gràfic. En el cas d’un gràfic de pastís o pie chart a la definició de les opcions de configuració cal especificar: type: pie.

A la secció de dades, cal definir les etiquetes per a cada secció del pastís (en aquest exemple, Apple, Banana i Orange) i les dades associades a cada etiqueta. A més, cal definir les opcions de color per a les seccions del pastís (per exemple, backgroundColor i borderColor).

Després de definir les opcions de configuració, es crea el gràfic a partir del context i les opcions definides, utilitzant var myChart = new Chart(ctx, { … });. En aquest exemple, no es defineixen les opcions per a les escales, ja que en un gràfic de pastís no és necessari.

<!-- Incloure la biblioteca de Chart.js al <head>. -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
 
<!-- Crear un llenç on es mostri el gràfic al <body>. -->
<canvas id="myChart"></canvas>
 
<script>
  // Obtenir el context del canvas
  var ctx = document.getElementById('myChart').getContext('2d');
 
  // Crear un nou gràfic a partir del context i les opcions de configuració
  var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ['Apple', 'Banana', 'Orange'],
      datasets: [{
        data: [12, 19, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)'
        ],
        borderWidth: 1
      }]
    }
  });
</script>

Vegeu a la figura com es representa aquest tipus de gràfic:

Podeu veure el codi d’aquest exemple en funcionament a: codepen.io/iocdawm9/pen/YzOKKxN.

D3.js és una biblioteca JavaScript per a la visualització de dades i la creació d’interfícies web dinàmiques. Utilitza els estàndards web (HTML, CSS i SVG) per visualitzar i manipular dades de manera flexible i personalitzada.

Les característiques i funcionalitats de D3.js inclouen:

• Suport per a diferents tipus de gràfics i diagrames, com ara barres, línies, pastís, mapes, etc.
• Possibilitat de visualitzar dades en qualsevol format, ja sigui en taules, gràfics o mapes.
• Possibilitat de crear animacions i transicions per mostrar canvis en les dades de manera atractiva.
• Possibilitat de crear gràfics interactius amb eines com ara hover, filtres i llegendes.
• Possibilitat de crear visualitzacions de dades amb un alt nivell de detall i complexitat.

Els principals avantatges de D3.js són:

• Ofereix una gran flexibilitat i personalització per crear gràfics i visualitzacions de dades.
• Permet crear gràfics amb dades en temps real gràcies a la seva capacitat d’actualitzar les visualitzacions en funció de canvis en les dades.
• Té una comunitat activa i una gran quantitat de recursos en línia, com tutorials i exemples, que faciliten l’aprenentatge i l’ús de la biblioteca.

Per contra, D3.js presenta els següents inconvenients que cal considerar abans de la implementació de gràfics dinàmics al lloc web:

• Pot ser difícil d’aprendre per a persones que no estan familiaritzades amb JavaScript i el maneig de dades.
• Pot requerir un esforç més gran per crear gràfics complexos i personalitzats, ja que no té un conjunt predefinit de gràfics com altres biblioteques.
• Pot ser ineficient en la gestió de grans conjunts de dades, ja que utilitza la CPU del client per processar les dades en lloc de fer servir servidors, encara que és més eficient que altres biblioteques com Chart.js.

En conclusió, D3.js és una biblioteca molt potent per a la visualització de dades, però pot requerir una mica més de temps i esforç per aprendre-la i utilitzar-la. Això és especialment cert per a gràfics més complexos i personalitzats. No obstant, la seva flexibilitat i capacitat per mostrar dades en temps real fan que valgui la pena considerar-la per a projectes que requereixin visualitzacions de dades avançades.

Per crear un gràfic de barres amb D3.js, igual que amb Chart.js, s’inclou la biblioteca de D3.js en l’encapçalament de la pàgina i es crea un element SVG (en lloc del llenç canvas que es feia servir a Chart.js) on es mostra el gràfic.

En aquest cas, les dades del gràfic són una matriu de nombres, definits a la variable data. A continuació, es creen les escales per a l’eix Y i X: yScale i xScale, respectivament. Les escales són necessàries per mapejar les dades numèriques a les posicions corresponents en el gràfic. Les escales es defineixen utilitzant la funció d3.scaleLinear() i d3.scaleBand(). La funció d3.scaleLinear() és per a l’eix Y, mentre que d3.scaleBand() és per a l’eix X.

A continuació, s’utilitza la funció d3.select per seleccionar l’element SVG, i la funció .selectAll(“rect”), per seleccionar tots els elements rectangles dins d’aquest element. La funció .data és usada per vincular les dades del gràfic a les barres. La funció .enter és usada per crear un element rectangle per a cada dada.

Finalment, es configuren les propietats de les barres mitjançant les funcions .attr. Això inclou la posició en el gràfic, l’amplada i l’alçada i el color de farciment.

<!DOCTYPE html>
<html>
 
<head>
    <title>Gràfic de barres amb D3.js</title>
    <!-- Incloure la biblioteca de D3.js. -->
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
 
<body>
    <!-- Crear un element SVG on es mostri el gràfic. -->
    <svg width="600" height="400"></svg>
    <script>
        // Definir les dades del gràfic.
        var data = [12, 19, 3, 5, 2, 3];
 
        // Crear una escala per a l'eix Y.
        var yScale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([0, 400]);
 
        // Crear una escala per a l'eix X.
        var xScale = d3.scaleBand()
            .domain(data)
            .range([0, 600])
            .padding(0.1);
 
        // Afegir les barres al gràfic.
        d3.select("svg")
            .selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", function (d) { return xScale(d); })
            .attr("y", function (d) { return 400 - yScale(d); })
            .attr("width", xScale.bandwidth())
            .attr("height", function (d) { return yScale(d); })
            .attr("fill", "teal");
 
        // Afegir els valors a dins de les barres.
        d3.select("svg")
            .selectAll("text")
            .data(data)
            .enter()
            .append("text")
            .text(function (d) { return d; })
            .attr("x", function (d) { return xScale(d) + xScale.bandwidth() / 2; })
            .attr("y", function (d) { return 400 - yScale(d) + 14; })
            .attr("text-anchor", "middle")
            .style("fill", "white");
 
        // Afegir les etiquetes per a l'eix X.
        d3.select("svg")
            .append("g")
            .attr("transform", "translate(0, 400)")
            .call(d3.axisBottom(xScale))
            .selectAll("text")
            .attr("y", "10")
            .attr("x", "-5")
            .attr("text-anchor", "end")
            .attr("transform", "rotate(-40)");
 
        // Afegir les etiquetes per a l'eix Y.
        d3.select("svg")
            .append("g")
            .call(d3.axisLeft(yScale));
 
        // Afegir el valor a cada barra.
        d3.select("svg")
            .selectAll("text")
            .data(data)
            .enter()
            .append("text")
            .text(function (d) { return d; })
            .attr("x", function (d) { return xScale(d) + xScale.bandwidth() / 2; })
            .attr("y", function (d) { return 400 - yScale(d) + 14; })
            .attr("text-anchor", "middle")
            .style("fill", "white");
 
    </script>
</body>
 
</html>

A diferència del gràfic de barres amb Chart.js, aquest codi és més flexible i permet una gran personalització en la forma com es crea el gràfic. No obstant, requereix una mica més de codi per aconseguir el mateix resultat que amb Chart.js.

D3.js és una eina poderosa per a crear gràfics interactius i personalitzats en el navegador. Permet un gran control sobre la visualització de les dades i ofereix moltes possibilitats per a animacions, interacció i manipulació de dades. No obstant això, pot ser una mica més complex d’utilitzar que altres eines com Chart.js, ja que demana un major coneixement de JavaScript i les seves biblioteques.

Vegeu a la figura el resultat del codi anterior:

Podeu accedir al codi d’aquest exemple a: codepen.io/iocdawm9/pen/GRXKZbx.

Un gràfic de línia amb D3.js, una biblioteca de JavaScript per a visualització de dades, es crea a partir d’un element SVG, on es defineixen les dades del gràfic a través d’un objecte JavaScript.

Després, es creen les escales per a les diferents dimensions del gràfic (en aquest cas, els eixos X i Y). Les escales serveixen per convertir les dades en coordenades al gràfic.

Finalment, es crea una línia de dades, que representa les dades en el gràfic, i es fa servir la funció d3.select per seleccionar l’element SVG i afegir la línia al gràfic.

<!DOCTYPE html>
<html>
<head>
  <title>Gràfic de línia amb D3.js</title>
  <!-- Incloure la biblioteca de D3.js. -->
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
  <!-- Crear un element SVG on es mostri el gràfic. -->
  <svg width="600" height="400"></svg>
  <script>
    // Definir les dades del gràfic.
    var data = [
      { x: 0, y: 10 },
      { x: 1, y: 20 },
      { x: 2, y: 15 },
      { x: 3, y: 25 },
      { x: 4, y: 30 }
    ];
 
    // Crear una escala per a l'eix Y.
    var yScale = d3.scaleLinear()
      .domain([0, d3.max(data, function(d) { return d.y; })])
      .range([400, 0]);
 
    // Crear una escala per a l'eix X.
    var xScale = d3.scaleLinear()
      .domain([0, d3.max(data, function(d) { return d.x; })])
      .range([0, 600]);
 
    // Crear una línia de dades.
    var line = d3.line()
      .x(function(d) { return xScale(d.x); })
      .y(function(d) { return yScale(d.y); });
 
    // Afegir la línia al gràfic.
    d3.select("svg")
      .append("path")
      .attr("d", line(data))
      .attr("stroke", "teal")
      .attr("stroke-width", 2)
      .attr("fill", "none");
  </script>
</body>
</html>

El codi anterior:

• Inclou la biblioteca de D3.js en l’encapçalament de la pàgina.
• Crea un element SVG dins del cos de la pàgina on es mostra el gràfic. El SVG té una amplada de 600 píxels i una alçada de 400 píxels.
• Defineix les dades del gràfic en una variable anomenada data. Aquesta variable conté una llista d’objectes que tenen dues propietats: x i y.
• Crea una escala per a l’eix Y i la guarda a la variable yScale. Aquesta escala utilitza la funció scaleLinear de D3.js per crear una escala lineal. El domini de l’escala és determinat per la màxima Y de les dades mentre que el rang és determinat per l’alçada del SVG.
• Crea una escala per a l’eix X i la guarda a la variable xScale. Aquesta escala és similar a la creada per a l’eix Y.
• Crea una línia de dades i la guarda a la variable line. Aquesta línia utilitza les escales X i Y per especificar les coordenades x i y per a cada punt de dades.
• Afegeix la línia al gràfic fent servir el mètode select de D3.js. El mètode append afegeix un path dins del SVG i el mètode attr assigna atributs al path, com ara d, stroke, stroke-width i fill. La propietat d conté la línia de dades en format SVG. stroke i stroke-width determinen el color i l’amplada de la línia, mentre que fill determina que l’interior de la línia estigui buit.

Vegeu a la figura el resultat del codi:

En comparació amb el gràfic de barres amb D3.js, aquest gràfic de línia no requereix la creació d’eixos ni marques, ni la generació de línies per a cada sèrie de dades.

Comparat amb el gràfic de línia amb Chart.js, no requereix la creació de les escales i les línies, ja que aquestes es generen automàticament a partir de les dades.

Teniu el codi d’aquest exemple a: codepen.io/iocdawm9/pen/zYJOBwN.

Aquest gràfic és bastant simple en comparació amb el gràfic fet amb ChartJS; per tant, es pot millorar una mica. Es pot ampliar el gràfic de línia anterior ajustant les escales per a l’eix X i Y, de manera que quedi centrada a la imatge. A més, es poden afegir les etiquetes per als eixos X i Y, indicant els valors mínims i màxims que poden prendre les dades. Els punts a la línia serveixen per millorar la visualització de les dades. Això ajuda a identificar clarament les dades en el gràfic i a identificar fàcilment tendències o patrons en les dades.

<!DOCTYPE html>
<html>
<head>
  <title>Gràfic de línia amb D3.js</title>
  <!-- Incloure la biblioteca de D3.js.-->
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
  <!-- Crear un element SVG on es mostri el gràfic. -->
  <svg width="600" height="400"></svg>
  <script>
    // Definir les dades del gràfic.
    var data = [
      { x: 0, y: 10 },
      { x: 1, y: 20 },
      { x: 2, y: 15 },
      { x: 3, y: 25 },
      { x: 4, y: 30 }
    ];
 
    // Crear una escala per a l'eix Y.
    var yScale = d3.scaleLinear()
  .domain([0, 40])
  .range([400, 0]);
 
    // Crear una escala per a l'eix X.
    var xScale = d3.scaleLinear()
  .domain([-2, 5])
  .range([0, 600]);
 
    // Crear una línia de dades.
    var line = d3.line()
      .x(function(d) { return xScale(d.x); })
      .y(function(d) { return yScale(d.y); });
 
    // Afegir la línia al gràfic.
    d3.select("svg")
      .append("path")
      .attr("d", line(data))
      .attr("stroke", "teal")
      .attr("stroke-width", 2)
      .attr("fill", "none");
 
    // Afegir punts a la línia.
    d3.select("svg")
      .selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function(d) { return xScale(d.x); })
      .attr("cy", function(d) { return yScale(d.y); })
      .attr("r", 5)
      .style("fill", "teal");
 
    // Afegir rètols a l'eix Y.
    d3.select("svg")
      .append("g")
      .attr("transform", "translate(30,0)")
      .call(d3.axisLeft(yScale));
 
    // Afegir rètols a l'eix X.
    d3.select("svg")
      .append("g")
      .attr("transform", "translate(0,370)")
      .call(d3.axisBottom(xScale));
  </script>
</body>
</html>

Vegeu el resultat d’aquesta millora a la figura:

Teniu aquest exemple a: codepen.io/iocdawm9/pen/dyqbXme.

En qualsevol cas, en comparació amb Chart.js, amb D3.js és més difícil aconseguir resultats vistosos encara que sigui més versàtil.

Les dades del gràfic de pastís (vegeu la figura) són una llista d’objectes cada un dels quals té un nom i un valor associat. Aquests valors representen la quantitat de cada categoria de menjar, com ara llegums, verdures, fruits, cereals, làctics i ous, carn i peix.

El gràfic comença creant un objecte color que és una escala ordinal que defineix el color per a cada categoria de menjar. Aquesta escala utilitza la funció d3.scaleOrdinal per crear una escala d’identificació basada en un conjunt de valors únics: en aquest cas, els noms de les categories de menjar. El mètode .domain defineix aquest conjunt de valors i el mètode .range defineix la gamma de colors a utilitzar.

Després es defineix la radiació del gràfic de pastís amb la variable radius i es crea una pie layout utilitzant la funció d3.pie. La funció pie defineix la distribució dels valors en un gràfic de pastís. El mètode .sort permet definir l’ordre de les dades i el mètode .value especifica el valor a utilitzar per a la distribució.

Es crea un gràfic d’arc amb la funció d3.arc. L’arc és una funció que defineix la forma de les seccions del gràfic de pastís. Els mètodes .outerRadius i .innerRadius defineixen la longitud dels arcs externs i interns, respectivament.

Finalment, es crea el gràfic de pastís seleccionant el svg en el document HTML i afegint un element g que contingui el gràfic. Aquest element es trasllada al centre de la finestra de visualització utilitzant l’atribut transform.

Després es creen les seccions del gràfic de pastís seleccionant tots els elements amb la classe .arc i fent-los coincidir amb les dades. Aquesta tasca es realitza mitjançant el mètode .data, que enllaça les dades als elements de la selecció. El mètode .enter selecciona els elements que no tenen dades associades i el mètode .append afegeix un nou element path per a cada secció.

Per a cada secció del gràfic de sectors, es defineix el camí utilitzant l’arc (funció arc en D3.js). Això implica definir el radi interior i exterior de la secció, així com l’angle d’inici i final del camí. Aquesta operació s’haurà de fer per a cada secció del gràfic.

D’altra banda, el color de cada secció es defineix utilitzant la funció color i la informació de nom de l’element de dades. La funció color retorna un color de l’escala de colors basada en el nom de l’element de dades, de manera que cada secció tindrà un color diferent basat en el nom de l’element corresponent. En resum, això significa que cada secció del gràfic tindrà un color únic basat en la informació de l’element de dades que representa. Després, per a cada element g es crea un element de text que mostra el nom de la categoria. La posició del text és determinada per la funció transform, que transforma la coordenada basada en el centre de l’arc, que es calcula utilitzant la funció arc.centroid. La propietat dy de la secció de text es defineix com a .35em per ajustar la posició vertical del text.

La funció text retorna el nom de la categoria que es vol mostrar.

<!DOCTYPE html>
<html>
<head>
  <title>Gràfic de pastís amb D3.js</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
  <svg width="500" height="500"></svg>
  <script>
    // Definir les dades del gràfic de pastís.
    var data = [
      {name: "Llegums", value: 25},
      {name: "Verdures", value: 30},
      {name: "Fruits", value: 15},
      {name: "Cereals", value: 20},
      {name: "Làctics", value: 5},
      {name: "Ous, carn i peix", value: 5}
    ];
 
    // Definir l'escala de color.
    var color = d3.scaleOrdinal()
      .domain(data.map(function(d) { return d.name; }))
      .range(d3.schemeCategory10);
 
    // Definir la radiació del gràfic de pastís.
    var radius = Math.min(500, 500) / 2;
 
    // Definir la 'pie layout'.
    var pie = d3.pie()
      .sort(null)
      .value(function(d) { return d.value; });
 
    // Definir l''arc layout'.
    var arc = d3.arc()
      .outerRadius(radius - 10)
      .innerRadius(0);
 
    // Crear el gràfic de pastís.
    var pieChart = d3.select("svg")
      .append("g")
      .attr("transform", "translate(" + 500 / 2 + "," + 500 / 2 + ")");
 
    var g = pieChart.selectAll(".arc")
      .data(pie(data))
      .enter().append("g")
      .attr("class", "arc");
 
    g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.name); });
 
    g.append("text")
      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
      .attr("dy", ".35em")
      .text(function(d) { return d.data.name; });
  </script>
</body>
</html>

Aquest gràfic de pastís creat amb D3.js requereix una mica més de codi que el gràfic de pastís creat amb Chart.js. Això és perquè D3.js no ofereix una API específica per a gràfics de pastís, sinó que demana una mica més de codi per crear aquest tipus de gràfics.

El gràfic de pastís creat amb D3.js pot ser més ràpid que el gràfic de pastís creat amb Chart.js en grans conjunts de dades. Això és així perquè D3.js és més eficient en el tractament de grans quantitats de dades que Chart.js.

Podeu accedir al codi d’aquest exemple a: codepen.io/iocdawm9/pen/dyqyNXW.

Vegeu a la figura el resultat del codi anterior:

Google Charts és una biblioteca de visualització de dades que ofereix una gran varietat de gràfics i mapes interactius per a la representació de dades. A diferència de ChartJS i D3.js, Google Charts no es basa en JavaScript, sinó que utilitza la tecnologia de dibuix SVG (Scalable Vector Graphics) per a la creació de gràfics.

Les característiques principals de Google Charts inclouen:

• Gran varietat de tipus de gràfics, incloent-hi la línia, la barra, l’àrea, pastís, el radar, el circular, el polar, el diana, etc.
• Personalització dels eixos, llegendes i etiquetes de dades
• Suport per a dades de múltiples conjunts i conjunts de dades mixtes
• Eines per a l’animació i el control de l’aspecte visual de les gràfiques
• Suport per a l’interacció amb les gràfiques mitjançant hovers i clics
• Integració amb altres eines de visualització de dades com ara Google Maps
• Possibilitat de descarregar gràfics en diferents formats (PNG, JPEG, SVG, etc.)

Els principals avantatges que presenta Google Charts són:

• És gratuïta i fàcil d’utilitzar.
• Ofereix una gran varietat de tipus de gràfics.
• Es pot integrar amb les dades d’un full de càlcul de Google Sheets.
• Permet personalitzar l’aparença dels gràfics amb opcions de format i estil.

Per contra, presenta els següents desavantatges:

• Depèn de la connexió a Internet per funcionar.
• No és tan potent com altres biblioteques de visualització de dades, com D3.js.
• No ofereix tant control sobre els gràfics com altres biblioteques, ja que utilitza un constructor gràfic en línia en lloc de codi JavaScript.

En conclusió, Google Charts és una eina molt útil per crear gràfics i visualitzacions de dades de manera senzilla i ràpida. No obstant, no és tan flexible com altres biblioteques de visualització de dades com D3.js, ja que depèn de la connexió a Internet per funcionar i no ofereix tant control sobre els gràfics. Així doncs, depèn de les necessitats de cada projecte decidir quina biblioteca és la més adequada. Si es busca una eina ràpida i fàcil d’utilitzar per crear gràfics amb una gran varietat de tipus, Google Charts pot ser una bona opció. En canvi, si es busca més flexibilitat i control sobre els gràfics, altres biblioteques com D3.js poden ser més adequades.

Vegeu alguns exemples d’ús de Google Charts per crear diferents tipus de gràfics en documents HTML vàlids, amb totes les referències a recursos externs necessaris.

El gràfic de línia utilitza la biblioteca de gràfics de Google Charts. En aquest cas, l’exemple mostra les temperatures mitjanes mensuals.

La biblioteca de Google Charts es pot incloure a la pàgina web amb l’etiqueta <script> i la seva font externa:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Es crea un element div amb l’ID “linechart_div”, que serà el lloc on es mostrarà el gràfic:

<div id="linechart_div"></div>

Definim una funció drawChart que es cridarà quan la pàgina estigui completament carregada:

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
...
};

Dins de la funció drawChart es defineixen les dades per al gràfic mitjançant un objecte DataTable:

var data = google.visualization.arrayToDataTable([    ['Temps', 'Temperatura'],
    ['Jan', 7.0],
    ['Feb', 6.9],
    ['Mar', 9.5],
    ...
]);

Després, es crea un objecte LineChart i es defineix la seva ubicació a la pàgina web mitjançant l’ID “linechart_div”:

var chart = new google.visualization.LineChart(document.getElementById('linechart_div'));

Finalment, es dibuixa el gràfic amb les dades i les opcions específiques, com ara la mida, el títol i la posició de la llegenda:

chart.draw(data, {
    width: 400,
    height: 240,
    title: 'Temperatura mitjana mensual (°C)',
    curveType: 'function',
    legend: { position: 'bottom' }
});

Amb Google Charts, el procés de creació d’un gràfic de línia és força senzill. Primer, s’inclou la biblioteca de Google Charts a la pàgina web, i després es defineixen les dades del gràfic en un format de taula de dades. A continuació, es crea un objecte LineChart i es passen les dades i les opcions per al gràfic. El gràfic es dibuixa automàticament en el div especificat. Això fa que Google Charts sigui una opció adequada per a usuaris que busquen una manera fàcil i ràpida de crear gràfics sense haver de preocupar-se per la programació complexa.

El procés de creació d’un gràfic de línia amb Chart.js és similar al de Google Charts, però requereix més codi. El procés de creació d’un gràfic de línia amb D3.js és força diferent del de Google Charts i Chart.js, ja que requereix una comprensió més profunda de la biblioteca i de les dades.

Vegeu a la figura el resultat del codi anterior:

Podeu accedir al codi d’aquest exemple a: codepen.io/iocdawm9/pen/dyqyNXW.

El gràfic de barres amb Google Charts és similar al gràfic de línies en molts aspectes. També s’inclou la biblioteca de Google Charts i es crea un element div on es mostrarà el gràfic. A més, també es crida la funció drawChart un cop la biblioteca estigui carregada.

Com volem crear un gràfic de barres en lloc d’un gràfic de línies, en l’exemple següent, crearem un objecte de google.visualization.LineChart, en comptes d’un objecte de google.visualization.BarChart.

Les dades també són diferents. En el gràfic de barres es mostra la població de les ciutats espanyoles, mentre que en el gràfic de línies es mostrava la temperatura mitjana mensual.

Per últim, les opcions també són diferents. En aquest gràfic de barres es pot veure que s’ha especificat un títol per a l’eix horitzontal i un altre per a l’eix vertical. A més, s’ha definit un títol per al gràfic i s’ha ocultat la llegenda, ja que no és necessària en aquest cas.

El codi per dibuixar aquest tipus de gràfic amb Google Charts és:

<!DOCTYPE html>
<html>
 
<head>
    <title>Gràfic de barres amb Google Charts</title>
    <!-- Incloure la biblioteca de Google Charts. -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
 
<body>
    <!-- Crear un element div on es mostrarà el gràfic. -->
    <div id="barchart_div"></div>
    <script>
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            // Definir les dades del gràfic.
            var data = google.visualization.arrayToDataTable([
                ['Ciutat', 'Població'],
                ['Barcelona', 7.5],
                ['Madrid', 3.3],
                ['València', 2.1],
                ['Sevilla', 1.7],
                ['Màlaga', 1.2]
            ]);
 
            // Crear l'objecte del gràfic.
            var chart = new google.visualization.BarChart(document.getElementById('barchart_div'));
 
            // Dibuixar el gràfic amb les dades i les opcions i les opcions especificades.
            chart.draw(data, {
                width: 400,
                height: 240,
                title: 'Població de les ciutats espanyoles',
                legend: { position: 'none' },
                hAxis: { title: 'Ciutat ' },
                vAxis: { title: 'Població (milions)' }
            });
 
        };
    </script>
</body>
 
</html>

Vegeu a la figura el resultat del codi anterior:

Podeu accedir al codi d’aquest exemple a: codepen.io/iocdawm9/pen/xxaxqom.

El procés de creació d’un gràfic de pastís amb Google Charts és semblant al que s’ha explicat en els exemples de gràfics de línies i de barres, però amb algunes diferències importants:

• Cal carregar la biblioteca.
• Definir les dades: en aquest exemple les dades es defineixen en una taula bidimensional on cada fila representa una secció del pastís, la primera columna és el nom de la secció, i la segona columna és el valor numèric associat.
• Crear l’objecte gràfic: es crea l’objecte de gràfic de pastís amb la següent línia de codi:

var chart = new google.visualization.PieChart(document.getElementById('piechart_div'));

• Dibuixar el gràfic amb les dades i les opcions especificades, com en els exemples anteriors.

El codi resultant és el següent:

<!DOCTYPE html>
<html>
 
<head>
    <title>Gràfic de pastís amb Google Charts</title>
    <!-- Incloure la biblioteca de Google Charts. -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
 
<body>
    <!-- Crear un element div on es mostrarà el gràfic. -->
    <div id="piechart_div"></div>
    <script>
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            // Definir les dades del gràfic.
            var data = google.visualization.arrayToDataTable([
                ['Producte', 'Vendes'],
                ['Producte 1', 12],
                ['Producte 2', 8],
                ['Producte 3', 6],
                ['Producte 4', 4]
            ]);
 
            // Crear l'objecte del gràfic.
            var chart = new google.visualization.PieChart(document.getElementById('piechart_div'));
 
            // Dibuixar el gràfic amb les dades i les opcions especificades.
            chart.draw(data, {
                width: 400,
                height: 240,
                title: 'Vendes per producte',
                is3D: true,
                legend: { position: 'right' }
            });
 
        };
    </script>
</body>
 
</html>

Vegeu a la figura el resultat del codi anterior:

Podeu accedir al codi d’aquest exemple a: codepen.io/iocdawm9/pen/zYJYpKE.

Les biblioteques Chart.js, D3.js i Google Charts són eines molt útils per a la visualització de dades i la creació de gràfics. Cada biblioteca té les seves pròpies característiques i els seus avantatges, i depèn de les necessitats de cada projecte decidir la millor opció.

Chart.js és una biblioteca gratuïta i fàcil d’utilitzar que ofereix una gran varietat de tipus de gràfics i permet personalitzar l’aparença dels gràfics amb opcions de format i estil. No obstant, no és tan potent com altres biblioteques i no ofereix tant control sobre els gràfics com altres biblioteques.

D3.js és una biblioteca molt potent i flexible per crear gràfics i visualitzacions de dades. Permet utilitzar codi JavaScript per crear gràfics de forma molt detallada i personalitzada, tot i que pot ser més difícil d’aprendre i utilitzar que altres biblioteques.

Google Charts és una biblioteca gratuïta i fàcil d’utilitzar que ofereix una gran varietat de tipus de gràfics i permet personalitzar l’aparença dels gràfics amb opcions de format i estil. No obstant, depèn de la connexió a Internet per funcionar i no és tan potent com altres biblioteques.

En resum, per triar la millor biblioteca de visualització de dades, es recomana avaluar les necessitats del projecte i les característiques de cada biblioteca per determinar la més adequada. També es pot tenir en compte el nivell de coneixements del programador i el temps disponible per crear els gràfics .

Vegeu a la taula una comparativa amb algunes de les característiques més importants de cada biblioteca:

Cada biblioteca té les seves pròpies característiques i pot ser millor per a un tipus de projecte o un altre. Així, per exemple, si busqueu una biblioteca fàcil d’aprendre i amb molts tipus de gràfics, ChartJS o Google Charts poden ser les millors opcions. Si busqueu més flexibilitat i control sobre els gràfics, D3.js pot ser més recomanable.

A més de les característiques esmentades, també cal tenir en compte si es necessita o no la connexió a Internet per utilitzar la biblioteca, ja que això pot ser un factor determinant en alguns casos.

En resum, la millor biblioteca depèn de les necessitats de cada projecte i de les consideracions esmentades. És important fer una avaluació de les diferents opcions i triar la que s’ajusti millor a les necessitats del projecte.

Anime.js és una biblioteca de codi obert que s’utilitza per crear animacions fluides i atractives en pàgines web. Anime.js es basa en el llenguatge JavaScript i utilitza l’API de transformació CSS per animar elements de la pàgina.

Un dels principals avantatges d’Anime.js és la seva facilitat d’ús i flexibilitat per crear animacions personalitzades. Anime.js proporciona una sintaxi senzilla i intuïtiva per definir les propietats d’animació, així com una gran varietat de funcions i opcions per personalitzar les animacions segons les necessitats del projecte.

Hi ha moltes raons per utilitzar Anime.js per crear animacions web. Alguns dels avantatges més destacats són:

• Fàcil d’utilitzar: té una API molt intuïtiva i fàcil d’aprendre, cosa que la fa ideal per a desenvolupadors web que busquin una manera senzilla de crear animacions.
• Lleugera i ràpida: és una de les biblioteques d’animació més lleugeres disponibles, cosa que la fa ideal per a projectes web on es busqui un bon rendiment. A més, les animacions creades amb Anime.js són molt fluides i s’executen de manera ràpida.
• Compatible amb altres biblioteques i entorns de treball: Anime.js és compatible amb altres biblioteques i frameworks de JavaScript, com ara GSAP, React o Angular, cosa que la fa ideal per a projectes web que utilitzin altres eines de desenvolupament.
• Gran quantitat de propietats d’animació: ofereix una gran quantitat de propietats d’animació, com ara durada, retard, acceleració, easing i moltes altres que permeten crear animacions molt elaborades i personalitzades.

Hi ha diverses maneres d’instal·lar i carregar Anime.js. Una de les maneres més senzilles és descarregar el fitxer JavaScript de la pàgina web oficial d’Anime.js i afegir-lo al projecte. També es pot fer una referència a un recurs extern hostatjat a un CDN. Una altra manera és utilitzar una gestor de paquets com npm o yarn per instal·lar Anime.js i carregar-lo des de l’aplicació. Una vegada instal·lat Anime.js, només cal afegir un enllaç al fitxer JavaScript al codi HTML per poder utilitzar-lo.

Per començar a utilitzar Anime.js en un projecte web, cal seguir els següents passos:

1. Descarregar i instal·lar Anime.js (opcional). Anime.js es pot descarregar des de la seva pàgina oficial o instal·lar-lo a través d’una eina de gestió de paquets com NPM. Alternativament, es pot utilitzar un CDN per carregar la biblioteca directament des de la web.
2. Configuració inicial. Una vegada que Anime.js està instal·lat, es pot començar a utilitzar-lo a la pàgina web. Per fer-ho, cal afegir una referència al fitxer de la biblioteca a l’encapçalament de la pàgina HTML.
3. Selecció d’elements. Per animar un element de la pàgina amb Anime.js, cal seleccionar-lo utilitzant la sintaxi de selecció de JavaScript. Això es pot fer amb la funció document.querySelector() o altres funcions de selecció d’elements.
4. Propietats d’animació. Anime.js permet animar una gran varietat de propietats d’estil CSS, com ara posició, escalat, rotació, opacitat i color. Per animar aquestes propietats, cal utilitzar les funcions corresponents de la biblioteca, com ara anime(), que permet definir les propietats d’animació i el temps d’animació.
5. Control del temps d’animació i de les transicions. Anime.js proporciona una gran varietat d’opcions per controlar el temps i les transicions d’animació, com ara la funció delay(), que permet retardar l’inici de l’animació, o la funció easing(), que permet especificar una funció de transició personalitzada.

Amb aquests passos bàsics, ja es pot començar a crear animacions amb Anime.js a la pàgina web. A mesura que l’usuari es familiaritza amb la biblioteca, pot experimentar amb les funcions avançades i les opcions per crear animacions més sofisticades i personalitzades.

<head>
  <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
</head>

const boto = document.querySelector('#boto');

anime({
  targets: boto,
  backgroundColor: '#ff0000',
  width: '50%',
  duration: 500,
  easing: 'easeInOutQuad'
});

anime({
  targets: boto,
  backgroundColor: '#ff0000',
  width: '50%',
  duration: 500,
  delay: 1000,
  easing: 'easeOutElastic'
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Exemple d'animació amb Anime.js</title>
  <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
</head>
<body>
  <button id="boto">Animar botó.</button>
 
  <script>
    const boto = document.querySelector('#boto');
 
    boto.addEventListener('click', () => {
      anime({
        targets: boto,
        backgroundColor: '#ff0000',
        width: '50%',
        duration: 500,
        easing: 'easeInOutQuad'
      });
    });
  </script>
</body>
</html>

Els procediments bàsics de l’animació amb Anime.js es basen en la selecció d’elements, les propietats d’animació que es poden utilitzar (la posició, l’escalat, la rotació i altres) i el control del temps d’animació i de les transicions. Amb aquestes eines és possible crear animacions personalitzades i dinàmiques que millorin l’experiència de l’usuari en el lloc web.

Per animar un element amb Anime.js, primer s’ha de seleccionar. Anime.js utilitza la funció anime() per animar els elements seleccionats. Aquesta funció rep dos paràmetres: una selecció d’elements i un objecte de propietats d’animació.

La selecció d’elements pot ser un selector CSS o un objecte JavaScript que representi l’element que s’ha d’animar. Si usem un selector CSS, Anime.js seleccionarà tots els elements que coincideixen amb el selector i els animarà simultàniament. Si utilitzem un objecte JavaScript, Anime.js només animarà l’element seleccionat.

Aquí teniu un exemple senzill de codi que utilitza un selector CSS per seleccionar tots els elements amb la classe .box i animar-los amb una durada d’un segon:

anime({
  targets: '.box',
  translateY: 100,
  duration: 1000
});

En aquest exemple Anime.js selecciona tots els elements amb la classe .box i els anima aplicant-hi una translació de 100 píxels cap avall en l’eix Y en 1 segon.

Per seleccionar un element específic en lloc de tots els elements que coincideixen amb un selector CSS, es pot passar un objecte JavaScript a la funció anime(). Per exemple:

var element = document.getElementById('my-element');
 
anime({
  targets: element,
  translateX: 250,
  duration: 1000
});

En aquest altre exemple Anime.js selecciona l’element amb l’ID “my-element” i l’anima aplicant-hi una translació de 250 píxels cap a la dreta en l’eix X en 1 segon. Així, és possible seleccionar un únic element per animar-lo en lloc de tots els elements amb una determinada classe o etiqueta.

Anime.js permet animar diferents propietats d’un element, com la posició, l’escalat, la rotació, la transparència, el color, la mida de la font, etc.

Per animar una propietat, s’ha de definir a l’objecte de propietats d’animació. Per exemple, si volem animar la posició d’un element, cal utilitzar la propietat translateX o translateY. Si volem animar la mida de font d’un element, cal utilitzar la propietat fontSize.

Vegeu un exemple que anima la posició i la mida de font d’un element al mateix temps:

anime({
  targets: '#my-element',
  translateX: 250,
  fontSize: '3rem',
  duration: 1000
});

En aquest exemple Anime.js selecciona l’element amb l’ID “my-element” i li aplica una translació de 250 píxels cap a la dreta en l’eix X i un augment de la mida de font a 3 rem en 1 segon.

Anime.js també permet utilitzar múltiples propietats alhora per animar un element. Per exemple:

anime({
  targets: '#my-element',
  translateX: 250,
  translateY: 100,
  scale: 2,
  rotate: '1turn',
  duration: 1000
});

En aquest exemple Anime.js selecciona l’element amb l’ID “my-element” i li aplica una translació de 250 píxels cap a la dreta en l’eix X, una translació de 100 píxels cap avall en l’eix Y, un escalat de 2 i una rotació d’una volta (360 graus) en 1 segon.

<!DOCTYPE html>
<html>
 
<head>
    <title>Animació amb Anime.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <style>
        #container{
           width:90%;
        }
        .box {
            margin:auto;
            width: 100px;
            height: 100px;
            margin: 50px;
        }
 
        #box1 {
            background-color: #FFC107;
        }
 
        #box2 {
            background-color: #2196F3;
        }
    </style>
</head>
 
<body>
    <div id="container">
    <div class="box" id="box1"></div>
    <div class="box" id="box2"></div>
    </div>
    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
 
        anime({
            targets: '#box1',
            translateX: '200px',
            rotate: '1turn',
            duration: 2000,
            easing: 'easeInOutQuad'
        });
 
        anime({
            targets: '#box2',
            translateX: '400px',
            rotate: '1turn',
            duration: 2000,
            easing: 'easeInOutQuad'
        });
 
    </script>
</body>
 
</html>

Per controlar el temps d’animació i les transicions, Anime.js ofereix una gran varietat de propietats que es poden ajustar per personalitzar l’animació. Algunes d’aquestes propietats inclouen:

• duration: aquesta propietat defineix la durada de l’animació. El valor per defecte és de 1000ms (1 segon), però es pot ajustar a qualsevol valor en mil·lisegons.
• delay: aquesta propietat defineix el retard abans que l’animació comenci. El valor per defecte és de 0ms, però es pot ajustar a qualsevol valor en mil·lisegons.
• easing: aquesta propietat defineix el tipus de transició que s’utilitza per a l’animació. Anime.js ofereix una gran varietat de transicions predefinides, com ara linear, easeIn, easeOut, easeInOut, entre d’altres. També es pot utilitzar una funció personalitzada per definir una transició única.
• direction: aquesta propietat defineix la direcció de l’animació. Per exemple, es pot fer que l’animació es desenvolupi d’esquerra a dreta (normal) o bé de dreta a esquerra (reverse), o bé que es repeteixi de forma alternada (alternate).

    <div class="box"></div>
    <script>
        anime({
            targets: '.box',
            backgroundColor: ['#00F', '#F00'],
            scale: [1, 1.5, 1],
            duration: 2000,
            delay: 500,
            easing: 'easeInOutQuad',
            direction: 'alternate',
            loop: true
        });
 
    </script>

Anime.js ofereix moltes funcionalitats per crear animacions avançades. Algunes d’aquestes funcionalitats són les línies de temps múltiples i les seqüències d’animació, i la possibilitat d’anar més enllà de les propietats CSS.

Anime.js permet definir múltiples línies de temps d’animació, que es poden executar simultàniament o seqüencialment. Això permet realitzar animacions més complexes i coordinar diferents elements a la vegada. Per exemple, per animar tres quadrats de forma que el primer es mogui cap a l’esquerra, el segon s’ampliï i el tercer es desplaci cap amunt, es poden definir les tres animacions per separat i executar-les de forma seqüencial.

var timeline = anime.timeline();
 
timeline
  .add({
    targets: '.box-1',
    translateX: -200,
    easing: 'easeInOutSine'
  })
  .add({
    targets: '.box-2',
    scale: 1.5,
    easing: 'easeInOutSine'
  })
  .add({
    targets: '.box-3',
    translateY: -100,
    easing: 'easeInOutSine'
  });

En aquest exemple, primer es defineix una nova línia de temps amb anime.timeline(). Després, amb el mètode add() s’hi afegeixen les tres animacions. Per a cada animació, cal especificar els objectius (targets) als quals s’aplica l’animació (en aquest cas, les caixes amb les classes .box-1, .box-2 i .box-3), així com les propietats que es volen animar. També cal especificar la funció d’interpolació per a cada animació.

Anime.js també permet utilitzar diferents mètodes per executar les línies de temps: play(), per executar-les; pause(), per aturar-les; restart(), per reiniciar-les o reverse(), per invertir la direcció de l’animació.

Anime.js també permet animar propietats que no estan disponibles directament a través de CSS, com ara la posició d’un objecte en una trajectòria corba o la transparència de l’objecte. Això es fa mitjançant la definició d’una funció que s’executa durant l’animació.

Per exemple, es pot definir una funció per animar la posició d’un objecte en una trajectòria corba. Aquesta funció rep com a paràmetres el moment actual de l’animació (en mil·lisegons) i la posició inicial i final de l’objecte. A partir d’aquests paràmetres, la funció calcula la nova posició de l’objecte en cada moment de l’animació.

Aquí teniu un exemple d’una animació en què un cercle es mou en una trajectòria el·líptica:

anime({
  anime({
  targets: '#circle',
  translateX: function(elapsedTime, initialTranslateX, finalTranslateX) {
    var x = Math.cos(elapsedTime / 1000) * 50;
    return initialTranslateX + x;
  },
  translateY: function(elapsedTime, initialTranslateY, finalTranslateY) {
    var y = Math.sin(elapsedTime / 1000) * 25;
    return initialTranslateY + y;
  },
  duration: 2000,
  easing: 'linear'
});

En aquest exemple els paràmetres initialTranslateX i initialTranslateY són la posició inicial del cercle, mentre que els paràmetres finalTranslateX i finalTranslateY són la posició final. La funció translateX calcula la posició de l’eix X en cada moment de l’animació, utilitzant la funció Math.cos per moure el cercle en una trajectòria el·líptica. La funció translateY calcula la posició de l’eix Y en cada moment de l’animació, utilitzant la funció Math.sin. Els valors calculats són afegits a les posicions inicials del cercle per determinar la seva nova posició en cada moment de l’animació.

Anime.js també permet animar altres propietats que no estan disponibles directament a través de CSS, com ara la transparència, la mida dels caràcters o les ombres.

Per exemple, es pot definir una funció que animi la transparència d’un element amb el codi següent:

anime({
  targets: '#text',
  opacity: function(elapsedTime, initialOpacity, finalOpacity) {
    var t = elapsedTime / 1000;
    var a = 0.5 + 0.5 * Math.sin(t);
    return initialOpacity + (finalOpacity - initialOpacity) * a;
  },
  duration: 2000,
  easing: 'linear'
});

En aquest exemple la funció opacity calcula la transparència de l’element en cada moment de l’animació utilitzant la funció Math.sin. La transparència varia entre 0 i 1, per la qual cosa la funció multiplica la sortida de Math.sin per 0,5, i li suma 0,5 per obtenir un valor entre 0,5 i 1. Això significa que la transparència de l’element començarà a 0,5 i augmentarà fins a 1 i, després disminuirà fins a 0,5 de nou. Aquesta animació crea un efecte de respiració que dona vida a l’element:

Anime.js també permet utilitzar funcions personalitzades per a altres propietats, com ara la posició o la mida d’un element. Això ofereix la capacitat de crear animacions més complexes i personalitzades que no es poden aconseguir amb les propietats CSS estàndard.

Per exemple, per crear una animació on un element es redueix de mida i es desplaça al mateix temps. Això no es pot fer amb les propietats CSS estàndards, però es pot aconseguir creant una funció personalitzada per calcular les propietats mida i posició de l’element en cada moment de l’animació.

Altres propietats no definides en CSS que permet gestionar Anime.js són el volum d’un element d’àudio o la posició d’un objecte en un entorn 3D. Per exemple, per animar la posició d’un objecte en tres dimensions, es pot fer de la següent manera:

anime({
  targets: '#object',
  translateX: 100,
  translateY: -50,
  translateZ: 25,
  duration: 4500,
  easing: 'easeInOutQuad',
  rotateY: 180,
  delay: 500,
  loop: true
});

Aquest codi fa que l’element amb l’ID object es desplaci 100 píxels a la dreta, 50 píxels cap amunt i 25 píxels cap enrere en un moviment diagonal cap a la dreta i cap amunt. A continuació, s’afegeix una animació de gir (rotate) que fa que l’element giri 180 graus a l’eix Y. La durada d’aquesta animació és de 4.500 mil·lisegons, amb una funció d’easing que s’aplica a la transició de manera que comença a accelerar, arriba a la velocitat màxima i després disminueix fins que s’atura. L’animació de gir començarà 500 mil·lisegons després que l’animació de translació comenci per crear un efecte de pausa. Finalment, l’animació es repetirà indefinidament gràcies a la propietat loop.

L’aspecte final d’aquesta animació es pot apreciar a continuació:

Per modificar el volum d’àudio, Anime.js proporciona la propietat volume, que permet establir el volum d’un element d’àudio en una animació. Aquesta propietat accepta valors entre 0 i 1: 0 és silenci i 1 és el volum màxim. Aquí hi ha un exemple d’ús de la propietat volume per animar el volum d’un element d’àudio:

// Seleccionem l'element d'àudio.
var audioElement = document.getElementById('audio');
 
// Anem de 0 a 1 de volum en 2 segons.
anime({
  targets: audioElement,
  volume: [0, 1],
  duration: 2000
});

Anime.js és una eina potent per a la creació d’animacions fluides i interactives en l’àmbit web. Per comprendre millor com funcionen les animacions amb Anime.js, hi ha alguns exemples pràctics que podeu utilitzar com a punt de partida per a les animacions.

<!DOCTYPE html>
<html>
 
<head>
    <title>Animació de logo amb Anime.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
</head>
 
<body>
    <img id="logo" src="logo_ioc.png" />
    <script>
        // Defineix l'element objectiu.
        var logo = document.getElementById('logo');
 
        // Defineix les propietats inicials de l'element.
        anime.set(logo, {
            translateX: '-100%', // mou l'element a l'esquerra de la finestra
            opacity: 0 // establix l'opacitat a 0 per a l'efecte d'aparició
        });
 
        // Defineix l'animació amb les propietats desitjades.
        anime({
            targets: logo,
            translateX: 0, // mou l'element a la posició original
            opacity: 1, // establix l'opacitat a 1 per mostrar l'element
            duration: 2500, // durada de l'animació
            easing: 'easeOutExpo', // tipus d'animació
        });
 
    </script>
</body>
 
</html>

L’animació d’una galeria d’imatges és un altre exemple pràctic de com utilitzar Anime.js per a animacions atractives al lloc web.

<!DOCTYPE html>
<html>
 
<head>
  <title>Animació de galeria d'imatges amb Anime.js</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
</head>
 
<body>
  <div id="slideshow">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img3.jpg">
    <img src="img4.jpg">
    <img src="img5.jpg">
  </div>
 
  <div id="buttons">
    <button id="prevButton">Anterior</button>
    <button id="nextButton">Següent</button>
  </div>
 
  <script>
    // Aquí hi va el codi d'Anime.js.
  </script>
</body>
 
</html>

    #slideshow {
      position: relative;
      width: 600px;
      height: 400px;
    }
 
    #slideshow img {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity 0.5s;
    }
 
    #slideshow img.active {
      opacity: 1;
    }
}

    var slides = document.querySelectorAll('#slideshow img');
    var currentSlideIndex = 0;
 
    // Funció per canviar la diapositiva.
    function changeSlide(direction) {
      // Amaga la diapositiva actual.
      slides[currentSlideIndex].classList.remove('active');
 
      // Actualitza la posició actual de la diapositiva.
      currentSlideIndex += direction === 'left' ? -1 : 1;
      if (currentSlideIndex < 0) {
        currentSlideIndex = slides.length - 1;
      } else if (currentSlideIndex >= slides.length) {
        currentSlideIndex = 0;
      }
 
      // Mostra la nova diapositiva.
      slides[currentSlideIndex].classList.add('active');
    }
 
    // Inicia l'animació de la diapositiva actual.
    slides[currentSlideIndex].classList.add('active');
 
    // Afegeix un esdeveniment de clic al botó anterior.
    document.querySelector('#prevButton').addEventListener('click', function() {
      changeSlide('left');
    });
 
    // Afegeix un esdeveniment de clic al botó següent.
    document.querySelector('#nextButton').addEventListener('click', function() {
      changeSlide('right');
    });

<!DOCTYPE html>
<html>
 
<head>
    <title>Carrusel d´imatges amb Anime.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <style>
        #carousel {
            width: 100%;
            height: 500px;
            overflow: hidden;
            position: relative;
        }
 
        #carousel img {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
 
        #carousel img.active {
            opacity: 1;
        }
    </style>
</head>
 
<body>
    <div id="carousel">
        <img src="galeria_1.png" />
        <img src="galeria_2.png" />
        <img src="galeria_3.png" />
    </div>
    <script>
        var carousel = document.getElementById('carousel');
        var images = carousel.getElementsByTagName('img');
        var currentImageIndex = 0;
 
        function animateCarousel() {
            var animation = anime({
                targets: images[currentImageIndex],
                translateX: '-100%',
                duration: 3000,
                easing: 'easeInOutCubic',
                complete: function () {
                    images[currentImageIndex].classList.remove('active');
                    currentImageIndex++;
                    if (currentImageIndex >= images.length) {
                        currentImageIndex = 0;
                    }
                    images[currentImageIndex].classList.add('active');
                    images[currentImageIndex].style.transform = 'translateX(100%)';
                    animateCarousel();
                }
            });
        }
 
        images[currentImageIndex].classList.add('active');
        animateCarousel();
 
    </script>
</body>
 
</html>

Anime.js és una eina potent i flexible per a la creació d’animacions atractives i efectives a les pàgines web. Amb la seva gran varietat d’opcions, és important conèixer algunes de les millors pràctiques que podem aplicar per optimitzar el rendiment de les animacions i crear un impacte més significatiu en els usuaris.

Algunes pràctiques que es poden seguir per optimitzar el funcionament de les animacions amb Anime.js són:

• Utilitzar una biblioteca de CDN per carregar Anime.js. Carregar la biblioteca de Anime.js a través d’una xarxa de lliurament de contingut (CDN) pot optimitzar el temps de càrrega i millorar la velocitat de la pàgina. Això es pot fer afegint el següent codi a l’etiqueta <head> del document HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

• Reduir el nombre d’animacions. Tenir moltes animacions en una pàgina pot disminuir-ne el rendiment. Per tant, és recomanable minimitzar la quantitat d’animacions a la pàgina i optimitzar-les adequadament. És millor prioritzar les animacions que tenen un impacte important en l’experiència de l’usuari i eliminar les animacions que no aporten res significatiu.
• Utilitzar l’atribut will-change. L’atribut will-change permet al navegador optimitzar la representació d’un element que està a punt de ser animat. Això redueix la càrrega en la GPU i millora la fluidesa de l’animació. Per exemple, per animar el color de fons d’un element, es pot afegir l’atribut will-change al CSS de la següent manera:

.element {
  background-color: blue;
  will-change: background-color;
}

També es pot utilitzar la regla will-change: transform per a les animacions que modifiquin la posició, mida o rotació d’un element:

.element {
    will-change: transform;
}

• Evitar l’ús de posicions absolutes. L’ús de posicions absolutes pot tenir un impacte negatiu en el rendiment de l’animació. Si és possible, és millor utilitzar altres opcions de posicionament, com ara posicions relatives, flexbox o CSS Grid. Si no és possible, és important assegurar-se que els elements animats amb posicions absolutes no se superposin.
• Predefinir les dimensions de l’element. Definir les dimensions de l’element abans de l’animació redueix la quantitat de càlculs que el navegador ha de fer durant l’animació i, per tant, millora el rendiment. Si no es poden definir les dimensions abans de l’animació, és important assegurar-se que les dimensions es defineixen almenys abans que l’element sigui visible per primera vegada.

.element {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translateX(-100%);
}

• Provar l’animació en diferents dispositius i navegadors. És important provar l’animació en diferents dispositius i navegadors per assegurar que funciona correctament i que ofereix una experiència de qualitat als usuaris. Algunes animacions poden ser més exigents en termes de rendiment i, per tant, pot ser necessari adaptar-les per a dispositius mòbils o navegadors més vells.
• Utilitzar la funció requestAnimationFrame. Aquesta funció permet a l’animació actualitzar-se quan el navegador estigui llest per a això, el que millora el rendiment i la suavitat de l’animació. No es recomana fer servir la funció setInterval, ja obsoleta en termes de rendiment.

function animate() {
    requestAnimationFrame(animate);
    // Codi d'animació
}
animate();

• Reduir el nombre d’elements animats. Animar massa elements alhora pot disminuir el rendiment i fer que l’animació es vegi poc fluida. Si es vol animar diversos elements alhora, es pot utilitzar un Timeline per agrupar les animacions i garantir que s’executen de manera sincronitzada.

var timeline = anime.timeline({
    easing: 'easeOutExpo',
    duration: 750
});
timeline.add({
    targets: '.element-1',
    translateX: 250
})
.add({
    targets: '.element-2',
    translateX: 250
});

Per crear animacions més atractives i efectives amb Anime.js, també hi ha algunes bones pràctiques. A través de l’ús d’efectes i elements visuals adequats, es poden crear animacions més impactants i que connectin millor amb el públic.

• No saturar l’usuari amb moltes animacions. Evitar fer servir moltes animacions simultàniament. Això pot sobrecarregar l’usuari i fer que la pàgina sigui lenta.
• Fer servir una durada adequada. La durada d’una animació ha de ser prou llarga perquè l’usuari la pugui percebre, però no massa llarga perquè s’avorreixi. CAl utilitzar una durada adequada segons el contingut i l’objectiu de l’animació.
• Cuidar els detalls. Cuidar els detalls de l’animació, com ara la velocitat, l’easing, la posició, la mida i el color. Aquests detalls poden ajudar a donar una millor sensació d’interacció i dinamisme a la pàgina.

Canvas és una eina que permet dibuixar continguts gràfics dinàmics en una pàgina web. En lloc de carregar una imatge estàtica, Canvas permet crear formes, text i imatges personalitzades en temps real amb codi JavaScript.

Canvas forma part de l’estàndard HTML5 i la seva API és accessible via DOM.

Canvas és molt útil per a la creació d’interfícies d’usuari interactives i animades. Per exemple, es pot utilitzar per crear gràfics personalitzats, jocs senzills i animacions que responguin a les accions de l’usuari. Un dels avantatges de Canvas és que permet un gran control sobre el contingut gràfic de la pàgina. En lloc de confiar en l’estil predefinit dels elements HTML, amb Canvas es pot personalitzar tota l’experiència gràfica amb codi. Això permet una gran flexibilitat a l’hora de dissenyar l’aparença i la interacció dels elements de la pàgina.

Així com Canvas, SVG (Scalable Vector Graphics) és una eina que permet dibuixar continguts gràfics en una pàgina web. La principal diferència entre ambdues eines és que SVG és una eina basada en vectors, mentre que Canvas està basada en píxels.

La diferència més important entre aquestes dues eines és que mentre que SVG és ideal per a la creació d’imatges estàtiques i gràfics, Canvas és millor per a la creació d’animacions i continguts dinàmics. Això és perquè SVG és més lenta a l’hora de processar les actualitzacions d’estat dels seus elements, mentre que Canvas és molt ràpida.

Vegeu un exemple senzill de codi per dibuixar un cercle amb Canvas:

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas exemple</title>
  </head>
  <body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
      context.beginPath();
      context.arc(100, 100, 50, 0, 2 * Math.PI);
      context.stroke();
    </script>
  </body>
</html>

En aquest exemple, es crea un cercle mitjançant la creació d’un context Canvas i l’ús de la funció arc(). Així mateix, el codi inclou la línia context.stroke(), que fa que el cercle es dibuixi al Canvas. A mesura que s’aprèn més sobre Canvas, es poden utilitzar altres funcions com fillRect() per dibuixar formes geomètriques i altres elements visuals.

Podeu veure aquest exemple a: codepen.io/iocdawm9/pen/RwYWpEB.

En conclusió, Canvas és una eina molt potent i versàtil per a la creació d’interfícies web personalitzades i animades. Amb el coneixement adequat, es poden crear animacions i gràfics sorprenents que millorin la interacció amb els usuaris i ofereixin una experiència més atractiva i satisfactòria.

Canvas és un element HTML5 que es pot utilitzar per a dibuixar gràfics, formes i altres elements visuals. L’element canvas es pot crear en HTML de la següent manera:

<canvas id="myCanvas" width="500" height="500"></canvas>

Aquest codi crea un llenç o canvas amb una amplada de 500 píxels i una alçada de 500 píxels i li dona l’identificador “myCanvas”. Per dibuixar en el llenç, s’ha de crear un context a través del qual s’hi pugui accedir. Això es fa de la següent manera:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

En aquest codi, s’obté el llenç (canvas) pel seu identificador i s’obté el context per poder dibuixar-hi. El context proporciona les funcions necessàries per a dibuixar formes, imatges i text en el llenç.

Un cop creat el context, es poden utilitzar diverses funcions per dibuixar formes bàsiques. Les funcions més comunes són:

• fillRect(x, y, width, height): dibuixa un rectangle ple.
• strokeRect(x, y, width, height): dibuixa un rectangle amb vores.
• clearRect(x, y, width, height): elimina una àrea del canvas.
• beginPath(): inicia un nou camí.
• moveTo(x, y): mou el punt de dibuix a les coordenades especificades.
• lineTo(x, y): dibuixa una línia des del punt actual fins a les coordenades especificades.
• stroke(): dibuixa el contorn de la forma.
• fill(): omple la forma.

Per exemple, el següent codi dibuixa un rectangle amb una línia vermella:

context.beginPath();
context.rect(50, 50, 100, 100);
context.strokeStyle = 'red';
context.stroke();

Vegeu el codi sencer de l’exemple a: codepen.io/iocdawm9/pen/NWLGpoQ.

Amb Canvas, també es poden utilitzar imatges i text. Les funcions més comunes són:

• drawImage(image, x, y): dibuixa una imatge a les coordenades especificades.
• fillText(text, x, y): escriu un text a les coordenades especificades.
• strokeText(text, x, y): escriu un text amb vores a les coordenades especificades.

Per exemple, el següent codi carrega una imatge i la dibuixa al llenç (canvas):

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
 
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 10, 10);
};
img.src = "path/to/image.jpg";

Aquest codi obté l’element canvas del DOM amb l’identificador “myCanvas” i després. el seu context 2D. A continuació, es crea una nova instància de l’objecte Image i se li assigna una funció que s’executarà quan la imatge s’hagi acabat de carregar. Aquesta funció simplement crida el mètode drawImage del context 2D del llenç, passant-li l’objecte imatge i les coordenades.

Vegeu aquest exemple a: codepen.io/iocdawm9/pen/NWLGjqW.

Per afegir text en el llenç, s’utilitza el mètode fillText del context 2D. Aquest mètode rep com a paràmetres el text a escriure, les coordenades on es vol escriure i la mida de la font. Per exemple, el següent codi escriu la paraula “Hola” en la posició (50, 50) del llenç:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
 
ctx.font = "30px Arial";
ctx.fillText("Hola", 50, 50);

Vegeu el codi sencer de l’exemple a: codepen.io/iocdawm9/pen/YzOyVXJ.

Per estilitzar les formes Canvas disposa d’un seguit de mètodes que permeten canviar el color, la mida i altres propietats de les formes i els textos dibuixats en el llenç. Per exemple, per establir el color de les formes, s’utilitza la propietat fillStyle.

Vegeu un exemple de codi que dibuixa un rectangle i l’omple de color vermell:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
 
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

Aquest codi obté l’element canvas i el seu context 2D. A continuació, es canvia el valor de la propietat fillStyle a “red”, que farà que totes les formes que es dibuixin siguin de color vermell. Finalment, s’utilitza el mètode fillRect per dibuixar un rectangle en la posició (10, 10) amb una amplada de 50 i una alçada de 50.

Vegeu el codi sencer a: codepen.io/iocdawm9/pen/abavWmE.

A més del fillStyle, també hi ha el mètode strokeStyle, que permet definir el color de la línia que es dibuixa al voltant de les formes.

Per canviar la mida de les formes, hi ha el mètode scale, que permet escalar les formes en les dimensions x i y. També es pot utilitzar el mètode rotate per girar les formes al seu voltant.

Altres propietats que es poden estilitzar són la font i la mida del text, que es poden canviar amb els mètodes font i fontSize, respectivament.

Vegeu un exemple de codi amb algunes d’aquestes característiques de Canvas:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Exemple Canvas</title>
    <style>
      canvas {
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="400" height="300"></canvas>
 
    <script>
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
 
      // Dibuixar un rectangle ple
      context.fillStyle = "blue";
      context.fillRect(50, 50, 100, 100);
 
      // Dibuixar una línia
      context.strokeStyle = "red";
      context.lineWidth = 5;
      context.beginPath();
      context.moveTo(200, 50);
      context.lineTo(300, 150);
      context.stroke();
 
      // Dibuixar un cercle amb gradient
      var gradient = context.createRadialGradient(350, 75, 10, 350, 75, 100);
      gradient.addColorStop(0, "yellow");
      gradient.addColorStop(1, "green");
      context.fillStyle = gradient;
      context.beginPath();
      context.arc(350, 75, 50, 0, 2*Math.PI);
      context.fill();
    </script>
  </body>
</html>

Aquest codi dibuixa un rectangle blau, una línia vermella gruixuda i un cercle amb un gradient de color de groc a verd. També hi ha estil de línia, estil de farcit i mida de la línia establerts. Els estils es configuren utilitzant les propietats del context, i les formes es dibuixen utilitzant mètodes com fillRect(), beginPath(), moveTo(), lineTo(), stroke(), arc() i fill().

Podeu veure aquest exemple a: codepen.io/iocdawm9/pen/XWPmRMe.

Amb Canvas es poden afegir animacions i interactivitat als dibuixos. Això permet crear animacions personalitzades i interactuar amb l’usuari.

Per animar formes en Canvas, es pot utilitzar el mètode requestAnimationFrame(), que actualitza el contingut del llenç a una velocitat determinada per l’ordinador de l’usuari, creant una animació suau i fluida.

Vegeu un exemple senzill de com animar un cercle en Canvas:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Exemple animació Canvas</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="300"></canvas>
 
    <script>
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
 
        var x = canvas.width / 2;
        var y = canvas.height / 2;
        var radius = 50;
        var startAngle = 0;
        var endAngle = 2 * Math.PI;
 
        function drawCircle() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.beginPath();
            context.arc(x, y, radius, startAngle, endAngle);
            context.fillStyle = "blue";
            context.fill();
 
            x += 2;
            if (x > canvas.width + radius) {
                x = -radius;
            }
 
            requestAnimationFrame(drawCircle);
        }
 
        drawCircle();
    </script>
</body>
</html>

En aquest exemple, s’ha definit la funció drawCircle(), que es crida a si mateixa recursivament utilitzant requestAnimationFrame(). La funció actualitza la posició del cercle i després el dibuixa en una nova posició, eliminant el cercle anterior amb el mètode clearRect(). Això crea l’efecte d’una animació que mou el cercle de forma suau i fluida.

Podeu veure aquesta animació:

Teniu l’exemple en funcionament a: codepen.io/iocdawm9/pen/OJoymQP.

Per detectar interaccions de l’usuari amb les formes, es poden utilitzar esdeveniments de ratolí i de teclat. Canvas té una sèrie de mètodes que permeten obtenir la posició del ratolí dins del llenç, com ara offsetX, offsetY, clientX i clientY. Les propietats clientX i clientY indiquen la posició del punter del ratolí respecte a la vora superior esquerra de la finestra del navegador, mentre que offsetX i offsetY indiquen la posició del punter del ratolí respecte a la vora superior esquerra de l’element sobre el qual s’ha produït l’esdeveniment.

Vegeu un exemple senzill de detecció del clic de l’usuari en un cercle dibuixat en Canvas:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Exemple d'interactivitat Canvas</title>
    <style>
      canvas {
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="400" height="300"></canvas>
 
    <script>
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
 
      // Dibuixar cercle inicial
      context.beginPath();
      context.arc(200, 150, 50, 0, 2*Math.PI);
      context.fillStyle = "green";
      context.fill();
 
      // Afegir esdeveniment de moviment del ratolí al canvas
      canvas.addEventListener("mousemove", function(event) {
        var x = event.clientX - canvas.offsetLeft;
        var y = event.clientY - canvas.offsetTop;
        var distance = Math.sqrt(Math.pow(x - 200, 2) + Math.pow(y - 150, 2));
        if (distance < 50) {
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.beginPath();
          context.arc(200, 150, 50, 0, 2*Math.PI);
          context.fillStyle = "red";
          context.fill();
        } else {
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.beginPath();
          context.arc(200, 150, 50, 0, 2*Math.PI);
          context.fillStyle = "green";
          context.fill();
        }
      });
    </script>
  </body>
</html>

Aquest codi dibuixa un cercle verd inicial i afegeix un esdeveniment de moviment del ratolí al llenç. Quan el ratolí es mou dins de l’àrea del cercle, canvia el seu color a vermell. Si el ratolí es mou fora de l’àrea del cercle, torna a ser verd. La funció de l’esdeveniment “mousemove” calcula la distància entre la posició del ratolí i el centre del cercle per determinar si el ratolí és a dins o fora de l’àrea del cercle. Si és a dins, es dibuixa el cercle en vermell; si és a fora, es dibuixa en verd.

Les propietats clientX i clientY són propietats de l’objecte MouseEvent que contenen les coordenades del cursor en píxels en el moment de l’esdeveniment.

En aquest exemple, s’utilitza l’esdeveniment de moviment del ratolí al llenç (mousemove) per detectar si el cursor es mou dins del cercle dibuixat. Els valors de clientX i clientY s’utilitzen per calcular la distància entre la posició del cursor i el centre del cercle.

Per obtenir les coordenades del centre del cercle, s’ha establert el valor x com la meitat de l’amplada del canvas, i el valor y com la meitat de l’alçada del llenç. Així, el centre del cercle és (x, y) = (200, 150) en aquest cas.

A continuació, s’utilitza la fórmula de la distància euclidiana per calcular la distància entre el cursor i el centre del cercle:

distance = Math.sqrt(Math.pow(x - 200, 2) + Math.pow(y - 150, 2));

Les coordenades x i y són les coordenades del cursor, i 200 i 150 són les coordenades del centre del cercle.

Si la distància calculada és menor que el radi del cercle (que és 50 en aquest cas), el cursor és a dins del cercle i queda pintat de color vermell. En cas contrari, el cursor és a fora del cercle i es pinta el cercle de color verd.

A continuació podeu veure com funciona aquest script Canvas:

Podeu veure aquest exemple a: codepen.io/iocdawm9/pen/bGxVWQw.

Per respondre a les accions de l’usuari amb animacions personalitzades en un llenç, primer de tot cal capturar les interaccions de l’usuari amb l’aplicació, com ara clics del ratolí, moviments del ratolí, tocs a la pantalla en dispositius mòbils, etc.

Un cop capturades aquestes interaccions, podem utilitzar-les per modificar el contingut del llenç i crear animacions personalitzades. Per exemple, les dades dels moviments del ratolí es poden fer servir per modificar la posició d’una figura en temps real, o bé fer que una figura canviï de mida o de color quan l’usuari hi faci clic.

Per implementar aquesta lògica, és important utilitzar les funcions de dibuix, com ara fillRect, strokeRect, drawImage, etc., per a crear i modificar el contingut del llenç en temps real.

Un aspecte important a tenir en compte en el desenvolupament d’animacions personalitzades en un llenç és la gestió de la velocitat d’animació, per evitar que l’aplicació es torni lenta o inestable. Per això, és recomanable utilitzar funcions com requestAnimationFrame, que controla la velocitat de refresc.

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
var ball = {
    x: Math.floor(Math.random() * canvas.width),
    y: Math.floor(Math.random() * canvas.height),
    radius: 20,
    color: "blue"
};
 
function drawBall() {
    context.beginPath();
    context.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
    context.fillStyle = ball.color;
    context.fill();
}

function isClicked(x, y) {
    var distance = Math.sqrt(Math.pow(x - ball.x, 2) + Math.pow(y - ball.y, 2));
    return distance < ball.radius;
}
 
canvas.addEventListener("mousedown", function(event) {
    var x = event.pageX - canvas.offsetLeft;
    var y = event.pageY - canvas.offsetTop;
    if (isClicked(x, y)) {
        ball.color = "transparent";
        setTimeout(function() {
            ball.x = Math.floor(Math.random() * canvas.width);
            ball.y = Math.floor(Math.random() * canvas.height);
            ball.color = "blue";
        }, 1000);
    }
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Canvas Animations</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
 
      var ball = {
        x: Math.floor(Math.random() * canvas.width),
        y: Math.floor(Math.random() * canvas.height),
        radius: 20,
        color: "blue"
      };
 
      function drawBall() {
        context.beginPath();
        context.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
        context.fillStyle = ball.color;
        context.fill();
      }
 
      function isClicked(x, y) {
        var distance = Math.sqrt(Math.pow(x - ball.x, 2) + Math.pow(y - ball.y, 2));
        return distance < ball.radius;
      }
 
      function fadeOut() {
        var opacity = 1;
        var request = requestAnimationFrame(function animate() {
          opacity -= 0.1;
          if (opacity <= 0) {
            cancelAnimationFrame(request);
          } else {
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.globalAlpha = opacity;
            drawBall();
            context.globalAlpha = 1;
            request = requestAnimationFrame(animate);
          }
        });
      }
 
      canvas.addEventListener("mousedown", function(event) {
        var x = event.pageX - canvas.offsetLeft;
        var y = event.pageY - canvas.offsetTop;
        if (isClicked(x, y)) {
          fadeOut();
          setTimeout(function() {
            ball.x = Math.floor(Math.random() * canvas.width);
            ball.y = Math.floor(Math.random() * canvas.height);
            ball.color = "blue";
            drawBall();
          }, 1000);
        }
      });
 
      drawBall();
    </script>
  </body>
</html>

L’ús del Canvas ofereix un ampli ventall de possibilitats per crear continguts interactius i animacions en línia. Hi ha diversos exemples pràctics sobre com utilitzar Canvas per crear jocs senzills, visualitzacions de dades i animacions complexes. A través d’aquests exemples, descobrireu algunes de les funcions i eines que ofereix aquesta tecnologia per expressar-vos visualment en línia i interactuar amb l’usuari.

Crear un joc senzill en Canvas és una excel·lent manera de començar a explorar les funcionalitats d’aquesta tecnologia. Per exemple, podeu crear un joc on l’usuari ha de controlar una paleta per evitar que una bola caigui del llenç. El joc pot ser més difícil a mesura que la bola rebota a la paleta en angles diferents.

Per crear aquest joc, primer cal crear les variables necessàries. En aquest cas, es necessita una variable per representar la bola i una altra per a la paleta.

var ball = {
	x: canvas.width/2,
	y: canvas.height-30,
	radius: 10,
	dx: 2,
	dy: -2,
	color: "#0095DD"
};
 
var paddle = {
	height: 10,
	width: 75,
	x: (canvas.width-75)/2,
	y: canvas.height-10,
	dx: 7,
	color: "#0095DD"
};

La variable ball representa la bola, amb les seves propietats com la posició (x, y), la velocitat (vx, vy), el radi i el color. La variable paddle representa la paleta, amb la posició (x, y), l’amplada i l’alçada, i el color.

Cal dibuixar la bola i la paleta al llenç. Això es fa a les funcions drawBall() i drawPaddle():

function drawBall() {
	context.beginPath();
	context.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
	context.fillStyle = ball.color;
	context.fill();
	context.closePath();
}
 
function drawPaddle() {
	context.beginPath();
	context.rect(paddle.x, paddle.y, paddle.width, paddle.height);
	context.fillStyle = paddle.color;
	context.fill();
	context.closePath();
}

La funció drawBall() dibuixa la bola. Comença creant un arc amb beginPath() i defineix les propietats de l’arc (posició, radi i angles) amb arc(). A continuació, especifica el color de farcit de la bola amb fillStyle i omple l’arc amb fill(). Finalment, closePath() tanca el traçat.

La funció drawPaddle() dibuixa la paleta. Comença definint un rectangle amb rect() amb les coordenades i dimensions especificades per a paddle.x, paddle.y, paddle.width i paddle.height. A continuació, especifica el color de farcit de la paleta amb fillStyle i omple el rectangle amb fill(). Finalment, closePath() tanca el traçat.

Després de dibuixar la bola i la paleta, s’ha de moure la bola i detectar les col·lisions amb la paleta. Això es fa amb la funció update().

function update() {
	context.clearRect(0, 0, canvas.width, canvas.height);
	drawBall();
	drawPaddle();
 
  // Detecta col·lisions amb les parets.
	if(ball.x + ball.dx > canvas.width-ball.radius || ball.x + ball.dx < ball.radius) {
		ball.dx = -ball.dx;
	}
	if(ball.y + ball.dy < ball.radius) {
		ball.dy = -ball.dy;         
        // Detecta col·lisions amb la paleta.
	} else if(ball.y + ball.dy > canvas.height-ball.radius-paddle.height && ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
		ball.dy = -ball.dy;
	}
    //Mou la paleta.
	if(rightPressed && paddle.x < canvas.width-paddle.width) {
		paddle.x += paddle.dx;
	} else if(leftPressed && paddle.x > 0) {
		paddle.x -= paddle.dx;
	}
  // Mou la bola.
	ball.x += ball.dx;
	ball.y += ball.dy;
}

La funció update() és el bucle principal del joc, que s’encarrega de moure la bola, moure la paleta, detectar col·lisions i tornar a dibuixar tots els elements en cada iteració.

Primer, s’usa la funció clearRect() per netejar el llenç abans de tornar a dibuixar els elements. A continuació, es crida la funció drawBall() i drawPaddle() per dibuixar la bola i la paleta.

Després, es comprova si la bola ha col·lidit amb les parets del llenç. Si la bola col·lideix amb les parets verticals, s’inverteix la seva velocitat horitzontal (dx) per fer-la rebotar. Si la bola col·lideix amb la paret superior, s’inverteix la seva velocitat vertical (dy) per fer-la rebotar.

Si la bola arriba a la part inferior, es comprova si ha col·lidit amb la paleta. Si la bola col·lideix amb la paleta, s’inverteix la seva velocitat vertical (dy) per fer-la rebotar.

Després es comprova si les tecles de la dreta (rightPressed) o de l’esquerra (leftPressed) estan premudes. Si ho estan, es mou la paleta cap a la dreta o cap a l’esquerra, respectivament.

Finalment, s’actualitza la posició de la bola sumant la seva velocitat horitzontal (dx) i vertical (dy) a les seves coordenades x i y. Així, la bola es mou.

La part final de l’exemple consisteix en la crida a una funció loop(). Aquesta funció simplement crida la funció update(), que actualitza la posició de la bola i la paleta, i després crida requestAnimationFrame(loop), que realitza la següent animació en la següent refrescada del navegador.

function loop(){
    update();
    requestAnimationFrame(loop);
}
 
loop();

requestAnimationFrame és una funció que executa la funció que se li passa com a argument en el proper cicle de renderització del navegador. Això proporciona una forma més eficient i precisa d’actualitzar la pantalla en lloc de fer-ho amb un interval de temps fix, ja que el navegador s’encarrega de sincronitzar l’animació amb la taxa de refresc del monitor.

El bucle loop() es continua executant indefinidament, la funció update() actualitza constantment la posició de la bola i la paleta, i aquesta actualització es fa visible a mesura que la bola es mou i interactua amb la paleta i les parets:

Teniu el codi sencer d’aquest joc a: codepen.io/iocdawm9/pen/OJoygzg.

Crear una visualització de dades en Canvas és una aplicació molt utilitzada. És freqüent representar gràfics en una pàgina web perquè l’usuari pugui veure la informació de manera visual.

Per crear una visualització de dades primer cal decidir quin tipus de gràfic es vol representar, com ara gràfics de línies, de barres, circulars, etc.

Un exemple senzill de visualització de dades en Canvas és un gràfic de barres. Primer de tot es necessita una sèrie de dades a representar i el color i la mida de les barres.

Els passos per crear una visualització de dades de forma general són:

• Definir el llenç: crear el llenç on es representarà el gràfic.
• Definir les dades: definir les dades que es volen representar.
• Definir els paràmetres del gràfic: definir els paràmetres del gràfic, com el tipus de gràfic, el color de les barres, l’amplada, l’alçada, etc.
• Dibuixar les dades: dibuixar les dades amb les especificacions establertes.
• Opcionalment, afegir animació o interactivitat al gràfic.

Així doncs, el procés depèn del tipus de gràfic que es vulgui crear i dels paràmetres que s’estableixin. Per crear una visualització de dades en Canvas podem utilitzar diferents formes de gràfics, com ara línies, barres o corbes.

Exemple de creació d'un gràfic de línia amb Canvas

Vegeu com dibuixar un gràfic de línies senzill a partir d’unes dades que representen una sèrie temporal.

Primer, es necessiten les dades. Per a aquest exemple, volem mostrar les temperatures mitjanes diàries durant una setmana. Les dades es guardaran en una variable anomenada data, amb el següent format:

const data = [
  { day: "Monday", temp: 18 },
  { day: "Tuesday", temp: 20 },
  { day: "Wednesday", temp: 22 },
  { day: "Thursday", temp: 19 },
  { day: "Friday", temp: 16 },
  { day: "Saturday", temp: 17 },
  { day: "Sunday", temp: 21 }
];

A continuació, cal crear una funció anomenada drawChart, que dibuixarà el gràfic a partir de les dades. Aquesta funció rep com a paràmetres el context del llenç i les dades a representar.

function drawChart(ctx, data) {
  // Configura l'estil de la línia.
  ctx.strokeStyle = "blue";
  ctx.lineWidth = 2;
 
  // Dibuixa l'eix X.
  ctx.beginPath();
  ctx.moveTo(50, 200);
  ctx.lineTo(450, 200);
  ctx.stroke();
 
  // Dibuixa l'eix Y.
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(50, 200);
  ctx.stroke();
 
  // Dibuixa els punts i la línia.
  ctx.beginPath();
  ctx.moveTo(50, 200 - data[0].temp * 5);
  for (let i = 1; i < data.length; i++) {
    const temp = data[i].temp;
    const x = i * 60 + 50;
    const y = 200 - temp * 5;
    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(x, y, 5, 0, Math.PI * 2);
    ctx.fill();
    ctx.moveTo(x, y);
  }
}

La funció drawChart dibuixa l’eix X i l’eix Y del gràfic, amb els seus corresponents rètols. Després dibuixa la línia de les temperatures mitjanes i els punts corresponents a cada dia.

Per acabar, només cal cridar la funció drawChart passant-li el context del llenç i les dades a representar.

const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
 
drawChart(context, data);

Així es dibuixa el gràfic de línies a partir de les dades.

El resultat final ha de ser una visualització de les temperatures mitjanes durant la setmana (vegeu la figura).

Teniu aquest codi disponible a: codepen.io/iocdawm9/pen/zYJvzaV.

Per crear una animació complexa en Canvas, es poden combinar diferents elements de les animacions senzilles. Això permet crear animacions amb moviments i transicions fluides i complexos.

En aquest exemple es crea una animació de fons estrellat. Aquesta animació consisteix en un fons negre amb un munt d’estrelles que es mouran a diferents velocitats i direccions. La idea és que sembli que viatgem a través de l’espai.

El codi per a aquest exemple és el següent:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
 
// Crea estrelles.
const stars = [];
for (let i = 0; i < 200; i++) {
  const star = {
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    size: Math.random() * 3,
    speed: Math.random() * 5,
  };
  stars.push(star);
}
 
function update() {
  // Actualitza la posició de les estrelles.
  for (let i = 0; i < stars.length; i++) {
    const star = stars[i];
    star.y += star.speed;
 
    // Reinicia l'estrella quan surt del llenç.
    if (star.y > canvas.height) {
      star.y = 0;
      star.x = Math.random() * canvas.width;
      star.speed = Math.random() * 5;
    }
  }
}
 
function draw() {
  //Dibuixa un fons d'espai negre.
  context.fillStyle = "black";
  context.fillRect(0, 0, canvas.width, canvas.height);
  // Dibuixa estrelles.
  context.fillStyle = "white";
  for (let i = 0; i < stars.length; i++) {
    const star = stars[i];
    context.fillRect(star.x, star.y, star.size, star.size);
  }
}
 
function loop() {
  // Actualitzar i dibuixar
  update();
  draw();
  // Animar
  requestAnimationFrame(loop);
}
 
loop();

En aquest exemple, primer es crea un array de 200 estrelles amb posicions aleatòries al llenç, mides aleatòries i velocitats aleatòries. En la funció update s’actualitzen les posicions de les estrelles afegint la seva velocitat a la posició en l’eix y. Si una estrella surt del llenç, es reinicia amb una posició aleatòria a l’eix x, una nova velocitat i es col·loca al principi del llenç.

A la funció draw es dibuixen les estrelles amb un rectangle blanc sobre fons negre. Finalment, a la funció loop s’actualitza i es dibuixa el canvas; després cridem requestAnimationFrame per fer una animació fluida:

Podeu veure aquest exemple a: codepen.io/iocdawm9/pen/LYJpjNb.

Combinant diferents moviments i animacions, es poden crear animacions complexes en Canvas.