Inici | Fonaments | Instal·lació | Afegir Elements | Encadenar Mètodes | Asociar Dades | Fent servir les Dades | Desplegar els divs | La funció data() | El primer SVG | Dibuixant SVG's | Tipus de dades | Fent un diagrama de barres | Fent un gràfic de dispersió | Escales | Eixos | Transicions |

Tutorial de D3.js d'Scott Murray


Notes del traductor

Benvinguts a la versió traduida al català de l'excel·lent tutorial de la llibreria D3.js escrit per Scott Murray.

La traducció que he fet, ha seguit, com no podia ser d'altra manera, la pauta del tutorial escrupulosament, però com que alhora m'ha anat servint per conèixer la llibreria he afegit allà a on he tingut alguna dificultat per comprendre algun aspecte les anotacions que he cregut convenients.


Sobre aquest tutorial

Cadascuna de les lliçons d'aquest tutorial busca ser:

  • Breu.
  • Enfocada, a un sol tema.
  • Modular, de tal forma que cada persona pueda fer servir allò que le sigui útil pels seus objectius.
  • El més Completa possible, amb codi d'exemple per a cada tema.
  • Dinàmica, actualizada y expandible de la forma que es necessiti.
  • Gratuïta i sota una llicència que permeti fer servir el codi de la manera que es vulgui.

Filosofia

Els cursos d'aquest tutorial han evolucionat a partir del meu procés d'aprenentatge de la llibreria D3. Com ja deveu saber, D3 és una eina excel·lent escrita per Mike Bostock per desplegar dades dins de pàgines web. Molta gent, entre la que m'incloc, arriba a D3 amb experiència en disseny, cartografia i visualització de dades, però sense ser necessàriament programadors o enginyers de sistemes.

D3 fa servir tècniques avançades de JavaScript, per tant per aprendre D3 sovint es necessari aprendre força coses d'aquest llenguatge de programació.

Per a moltes persones que venen de l'àrea de visualització de dades, D3 és la seva primera incursió a Javascript. Si bé és difícil aprendre un llenguatge de programació nou, és encara més difícil quan es busca aprendre una eina nova construida amb aquest llenguatge. D3 és molt novedòs i permet crear algunes coses increibles amb Javascript que probablement mai s'haguès pensat que fossin possibles.

El temps que inverteixis aprenent el llenguatge i les seves eines sens dubte et portaran grans beneficis. El meu objectiu es reduir aquest temps d'aprenentatge perque comencis a crear visualitzacions espectaculars molt aviat.

Pre-requisits

En al mesura que puguis, has de:

  • Tenir algún coneixement de HTML, del DOM y de CSS.
  • Alguna experiència prèvia en programació.
  • Haver sentit a parlar de jQuery o haver escrit alguna cosa en Javascript.
  • No tenir por a certes sigles com CSV, SVG, o JSON.
  • Estar interesat en crear visualitzacions interactives, interesants i útils.

Estructura

Cada lliçó inclou:

  • La seva pròpia pàgina web quan és útil.
  • Codi font que es pot copiar i/o modificar.
  • Comentaris a totes les seccions.
  • La data de la seva revisió més recent.

LLicència

El codi d'exemple d'aquest tutorial es pot copiar, adaptar, modificar i reutilitzar per a qualsevol propòsit incloent fins comencials. Els drets d'autor sobre el contingut i el disseny del tutorial són de Scott Murray.

Nota al marge

Amb el propòsit de complir amb allò que precedeix, es veuran per sobre alguns dels temes tècnics, simplificant conceptes fonamentals de l'enginyeria de sistemes. Això pot no agradar als veritables enginyers, però aquest tutorial està escrit per a artistes i dissenyadors, no per a ells.

Següent: Fonaments