Tutorial D3.js - Cadrul de vizualizare a datelor pentru începători

d3 js tutorial data visualization framework

Acest tutorial D3.js explică ce este D3.js, beneficiile, caracteristicile sale, procesul de instalare pas cu pas și o mulțime de exemple practice, astfel încât să puteți învăța rapid D3.js:

Acest tutorial descrie modul în care D3.js, o bibliotecă JavaScript cu sursă deschisă bazată pe date poate fi utilizată în vizualizarea datelor folosind HTML, Document Object Model (DOM), Cascading Style Sheets (CSS), Scalable Vector Graphics (SVG), Canvas și JavaScript printr-un browser web.

Folosind acest cadru, datele externe în format XML, CSV sau JSON pot fi convertite în diagrame, grafice sau formate de vizualizare multiple, pe un server web.

În acest tutorial, vom afla despre toate funcțiile din această bibliotecă JavaScript și vom vedea cum le putem utiliza pentru a vizualiza datele printr-un server web utilizând un browser web.

Să începem!!

Ce veți învăța:

• Ce este D3.js
  • Caracteristicile D3.js
  • Avantajele utilizării D3.js
  • Condiții preliminare pentru a afla D3.js
  • Instalarea / configurarea D3.js
  • Instalarea Apache Tomcat - Server Web
• Înțelegerea conceptelor și standardelor web
• Diverse metode și API-uri din Biblioteca D3.js
  • Adăugarea de forme SVG la elementul HTML Cu d3.select ()
  • Transformarea formelor SVG
  • Exemplu de transformare SVG
  • Funcții pentru a găsi statistici ale unei matrice
  • API Transitions D3.js
  • API D3.js Collection
  • API Hărți
  • Setează API
  • API Căi
• Concluzie
  • Lectură recomandată

Ce este D3.js

D3.js este un cadru bazat pe date, care este o bibliotecă JavaScript ușoară și necesită mai puține linii de cod, adecvat pentru gestionarea datelor mari pentru a obține diagrame interactive de vizualizare a datelor, grafice și hărți geospațiale.

Este o bibliotecă JavaScript cu sursă deschisă, care este utilizată în principal pentru a grafica vizualizarea grafică prin manipularea elementelor DOM ale paginilor web pentru explorarea și analiza datelor.

Datele stocate în formate de date, cum ar fi o matrice, XML, CSV și JSON, pot fi convertite în grafice, diagrame și mai multe moduri prin atașarea de elemente HTML, pânză sau gruparea formelor de grafică vectorială scalabilă (SVG) utilizând această bibliotecă JavaScript.

Datele mari, cum ar fi înregistrările de detalii ale apelurilor de pe dispozitive mobile și alte dispozitive, mesaje, discuții sau jurnalele twit de pe platformele de socializare precum Twitter, Facebook, WhatsApp, jurnalele din tendințele pieței și jurnalele cu informații de tranzacționare pot fi convertite în diagrame, grafice sau diverse vizualizări folosind această bibliotecă JavaScript.

De la apariția diverselor platforme de rețele sociale, cum ar fi Twitter, Facebook și WhatsApp, diverse comunicări, cum ar fi twit, mesaje și jurnale de comentarii, pot fi capturate și convertite în formate vizuale, cum ar fi diagrame, grafice, etc., pentru a înțelege subiectele tendințelor și a crea sentiment analiză.

Devine ușor să înțelegeți modul de operare al unui grup de înregistrări detaliate ale apelurilor suspectului din turnurile de telecomunicații și să le monitorizați tiparul de apel în cazul implicării lor în activități criminale suspecte.

Pe baza schimbărilor care au loc într-o bursă, un indice bursier precum Bursa de Valori Bombay (BSE), Bursa Națională de Valori (NSE), care reflectă mișcarea prețurilor acțiunilor, decide sentimentele pieței și îndrumă investitorii în cumpărare sau vânzare de stoc.

