d3 js tutorial data visualization framework
Denne D3.js-vejledning forklarer, hvad der er D3.js, dets fordele, funktioner, trinvis installationsproces og masser af praktiske eksempler, så du hurtigt kan lære D3.js:
Denne tutorial beskriver, hvordan D3.js, et datadrevet JavaScript-bibliotek med open source kan bruges til datavisualisering ved hjælp af HTML, Document Object Model (DOM), Cascading Style Sheets (CSS), Scalable Vector Graphics (SVG), Canvas og JavaScript via en webbrowser.
Ved hjælp af denne ramme kan eksterne data i XML-, CSV- eller JSON-format konverteres til diagrammer, grafer eller flere visualiseringsformater via en webserver.
I denne vejledning lærer vi om alle funktionerne fra dette JavaScript-bibliotek og ser, hvordan vi kan bruge dem til at visualisere dataene via en webserver ved hjælp af en webbrowser.
Lad os begynde!!
Hvad du vil lære:
- Hvad er D3.js
- Forståelse af webkoncepter og standarder
- Forskellige metoder og API'er fra D3.js-biblioteket
- Konklusion
Hvad er D3.js
D3.js er en datadrevet ramme, der er et let JavaScript-bibliotek og kræver færre kodelinjer, der er velegnet til håndtering af store data for at få interaktive datavisualiseringskort, grafer og geospatiale kort.
Det er et open source JavaScript-bibliotek, der primært bruges til at plotte grafisk visualisering ved at manipulere DOM-elementer på websider til at udforske og analysere data.
Data gemt i dataformater som en matrix, XML, CSV og JSON kan konverteres til grafer, diagrammer og flere måder ved at vedhæfte HTML-elementer, lærred eller gruppere former for skalerbar vektorgrafik (SVG) ved hjælp af dette JavaScript-bibliotek.
Big data såsom opkaldsdetaljer fra mobile og andre enheder, meddelelser, diskussion eller twit-logfiler fra sociale medieplatforme som Twitter, Facebook, WhatsApp, logfiler fra markedstendenser og handelsinformationslogfiler kan konverteres til diagrammer, grafer eller forskellige visualiseringer ved hjælp af dette JavaScript-bibliotek.
Siden fremkomsten af forskellige sociale netværksplatforme som Twitter, Facebook og WhatsApp kan forskellige kommunikationer såsom twit, meddelelser og kommentarlogfange fanges og konverteres til visuelle formater som diagrammer, grafer osv. For at forstå trendemner og skabe følelser analyse.
Det bliver let at forstå modus operandi for en gruppe mistænkte opkaldsdetaljer fra telekommunikationstårne og overvåge deres opkaldsmønster i tilfælde af deres involvering i mistænkelige kriminelle aktiviteter.
Baseret på de ændringer, der finder sted på en børs, bestemmer et aktieindeks som Bombay Stock Exchange (BSE), den nationale børs (NSE), der afspejler aktiekursernes bevægelse, markedssentimenterne og vejleder investorer i køb eller salg på lager.
D3.js kan konvertere aktiviteter til markedsandele for at oprette diagrammer eller grafer, der hurtigt kan forudsige sandsynligheden for markedstendenser eller mobildata i form af detaljer om opkaldsdetaljer til efterforskning af mistanke om involvering i forbrydelser eller oplysninger om den forudsigelige efterforskning.
Funktioner af D3.js
- Datadrevet: Det bruges primært til at udforske og analysere data og oprette interaktive realtidsgrafer, diagrammer og omfattende måder at visualisere dataene på.
- DOM-manipulation: Dette er et open source JavaScript-bibliotek, der konverterer data i forskellige visualiseringsformater ved at manipulere DOM-elementer.
- Udnytter webstandarder: Det bruger Document Object Model (DOM), HTML, Cascading Styleheets (CSS), Scalable Vector Graphics (SVG) og canvas til at oprette datavisualiseringsformater.
- Hurtig og interaktiv: Det er meget lydhør over for ændringer i data og kan hurtigt animere eller transformere det valgte DOM-element fra en tilstand til en anden tilstand.
- Vis dynamiske overgange: Dette bibliotek er designet til at skabe en hurtig dynamisk overgang for at generere hurtig responsiv visualisering med DOM.
Fordele ved at bruge D3.js
- Det er et open source JavaScript-bibliotek, der kan bruges sammen med andre JavaScript-rammer som Angular.JS, Ember.JS eller React.
- Dette bibliotek er open source, så man kan tilføje deres egne funktioner til kildekoden for at nå deres mål.
- Det håndterer webstandarder som DOM, HTML, CSS, SVG og lærred, og derfor behøver det ikke andet plugin end en browser, det har ikke brug for yderligere fejlfindings- eller læringsværktøj.
- Det kan skabe dynamisk realtidstransformation ved at manipulere DOM-elementer hurtigt til datavisualisering uden nogen ventetid.
- Det fungerer på data og er specialiseret og passende med datavisualiseringsfunktioner indeholdt i JavaScript-biblioteket.
Forudsætninger for at lære D3.js
- Teksteditor: En teksteditor som f.eks. Notepad ++ eller Vim er nødvendig for at skrive programmeringskode som HTML, CSS, JavaScript og integrere dem for at producere det ønskede krav.
- Webbrowser: Enhver af de moderne webbrowsere, såsom Firefox, Google Chrome, Safari, Opera eller IE9, skal installeres for at kontrollere og kontrollere det output, der produceres efter integrering af koden.
- HTML: God forståelse af HTML-tags og struktur hjælper med at opbygge en grundlæggende webside og justere elementer for at bringe visualisering til det næste niveau.
- CSS: Cascading Style Sheet (CSS) bruges til at anvende stilarter inklusive design, layout og skærmstørrelse på websider.
- DOM: Stærk forståelse af Document Object Model (DOM) er vigtig, da det vil være lettere at kende strukturen og indholdet af webdokumenter, få adgang til DOM-elementer til D3.js til datavisualisering.
- JavaScript: Kendskab til grundlæggende og JavaScript-objekter er en forudsætning for at lære og implementere D3.js i vores applikation, så datavisualisering kan ses i webserveren.
- Webserver: Det er vigtigt at have en webserver installeret som Apache Tomcat eller IIS (Internet Information Services) -server, så data kan uploades eksternt i en matrix-, objekt-, XML-, CSV-, JSON-formater og kan transformeres ved hjælp af D3. js til visualiseringsformater som grafer, diagrammer og geospatial visualisering.
Installation / opsætning af D3.js
For at oprette datavisualisering på vores websider er vi nødt til at medtage D3.js i vores HTML-webside.
Det kan gøres på følgende måder:
- Download D3.js-biblioteket til vores klientmaskine, og inkluder stien til d3.min.js i