D3.js Tutorial - Πλαίσιο οπτικοποίησης δεδομένων για αρχάριους

d3 js tutorial data visualization framework

Αυτό το D3.js Tutorial εξηγεί τι είναι το D3.js, τα οφέλη, τις δυνατότητές του, τη διαδικασία εγκατάστασης βήμα προς βήμα και πολλά πρακτικά παραδείγματα, ώστε να μπορείτε να μάθετε γρήγορα το D3.js:

Αυτό το σεμινάριο περιγράφει πώς το D3.js, μια βιβλιοθήκη JavaScript ανοιχτού κώδικα βάσει δεδομένων μπορεί να χρησιμοποιηθεί στην οπτικοποίηση δεδομένων χρησιμοποιώντας HTML, Document Object Model (DOM), Cascading Style Sheets (CSS), Scalable Vector Graphics (SVG), Canvas και JavaScript μέσω προγράμματος περιήγησης ιστού.

Χρησιμοποιώντας αυτό το πλαίσιο, εξωτερικά δεδομένα σε μορφή XML, CSV ή JSON μπορούν να μετατραπούν σε γραφήματα, γραφήματα ή πολλαπλές μορφές οπτικοποίησης, μέσω διακομιστή ιστού.

Σε αυτό το σεμινάριο, θα μάθουμε για όλες τις λειτουργίες από αυτήν τη βιβλιοθήκη JavaScript και θα δούμε πώς μπορούμε να τις χρησιμοποιήσουμε για να οπτικοποιήσουμε τα δεδομένα μέσω ενός διακομιστή ιστού χρησιμοποιώντας ένα πρόγραμμα περιήγησης ιστού.

Ας αρχίσουμε!!

Τι θα μάθετε:

• Τι είναι το D3.js
  • Χαρακτηριστικά του D3.js
  • Οφέλη από τη χρήση του D3.js
  • Προϋποθέσεις για να μάθετε D3.js
  • Εγκατάσταση / ρύθμιση D3.js
  • Εγκατάσταση του Apache Tomcat - Διακομιστή Web
• Κατανόηση των εννοιών και των προτύπων Ιστού
• Διάφορες μέθοδοι και API από τη βιβλιοθήκη D3.js
  • Προσθήκη μορφών SVG σε στοιχείο HTML Με d3.select ()
  • Μετασχηματισμός μορφών SVG
  • Παράδειγμα μετασχηματισμού SVG
  • Λειτουργίες για την εύρεση στατιστικών στοιχείων μιας σειράς
  • API μεταβάσεων D3.js
  • API συλλογής D3.js
  • API Χαρτών
  • Ορίζει API
  • API διαδρομών
• συμπέρασμα
  • Συνιστώμενη ανάγνωση

Τι είναι το D3.js

Το D3.js είναι ένα πλαίσιο βάσει δεδομένων που είναι μια ελαφριά βιβλιοθήκη JavaScript και απαιτεί λιγότερες γραμμές κώδικα, κατάλληλο για το χειρισμό μεγάλων δεδομένων για τη λήψη διαδραστικών διαγραμμάτων οπτικοποίησης δεδομένων, γραφημάτων και γεωχωρικών χαρτών.

Πρόκειται για μια βιβλιοθήκη ανοιχτού κώδικα JavaScript που χρησιμοποιείται κυρίως για τη γραφική απεικόνιση γραφικών χειρισμών στοιχείων DOM ιστοσελίδων για εξερεύνηση και ανάλυση δεδομένων.

Τα δεδομένα που αποθηκεύονται σε μορφές δεδομένων όπως ένας πίνακας, XML, CSV και JSON μπορούν να μετατραπούν σε γραφήματα, γραφήματα και πολλούς τρόπους με την προσάρτηση στοιχείων HTML, καμβά ή ομαδοποίησης σχημάτων κλιμακούμενων διανυσματικών γραφικών (SVG) χρησιμοποιώντας αυτήν τη βιβλιοθήκη JavaScript.

