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

HOME

En aquest tema, aprendrem com recuperar dades d'APIs (Application Programming Interfaces) utilitzant D3.js. Les APIs són una font comuna de dades per a les visualitzacions, ja que permeten accedir a informació actualitzada i dinàmica des de serveis web. Aquest procés implica fer sol·licituds HTTP per obtenir dades en formats com JSON o CSV.

Objectius

Entendre què és una API i com funciona.
Aprendre a fer sol·licituds HTTP per recuperar dades.
Manipular i utilitzar les dades obtingudes per crear visualitzacions amb D3.js.

Conceptes Clau

Què és una API?

Una API és un conjunt de regles que permeten a diferents programes comunicar-se entre ells. Les APIs web permeten accedir a dades i funcionalitats d'un servei web extern.

Tipus de Sol·licituds HTTP

GET: Recupera dades d'un servidor.
POST: Envia dades al servidor.
PUT: Actualitza dades existents al servidor.
DELETE: Elimina dades del servidor.

Formats de Dades

JSON (JavaScript Object Notation): Un format lleuger per a l'intercanvi de dades.
CSV (Comma-Separated Values): Un format simple per a dades tabulars.

Exemple Pràctic: Recuperant Dades d'una API

Pas 1: Configurar l'Entorn

Assegura't de tenir un fitxer HTML bàsic amb D3.js inclòs:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Recuperant Dades d'APIs</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

Pas 2: Fer una Sol·licitud GET amb D3.js

Utilitzarem l'API pública de JSONPlaceholder per obtenir una llista de publicacions.

// script.js
d3.json('https://jsonplaceholder.typicode.com/posts')
    .then(function(data) {
        console.log(data);
        // Aquí pots manipular les dades i crear visualitzacions
    })
    .catch(function(error) {
        console.error('Error recuperant les dades:', error);
    });

Explicació del Codi

d3.json(url): Fa una sol·licitud GET a l'URL especificat i retorna una promesa.
.then(function(data) {...}): Aquesta funció es crida quan la sol·licitud és exitosa. data conté les dades recuperades.
.catch(function(error) {...}): Aquesta funció es crida si hi ha un error en la sol·licitud.

Pas 3: Manipular les Dades

Un cop tenim les dades, podem utilitzar-les per crear visualitzacions. Per exemple, podem mostrar els títols de les publicacions en una llista:

d3.json('https://jsonplaceholder.typicode.com/posts')
    .then(function(data) {
        d3.select('body')
            .append('ul')
            .selectAll('li')
            .data(data)
            .enter()
            .append('li')
            .text(function(d) { return d.title; });
    })
    .catch(function(error) {
        console.error('Error recuperant les dades:', error);
    });

Explicació del Codi

d3.select('body').append('ul'): Afegeix una llista no ordenada (<ul>) al cos del document.
.selectAll('li').data(data).enter().append('li'): Crea un element de llista (<li>) per a cada element de les dades.
.text(function(d) { return d.title; }): Estableix el text de cada element de llista al títol de la publicació.

Exercici Pràctic

Exercici 1: Recuperar i Mostrar Dades d'una API

Utilitza l'API de JSONPlaceholder per obtenir una llista d'usuaris (https://jsonplaceholder.typicode.com/users).
Mostra els noms dels usuaris en una llista no ordenada (<ul>).

Solució

d3.json('https://jsonplaceholder.typicode.com/users')
    .then(function(data) {
        d3.select('body')
            .append('ul')
            .selectAll('li')
            .data(data)
            .enter()
            .append('li')
            .text(function(d) { return d.name; });
    })
    .catch(function(error) {
        console.error('Error recuperant les dades:', error);
    });

Errors Comuns i Consells

Error de CORS: Si l'API no permet sol·licituds des del teu domini, pots trobar-te amb errors de CORS (Cross-Origin Resource Sharing). Assegura't que l'API permet sol·licituds des del teu origen.
Mala Gestió de Promeses: Assegura't de gestionar correctament les promeses amb .then i .catch per evitar errors inesperats.
Dades Mal Formatejades: Verifica que les dades recuperades estan en el format esperat (JSON, CSV, etc.) abans de manipular-les.

Conclusió

En aquesta secció, hem après com recuperar dades d'APIs utilitzant D3.js. Hem vist com fer sol·licituds HTTP, manipular les dades obtingudes i utilitzar-les per crear visualitzacions. Aquestes habilitats són fonamentals per treballar amb dades dinàmiques i actualitzades en les teves visualitzacions.

En el següent tema, explorarem com netejar i transformar les dades per preparar-les per a la visualització.

Recuperant Dades d'APIs

Objectius

Conceptes Clau

Què és una API?

Tipus de Sol·licituds HTTP

Formats de Dades

Exemple Pràctic: Recuperant Dades d'una API

Pas 1: Configurar l'Entorn

Pas 2: Fer una Sol·licitud GET amb D3.js

Explicació del Codi

Pas 3: Manipular les Dades

Explicació del Codi

Exercici Pràctic

Exercici 1: Recuperar i Mostrar Dades d'una API

Solució

Errors Comuns i Consells

Conclusió

D3.js: De Principiant a Avançat

Mòdul 1: Introducció a D3.js

Mòdul 2: Treballant amb Seleccions

Mòdul 3: Dades i Escales

Mòdul 4: Creant Visualitzacions Bàsiques

Mòdul 5: Visualitzacions Avançades

Mòdul 6: Interactivitat i Animació

Mòdul 7: Treballant amb Dades Reals

Mòdul 8: Rendiment i Optimització

Mòdul 9: Millors Pràctiques i Tècniques Avançades

Mòdul 10: Projecte Final