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

HOME

En aquest tema, aprendrem com carregar i analitzar dades utilitzant D3.js. Aquest és un pas fonamental per crear visualitzacions dinàmiques i interactives. D3.js proporciona diverses funcions per carregar dades des de diferents fonts i formats, com ara CSV, JSON i TSV. També veurem com analitzar i manipular aquestes dades per preparar-les per a la visualització.

Objectius del Tema

Entendre com carregar dades des de diferents fonts.
Aprendre a analitzar i manipular dades.
Preparar les dades per a la visualització.

Carregant Dades amb D3.js

D3.js ofereix diverses funcions per carregar dades des de diferents formats. Les més comunes són d3.csv(), d3.json() i d3.tsv(). A continuació, veurem com utilitzar aquestes funcions.

1.1 Carregant Dades CSV

El format CSV (Comma-Separated Values) és un dels formats més comuns per emmagatzemar dades tabulars. D3.js proporciona la funció d3.csv() per carregar dades CSV.

d3.csv("data.csv").then(function(data) {
    console.log(data);
});

1.2 Carregant Dades JSON

El format JSON (JavaScript Object Notation) és molt utilitzat per a l'intercanvi de dades entre servidors i aplicacions web. D3.js proporciona la funció d3.json() per carregar dades JSON.

d3.json("data.json").then(function(data) {
    console.log(data);
});

1.3 Carregant Dades TSV

El format TSV (Tab-Separated Values) és similar al CSV, però utilitza tabulacions com a delimitadors. D3.js proporciona la funció d3.tsv() per carregar dades TSV.

d3.tsv("data.tsv").then(function(data) {
    console.log(data);
});

Analitzant i Manipulant Dades

Un cop carregades les dades, és important analitzar-les i manipular-les per preparar-les per a la visualització. D3.js proporciona diverses funcions per treballar amb dades.

2.1 Explorant les Dades

Després de carregar les dades, podem explorar-les per entendre la seva estructura i contingut.

d3.csv("data.csv").then(function(data) {
    console.log(data);
    data.forEach(function(d) {
        console.log(d);
    });
});

2.2 Convertint Tipus de Dades

És comú que les dades carregades siguin de tipus string. Podem convertir-les a altres tipus, com ara nombres o dates, per facilitar la seva manipulació.

d3.csv("data.csv").then(function(data) {
    data.forEach(function(d) {
        d.value = +d.value; // Convertir a nombre
        d.date = new Date(d.date); // Convertir a data
    });
    console.log(data);
});

2.3 Filtrant Dades

Podem filtrar les dades per obtenir només els elements que compleixen certs criteris.

d3.csv("data.csv").then(function(data) {
    var filteredData = data.filter(function(d) {
        return d.value > 10;
    });
    console.log(filteredData);
});

2.4 Agrupant Dades

Podem agrupar les dades per categories o altres criteris utilitzant la funció d3.group().

d3.csv("data.csv").then(function(data) {
    var groupedData = d3.group(data, d => d.category);
    console.log(groupedData);
});

Exercicis Pràctics

Exercici 1: Carregar i Mostrar Dades CSV

Carrega un fitxer CSV i mostra les dades a la consola.

d3.csv("data.csv").then(function(data) {
    console.log(data);
});

Exercici 2: Convertir Tipus de Dades

Carrega un fitxer CSV, converteix els valors a nombres i les dates a objectes Date, i mostra les dades a la consola.

d3.csv("data.csv").then(function(data) {
    data.forEach(function(d) {
        d.value = +d.value;
        d.date = new Date(d.date);
    });
    console.log(data);
});

Exercici 3: Filtrar Dades

Carrega un fitxer CSV i filtra les dades per obtenir només els elements amb un valor superior a 10.

d3.csv("data.csv").then(function(data) {
    var filteredData = data.filter(function(d) {
        return d.value > 10;
    });
    console.log(filteredData);
});

Solucions als Exercicis

Solució 1

d3.csv("data.csv").then(function(data) {
    console.log(data);
});

Solució 2

d3.csv("data.csv").then(function(data) {
    data.forEach(function(d) {
        d.value = +d.value;
        d.date = new Date(d.date);
    });
    console.log(data);
});

Solució 3

d3.csv("data.csv").then(function(data) {
    var filteredData = data.filter(function(d) {
        return d.value > 10;
    });
    console.log(filteredData);
});

Conclusió

En aquest tema, hem après com carregar dades des de diferents fonts utilitzant D3.js, així com analitzar i manipular aquestes dades per preparar-les per a la visualització. Aquestes habilitats són fonamentals per treballar amb D3.js i crear visualitzacions dinàmiques i interactives. En el proper tema, explorarem com utilitzar escales en D3.js per mapar dades a valors visuals.

Carregant i Analitzant Dades

Objectius del Tema

Carregant Dades amb D3.js

1.1 Carregant Dades CSV

1.2 Carregant Dades JSON

1.3 Carregant Dades TSV

Analitzant i Manipulant Dades

2.1 Explorant les Dades

2.2 Convertint Tipus de Dades

2.3 Filtrant Dades

2.4 Agrupant Dades

Exercicis Pràctics

Exercici 1: Carregar i Mostrar Dades CSV

Exercici 2: Convertir Tipus de Dades

Exercici 3: Filtrar Dades

Solucions als Exercicis

Solució 1

Solució 2

Solució 3

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