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

Creant Gràfics de Dispersió

Següent ►
►

Els gràfics de dispersió són una eina poderosa per visualitzar la relació entre dues variables numèriques. En aquest tema, aprendrem a crear un gràfic de dispersió utilitzant D3.js, des de la preparació de les dades fins a la personalització del gràfic.

Objectius

  • Entendre la utilitat dels gràfics de dispersió.
  • Aprendre a carregar i preparar les dades.
  • Crear un gràfic de dispersió bàsic amb D3.js.
  • Personalitzar el gràfic amb estils i interactivitat.

  1. Preparant les Dades

Abans de crear el gràfic, necessitem tenir les dades preparades. Suposem que tenim un conjunt de dades en format CSV amb les següents columnes: x i y.

Exemple de Dades (data.csv)

x,y
30,20
50,90
80,50
100,33
150,120
200,80

  1. Configurant l'Entorn

Assegura't de tenir un fitxer HTML amb l'estructura bàsica i inclou la llibreria D3.js.

Estructura HTML

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Gràfic de Dispersió amb D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .dot {
            fill: steelblue;
            stroke: black;
        }
    </style>
</head>
<body>
    <svg width="600" height="400"></svg>
    <script src="scatter-plot.js"></script>
</body>
</html>

  1. Creant el Gràfic de Dispersió

Pas 1: Carregar les Dades

Utilitzarem d3.csv per carregar les dades des del fitxer CSV.

d3.csv("data.csv").then(data => {
    data.forEach(d => {
        d.x = +d.x;
        d.y = +d.y;
    });
    createScatterPlot(data);
});

Pas 2: Configurar les Escales

Definirem les escales per mapejar les dades a les coordenades del gràfic.

const width = 600;
const height = 400;
const margin = { top: 20, right: 30, bottom: 30, left: 40 };

const x = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.x)])
    .range([margin.left, width - margin.right]);

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

Pas 3: Crear els Eixos

Afegirem els eixos X i Y al gràfic.

const svg = d3.select("svg");

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

svg.append("g")
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y));

Pas 4: Afegir els Punts de Dades

Utilitzarem cercles SVG per representar cada punt de dades.

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

Codi Complet (scatter-plot.js)

d3.csv("data.csv").then(data => {
    data.forEach(d => {
        d.x = +d.x;
        d.y = +d.y;
    });
    createScatterPlot(data);
});

function createScatterPlot(data) {
    const width = 600;
    const height = 400;
    const margin = { top: 20, right: 30, bottom: 30, left: 40 };

    const x = d3.scaleLinear()
        .domain([0, d3.max(data, d => d.x)])
        .range([margin.left, width - margin.right]);

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

    const svg = d3.select("svg");

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

    svg.append("g")
        .attr("transform", `translate(${margin.left},0)`)
        .call(d3.axisLeft(y));

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

  1. Personalització i Interactivitat

Afegir Estils

Podem personalitzar els punts canviant els estils CSS.

.dot {
    fill: steelblue;
    stroke: black;
    stroke-width: 1px;
}

Afegir Interactivitat

Podem afegir interactivitat, com ara mostrar informació addicional quan es passa el ratolí per sobre d'un punt.

svg.append("g")
    .selectAll("circle")
    .data(data)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("cx", d => x(d.x))
    .attr("cy", d => y(d.y))
    .attr("r", 5)
    .on("mouseover", function(event, d) {
        d3.select(this).attr("r", 7);
        // Mostrar informació addicional
    })
    .on("mouseout", function(event, d) {
        d3.select(this).attr("r", 5);
        // Amagar informació addicional
    });

Exercici Pràctic

Exercici

Crea un gràfic de dispersió utilitzant un conjunt de dades diferent. Prova d'afegir interactivitat per mostrar les coordenades x i y quan es passa el ratolí per sobre d'un punt.

Solució

d3.csv("new_data.csv").then(data => {
    data.forEach(d => {
        d.x = +d.x;
        d.y = +d.y;
    });
    createScatterPlot(data);
});

function createScatterPlot(data) {
    const width = 600;
    const height = 400;
    const margin = { top: 20, right: 30, bottom: 30, left: 40 };

    const x = d3.scaleLinear()
        .domain([0, d3.max(data, d => d.x)])
        .range([margin.left, width - margin.right]);

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

    const svg = d3.select("svg");

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

    svg.append("g")
        .attr("transform", `translate(${margin.left},0)`)
        .call(d3.axisLeft(y));

    svg.append("g")
        .selectAll("circle")
        .data(data)
        .enter().append("circle")
        .attr("class", "dot")
        .attr("cx", d => x(d.x))
        .attr("cy", d => y(d.y))
        .attr("r", 5)
        .on("mouseover", function(event, d) {
            d3.select(this).attr("r", 7);
            // Mostrar informació addicional
            svg.append("text")
                .attr("id", "tooltip")
                .attr("x", x(d.x) + 10)
                .attr("y", y(d.y) - 10)
                .text(`(${d.x}, ${d.y})`);
        })
        .on("mouseout", function(event, d) {
            d3.select(this).attr("r", 5);
            // Amagar informació addicional
            svg.select("#tooltip").remove();
        });
}

Conclusió

En aquest tema, hem après a crear un gràfic de dispersió bàsic amb D3.js, a carregar i preparar les dades, a configurar les escales i els eixos, i a afegir punts de dades al gràfic. També hem vist com personalitzar el gràfic amb estils i afegir interactivitat. Amb aquests coneixements, estàs preparat per crear gràfics de dispersió més complexos i personalitzats segons les teves necessitats.

◄ 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