Hello world amb D3.js

març 25, 2017

D3.js és una llibreria de javascript orientada principalment per treballar amb dades i representar visualitzacions. El nom de D3, ve de les tres “D” de Data-Driven Documents. Per fer l’introducció seguirem el tutorial de Scott Murray, en la traducció al català de Joan Prim https://joanprimpratrec2.github.io

Per treballar amb D3 s’ha de tenir algun coneixement de HTML,conèixer el DOM (estructura jeràrquica dels documents de HTML), CSS, Javascript, SVG(Scalable Vector Graphics) és el format d’imatge basat en text.

Per utilitzar D3 en el nostre projecte descarreguem la llibreria de https://d3js.org/, en aquest moment és la 4.7.3, i en l’index incloem l’adreça

O utilitzem l’enllaç de la seva pàgina:

Creem una pàgina index.html:

Si obrim la pàgina en el navegador podem visualitzar l’index com qualsevol pàgina web. Ara anem a afegir algun element

Ara s’ha creat un nou element de text en la pàgina de l’index, ara expliquem la sintaxi:

  • Select: selecciona un element HTML. En aquest cas el body
  • Append: Defineix que afegirà alguna cosa i quin element.
  • Text: El contingut del text

Per afegir una imatge, veurem un punt blau a la pàgina.

Ara que ja el tenim instal.lat, a la propera entrada carregarem un conjunt de dades i farem un gràfic amb D3

Feel free to share...Share on Facebook
Facebook
Share on Google+
Google+
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin


Deixa un comentari

L'adreça electrònica no es publicarà.