El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Escales de Temps i Logarítmiques

Següent ►
►

En aquest tema, explorarem dues de les escales més utilitzades en D3.js: les escales de temps i les escales logarítmiques. Aquestes escales són fonamentals per a la visualització de dades que varien en el temps o que tenen una distribució exponencial.

Escales de Temps

Què són les Escales de Temps?

Les escales de temps en D3.js permeten mapar dates i hores a valors numèrics, facilitant la creació de gràfics que representen dades temporals. Aquestes escales són especialment útils per a gràfics de línies, gràfics de sèries temporals i altres visualitzacions on el temps és una variable clau.

Creant una Escala de Temps

Per crear una escala de temps, utilitzem la funció d3.scaleTime(). Aquesta funció ens permet definir un domini (rang de dates) i un rang (valors de sortida).

// Exemple de creació d'una escala de temps
const escalaTemps = d3.scaleTime()
    .domain([new Date(2020, 0, 1), new Date(2020, 11, 31)]) // Domini: de l'1 de gener al 31 de desembre de 2020
    .range([0, 500]); // Rang: de 0 a 500 píxels

Exemple Pràctic

A continuació, crearem un gràfic de línies simple que utilitza una escala de temps per representar dades de sèries temporals.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gràfic de Línies amb Escala de Temps</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <svg width="600" height="400"></svg>
    <script>
        const dades = [
            { data: new Date(2020, 0, 1), valor: 30 },
            { data: new Date(2020, 1, 1), valor: 50 },
            { data: new Date(2020, 2, 1), valor: 80 },
            { data: new Date(2020, 3, 1), valor: 65 },
            { data: new Date(2020, 4, 1), valor: 95 },
            { data: new Date(2020, 5, 1), valor: 70 }
        ];

        const amplada = 600;
        const alçada = 400;

        const svg = d3.select("svg")
            .attr("width", amplada)
            .attr("height", alçada);

        const escalaTemps = d3.scaleTime()
            .domain(d3.extent(dades, d => d.data))
            .range([50, amplada - 50]);

        const escalaValor = d3.scaleLinear()
            .domain([0, d3.max(dades, d => d.valor)])
            .range([alçada - 50, 50]);

        const linia = d3.line()
            .x(d => escalaTemps(d.data))
            .y(d => escalaValor(d.valor));

        svg.append("path")
            .datum(dades)
            .attr("fill", "none")
            .attr("stroke", "steelblue")
            .attr("stroke-width", 2)
            .attr("d", linia);

        // Afegir eixos
        const eixX = d3.axisBottom(escalaTemps);
        const eixY = d3.axisLeft(escalaValor);

        svg.append("g")
            .attr("transform", `translate(0, ${alçada - 50})`)
            .call(eixX);

        svg.append("g")
            .attr("transform", "translate(50, 0)")
            .call(eixY);
    </script>
</body>
</html>

Explicació del Codi

  1. Dades: Definim un conjunt de dades amb dates i valors.
  2. SVG: Creem un element SVG per contenir el gràfic.
  3. Escales: Definim una escala de temps per a l'eix X i una escala lineal per a l'eix Y.
  4. Línia: Utilitzem d3.line() per crear una funció de línia que mapeja les dades a les escales.
  5. Path: Afegim un element path al SVG per dibuixar la línia.
  6. Eixos: Afegim eixos X i Y utilitzant d3.axisBottom i d3.axisLeft.

Escales Logarítmiques

Què són les Escales Logarítmiques?

Les escales logarítmiques són útils per a dades que cobreixen un ampli rang de valors, especialment quan els valors varien de manera exponencial. Aquestes escales transformen els valors d'entrada utilitzant una funció logarítmica, permetent una representació més equilibrada de les dades.

Creant una Escala Logarítmica

Per crear una escala logarítmica, utilitzem la funció d3.scaleLog(). Aquesta funció ens permet definir un domini i un rang, similar a les altres escales.

// Exemple de creació d'una escala logarítmica
const escalaLog = d3.scaleLog()
    .domain([1, 1000]) // Domini: de 1 a 1000
    .range([0, 500]); // Rang: de 0 a 500 píxels

Exemple Pràctic

