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

HOME

Les escales són una part fonamental de D3.js, ja que permeten transformar dades en valors que poden ser utilitzats per a la visualització. En aquest tema, aprendrem com utilitzar les escales de D3 per mapejar dades a valors visuals com posicions, colors, mides, etc.

Conceptes Clau

Escales: Funcions que mapejen un domini d'entrada a un rang de sortida.
Domini (Domain): L'interval de valors d'entrada.
Rang (Range): L'interval de valors de sortida.
Tipus d'escales: Lineals, Ordinals, de Temps, Logarítmiques, etc.

Tipus d'Escales

Escales Lineals

Les escales lineals són les més comunes i mapejen un interval de valors numèrics a un altre interval de valors numèrics.

// Crear una escala lineal
const escalaLineal = d3.scaleLinear()
    .domain([0, 100])  // Domini d'entrada
    .range([0, 500]);  // Rang de sortida

// Utilitzar l'escala
console.log(escalaLineal(50));  // Sortida: 250

Escales Ordinals

Les escales ordinals mapejen un conjunt de valors discrets a un altre conjunt de valors discrets.

// Crear una escala ordinal
const escalaOrdinal = d3.scaleOrdinal()
    .domain(['petit', 'mitjà', 'gran'])  // Domini d'entrada
    .range([10, 20, 30]);  // Rang de sortida

// Utilitzar l'escala
console.log(escalaOrdinal('mitjà'));  // Sortida: 20

Escales de Temps

Les escales de temps mapejen dates a valors numèrics.

// Crear una escala de temps
const escalaTemps = d3.scaleTime()
    .domain([new Date(2020, 0, 1), new Date(2020, 11, 31)])  // Domini d'entrada
    .range([0, 100]);  // Rang de sortida

// Utilitzar l'escala
console.log(escalaTemps(new Date(2020, 5, 15)));  // Sortida: 50

Escales Logarítmiques

Les escales logarítmiques són útils per a dades que varien exponencialment.

// Crear una escala logarítmica
const escalaLog = d3.scaleLog()
    .domain([1, 1000])  // Domini d'entrada
    .range([0, 100]);  // Rang de sortida

// Utilitzar l'escala
console.log(escalaLog(10));  // Sortida: 50

Exercicis Pràctics

Exercici 1: Crear una Escala Lineal

Crea una escala lineal que mapeja valors de 0 a 200 a un rang de 0 a 400.
Utilitza l'escala per mapejar el valor 100.

// Solució
const escalaLinealEx1 = d3.scaleLinear()
    .domain([0, 200])
    .range([0, 400]);

console.log(escalaLinealEx1(100));  // Sortida: 200

Exercici 2: Crear una Escala Ordinal

Crea una escala ordinal que mapeja els valors 'A', 'B', 'C' a 1, 2, 3 respectivament.
Utilitza l'escala per mapejar el valor 'B'.

// Solució
const escalaOrdinalEx2 = d3.scaleOrdinal()
    .domain(['A', 'B', 'C'])
    .range([1, 2, 3]);

console.log(escalaOrdinalEx2('B'));  // Sortida: 2

Exercici 3: Crear una Escala de Temps

Crea una escala de temps que mapeja dates de l'1 de gener de 2021 al 31 de desembre de 2021 a un rang de 0 a 365.
Utilitza l'escala per mapejar la data 1 de juliol de 2021.

// Solució
const escalaTempsEx3 = d3.scaleTime()
    .domain([new Date(2021, 0, 1), new Date(2021, 11, 31)])
    .range([0, 365]);

console.log(escalaTempsEx3(new Date(2021, 6, 1)));  // Sortida: 182.5

Resum

En aquesta secció, hem après sobre les escales de D3.js i com utilitzar-les per mapejar dades a valors visuals. Hem explorat diferents tipus d'escales, incloent lineals, ordinals, de temps i logarítmiques, i hem practicat amb exercicis per reforçar els conceptes apresos. En el proper tema, aprofundirem en les escales lineals i ordinals per entendre millor les seves aplicacions i configuracions avançades.

Utilitzant Escales de D3

Conceptes Clau

Tipus d'Escales

Escales Lineals

Escales Ordinals

Escales de Temps

Escales Logarítmiques

Exercicis Pràctics

Exercici 1: Crear una Escala Lineal

Exercici 2: Crear una Escala Ordinal

Exercici 3: Crear una Escala de Temps

Resum

D3.js: De Principiant a Avançat

Mòdul 1: Introducció a D3.js

Mòdul 2: Treballant amb Seleccions

Mòdul 3: Dades i Escales

Mòdul 4: Creant Visualitzacions Bàsiques

Mòdul 5: Visualitzacions Avançades

Mòdul 6: Interactivitat i Animació

Mòdul 7: Treballant amb Dades Reals

Mòdul 8: Rendiment i Optimització

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

Mòdul 10: Projecte Final