Μεγάλα δεδομένα, όπως εγγραφές λεπτομερειών κλήσεων από κινητές συσκευές και άλλες συσκευές, μηνύματα, συζητήσεις ή αρχεία καταγραφής twit από πλατφόρμες κοινωνικών μέσων όπως Twitter, Facebook, WhatsApp, αρχεία καταγραφής από τάσεις αγοράς και αρχεία καταγραφής πληροφοριών συναλλαγών μπορούν να μετατραπούν σε γραφήματα, γραφήματα ή διάφορες οπτικοποίηση χρησιμοποιώντας αυτήν τη βιβλιοθήκη JavaScript.

Από την έλευση διαφόρων πλατφορμών κοινωνικής δικτύωσης όπως το Twitter, το Facebook και το WhatsApp, διάφορες επικοινωνίες όπως twit, μηνύματα και αρχεία καταγραφής σχολίων μπορούν να καταγραφούν και να μετατραπούν σε οπτικές μορφές όπως γραφήματα, γραφήματα κ.λπ. για να κατανοήσουν τα δημοφιλή θέματα και να δημιουργήσουν συναίσθημα. ανάλυση.

Γίνεται εύκολο να κατανοήσουμε τον τρόπο λειτουργίας μιας ομάδας αρχείων λεπτομερειών κλήσεων ύποπτου από πύργους τηλεπικοινωνιών και να παρακολουθήσουμε το μοτίβο κλήσεών τους σε περίπτωση εμπλοκής σε ύποπτες εγκληματικές δραστηριότητες.

Με βάση τις αλλαγές που πραγματοποιούνται σε ένα χρηματιστήριο, ένας δείκτης μετοχών όπως το Bombay Stock Exchange (BSE), το Εθνικό Χρηματιστήριο (NSE), που αντικατοπτρίζει την εξέλιξη των τιμών των μετοχών αποφασίζει τα συναισθήματα της αγοράς και καθοδηγεί τους επενδυτές στην αγορά ή την πώληση αποθέματος.

Το D3.js μπορεί να μετατρέψει δραστηριότητες μεριδίου αγοράς για να δημιουργήσει γραφήματα ή γραφήματα που μπορούν να προβλέψουν γρήγορα την πιθανότητα τάσεων της αγοράς ή δεδομένα κινητής τηλεφωνίας με τη μορφή αρχείων λεπτομερειών κλήσεων για τη διερεύνηση τυχόν εμπλοκής υπόπτων σε εγκλήματα ή πληροφορίες σχετικά με την προγνωστική έρευνα.

Χαρακτηριστικά του D3.js

• Με βάση τα δεδομένα: Χρησιμοποιείται κυρίως για την εξερεύνηση και ανάλυση δεδομένων και τη δημιουργία διαδραστικών γραφημάτων σε πραγματικό χρόνο, διαγραμμάτων και εκτεταμένων τρόπων οπτικοποίησης των δεδομένων.
• Χειρισμός DOM: Πρόκειται για μια βιβλιοθήκη JavaScript ανοιχτού κώδικα που μετατρέπει δεδομένα σε διάφορες μορφές οπτικοποίησης με χειρισμό στοιχείων DOM.
• Χρησιμοποιεί πρότυπα Web: Χρησιμοποιεί το Document Object Model (DOM), HTML, Cascading Style φύλλα (CSS), Scalable Vector Graphics (SVG) και καμβά για τη δημιουργία μορφών οπτικοποίησης δεδομένων.
• Γρήγορο και διαδραστικό: Έχει μεγάλη ανταπόκριση στην αλλαγή δεδομένων και μπορεί γρήγορα να κινήσει ή να μετατρέψει επιλεγμένο στοιχείο DOM από τη μία κατάσταση στην άλλη κατάσταση.
• Δυναμικές μεταβάσεις οθόνης: Αυτή η βιβλιοθήκη έχει σχεδιαστεί για να δημιουργήσει μια γρήγορη δυναμική μετάβαση για τη δημιουργία γρήγορης απόκρισης οπτικοποίησης με το DOM.

Οφέλη από τη χρήση του D3.js

