El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com organitzar el codi de manera eficient i com aplicar la modularitat en els nostres projectes amb D3.js. Una bona organització del codi no només facilita el manteniment i l'escalabilitat del projecte, sinó que també millora la col·laboració en equips de desenvolupament.

Objectius

Entendre la importància de l'organització del codi.
Aprendre a estructurar projectes de D3.js de manera modular.
Implementar tècniques per a la reutilització de codi.

Importància de l'Organització del Codi

Beneficis d'una Bona Organització del Codi

Mantenibilitat: Facilita la comprensió i modificació del codi.
Escalabilitat: Permet afegir noves funcionalitats sense desorganitzar el projecte.
Col·laboració: Millora la comunicació i el treball en equip.
Depuració: Simplifica la identificació i resolució d'errors.

Estructura de Projecte Recomanada

Una estructura de projecte ben definida ajuda a mantenir el codi organitzat. A continuació, es presenta una estructura de projecte recomanada per a aplicacions D3.js:

project-root/
│
├── index.html
├── css/
│   └── styles.css
├── js/
│   ├── main.js
│   ├── data/
│   │   └── data.js
│   ├── modules/
│   │   ├── barChart.js
│   │   ├── lineChart.js
│   │   └── pieChart.js
│   └── utils/
│       └── helpers.js
└── data/
    └── sample-data.csv

Descripció de les Carpetes i Fitxers

index.html: Punt d'entrada de l'aplicació.
css/: Conté els fitxers d'estil.
js/: Conté els fitxers JavaScript.
- main.js: Fitxer principal que inicialitza l'aplicació.
- data/: Conté fitxers relacionats amb la gestió de dades.
- modules/: Conté els diferents mòduls de visualització.
- utils/: Conté funcions auxiliars i utilitats.
data/: Conté els fitxers de dades.

Modularitat en D3.js

Què és la Modularitat?

La modularitat és el procés de dividir un programa en parts més petites i manejables, anomenades mòduls. Cada mòdul té una funció específica i pot ser desenvolupat, provat i mantingut de manera independent.

Avantatges de la Modularitat

Reutilització: Els mòduls poden ser reutilitzats en diferents parts del projecte o en altres projectes.
Aïllament: Els errors en un mòdul no afecten altres parts del sistema.
Claredat: Facilita la comprensió del codi.

Exemple de Modularitat en D3.js

Creant un Mòdul de Gràfic de Barres

barChart.js

// Importem D3.js
import * as d3 from 'd3';

// Funció per crear un gràfic de barres
export function createBarChart(data, selector) {
    const width = 500;
    const height = 300;
    const margin = { top: 20, right: 30, bottom: 40, left: 40 };

    const svg = d3.select(selector)
        .append('svg')
        .attr('width', width)
        .attr('height', height);

    const x = d3.scaleBand()
        .domain(data.map(d => d.name))
        .range([margin.left, width - margin.right])
        .padding(0.1);

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

    svg.append('g')
        .attr('fill', 'steelblue')
        .selectAll('rect')
        .data(data)
        .join('rect')
        .attr('x', d => x(d.name))
        .attr('y', d => y(d.value))
        .attr('height', d => y(0) - y(d.value))
        .attr('width', x.bandwidth());

    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));
}

Utilitzant el Mòdul en el Fitxer Principal

main.js

import { createBarChart } from './modules/barChart.js';

// Dades d'exemple
const data = [
    { name: 'A', value: 30 },
    { name: 'B', value: 80 },
    { name: 'C', value: 45 },
    { name: 'D', value: 60 },
    { name: 'E', value: 20 },
    { name: 'F', value: 90 },
    { name: 'G', value: 55 },
];

// Creem el gràfic de barres
createBarChart(data, '#bar-chart-container');

Exercici Pràctic

Exercici

Crea un nou mòdul anomenat lineChart.js dins de la carpeta modules/.
Implementa una funció createLineChart que generi un gràfic de línies.
Utilitza el mòdul lineChart.js en el fitxer main.js per crear un gràfic de línies amb les dades proporcionades.

Solució

lineChart.js

import * as d3 from 'd3';

export function createLineChart(data, selector) {
    const width = 500;
    const height = 300;
    const margin = { top: 20, right: 30, bottom: 40, left: 40 };

    const svg = d3.select(selector)
        .append('svg')
        .attr('width', width)
        .attr('height', height);

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

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

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

    svg.append('path')
        .datum(data)
        .attr('fill', 'none')
        .attr('stroke', 'steelblue')
        .attr('stroke-width', 1.5)
        .attr('d', line);

    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));
}

main.js

import { createBarChart } from './modules/barChart.js';
import { createLineChart } from './modules/lineChart.js';

// Dades d'exemple per al gràfic de barres
const barData = [
    { name: 'A', value: 30 },
    { name: 'B', value: 80 },
    { name: 'C', value: 45 },
    { name: 'D', value: 60 },
    { name: 'E', value: 20 },
    { name: 'F', value: 90 },
    { name: 'G', value: 55 },
];

// Dades d'exemple per al gràfic de línies
const lineData = [
    { date: new Date(2020, 0, 1), value: 30 },
    { date: new Date(2020, 1, 1), value: 80 },
    { date: new Date(2020, 2, 1), value: 45 },
    { date: new Date(2020, 3, 1), value: 60 },
    { date: new Date(2020, 4, 1), value: 20 },
    { date: new Date(2020, 5, 1), value: 90 },
    { date: new Date(2020, 6, 1), value: 55 },
];

// Creem els gràfics
createBarChart(barData, '#bar-chart-container');
createLineChart(lineData, '#line-chart-container');

Conclusió

En aquesta secció, hem après la importància de l'organització del codi i la modularitat en els projectes de D3.js. Hem vist com estructurar un projecte de manera eficient i com crear i utilitzar mòduls per a diferents tipus de visualitzacions. Aquestes pràctiques no només milloren la qualitat del codi, sinó que també faciliten el manteniment i l'escalabilitat del projecte. En el proper tema, explorarem patrons avançats de D3.js per millorar encara més les nostres habilitats de programació.

Organització del Codi i Modularitat

Objectius

Importància de l'Organització del Codi

Beneficis d'una Bona Organització del Codi

Estructura de Projecte Recomanada

Descripció de les Carpetes i Fitxers

Modularitat en D3.js

Què és la Modularitat?

Avantatges de la Modularitat

Exemple de Modularitat en D3.js

Creant un Mòdul de Gràfic de Barres

Utilitzant el Mòdul en el Fitxer Principal

Exercici Pràctic

Exercici

Solució

Conclusió

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