Tutorial D3.js: marc de visualització de dades per a principiants

d3 js tutorial data visualization framework

Aquest tutorial de D3.js explica què és D3.js, els seus avantatges, funcions, procés d’instal·lació pas a pas i molts exemples pràctics perquè pugueu aprendre D3.js ràpidament:

Aquest tutorial descriu com es pot utilitzar D3.js, una biblioteca JavaScript de codi obert basada en dades en la visualització de dades mitjançant HTML, Model d’objectes de documents (DOM), Fulls d’estil en cascada (CSS), Gràfics vectorials escalables (SVG), Canvas i JavaScript mitjançant un navegador web.

Utilitzant aquest marc, les dades externes en format XML, CSV o JSON es poden convertir en gràfics, gràfics o formats de visualització múltiples a través d’un servidor web.

En aquest tutorial, coneixerem totes les funcions d’aquesta biblioteca JavaScript i veurem com les podem utilitzar per visualitzar les dades a través d’un servidor web mitjançant un navegador web.

Comencem!!

Què aprendreu:

• Què és D3.js
  • Característiques de D3.js
  • Avantatges d'utilitzar D3.js
  • Requisits previs per aprendre D3.js
  • Instal·lació / configuració de D3.js
  • Instal·lació d’Apache Tomcat: servidor web
• Comprensió de conceptes i estàndards web
• Diversos mètodes i API de la biblioteca D3.js
  • Addició de formes SVG a l'element HTML amb d3.select ()
  • Transformació de formes SVG
  • Exemple de transformació SVG
  • Funcions per trobar estadístiques d'una matriu
  • API Transitions D3.js
  • API de la col·lecció D3.js
  • API de mapes
  • Configura l'API
  • API Paths
• Conclusió
  • Lectura recomanada

Què és D3.js

D3.js és un marc basat en dades que és una biblioteca JavaScript lleugera i que requereix menys línies de codi, adequat per gestionar dades grans per obtenir gràfics de visualització de dades interactius, gràfics i mapes geoespacials.

És una biblioteca JavaScript de codi obert que s’utilitza principalment per traçar visualització gràfica mitjançant la manipulació d’elements DOM de pàgines web per explorar i analitzar dades.

Les dades emmagatzemades en formats de dades com ara una matriu, XML, CSV i JSON es poden convertir en gràfics, gràfics i diverses maneres adjuntant elements HTML, llenços o agrupant formes de gràfics vectorials escalables (SVG) mitjançant aquesta biblioteca JavaScript.

Les dades massives, com ara registres de detalls de trucades de dispositius mòbils i altres dispositius, missatges, registres de discussió o twit de plataformes de xarxes socials com Twitter, Facebook, WhatsApp, registres de tendències del mercat i registres d’informació comercial, es poden convertir en gràfics, gràfics o diverses visualitzacions mitjançant aquesta biblioteca JavaScript.

Des de l’aparició de diverses plataformes de xarxes socials com Twitter, Facebook i WhatsApp, es poden capturar diverses comunicacions com twit, missatges i registres de comentaris i convertir-los en formats visuals com ara gràfics, gràfics, etc. per entendre temes de tendència i crear sentiment anàlisi.

Es fa fàcil entendre el modus operandi d’un grup de registres de detalls de trucades del sospitós de les torres de telecomunicacions i controlar-ne el patró de trucades en cas de participar en activitats delictius sospitoses.

Basat en els canvis que es produeixen en una borsa, un índex borsari com la Borsa de Valors de Bombay (BSE), la Borsa Nacional de Valors (NSE), que reflecteix el moviment dels preus de les accions per decidir els sentiments del mercat i guiar els inversors en la compra o venda d’estoc.

D3.js pot convertir les activitats de quota de mercat en crear gràfics o gràfics que puguin predir ràpidament la probabilitat de tendències del mercat o dades mòbils en forma de registres de detalls de trucades per investigar qualsevol implicació de sospitosos en delictes o informació sobre la investigació predictiva.

Característiques de D3.js

• Basat en dades: S'utilitza principalment per explorar i analitzar dades i crear gràfics interactius en temps real, gràfics i maneres extenses de visualitzar les dades.
• Manipulació de DOM: Es tracta d’una biblioteca JavaScript de codi obert que converteix les dades en diversos formats de visualització mitjançant la manipulació d’elements DOM.
• Utilitza estàndards web: Utilitza Model d’objectes de documents (DOM), HTML, fulls d’estil en cascada (CSS), gràfics vectorials escalables (SVG) i llenç per crear formats de visualització de dades.
• Ràpid i interactiu: És molt sensible al canvi de dades i pot animar o transformar ràpidament l’element DOM seleccionat d’un estat a un altre.
• Mostra transicions dinàmiques: Aquesta biblioteca està dissenyada per crear una transició dinàmica ràpida per generar una visualització ràpida i sensible amb DOM.

Avantatges d'utilitzar D3.js

• És una biblioteca JavaScript de codi obert que es pot utilitzar juntament amb altres frameworks JavaScript, com ara Angular.JS, Ember.JS o React.
• Aquesta biblioteca és de codi obert, de manera que es poden afegir les seves pròpies funcions al codi font per assolir els seus objectius.
• Maneja estàndards web com DOM, HTML, CSS, SVG i canvas, per tant no necessita cap altre complement que no sigui un navegador, no necessita cap depuració o eina d'aprenentatge addicional.
• Pot crear una transformació dinàmica i en temps real mitjançant la manipulació d’elements DOM, ràpidament en visualització de dades sense latència.
• Funciona amb dades i està especialitzat i adequat amb les funcions de visualització de dades incloses a la biblioteca JavaScript.

Requisits previs per aprendre D3.js

• Editor de text: Es necessita un editor de text com Notepad ++ o Vim per escriure codi de programació com HTML, CSS, JavaScript i integrar-los per produir el requisit desitjat.
• Navegador web: Qualsevol dels navegadors web moderns, com ara Firefox, Google Chrome, Safari, Opera o IE9, s’hauria d’instal·lar per comprovar i verificar la sortida que es produeix després d’integrar el codi.
• HTML: Una bona comprensió de les etiquetes i l’estructura HTML ajudarà a crear una pàgina web bàsica i a alinear elements per millorar la visualització.
• CSS: El full d'estil en cascada (CSS) s'utilitza per aplicar estils que inclouen disseny, disseny i mida de pantalla a les pàgines web.
• JUDICI: És fonamental una bona comprensió del Model d’objectes de documents (DOM), ja que serà més fàcil conèixer l’estructura i el contingut dels documents web, accedir als elements DOM de D3.js per a la visualització de dades.
• JavaScript: La familiaritat amb els fonaments i els objectes JavaScript és un requisit previ per aprendre i implementar D3.js a la nostra aplicació perquè la visualització de dades es pugui veure al servidor web.
• Servidor web: És essencial tenir instal·lat un servidor web com el servidor Apache Tomcat o IIS (Internet Information Services), de manera que les dades es puguin carregar externament en formats matriu, objecte, XML, CSV, JSON i es puguin transformar amb l’ajut de D3. js en formats de visualització com ara gràfics, gràfics i visualització geoespacial.

Instal·lació / configuració de D3.js

Per tal de crear visualització de dades a les nostres pàgines web, hem d’incloure D3.js a la nostra pàgina web HTML.

Es pot fer de les maneres següents:

• Baixeu-vos la biblioteca D3.js a la nostra màquina client i incloeu el camí d'accés de d3.min.js a