Vodič za D3.js - Okvir vizualizacije podataka za početnike

d3 js tutorial data visualization framework

Ovaj Vodič za D3.js objašnjava što je D3.js, njegove prednosti, značajke, korak-po-korak postupak instalacije i mnoštvo praktičnih primjera tako da D3.js možete brzo naučiti:

Ovaj vodič opisuje kako se D3.js, data-pokretana biblioteka otvorenog koda JavaScript može koristiti u vizualizaciji podataka pomoću HTML-a, objektnog modela dokumenta (DOM), kaskadnih listova stilova (CSS), skalabilne vektorske grafike (SVG), Canvas JavaScript putem web preglednika.

Korištenjem ovog okvira, vanjski podaci u XML, CSV ili JSON formatu mogu se pretvoriti u grafikone, grafikone ili više formata vizualizacije putem web poslužitelja.

U ovom uputstvu naučit ćemo sve funkcije iz ove JavaScript knjižnice i vidjeti kako ih možemo koristiti za vizualizaciju podataka putem web poslužitelja pomoću web preglednika.

Počnimo!!

Što ćete naučiti:

• Što je D3.js
  • Značajke D3.js
  • Prednosti upotrebe D3.js
  • Preduvjeti za učenje D3.js
  • Instalacija / postavljanje D3.js
  • Instaliranje Apache Tomcat - web poslužitelja
• Razumijevanje web koncepata i standarda
• Razne metode i API-ji iz biblioteke D3.js
  • Dodavanje SVG oblika u HTML element pomoću d3.select ()
  • Transformacija SVG oblika
  • Primjer SVG transformacije
  • Funkcije pronalaženja statistike niza
  • D3.js API za prijelaze
  • API za prikupljanje D3.js
  • Maps API
  • Postavlja API
  • API putanja
• Zaključak
  • Preporučena literatura

Što je D3.js

D3.js je podatkovno vođen okvir koji je lagana JavaScript biblioteka i zahtijeva manje redaka koda, prikladnog za rukovanje velikim podacima kako bi se dobile interaktivne karte za vizualizaciju podataka, grafikoni i geoprostorne mape.

To je JavaScript knjižnica otvorenog koda koja se uglavnom koristi za crtanje grafičke vizualizacije manipuliranjem DOM elementima web stranica za istraživanje i analizu podataka.

Podaci pohranjeni u formatima podataka poput niza, XML, CSV i JSON mogu se pretvoriti u grafikone, grafikone i na više načina dodavanjem HTML elemenata, platna ili grupiranjem oblika skalabilne vektorske grafike (SVG) pomoću ove JavaScript biblioteke.

Veliki podaci kao što su zapisi pojedinosti o pozivima s mobilnih i drugih uređaja, poruke, rasprave ili twit zapisi s platformi društvenih medija kao što su Twitter, Facebook, WhatsApp, zapisi iz tržišnih trendova i zapisi s informacijama o trgovanju mogu se pretvoriti u grafikone, grafikone ili razne vizualizacije pomoću ove JavaScript knjižnice.

Od pojave različitih platformi za društvene mreže kao što su Twitter, Facebook i WhatsApp, razne komunikacije poput twit-a, poruka i dnevnika komentara mogu se snimati i pretvarati u vizualne formate kao što su grafikoni, grafikoni itd. Kako bi se razumjele teme u trendu i stvorili sentiment analiza.

Postaje lako razumjeti modus operandi skupine podataka o pozivima osumnjičenika s telekomunikacijskih tornjeva i nadzirati njihov obrazac poziva u slučaju njihove upletenosti u sumnjive kriminalne radnje.

Na temelju promjena koje se događaju na burzi, dionički indeks kao što je Bombajska burza (BSE), Nacionalna burza (NSE), koji odražava kretanje cijena dionica, odlučuje o tržišnim osjećajima i usmjerava investitore u kupnji ili prodaji zaliha.

D3.js može pretvoriti aktivnosti tržišnog udjela u stvaranje grafikona ili grafikona koji mogu brzo predvidjeti vjerojatnost tržišnih trendova ili mobilnih podataka u obliku zapisa detalja poziva za istragu bilo kakvog sudjelovanja osumnjičenih u zločinima ili informacija o prediktivnoj istrazi.

