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

Creant Gràfics de Línies

Següent ►
►

En aquest tema, aprendrem a crear gràfics de línies utilitzant D3.js. Els gràfics de línies són una eina poderosa per visualitzar dades temporals o seqüencials, mostrant la tendència d'una variable al llarg del temps.

Objectius

  • Entendre els conceptes bàsics dels gràfics de línies.
  • Aprendre a crear un gràfic de línies bàsic amb D3.js.
  • Personalitzar el gràfic de línies amb estils i interactivitat.

Conceptes Bàsics

Què és un Gràfic de Línies?

Un gràfic de línies és una representació gràfica de dades on els punts de dades estan connectats per línies. És especialment útil per mostrar tendències al llarg del temps.

Components d'un Gràfic de Línies

  • Eixos: Generalment, l'eix X representa el temps o una altra variable independent, mentre que l'eix Y representa la variable dependent.
  • Línia: Connecta els punts de dades.
  • Punts de Dades: Representen els valors individuals en el gràfic.

Exemple Pràctic: Creant un Gràfic de Línies

Pas 1: Configuració de l'Entorn

Assegura't de tenir un fitxer HTML amb D3.js inclòs. Aquí tens un exemple bàsic:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Gràfic de Línies amb D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .line {
            fill: none;
            stroke: steelblue;
            stroke-width: 2px;
        }
    </style>
</head>
<body>
    <svg width="800" height="400"></svg>
    <script src="line-chart.js"></script>
</body>
</html>

Pas 2: Preparació de les Dades

Les dades han de ser un array d'objectes amb valors per a l'eix X i l'eix Y. Per exemple:

const data = [
    { date: new Date(2023, 0, 1), value: 30 },
    { date: new Date(2023, 0, 2), value: 50 },
    { date: new Date(2023, 0, 3), value: 45 },
    { date: new Date(2023, 0, 4), value: 60 },
    { date: new Date(2023, 0, 5), value: 70 }
];

Pas 3: Creació de l'SVG i Escales

Configura l'SVG i les escales per als eixos X i Y.

const svg = d3.select("svg");
const margin = { top: 20, right: 30, bottom: 30, left: 40 };
const width = +svg.attr("width") - margin.left - margin.right;
const height = +svg.attr("height") - margin.top - margin.bottom;

const x = d3.scaleTime()
    .domain(d3.extent(data, d => d.date))
    .range([0, width]);

const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .range([height, 0]);

const g = svg.append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

Pas 4: Afegir els Eixos

Afegeix els eixos X i Y al gràfic.

g.append("g")
    .attr("transform", `translate(0,${height})`)
    .call(d3.axisBottom(x));

g.append("g")
    .call(d3.axisLeft(y));

Pas 5: Dibuixar la Línia

Defineix la línia i afegeix-la al gràfic.

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

g.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);

Codi Complet

Aquí tens el codi complet per crear un gràfic de línies bàsic:

const data = [
    { date: new Date(2023, 0, 1), value: 30 },
    { date: new Date(2023, 0, 2), value: 50 },
    { date: new Date(2023, 0, 3), value: 45 },
    { date: new Date(2023, 0, 4), value: 60 },
    { date: new Date(2023, 0, 5), value: 70 }
];

const svg = d3.select("svg");
const margin = { top: 20, right: 30, bottom: 30, left: 40 };
const width = +svg.attr("width") - margin.left - margin.right;
const height = +svg.attr("height") - margin.top - margin.bottom;

const x = d3.scaleTime()
    .domain(d3.extent(data, d => d.date))
    .range([0, width]);

const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .range([height, 0]);

const g = svg.append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

g.append("g")
    .attr("transform", `translate(0,${height})`)
    .call(d3.axisBottom(x));

g.append("g")
    .call(d3.axisLeft(y));

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

g.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);

Exercicis Pràctics

Exercici 1: Afegir Punts de Dades

Afegeix cercles per a cada punt de dades al gràfic de línies.

Solució:

g.selectAll(".dot")
    .data(data)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("cx", d => x(d.date))
    .attr("cy", d => y(d.value))
    .attr("r", 5);

Exercici 2: Afegir Interactivitat

Afegeix interactivitat perquè els punts de dades mostrin un tooltip amb el valor quan es passa el ratolí per sobre.

Solució:

const tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

g.selectAll(".dot")
    .data(data)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("cx", d => x(d.date))
    .attr("cy", d => y(d.value))
    .attr("r", 5)
    .on("mouseover", function(event, d) {
        tooltip.transition()
            .duration(200)
            .style("opacity", .9);
        tooltip.html(`Data: ${d.date}<br>Valor: ${d.value}`)
            .style("left", (event.pageX + 5) + "px")
            .style("top", (event.pageY - 28) + "px");
    })
    .on("mouseout", function(d) {
        tooltip.transition()
            .duration(500)
            .style("opacity", 0);
    });

Resum

En aquest tema, hem après a crear un gràfic de línies bàsic amb D3.js, incloent-hi la configuració de l'entorn, la preparació de les dades, la creació de l'SVG i les escales, l'afegit dels eixos i el dibuix de la línia. També hem vist com afegir punts de dades i interactivitat per millorar la visualització.

En el següent tema, explorarem com crear gràfics de pastís 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