d3 js tutorial data visualization framework
Deze D3.js-zelfstudie legt uit wat D3.js is, de voordelen, functies, het stapsgewijze installatieproces en tal van praktische voorbeelden, zodat u D3.js snel kunt leren:
Deze tutorial beschrijft hoe D3.js, een datagestuurde open-source JavaScript-bibliotheek kan worden gebruikt in datavisualisatie met behulp van HTML, Document Object Model (DOM), Cascading Style Sheets (CSS), Scalable Vector Graphics (SVG), Canvas en JavaScript via een webbrowser.
Met dit raamwerk kunnen externe gegevens in XML-, CSV- of JSON-indeling via een webserver worden geconverteerd naar grafieken, grafieken of meerdere visualisatie-indelingen.
In deze tutorial leren we over alle functies van deze JavaScript-bibliotheek en zien we hoe we ze kunnen gebruiken om de gegevens via een webserver met een webbrowser te visualiseren.
Laten we beginnen!!
Wat je leert:
- Wat is D3.js
- Inzicht in webconcepten en -normen
- Verschillende methoden en API's uit de D3.js-bibliotheek
- Gevolgtrekking
Wat is D3.js
D3.js is een gegevensgestuurd raamwerk dat een lichtgewicht JavaScript-bibliotheek is en minder regels code vereist, geschikt voor het verwerken van grote gegevens om interactieve grafieken, grafieken en geospatiale kaarten te krijgen.
Het is een open-source JavaScript-bibliotheek die voornamelijk wordt gebruikt om grafische visualisatie uit te zetten door DOM-elementen van webpagina's te manipuleren voor het verkennen en analyseren van gegevens.
Gegevens die zijn opgeslagen in gegevensindelingen zoals een array, XML, CSV en JSON, kunnen worden geconverteerd naar grafieken, diagrammen en meerdere manieren door HTML-elementen, canvas of groepeervormen van schaalbare vectorafbeeldingen (SVG) te koppelen met deze JavaScript-bibliotheek.
Big data zoals oproepdetailrecords van mobiele en andere apparaten, berichten, discussie of twit-logs van sociale mediaplatforms zoals Twitter, Facebook, WhatsApp, logs van markttrends en logs met handelsinformatie, kunnen worden omgezet in grafieken, grafieken of verschillende visualisaties met behulp van deze JavaScript-bibliotheek.
Sinds de komst van verschillende sociale netwerkplatforms zoals Twitter, Facebook en WhatsApp, kunnen verschillende communicaties zoals twit, berichten en commentaarlogboeken worden vastgelegd en omgezet in visuele formaten zoals grafieken, grafieken, enz. Om trending topics te begrijpen en sentiment te creëren. analyse.
Het wordt gemakkelijk om de modus operandi van een groep verdachte's oproepdetailrecords van telecommunicatietorens te begrijpen en hun oproeppatroon te volgen in geval van betrokkenheid bij verdachte criminele activiteiten.
Op basis van de veranderingen die plaatsvinden op een effectenbeurs, bepaalt een aandelenindex zoals de Bombay Stock Exchange (BSE), de National Stock Exchange (NSE), die de beweging van de aandelenkoersen weerspiegelt, de marktsentimenten en begeleidt beleggers bij het kopen of verkopen op voorraad.
D3.js kan marktaandeelactiviteiten omzetten om grafieken of grafieken te maken die snel de kans op markttrends kunnen voorspellen, of mobiele gegevens in de vorm van oproepdetailrecords voor het onderzoeken van enige betrokkenheid van verdachten bij misdrijven of informatie over het voorspellend onderzoek.
Kenmerken van D3.js
- Gegevensgestuurd: Het wordt voornamelijk gebruikt om gegevens te verkennen en te analyseren en interactieve real-time grafieken, grafieken en uitgebreide manieren om de gegevens te visualiseren te maken.
- DOM-manipulatie: Dit is een open-source JavaScript-bibliotheek die gegevens in verschillende visualisatie-indelingen converteert door DOM-elementen te manipuleren.
- Maakt gebruik van webstandaarden: Het maakt gebruik van Document Object Model (DOM), HTML, Cascading Style sheets (CSS), Scalable Vector Graphics (SVG) en canvas om indelingen voor gegevensvisualisatie te creëren.
- Snel en interactief: Het reageert zeer goed op veranderingen in gegevens en kan het geselecteerde DOM-element snel animeren of transformeren van de ene staat naar de andere.
- Dynamische overgangen weergeven: Deze bibliotheek is ontworpen om een snelle dynamische overgang te creëren om snel reagerende visualisatie met DOM te genereren.
Voordelen van het gebruik van D3.js
- Het is een open-source JavaScript-bibliotheek die kan worden gebruikt in combinatie met andere JavaScript-frameworks zoals Angular.JS, Ember.JS of React.
- Deze bibliotheek is open-source, dus men kan zijn eigen functies aan de broncode toevoegen om zijn doelen te bereiken.
- Het verwerkt webstandaarden zoals DOM, HTML, CSS, SVG en canvas, daarom heeft het geen andere plug-in nodig dan een browser, het heeft geen extra foutopsporings- of leerprogramma nodig.
- Het kan dynamische, real-time transformatie creëren door DOM-elementen snel en zonder enige vertraging in datavisualisatie te manipuleren.
- Het werkt op gegevens en is gespecialiseerd en geschikt voor gegevensvisualisatiefuncties in de JavaScript-bibliotheek.
Vereisten om D3.js te leren
- Teksteditor: Een teksteditor zoals Notepad ++ of Vim is nodig om programmeercode zoals HTML, CSS, JavaScript te schrijven en deze te integreren om de gewenste vereisten te produceren.
- Webbrowser: Een van de moderne webbrowsers, zoals Firefox, Google Chrome, Safari, Opera of IE9, moet worden geïnstalleerd om de output die wordt geproduceerd na het integreren van de code te controleren en te verifiëren.
- HTML: Een goed begrip van HTML-tags en -structuur helpt bij het bouwen van een basiswebpagina en het uitlijnen van elementen om visualisatie naar een hoger niveau te tillen.
- CSS: Cascading Style Sheet (CSS) wordt gebruikt om stijlen, inclusief ontwerp, lay-out en schermgrootte, toe te passen op webpagina's.
- ARREST: Een goed begrip van Document Object Model (DOM) is essentieel omdat het gemakkelijker zal zijn om de structuur en inhoud van webdocumenten te kennen en toegang te krijgen tot DOM-elementen voor D3.js voor datavisualisatie.
- JavaScript: Bekendheid met de basisprincipes en JavaScript-objecten is een vereiste voor het leren en implementeren van D3.js in onze applicatie, zodat datavisualisatie kan worden bekeken op de webserver.
- Web Server: Het is essentieel om een webserver zoals Apache Tomcat of IIS (Internet Information Services) -server te hebben geïnstalleerd, zodat gegevens extern kunnen worden geüpload in een array, object, XML, CSV, JSON-formaten en kunnen worden getransformeerd met behulp van D3. js in visualisatie-indelingen zoals grafieken, diagrammen en geospatiale visualisatie.
Installatie / configuratie van D3.js
Om gegevensvisualisatie op onze webpagina's te creëren, moeten we D3.js opnemen in onze HTML-webpagina.
Het kan op de volgende manieren worden gedaan:
- Download de D3.js-bibliotheek naar onze clientcomputer en voeg het pad van d3.min.js toe aan