D3.js handledning - Datavisualiseringsramverk för nybörjare

d3 js tutorial data visualization framework

Denna D3.js-handledning förklarar vad som är D3.js, dess fördelar, funktioner, steg-för-steg-installationsprocess och många praktiska exempel så att du snabbt kan lära dig D3.js:

Denna handledning beskriver hur D3.js, ett datadrivet JavaScript-källkod med öppen källkod, kan användas i datavisualisering med HTML, Document Object Model (DOM), Cascading Style Sheets (CSS), Scalable Vector Graphics (SVG), Canvas och JavaScript via en webbläsare.

Med hjälp av detta ramverk kan externa data i XML-, CSV- eller JSON-format konverteras till diagram, grafer eller flera visualiseringsformat via en webbserver.

I den här handledningen lär vi oss alla funktioner från detta JavaScript-bibliotek och ser hur vi kan använda dem för att visualisera data via en webbserver med en webbläsare.

Låt oss börja!!

Vad du kommer att lära dig:

• Vad är D3.js
  • Funktioner av D3.js
  • Fördelar med att använda D3.js
  • Förutsättningar för att lära dig D3.js
  • Installation / inställning av D3.js
  • Installerar Apache Tomcat - webbserver
• Förstå webbkoncept och standarder
• Olika metoder och API: er från D3.js-biblioteket
  • Lägga till SVG-former till HTML-elementet med d3.select ()
  • Transformation Of SVG Shapes
  • Exempel på SVG-transformation
  • Funktioner för att hitta statistik över en matris
  • API för övergångar till D3.js
  • API för D3.js-samling
  • Maps API
  • Ställer in API
  • Paths API
• Slutsats
  • Rekommenderad läsning

Vad är D3.js

D3.js är ett datadrivet ramverk som är ett lätt JavaScript-bibliotek och kräver färre kodrader, lämpliga för hantering av stora data för att få interaktiva datavisualiseringsdiagram, grafer och geospatiala kartor.

Det är ett JavaScript-bibliotek med öppen källkod som huvudsakligen används för att plotta grafisk visualisering genom att manipulera DOM-element på webbsidor för att utforska och analysera data.

Data som lagras i dataformat som en array, XML, CSV och JSON kan konverteras till grafer, diagram och flera sätt genom att bifoga HTML-element, canvas eller gruppera former av skalbar vektorgrafik (SVG) med hjälp av detta JavaScript-bibliotek.

Stora data som samtalsdetaljer från mobila och andra enheter, meddelanden, diskussion eller twit-loggar från sociala medieplattformar som Twitter, Facebook, WhatsApp, loggar från marknadstrender och handelsinformationsloggar kan konverteras till diagram, grafer eller olika visualiseringar med hjälp av detta JavaScript-bibliotek.

Sedan tillkomsten av olika sociala nätverksplattformar som Twitter, Facebook och WhatsApp kan olika kommunikationer som twit, meddelanden och kommentarloggar fångas in och konverteras till visuella format som diagram, grafer etc. för att förstå trendiga ämnen och skapa känslor analys.

Det blir lätt att förstå modus operandi för en grupp av misstänktes samtalsdetaljer från telekommunikationstorn och övervaka deras samtalsmönster om de deltar i misstänkt brottslig verksamhet.

Baserat på de förändringar som sker på en börs, bestämmer ett aktieindex som Bombay Stock Exchange (BSE), National Stock Exchange (NSE), som speglar aktiekursernas rörelse marknadens känslor och styr investerare vid köp eller försäljning i lager.

D3.js kan konvertera marknadsandelar för att skapa diagram eller grafer som snabbt kan förutsäga sannolikheten för marknadstrender, eller mobildata i form av samtalsdetaljer för att undersöka misstänktas inblandning i brott eller information om den prediktiva utredningen.

Funktioner av D3.js

• Data driven: Den används främst för att utforska och analysera data och skapa interaktiva realtidsdiagram, diagram och omfattande sätt att visualisera data.
• DOM-manipulation: Detta är ett JavaScript-bibliotek med öppen källkod som konverterar data i olika visualiseringsformat genom att manipulera DOM-element.
• Använder webbstandarder: Den använder Document Object Model (DOM), HTML, Cascading Style Sheets (CSS), Scalable Vector Graphics (SVG) och canvas för att skapa datavisualiseringsformat.
• Snabb och interaktiv: Det är mycket lyhört för förändringar i data och kan snabbt animera eller omvandla valt DOM-element från ett tillstånd till ett annat tillstånd.
• Visa dynamiska övergångar: Detta bibliotek är utformat för att skapa en snabb dynamisk övergång för att generera snabb responsiv visualisering med DOM.

Fördelar med att använda D3.js

• Det är ett JavaScript-bibliotek med öppen källkod som kan användas tillsammans med andra JavaScript-ramar som Angular.JS, Ember.JS eller React.
• Detta bibliotek är öppen källkod, så man kan lägga till sina egna funktioner i källkoden för att uppnå sina mål.
• Den hanterar webbstandarder som DOM, HTML, CSS, SVG och canvas, därför behöver den inte någon annan plugin än en webbläsare, den behöver inget ytterligare felsöknings- eller inlärningsverktyg.
• Det kan skapa dynamisk realtidstransformation genom att manipulera DOM-element, snabbt till datavisualisering utan latens.
• Det fungerar på data och är specialiserat och lämpligt med datavisualiseringsfunktioner som finns i JavaScript-biblioteket.

Förutsättningar för att lära dig D3.js

• Textredigerare: En textredigerare som Notepad ++ eller Vim behövs för att skriva programmeringskod som HTML, CSS, JavaScript och integrera dem för att producera önskat krav.
• Webbläsare: Vilken som helst av de moderna webbläsarna, till exempel Firefox, Google Chrome, Safari, Opera eller IE9, bör installeras för att kontrollera och verifiera utdata som produceras efter integrering av koden.
• HTML: God förståelse för HTML-taggar och struktur hjälper till att bygga en grundläggande webbsida och anpassa element för att få visualisering till nästa nivå.
• CSS: Cascading Style Sheet (CSS) används för att tillämpa stilar inklusive design, layout och skärmstorlek på webbsidor.
• DOM: Stark förståelse för Document Object Model (DOM) är viktigt eftersom det blir lättare att känna till strukturen och innehållet i webbdokument, komma åt DOM-element för D3.js för datavisualisering.
• JavaScript: Kännedom om grundläggande och JavaScript-objekt är en förutsättning för att lära sig och implementera D3.js i vår applikation så att datavisualisering kan ses i webbservern.
• Webbserver: Det är viktigt att ha en webbserver installerad som Apache Tomcat eller IIS (Internet Information Services) -server, så att data kan laddas upp externt i en array-, objekt-, XML-, CSV-, JSON-format och kan omvandlas med hjälp av D3. js till visualiseringsformat som grafer, diagram och geospatial visualisering.

Installation / inställning av D3.js

För att skapa datavisualisering på våra webbsidor måste vi inkludera D3.js i vår HTML-webbsida.

Det kan göras på följande sätt:

• Ladda ner D3.js-biblioteket till vår klientmaskin och inkludera sökvägen till d3.min.js till