D3: Què és Data-Driven Documents?
Què és D3?
A l’era de la informació en què vivim actualment, és veritablement important que les persones captin ràpidament i d’una sola ullada l’essència de les dades que fem servir i els gràfics són una bona manera de visualitzar-los. Tenir en compte llibreries com Data-Driven Documents (D3) és molt important per al desenvolupament de l’última instància del processament de dades: la seva visualització.
Per això, conèixer el funcionament de les dades en aquesta darrera instància resulta imprescindible per al món actual del Big Data.
D3.js, és una llibreria Javascript que tracta documents basats en dades, és una eina que permet visualitzar dades en una pàgina web d’una manera realment fàcil. Data-Driven Documents (D3 o D3.js) és una llibreria especialitzada en el dibuix i disseny de gràfiques en la visualització de dades.
Però, no és tan sols una llibreria que permet fer visualitzacions, sinó que també ens permet fer qualsevol tipus de mapeig, operacions matemàtiques o anàlisi de dades. Encarregant-se també de dur a terme un desenvolupament web dinàmic i interactiu, permetent realitzar tota mena de visualitzacions i interactuar-hi.
La corba d’aprenentatge pot resultar força ascendent, però un cop hem realitzat l’aprenentatge, es tracta d’una eina amb la qual desenvolupar visualitzacions de dades avançades d’una manera molt senzilla.
A més, si accedim a la seva pàgina web, podem veure i aprendre un llarg llistat de visualitzacions diferents, unes més i altres menys dinàmiques.
Passat, present i futur de D3
Data-Driven Documents és un projecte open source que va començar 11 anys enrere, el 2011, després d’una dècada al mercat, actualment D3 és l’eina més popular.
Això significa que és molt poc probable que sigui reemplaçat a curt termini, a causa de la seva estabilitat i que està completament testejat, garantint que estigui “lliure d’errors”, i avui dia, únicament té 3 incidències obertes, no com altres llibreries de aquest mateix tipus que compten amb centenars de problemes sense resoldre.
La llibreria es manté activament, això implica que la idea és continuar a llarg termini amb nous desenvolupaments i actualitzacions, com les noves versions de Javascript, podent utilitzar tant amb React, Vue o Angular.
Quins formats de dades podem trobar a D3?
Gràcies a aquesta llibreria de disseny visual, podràs treballar amb quatre formats de dades diferents, cadascun amb els seus avantatges i desavantatges. Uns són més senzills que altres, però alhora, aquesta varietat de formats ens permet estalviar temps, ja que no els hem de transformar.
CSV
La seva distribució es basa en mostrar els camps a dalt i, a partir d’allà, organitzar les dades processades.
JSON
Un dels formats més habituals. La seva inscripció comença per designar el camp i el seu funcionament consisteix a seleccionar el fitxer i el D3 torna una promesa, és a dir, el que fa la recol·lecció de dades.
TSV (Tab-Separated Values)
Aquest format de dades no es fa servir gaire, però funciona de manera senzilla, com el seu nom indica, exposa els valors separats per tabuladors.
XML
Un dels formats més complicats. Tot i que està basat en HTML, el seu desenvolupament és molt més extens i minuciós que els altres.
Com començar a utilitzar D3?
Començar a utilitzar la llibreria Javascript D3 de forma bàsica, no és una tasca molt complicada ja que comptem amb moltíssims exemples i documentació en què ens mostren quin codi hem d’usar per realitzar els gràfics.
Però abans de començar a fer-lo servir, si que és recomanable saber un mínim sobre disseny web ja que l’eina fa ús de tecnologies com són SVG (gràfics vectorials), HTML5 i CSS, és a dir, per començar a utilitzar aquesta eina, hem de conèixer com funciona el Model d’Objecte de Document (DOM).
Quines eines ofereix D3?
Data-Driven Documents (D3) compta amb una gran varietat d’eines que potencien el desenvolupament de la visualització de les dades i que, a més, permeten un desenvolupament òptim a partir de diferents aspectes.
A continuació, analitzem algunes de les eines més importants de D3 per dur a terme el nostre disseny visual:
SVG (Scalable Vector Graphics)
Consisteix a designar les dades sota dues dimensions (amplada i llargada). La seva funció és establir les dades introduïdes en uns vectors segons les propietats.
Escala
Amb aquesta eina, podrem genera una anàlisi fidedigna de les dades a la visualització. Consisteix en la realització de les gràfiques segons l’escala que s’estableixi i no a mida real.
Eixos i marges
Un factor fonamental per desenvolupar una esquematització gràfica de les dades. Per regla general, en una gràfica se solen trobar dos eixos, el vertical i horitzontal (X i Y), i la instauració d’uns marges per mitjà de la regla o la quadrícula de la plataforma designarà la mida de la gràfica.
Animació i interactivitat
Aquesta eina fa referència al dinamisme que decideixis atribuir-lo a la visualització de les dades. Les plataformes que se n’encarreguen ofereixen diverses opcions per afegir qüestions, com el color, forma, farciment, corba, etc.
Què és la configuració modular a D3?
Com hem vist durant l’article, D3 és una llibreria força pesada ja que té moltes dependències, per la qual cosa a partir de la versió 4.0, van introduir un dels canvis més importants de la llibreria, la seva modularitat.
D3 es va convertir en una col·lecció de mòduls, permetent utilitzar cadascun d’aquests de forma completament independent, exceptuant les dependències mínimes a altres mòduls.
Els avantatges d’aquest nou model són clars, aquesta actualització fomenta el desenvolupament de mòduls més petits, permetent aportar a la comunitat moltes noves visualitzacions, complements i funcionalitats que abans no existien. Al seu torn, és més fàcil per a la comunitat contribuir amb les funcions principals oa altres nivells d’abstracció.
Us recomanem l’ús de D3?
Cada cop més, la comunitat de D3 està compartint arquitectura de codi i tot tipus de mòduls a Data-Driven Documents, per la qual cosa podem dir que D3 pot aportar a la nostra empresa una diversitat molt important de biblioteques de gràfics i complements als ja existents.
Per tant, si la nostra empresa té la necessitat de realitzar gràfics senzills o més complicats, pot ser costós aprendre a manejar D3, però si volem total llibertat a l’hora de la visualització i la interacció, Data-Driven Documents és la millor opció.