Comença creant una nova carpeta pel teu projecte. Dins aquesta carpeta et recomano fer una nova carpeta amb el nom de d3
Llavors descarrega la última versió de d3.v3.js dins aquesta carpeta. En el moments d'escriure aquest tutorial la última versió es la 3.4.2
També és pot descarregar la versió "minified", d3.v3.min.js, a on els espais, els comentaris i tot el que no es codi ha estat eliminat per obtenir un arxiu de menor grandària i fer-lo més ràpid de carregar pel navegador.
La funcionalitat és la mateixa, i s'acostuma a fer servir la versió "regular" mentre s'està treballant en el projecte i passar a la versió "minified" quan es publica el projecte ( per optimitzar el temps de càrrega de l'arxiu). La decisió és teva.
En aquest tutorial faré servir la versió standard, o sigui la NO "minified".
D3 ve també en altres formats. Un d'ells es comprimit, disponible en el repositori de GITHUB.
Una tercera opció consisteix a descarregar el repositori sencer, amb el qual s'obté no només els arxius de javascript sinó també tot el codi font dels components. De la mateixa manera, pot revisar el contingut del repositori o descarregar-lo tot en un arxiu commprimit en format ZIP.
Fes una pàgina senzilla d'HTML dins la teva carpeta de projecte i anomenala index.html.
L'estructura de la teva carpeta s'assemblarà a això:
project-folder/
d3/
d3.v3.js
d3.v3.min.js (optional)
index.html
Ara copia la següent part de codi dins l'apartat head de l'arxiu anterior (index.html).
Aquest codi carrega en memória la llibreria d3.js, per tal que el teu codi javascript la pugui utilitzar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
// El teu meravellòs codi javascript ve aquí
</script>
</body>
</html>
En alguns casos, pots obrir el teu arxiu HTML en un navegador web per veure-la.
En la majoria de casos, però, quan es carrega continguts que són externs a la pàgina, és necessari fer-ho a través d'un servidor web local i obrir la página a través de l'adreça del servidor ( generalment http://localhost:8888/).
Pots fer servir un servidor com MAMP o llegir les notes de la wiki sobre com activar un servidor web temporal rápidament.