Crear gràfics amb D3.js

març 28, 2017

Si anem al github de D3 , veiem una galeria amb diferent gràfics que podem utilitzar per fer proves. En aquesta pàgina https://bl.ocks.org/ també podem trobar una gran quantitat d’exemples de gràfics amb D3 amb el seu codi complert.

Avui farem la prova d’implementar una imatge svg d’un gràfic de barres, continuo seguint els exemples d’Scott Murray. Ens preparem l’entorn de treball, crearem una pàgina index.html, i una carpeta de js per guardar l’script amb D3.  Com havíem comentat en la instal.lació de D3 podem enllaçar des del link a la pàgina oficial o descarregar-lo.

La pàgina d’index:

Dins de l’index tenim un div amb el nom de la classe “barchart” que serà on anirà el gràfic.

Ara veurem l’script per generar el gràfic, la primera part del codi es defineix l’alçada i l’amplada del gràfic, això es podria fer en un full d’estils si ho volem tenir separats. D3 ens permet afegir i modificar atributs de l’estil amb la paraula “.attr”

S’ha de definir un conjunt de dades, en aquest cas tenim un dataset en un array dins del codi, però podria ser un fitxer extern, i hauríem de posar la ruta, potser en format json, tsv,csv..

Es crea un element SVG en el div barchart, se li assigna l’alçada i amplada definida prèviament.

A partir d’aquí es crea un “rect” rectangle, es a dir una barra per cada numero, i es defineix estils com l’amplada de les barres

I finalment s’afegiran els números corresponent a cada barra:

I finalment el nostre gràfic es visualitza així:

d3.js

D3 és una llibreria molt potent i amb molta comunitat, gràcies a tots els exemples que hi han disponibles es pot anar provant i reaprofitar codi per veure els resultats. En el proper post intentarem fer un gràfic més interactiu 🙂

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à.