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

Escales Lineals i Ordinals

Següent ►
►

En aquest tema, aprendrem sobre les escales lineals i ordinals en D3.js. Les escales són una part fonamental de D3.js, ja que ens permeten transformar dades en valors que podem utilitzar per crear visualitzacions. Les escales lineals i ordinals són dues de les escales més utilitzades.

  1. Escales Lineals

Què és una Escala Lineal?

Una escala lineal és una funció que mapeja un domini d'entrada (valors de dades) a un rang de sortida (valors visuals). Aquesta transformació és lineal, és a dir, els valors es mapejen de manera proporcional.

Creant una Escala Lineal

Per crear una escala lineal en D3.js, utilitzem la funció d3.scaleLinear(). Aquí teniu un exemple bàsic:

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

// Utilitzem l'escala per transformar un valor
console.log(escalaLineal(50));  // Sortida: 250

Explicació del Codi

  1. Creació de l'escala: Utilitzem d3.scaleLinear() per crear una nova escala lineal.
  2. Domini: Definim el domini d'entrada amb .domain([0, 100]), que significa que els valors de dades van de 0 a 100.
  3. Rang: Definim el rang de sortida amb .range([0, 500]), que significa que els valors visuals van de 0 a 500.
  4. Transformació: Utilitzem l'escala per transformar el valor 50, que es mapeja a 250.

Exemple Pràctic: Gràfic de Barres

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gràfic de Barres amb Escala Lineal</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <script>
        var dades = [10, 20, 30, 40, 50];

        var amplada = 500;
        var alçada = 100;

        var escalaX = d3.scaleLinear()
            .domain([0, d3.max(dades)])
            .range([0, amplada]);

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

        svg.selectAll("rect")
            .data(dades)
            .enter().append("rect")
            .attr("x", 0)
            .attr("y", (d, i) => i * 20)
            .attr("width", d => escalaX(d))
            .attr("height", 18)
            .attr("fill", "steelblue");
    </script>
</body>
</html>

Explicació del Codi

  1. Dades: Definim un conjunt de dades.
  2. Escala X: Creem una escala lineal per mapejar els valors de dades a l'amplada del gràfic.
  3. SVG: Creem un element SVG per contenir el gràfic.
  4. Rectangles: Utilitzem selectAll, data, enter i append per crear rectangles per a cada valor de dades, utilitzant l'escala per definir l'amplada de cada rectangle.

  1. Escales Ordinals

Què és una Escala Ordinal?

Una escala ordinal mapeja un conjunt de valors discrets (categories) a un conjunt de valors de sortida discrets. És útil per a dades categòriques.

Creant una Escala Ordinal

Per crear una escala ordinal en D3.js, utilitzem la funció d3.scaleOrdinal(). Aquí teniu un exemple bàsic:

// Creem una escala ordinal
var escalaOrdinal = d3.scaleOrdinal()
    .domain(["petit", "mitjà", "gran"])  // Domini d'entrada
    .range(["vermell", "groc", "verd"]);  // Rang de sortida

// Utilitzem l'escala per transformar un valor
console.log(escalaOrdinal("mitjà"));  // Sortida: "groc"

Explicació del Codi

  1. Creació de l'escala: Utilitzem d3.scaleOrdinal() per crear una nova escala ordinal.
  2. Domini: Definim el domini d'entrada amb .domain(["petit", "mitjà", "gran"]), que significa que els valors de dades són categories.
  3. Rang: Definim el rang de sortida amb .range(["vermell", "groc", "verd"]), que significa que els valors visuals són colors.
  4. Transformació: Utilitzem l'escala per transformar el valor "mitjà", que es mapeja a "groc".

Exemple Pràctic: Gràfic de Barres Categòric

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gràfic de Barres amb Escala Ordinal</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <script>
        var dades = ["petit", "mitjà", "gran", "petit", "gran"];

        var amplada = 500;
        var alçada = 100;

        var escalaX = d3.scaleBand()
            .domain(dades)
            .range([0, amplada])
            .padding(0.1);

        var escalaColor = d3.scaleOrdinal()
            .domain(["petit", "mitjà", "gran"])
            .range(["vermell", "groc", "verd"]);

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

        svg.selectAll("rect")
            .data(dades)
            .enter().append("rect")
            .attr("x", (d, i) => escalaX(d))
            .attr("y", 0)
            .attr("width", escalaX.bandwidth())
            .attr("height", alçada)
            .attr("fill", d => escalaColor(d));
    </script>
</body>
</html>

Explicació del Codi

  1. Dades: Definim un conjunt de dades categòriques.
  2. Escala X: Creem una escala de banda (scaleBand) per mapejar les categories a posicions x.
  3. Escala de Color: Creem una escala ordinal per mapejar les categories a colors.
  4. SVG: Creem un element SVG per contenir el gràfic.
  5. Rectangles: Utilitzem selectAll, data, enter i append per crear rectangles per a cada valor de dades, utilitzant l'escala de banda per definir la posició x i l'escala de color per definir el color de cada rectangle.

Exercicis Pràctics

Exercici 1: Escala Lineal

Crea una escala lineal que mapeja valors de 0 a 200 a un rang de 0 a 1000. Utilitza aquesta escala per transformar el valor 150.

Solució

var escalaLineal = d3.scaleLinear()
    .domain([0, 200])
    .range([0, 1000]);

console.log(escalaLineal(150));  // Sortida: 750

Exercici 2: Escala Ordinal

Crea una escala ordinal que mapeja les categories ["A", "B", "C"] als colors ["blau", "taronja", "marró"]. Utilitza aquesta escala per transformar la categoria "B".

Solució

var escalaOrdinal = d3.scaleOrdinal()
    .domain(["A", "B", "C"])
    .range(["blau", "taronja", "marró"]);

console.log(escalaOrdinal("B"));  // Sortida: "taronja"

Conclusió

En aquesta secció, hem après sobre les escales lineals i ordinals en D3.js. Les escales són eines poderoses per transformar dades en valors visuals, i són essencials per crear visualitzacions efectives. Hem vist exemples pràctics de com utilitzar aquestes escales per crear gràfics de barres i hem practicat amb exercicis per reforçar els conceptes apresos. En el proper tema, explorarem les escales de temps i logarítmiques.

◄ 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