Značajke D3.js

• Na temelju podataka: Uglavnom se koristi za istraživanje i analizu podataka i stvaranje interaktivnih grafikona, grafikona i opsežnih načina vizualizacije podataka u stvarnom vremenu.
• DOM manipulacija: Ovo je JavaScript biblioteka otvorenog koda koja pretvara podatke u različite formate vizualizacije manipulirajući DOM elementima.
• Koristi web standarde: Za stvaranje formata vizualizacije podataka koristi objektni model dokumenta (DOM), HTML, listove kaskadnih stilova (CSS), skalabilnu vektorsku grafiku (SVG) i platno.
• Brzo i interaktivno: Vrlo je osjetljiv na promjenu podataka i može brzo animirati ili transformirati odabrani DOM element iz jednog stanja u drugo.
• Prikaži dinamičke prijelaze: Ova je knjižnica dizajnirana za stvaranje brze dinamičke tranzicije za generiranje brze vizualne reakcije s DOM-om.

Prednosti upotrebe D3.js

• To je JavaScript knjižnica otvorenog koda koja se može koristiti zajedno s drugim JavaScript okvirima kao što su Angular.JS, Ember.JS ili React.
• Ova je knjižnica otvorenog koda, pa se izvornom kodu mogu dodati vlastite značajke kako bi se postigli njihovi ciljevi.
• Obrađuje web standarde poput DOM-a, HTML-a, CSS-a, SVG-a i platna, stoga mu nije potreban nijedan drugi dodatak osim preglednika, ne treba dodatni alat za uklanjanje pogrešaka ili učenje.
• Može stvoriti dinamičnu transformaciju u stvarnom vremenu manipuliranjem DOM elementima, brzo u vizualizaciju podataka bez ikakvih kašnjenja.
• Radi na podacima i specijaliziran je i prikladan za funkcije vizualizacije podataka sadržane u JavaScript knjižnici.

Preduvjeti za učenje D3.js

• Uređivač teksta: Uređivač teksta kao što je Notepad ++ ili Vim potreban je za pisanje programskog koda poput HTML-a, CSS-a, JavaScript-a i njihovo integriranje kako bi se dobio željeni zahtjev.
• Web-preglednik: Bilo koji od modernih web preglednika, kao što su Firefox, Google Chrome, Safari, Opera ili IE9, trebao bi biti instaliran da provjeri i provjeri izlaz koji se stvara nakon integracije koda.
• HTML: Dobro razumijevanje HTML oznaka i strukture pomoći će u stvaranju osnovne web stranice i poravnavanju elemenata kako bi vizualizacija došla na sljedeću razinu.
• CSS: Cascading Style Sheet (CSS) koristi se za primjenu stilova, uključujući dizajn, izgled i veličinu zaslona na web stranice.
• OSUDA: Jasno je razumijevanje objektnog modela dokumenta (DOM) jer će biti lakše znati strukturu i sadržaj web dokumenata, pristupiti DOM elementima za D3.js radi vizualizacije podataka.
• JavaScript: Upoznavanje osnova i JavaScript objekata preduvjet je za učenje i implementaciju D3.js u našu aplikaciju tako da se vizualizacija podataka može pregledavati na web poslužitelju.
• Web poslužitelj: Nužno je instalirati web poslužitelj poput Apache Tomcat ili IIS (Internet Information Services) poslužitelja, tako da se podaci mogu učitati izvana u nizu, objektima, XML, CSV, JSON formatima i mogu se transformirati uz pomoć D3. js u formate vizualizacije kao što su grafikoni, grafikoni i geoprostorna vizualizacija.

Instalacija / postavljanje D3.js

Da bismo stvorili vizualizaciju podataka na našim web stranicama, moramo uključiti D3.js u našu HTML web stranicu.

To se može učiniti na sljedeće načine:

• Preuzmite knjižnicu D3.js na naš klijentski stroj i uključite put d3.min.js u