• Είναι μια βιβλιοθήκη JavaScript ανοιχτού κώδικα που μπορεί να χρησιμοποιηθεί μαζί με άλλα πλαίσια JavaScript όπως Angular.JS, Ember.JS ή React.
• Αυτή η βιβλιοθήκη είναι ανοιχτού κώδικα, οπότε μπορεί κανείς να προσθέσει τις δικές της δυνατότητες στον πηγαίο κώδικα για να επιτύχει τους στόχους της.
• Διαχειρίζεται πρότυπα ιστού όπως DOM, HTML, CSS, SVG και καμβά, επομένως δεν χρειάζεται καμία άλλη προσθήκη εκτός από ένα πρόγραμμα περιήγησης, δεν χρειάζεται πρόσθετο εργαλείο εντοπισμού σφαλμάτων ή εκμάθησης.
• Μπορεί να δημιουργήσει δυναμικό, σε πραγματικό χρόνο μετασχηματισμό χειραγωγώντας στοιχεία DOM, γρήγορα σε οπτικοποίηση δεδομένων χωρίς καθυστέρηση.
• Λειτουργεί σε δεδομένα και είναι εξειδικευμένο και κατάλληλο με λειτουργίες οπτικοποίησης δεδομένων που περιέχονται στη βιβλιοθήκη JavaScript.

Προϋποθέσεις για να μάθετε D3.js

• Επεξεργαστής κειμένου: Απαιτείται ένας επεξεργαστής κειμένου όπως το Σημειωματάριο ++ ή Vim για τη σύνταξη κώδικα προγραμματισμού όπως HTML, CSS, JavaScript και ενσωμάτωσή τους για την παραγωγή της επιθυμητής απαίτησης.
• Φυλλομετρητής: Οποιοδήποτε από τα σύγχρονα προγράμματα περιήγησης ιστού, όπως Firefox, Google Chrome, Safari, Opera ή IE9 πρέπει να εγκατασταθεί για να ελέγξει και να επαληθεύσει την έξοδο που παράγεται μετά την ενσωμάτωση του κώδικα.
• HTML: Η καλή κατανόηση των ετικετών και της δομής HTML θα σας βοηθήσει να δημιουργήσετε μια βασική ιστοσελίδα και να ευθυγραμμίσετε στοιχεία για να φέρετε την οπτικοποίηση στο επόμενο επίπεδο.
• CSS: Το Cascading Style Sheet (CSS) χρησιμοποιείται για την εφαρμογή στυλ που περιλαμβάνουν σχεδιασμό, διάταξη και μέγεθος οθόνης σε ιστοσελίδες.
• ΚΡΙΣΗ: Η ισχυρή κατανόηση του μοντέλου αντικειμένου εγγράφου (DOM) είναι απαραίτητη, καθώς θα είναι ευκολότερο να γνωρίζετε τη δομή και το περιεχόμενο των εγγράφων ιστού, να έχετε πρόσβαση σε στοιχεία DOM για D3.js για οπτικοποίηση δεδομένων.
• JavaScript: Η εξοικείωση των βασικών στοιχείων και των αντικειμένων JavaScript είναι απαραίτητη προϋπόθεση για την εκμάθηση και την εφαρμογή του D3.js στην εφαρμογή μας, έτσι ώστε η οπτικοποίηση δεδομένων να μπορεί να προβληθεί στον διακομιστή ιστού.
• Διακομιστής Ιστού: Είναι απαραίτητο να εγκαταστήσετε έναν διακομιστή ιστού όπως ο διακομιστής Apache Tomcat ή οι υπηρεσίες IIS (Internet Information Services), έτσι ώστε τα δεδομένα να μπορούν να φορτωθούν εξωτερικά σε μορφές πίνακα, αντικειμένων, XML, CSV, JSON και να μετατραπούν με τη βοήθεια του D3. js σε μορφές οπτικοποίησης όπως γραφήματα, γραφήματα και γεωχωρική οπτικοποίηση.

Εγκατάσταση / ρύθμιση D3.js

Για να δημιουργήσουμε οπτικοποίηση δεδομένων στις ιστοσελίδες μας, πρέπει να συμπεριλάβουμε το D3.js στην ιστοσελίδα HTML.

Μπορεί να γίνει με τους ακόλουθους τρόπους:

• Κατεβάστε τη βιβλιοθήκη D3.js στον υπολογιστή-πελάτη μας και συμπεριλάβετε τη διαδρομή του d3.min.js