D3.js pot converti activitățile cotei de piață pentru a crea diagrame sau grafice care pot prezice rapid probabilitatea tendințelor pieței sau date mobile sub formă de înregistrări detaliate ale apelurilor pentru investigarea oricărei implicări a suspecților în infracțiuni sau informații privind investigația predictivă.

Caracteristicile D3.js

• Condus de date: Este folosit în principal pentru a explora și analiza date și pentru a crea grafice interactive, diagrame, diagrame și modalități extinse de vizualizare a datelor.
• Manipulare DOM: Aceasta este o bibliotecă JavaScript open-source care convertește datele în diferite formate de vizualizare prin manipularea elementelor DOM.
• Utilizează standardele web: Utilizează Document Object Model (DOM), HTML, Cascading Style sheets (CSS), Scalable Vector Graphics (SVG) și pânză pentru a crea formate de vizualizare a datelor.
• Rapid și interactiv: Este extrem de receptiv la schimbarea datelor și poate anima sau transforma rapid elementul DOM selectat dintr-o stare în alta.
• Afișați tranziții dinamice: Această bibliotecă este concepută pentru a crea o tranziție dinamică rapidă pentru a genera o vizualizare rapidă receptivă cu DOM.

Avantajele utilizării D3.js

• Este o bibliotecă JavaScript open-source care poate fi utilizată împreună cu alte cadre JavaScript, cum ar fi Angular.JS, Ember.JS sau React.
• Această bibliotecă este open-source, astfel încât să puteți adăuga propriile caracteristici la codul sursă pentru a-și atinge obiectivele.
• Se ocupă de standarde web precum DOM, HTML, CSS, SVG și pânză, prin urmare nu are nevoie de niciun alt plug-in în afară de un browser, nu are nevoie de niciun instrument de depanare sau învățare suplimentar.
• Poate crea transformări dinamice, în timp real, prin manipularea elementelor DOM, rapid în vizualizarea datelor fără nicio latență.
• Funcționează pe date și este specializat și adecvat cu funcțiile de vizualizare a datelor conținute în biblioteca JavaScript.

Condiții preliminare pentru a afla D3.js

• Editor de text: Un editor de text precum Notepad ++ sau Vim este necesar pentru a scrie cod de programare precum HTML, CSS, JavaScript și a le integra pentru a produce cerința dorită.
• Browser web: Oricare dintre browserele web moderne, cum ar fi Firefox, Google Chrome, Safari, Opera sau IE9, ar trebui să fie instalat pentru a verifica și verifica ieșirea produsă după integrarea codului.
• HTML: O bună înțelegere a etichetelor și structurii HTML va ajuta la construirea unei pagini web de bază și la alinierea elementelor pentru a aduce vizualizarea la nivelul următor.
• CSS: Foaia de stil în cascadă (CSS) este utilizată pentru a aplica stiluri incluzând designul, aspectul și dimensiunea ecranului paginilor web.
• HOTĂRÂRE: Este esențială o înțelegere puternică a modelului de obiect document (DOM), deoarece va fi mai ușor să cunoașteți structura și conținutul documentelor web, să accesați elementele DOM pentru D3.js pentru vizualizarea datelor.
• JavaScript: Familiarizarea elementelor fundamentale și a obiectelor JavaScript este o condiție prealabilă pentru învățarea și implementarea D3.js în aplicația noastră, astfel încât vizualizarea datelor să poată fi vizualizată în serverul web.
• Server Web: Este esențial să aveți un server web instalat, cum ar fi serverul Apache Tomcat sau IIS (Internet Information Services), astfel încât datele să poată fi încărcate extern în format matrice, obiect, XML, CSV, JSON și să poată fi transformate cu ajutorul D3. js în formate de vizualizare precum grafice, diagrame și vizualizare geospațială.

Instalarea / configurarea D3.js

Pentru a crea vizualizarea datelor în paginile noastre web, trebuie să includem D3.js în pagina noastră web HTML.

Se poate face în următoarele moduri:

• Descărcați biblioteca D3.js în computerul nostru client și includeți calea d3.min.js în