d3 js tutorial data visualization framework
Denne veiledningen for D3.js forklarer hva som er D3.js, fordelene, funksjonene, trinnvise installasjonsprosessene og mange praktiske eksempler, slik at du raskt kan lære D3.js:
Denne opplæringen beskriver hvordan D3.js, et datadrevet JavaScript-bibliotek med åpen kildekode, kan brukes i datavisualisering ved hjelp av HTML, Document Object Model (DOM), Cascading Style Sheets (CSS), Scalable Vector Graphics (SVG), Canvas og JavaScript via en nettleser.
Ved hjelp av dette rammeverket kan eksterne data i XML-, CSV- eller JSON-format konverteres til diagrammer, grafer eller flere visualiseringsformater over en webserver.
I denne opplæringen vil vi lære om alle funksjonene fra dette JavaScript-biblioteket og se hvordan vi kan bruke dem til å visualisere dataene via en webserver ved hjelp av en nettleser.
La oss begynne!!
Hva du vil lære:
- Hva er D3.js
- Forstå nettkonsepter og standarder
- Ulike metoder og API-er fra D3.js-biblioteket
- Konklusjon
Hva er D3.js
D3.js er et datadrevet rammeverk som er et lett JavaScript-bibliotek og krever færre kodelinjer, egnet for håndtering av store data for å få interaktive datavisualiseringskart, grafer og geospatiale kart.
Det er et JavaScript-bibliotek med åpen kildekode som hovedsakelig brukes til å plotte grafisk visualisering ved å manipulere DOM-elementer på websider for å utforske og analysere data.
Data lagret i dataformater som en matrise, XML, CSV og JSON kan konverteres til grafer, diagrammer og flere måter ved å legge ved HTML-elementer, lerret eller grupperingsformer av skalerbar vektorgrafikk (SVG) ved hjelp av dette JavaScript-biblioteket.
Store data som samtaledetaljer fra mobile og andre enheter, meldinger, diskusjon eller twit-logger fra sosiale medieplattformer som Twitter, Facebook, WhatsApp, logger fra markedstrender og handelsinformasjonslogger kan konverteres til diagrammer, grafer eller forskjellige visualiseringer ved hjelp av dette JavaScript-biblioteket.
Siden ankomsten av forskjellige sosiale nettverksplattformer som Twitter, Facebook og WhatsApp, kan ulike kommunikasjoner som twit, meldinger og kommentarlogger fanges opp og konverteres til visuelle formater som diagrammer, grafer osv. For å forstå populære emner og skape følelser analyse.
Det blir lett å forstå modus operandi for en gruppe mistenkte samtaledetaljer fra telekommunikasjonstårn og overvåke deres samtalemønster i tilfelle de involverer seg i mistenkelige kriminelle aktiviteter.
Basert på endringene som skjer i en børs, bestemmer en aksjeindeks som Bombay Stock Exchange (BSE), National Stock Exchange (NSE), som reflekterer bevegelsen av aksjekursene, markedssentimentene og veileder investorer i kjøp eller salg på lager.
D3.js kan konvertere markedsandelsaktiviteter for å lage diagrammer eller grafer som raskt kan forutsi sannsynligheten for markedstrender, eller mobildata i form av samtaledetaljer for å undersøke eventuelle involvering av mistenkte i forbrytelser eller informasjon om den prediktive etterforskningen.
Funksjoner av D3.js
- Data drevet: Den brukes hovedsakelig til å utforske og analysere data og lage interaktive sanntidsgrafer, diagrammer og omfattende måter å visualisere dataene på.
- DOM-manipulasjon: Dette er et JavaScript-bibliotek med åpen kildekode som konverterer data i forskjellige visualiseringsformater ved å manipulere DOM-elementer.
- Bruker nettstandarder: Den bruker Document Object Model (DOM), HTML, Cascading Styleheets (CSS), Scalable Vector Graphics (SVG) og canvas for å lage datavisualiseringsformater.
- Rask og interaktiv: Det er veldig responsivt for endring i data, og kan raskt animere eller transformere valgt DOM-element fra en tilstand til en annen tilstand.
- Vis dynamiske overganger: Dette biblioteket er designet for å skape en rask dynamisk overgang for å generere rask responsiv visualisering med DOM.
Fordeler med å bruke D3.js
- Det er et JavaScript-bibliotek med åpen kildekode som kan brukes sammen med andre JavaScript-rammer som Angular.JS, Ember.JS eller React.
- Dette biblioteket er åpen kildekode, så man kan legge til sine egne funksjoner i kildekoden for å oppnå sine mål.
- Den håndterer nettstandarder som DOM, HTML, CSS, SVG og lerret, og derfor trenger den ikke noe annet plugin-program enn en nettleser, det trenger ikke noe ekstra feilsøkings- eller læringsverktøy.
- Det kan skape dynamisk sanntidstransformasjon ved å manipulere DOM-elementer, raskt til datavisualisering uten ventetid.
- Den fungerer på data og er spesialisert og passende med datavisualiseringsfunksjoner som finnes i JavaScript-biblioteket.
Forutsetninger for å lære D3.js
- Tekstredigerer: En tekstredigerer som Notepad ++ eller Vim er nødvendig for å skrive programmeringskode som HTML, CSS, JavaScript og integrere dem for å produsere ønsket krav.
- Nettleser: En hvilken som helst av de moderne nettleserne, som Firefox, Google Chrome, Safari, Opera eller IE9, bør installeres for å kontrollere og verifisere utdataene som produseres etter integrering av koden.
- HTML: God forståelse av HTML-koder og struktur vil bidra til å bygge en grunnleggende webside og justere elementer for å bringe visualisering til neste nivå.
- CSS: Cascading Style Sheet (CSS) brukes til å bruke stiler inkludert design, layout og skjermstørrelse på websider.
- DØMMEKRAFT: Sterk forståelse av Document Object Model (DOM) er viktig, da det vil være lettere å kjenne strukturen og innholdet til nettdokumenter, få tilgang til DOM-elementer for D3.js for datavisualisering.
- JavaScript: Kjennskap til grunnleggende og JavaScript-objekter er en forutsetning for å lære og implementere D3.js i applikasjonen vår, slik at datavisualisering kan vises i webserveren.
- Internett server: Det er viktig å ha en webserver installert som Apache Tomcat eller IIS (Internet Information Services) -server, slik at data kan lastes opp eksternt i en matrise, objekt, XML, CSV, JSON-formater og kan transformeres ved hjelp av D3. js til visualiseringsformater som grafer, diagrammer og geospatial visualisering.
Installasjon / oppsett av D3.js
For å lage datavisualisering på websidene våre, må vi inkludere D3.js i HTML-websiden vår.
Det kan gjøres på følgende måter:
- Last ned D3.js-biblioteket til klientmaskinen vår og inkluder banen til d3.min.js inn i