A continuació, crearem un gràfic de dispersió que utilitza una escala logarítmica per representar dades amb una distribució exponencial.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gràfic de Dispersió amb Escala Logarítmica</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <svg width="600" height="400"></svg>
    <script>
        const dades = [
            { x: 1, y: 10 },
            { x: 10, y: 100 },
            { x: 100, y: 1000 },
            { x: 1000, y: 10000 }
        ];

        const amplada = 600;
        const alçada = 400;

        const svg = d3.select("svg")
            .attr("width", amplada)
            .attr("height", alçada);

        const escalaX = d3.scaleLog()
            .domain([1, 1000])
            .range([50, amplada - 50]);

        const escalaY = d3.scaleLog()
            .domain([10, 10000])
            .range([alçada - 50, 50]);

        svg.selectAll("circle")
            .data(dades)
            .enter()
            .append("circle")
            .attr("cx", d => escalaX(d.x))
            .attr("cy", d => escalaY(d.y))
            .attr("r", 5)
            .attr("fill", "red");

        // Afegir eixos
        const eixX = d3.axisBottom(escalaX).ticks(10, ",.1s");
        const eixY = d3.axisLeft(escalaY).ticks(10, ",.1s");

        svg.append("g")
            .attr("transform", `translate(0, ${alçada - 50})`)
            .call(eixX);

        svg.append("g")
            .attr("transform", "translate(50, 0)")
            .call(eixY);
    </script>
</body>
</html>

Explicació del Codi

  1. Dades: Definim un conjunt de dades amb valors exponencials.
  2. SVG: Creem un element SVG per contenir el gràfic.
  3. Escales: Definim escales logarítmiques per als eixos X i Y.
  4. Cercle: Utilitzem selectAll i data per afegir cercles al SVG, mapejant les dades a les escales.
  5. Eixos: Afegim eixos X i Y utilitzant d3.axisBottom i d3.axisLeft.

Exercicis Pràctics

Exercici 1: Gràfic de Línies amb Escala de Temps

Crea un gràfic de línies que representi les temperatures diàries durant un mes. Utilitza una escala de temps per a l'eix X i una escala lineal per a l'eix Y.

Exercici 2: Gràfic de Dispersió amb Escala Logarítmica

Crea un gràfic de dispersió que representi la relació entre la població i el PIB de diversos països. Utilitza escales logarítmiques per als eixos X i Y.

Solucions

Solució a l'Exercici 1

const temperatures = [
    { data: new Date(2021, 0, 1), temperatura: 5 },
    { data: new Date(2021, 0, 2), temperatura: 7 },
    { data: new Date(2021, 0, 3), temperatura: 6 },
    // Afegeix més dades aquí
];

const escalaTemps = d3.scaleTime()
    .domain(d3.extent(temperatures, d => d.data))
    .range([50, amplada - 50]);

const escalaTemperatura = d3.scaleLinear()
    .domain([0, d3.max(temperatures, d => d.temperatura)])
    .range([alçada - 50, 50]);

const linia = d3.line()
    .x(d => escalaTemps(d.data))
    .y(d => escalaTemperatura(d.temperatura));

svg.append("path")
    .datum(temperatures)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2)
    .attr("d", linia);

Solució a l'Exercici 2

const paisos = [
    { poblacio: 1000000, pib: 50000 },
    { poblacio: 5000000, pib: 200000 },
    { poblacio: 10000000, pib: 500000 },
    // Afegeix més dades aquí
];

const escalaPoblacio = d3.scaleLog()
    .domain([100000, 10000000])
    .range([50, amplada - 50]);

const escalaPIB = d3.scaleLog()
    .domain([10000, 1000000])
    .range([alçada - 50, 50]);

svg.selectAll("circle")
    .data(paisos)
    .enter()
    .append("circle")
    .attr("cx", d => escalaPoblacio(d.poblacio))
    .attr("cy", d => escalaPIB(d.pib))
    .attr("r", 5)
    .attr("fill", "red");

Conclusió

En aquesta secció, hem après a utilitzar escales de temps i escales logarítmiques en D3.js per crear visualitzacions que representen dades temporals i exponencials. Hem vist exemples pràctics de com crear gràfics de línies i gràfics de dispersió utilitzant aquestes escales. A més, hem proporcionat exercicis pràctics per reforçar els conceptes apresos. En el següent mòdul, explorarem com crear visualitzacions bàsiques amb D3.js.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats