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

Creant Visualitzacions Personalitzades

Següent ►
►

En aquest tema, aprendrem a crear visualitzacions personalitzades amb D3.js. Aquestes visualitzacions poden ser adaptades a les necessitats específiques del teu projecte, oferint una gran flexibilitat i control sobre com es mostren les dades.

Objectius d'Aprenentatge

  • Entendre com dissenyar i implementar visualitzacions personalitzades.
  • Aprendre a utilitzar les eines i tècniques de D3.js per crear visualitzacions úniques.
  • Practicar la creació de visualitzacions personalitzades amb exemples pràctics.

  1. Disseny de Visualitzacions Personalitzades

1.1. Identificar Requisits

Abans de començar a codificar, és important identificar els requisits de la teva visualització:

  • Quin tipus de dades tens? (numèriques, categòriques, temporals, etc.)
  • Quina història vols explicar amb les dades?
  • Quin tipus de gràfic o visualització serà més efectiu?

1.2. Esbós i Planificació

Fes un esbós de la teva visualització:

  • Dibuixa com vols que es vegi la visualització.
  • Identifica els elements clau (eixos, llegendes, títols, etc.).
  • Planifica com es mapegen les dades als elements visuals.

  1. Implementació de Visualitzacions Personalitzades

2.1. Configuració de l'Entorn

Assegura't de tenir el teu entorn configurat amb D3.js. Pots incloure D3.js en el teu projecte amb un enllaç CDN o instal·lant-lo via npm.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Visualització Personalitzada</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <div id="visualization"></div>
    <script src="custom-visualization.js"></script>
</body>
</html>

2.2. Creació de l'Escenari

Comencem creant un escenari SVG on dibuixarem la nostra visualització.

const width = 800;
const height = 600;

const svg = d3.select("#visualization")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

2.3. Enllaçar Dades

Suposem que tenim un conjunt de dades simple:

const data = [
    {x: 30, y: 20},
    {x: 50, y: 80},
    {x: 90, y: 50},
    {x: 120, y: 120},
    {x: 150, y: 30}
];

2.4. Creació d'Elements Visuals

Ara, creem elements visuals basats en les dades. En aquest exemple, crearem cercles en un gràfic de dispersió.

svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .attr("r", 10)
    .attr("fill", "blue");

2.5. Afegir Interactivitat

Podem afegir interactivitat als elements visuals. Per exemple, canviem el color dels cercles quan el ratolí passa per sobre.

svg.selectAll("circle")
    .on("mouseover", function() {
        d3.select(this).attr("fill", "orange");
    })
    .on("mouseout", function() {
        d3.select(this).attr("fill", "blue");
    });

  1. Exemples Pràctics

Exemple 1: Gràfic de Barres Personalitzat

const barData = [30, 80, 45, 60, 20, 90, 50];

const barWidth = 40;
const barSpacing = 10;

svg.selectAll("rect")
    .data(barData)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * (barWidth + barSpacing))
    .attr("y", d => height - d)
    .attr("width", barWidth)
    .attr("height", d => d)
    .attr("fill", "teal");

Exemple 2: Gràfic de Línies Personalitzat

const lineData = [
    {x: 0, y: 30},
    {x: 50, y: 80},
    {x: 100, y: 45},
    {x: 150, y: 60},
    {x: 200, y: 20}
];

const line = d3.line()
    .x(d => d.x)
    .y(d => d.y);

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

  1. Exercicis Pràctics

Exercici 1: Gràfic de Dispersió amb Etiquetes

Crea un gràfic de dispersió on cada punt tingui una etiqueta amb el seu valor.

Solució

const scatterData = [
    {x: 30, y: 20, label: "A"},
    {x: 50, y: 80, label: "B"},
    {x: 90, y: 50, label: "C"},
    {x: 120, y: 120, label: "D"},
    {x: 150, y: 30, label: "E"}
];

svg.selectAll("circle")
    .data(scatterData)
    .enter()
    .append("circle")
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .attr("r", 10)
    .attr("fill", "blue");

svg.selectAll("text")
    .data(scatterData)
    .enter()
    .append("text")
    .attr("x", d => d.x + 12)
    .attr("y", d => d.y + 4)
    .text(d => d.label)
    .attr("font-size", "12px")
    .attr("fill", "black");

Exercici 2: Gràfic de Barres amb Colors Dinàmics

Crea un gràfic de barres on el color de cada barra depengui del seu valor.

Solució

const dynamicBarData = [30, 80, 45, 60, 20, 90, 50];

svg.selectAll("rect")
    .data(dynamicBarData)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * (barWidth + barSpacing))
    .attr("y", d => height - d)
    .attr("width", barWidth)
    .attr("height", d => d)
    .attr("fill", d => d > 50 ? "green" : "red");

Conclusió

Crear visualitzacions personalitzades amb D3.js et permet adaptar les teves visualitzacions a les necessitats específiques del teu projecte. Amb una comprensió sòlida dels conceptes bàsics i les tècniques avançades de D3.js, pots crear visualitzacions úniques i efectives que comuniquin les teves dades de manera clara i impactant.

En el següent mòdul, explorarem com afegir interactivitat i animació a les nostres visualitzacions per fer-les encara més dinàmiques i atractives.

◄ 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