En aquest tema, aprendrem a configurar l'entorn necessari per començar a treballar amb D3.js. Això inclou la instal·lació de les eines bàsiques i la creació d'un projecte inicial per assegurar-nos que tot està funcionant correctament.

Abans de començar, assegura't de tenir els següents elements instal·lats al teu ordinador:

• Navegador Web Modern: Recomanem Google Chrome o Firefox.
• Editor de Codi: Visual Studio Code, Sublime Text, Atom, etc.
• Node.js i npm: Necessaris per gestionar paquets i dependències.

Node.js és un entorn d'execució per a JavaScript que ens permetrà utilitzar npm (Node Package Manager) per instal·lar D3.js i altres dependències.

1. Descarrega Node.js:

   • Ves a la pàgina oficial de Node.js: nodejs.org
   • Descarrega la versió recomanada per a la teva plataforma (Windows, macOS, Linux).

2. Instal·la Node.js:

   • Executa l'instal·lador descarregat i segueix les instruccions de la pantalla.

3. Verifica la Instal·lació:

   • Obre una terminal o línia de comandes.
   • Executa les següents comandes per assegurar-te que Node.js i npm s'han instal·lat correctament:

     node -v
     npm -v
     

   • Hauries de veure les versions instal·lades de Node.js i npm.

Ara que tenim Node.js i npm instal·lats, crearem un projecte inicial per començar a treballar amb D3.js.

1. Crea una Carpeta per al Projecte:

   • A la terminal, crea una nova carpeta per al teu projecte i navega fins a ella:

     mkdir d3-project
     cd d3-project
     

2. Inicialitza el Projecte amb npm:

   • Inicialitza un nou projecte npm:

     npm init -y
     

   • Això crearà un fitxer package.json amb la configuració bàsica del projecte.

3. Instal·la D3.js:

   • Utilitza npm per instal·lar D3.js com a dependència del projecte:

     npm install d3
     

4. Crea l'Estructura de Fitxers:

   • Crea els fitxers necessaris per al projecte:

     touch index.html
     mkdir js
     touch js/main.js
     

Ara configurarem el fitxer HTML i el fitxer JavaScript per assegurar-nos que D3.js està correctament enllaçat i funcionant.

Crea un fitxer index.html amb el següent contingut:

Crea un fitxer main.js dins de la carpeta js amb el següent contingut:

Per veure el teu projecte en acció, necessitaràs un servidor web local. Pots utilitzar una extensió de Visual Studio Code com "Live Server" o qualsevol altre servidor web local.

1. Instal·la l'Extensió:

   • Obre Visual Studio Code.
   • Ves a l'extensió "Live Server" i instal·la-la.

2. Executa el Projecte:

   • Obre el fitxer index.html a Visual Studio Code.
   • Fes clic amb el botó dret i selecciona "Open with Live Server".

3. Verifica la Consola:

   • Obre les eines de desenvolupador del navegador (F12 o Ctrl+Shift+I).
   • A la consola, hauries de veure l'objecte d3 imprès, el que indica que D3.js s'ha carregat correctament.

Ara tens el teu entorn configurat per començar a treballar amb D3.js. En el següent tema, explorarem els conceptes bàsics i la terminologia de D3.js per establir una base sòlida abans de començar a crear visualitzacions.