Το D3 δεν είναι μια βιβλιοθήκη οπτικοποίησης δεδομένων

Η κατανόηση που μπορεί να σας βοηθήσει να το μάθετε (και να το ξεχάσετε)

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

Έγραψα ένα βιβλίο για το D3 (δύο φορές), έτσι είμαι σίγουρος ότι σκέφτεστε ότι πρόκειται για κάποιου είδους τίτλο clickbait και ότι πρόκειται να κάνω ένα λεπτό παιχνίδι με λέξεις ή να πω κάτι σαν το D3 δεν είναι μια οπτικοποίηση δεδομένων Βιβλιοθήκη είναι η βιβλιοθήκη οπτικοποίησης δεδομένων. Αλλά όχι, μαζί με τις βασικές λειτουργίες που σας επιτρέπουν να κάνετε οπτικοποίηση δεδομένων, το D3 αποτελείται επίσης από άλλες λειτουργίες που σχετίζονται μόνο εφαπτομενικά με την οπτικοποίηση δεδομένων. Ίσως να εκπλαγείτε από αυτό που δίνεται η αρχική σελίδα D3.

Αλλά μεγάλο μέρος της D3 δεν έχει να κάνει με γραφικά και πολλά από τα μέρη που κάνουν δεν είναι απαραίτητα για να μάθουν να δημιουργούν αποτελεσματική απεικόνιση δεδομένων. Μπορούμε να πάρουμε τη σελίδα API του D3 και να την απεικονίσουμε ως ιεραρχία, τοποθετώντας γραφικά τις λειτουργίες στις ενότητες και τις υποενότητες που περιγράφονται στην τεκμηρίωση. Ακολουθεί το πώς φαίνεται η επιλογή d3 χρησιμοποιώντας αυτήν τη μέθοδο:

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

Ένα ιεραρχικό διάγραμμα των λειτουργιών που αναγράφονται στη σελίδα API του D3, ομαδοποιημένο στην κατηγορία τους (όπως d3-κλίμακα ή d3-array) και υποκατηγορία (εάν υπάρχει, όπως συνεχείς κλίμακες) και στη συνέχεια ομαδοποιημένο και χρωματισμένο και επισημασμένο από το τμήμα του API που αντιπροσωπεύουν. Σε αυτή τη διατύπωση, η λειτουργικότητα απεικόνισης γεωχωρικών δεδομένων είναι μια υποενότητα του dataviz.

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

Αλλά ρίξτε μια ματιά σε αυτό το διάγραμμα παραπάνω. Αν θέλετε να μάθετε πώς να χρησιμοποιείτε το D3 για απεικόνιση δεδομένων, δεν χρειάζεται να μάθετε τίποτα στη δεξιά πλευρά και σχεδόν σίγουρα δεν χρειάζεται να μάθετε τα πάντα στα αριστερά. Στην πραγματικότητα, αν το κάνετε, ίσως να δημιουργείτε τον εαυτό σας για μια χειρότερη πιθανότητα επιτυχίας μακροπρόθεσμα. Θα εξηγήσω καθώς περπατάω μέσα από τις περιοχές του API D3.

ΤΑ ΑΝΤΑΛΛΑΚΤΙΚΑ

Τόσο μεγάλο μέρος αυτού που διαβάζετε στα σεμινάρια D3 επικεντρώνεται στη λειτουργικότητα χειρισμού του DOM. Αυτό περιλαμβάνει το μοτίβο επιλογής / εισαγωγής / εξόδου / ενημέρωσης που πιθανότατα έχετε δει χιλιάδες φορές, αλλά και λειτουργίες ευκολίας για μεταφορά, μεγέθυνση, αποστολή συμβάντων και ακόμη και με τη χρήση του Fetch (το D3 γεύση του οποίου δεν προκαλεί έκπληξη το d3-fetch).

Υπάρχουν χρήσιμες και ενδιαφέρουσες λειτουργίες (όπως το d3-zoom) μαζί με τις ιδιαίτερες γεύσεις D3 της υπάρχουσας λειτουργικότητας ES2015 αν προτιμάτε τον τρόπο γραφής D3. Όμως, ολόκληρο αυτό το τμήμα είναι περιττό εάν χρησιμοποιείτε κάτι σαν το Vue για να δημιουργήσετε τα στοιχεία του DOM σας και ενεργά έρχεται σε σύγκρουση με άλλες μορφές διαχείρισης DOM που απαιτούν hacks ή μικτά συστήματα. Αν εργάζεστε σε περιβάλλον ομάδας, είναι πολύ πιθανότερο η υπόλοιπη ομάδα να είναι πιο εξοικειωμένη με άλλες μεθόδους διαχείρισης DOM από το D3, οπότε υπάρχουν σοβαροί λόγοι για να αποφευχθεί αυτή η πτυχή του D3.

Εξαρτάται από το γιατί είναι τόσο δεμένο με την απεικόνιση δεδομένων: Δεν μπορείτε να απεικονίσετε τα πράγματα αν δεν υπάρχουν στην πραγματικότητα (στο DOM), αλλά επειδή είναι τόσο εμφανή στο API που συναντάμε σε νέα ακροατήρια, σαν να είναι D3 μόνο χρησιμοποιείται εάν χρησιμοποιείτε το D3 για να χειριστείτε το DOM. Έχει επίσης νόημα δεδομένου ότι όταν αναπτύχθηκε αρχικά το D3 (το v3 κυκλοφόρησε το 2013). Υπάρχει ένας άλλος λόγος για τις επιλογές και αυτό είναι δεμένο με κινούμενα σχέδια, τα οποία θα μπει κάτω.

ΤΑ ΑΝΤΑΛΛΑΚΤΙΚΑ

Υπάρχει ένα άλλο σημαντικό τμήμα της βιβλιοθήκης που εκθέτει μια σειρά λειτουργιών που αποτελούν μέρος της διαδικασίας μετασχηματισμού, καθαρισμού και μορφοποίησης δεδομένων. Ορισμένες από αυτές, όπως οι λειτουργίες min και max στο d3-array είναι συντακτική ζάχαρη για λειτουργίες που μπορούν να αντιμετωπιστούν με την βανίλια JavaScript. Άλλοι, όπως το σετ και ο χάρτης, είναι οι γεύσεις D3 που δεν είναι αρκετά ίδιες με το ES2015 Set and Map.

Τα βοηθητικά προγράμματα μορφοποίησης υπάρχουν εκεί αν σας αρέσει η αριθμητική μορφοποίηση στυλ python, κάτι που μου φαίνεται λιγότερο διαισθητικό από τον αριθμό, καθώς και η μορφοποίηση του χρόνου, που σε όλη μου την εμπειρία με το D3 δεν έχω χρησιμοποιήσει ποτέ προτιμώμενη στιγμή ή (πριν από την Στιγμή και τώρα πιο πρόσφατα) Βανίλια επιλογές μορφοποίησης του χρόνου JavaScript. Υπάρχουν, επιπλέον, κάποιες λειτουργίες παρεμβολής που χρησιμοποιούνται εσωτερικά για την τροφοδοσία των ζυγών και της λειτουργικότητας χρώματος, καθώς και πλήθος γεννητριών τυχαίων αριθμών.

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

ΤΑ ΑΝΤΑΛΛΑΚΤΙΚΑ

Η μετάβαση d3 είναι ένας από τους πιο βολικούς τρόπους για να ζωντανέψετε γραφικά στοιχεία στον ιστό και είναι στενά συνδεδεμένος με την επιλογή d3. Αλλά έχω διαπιστώσει ότι η απεικόνιση της απεικόνισης δεδομένων, ενώ είναι εντυπωσιακή και εντυπωσιακή, είναι πολύ χαμηλότερη προτεραιότητα από την κατανόηση του τρόπου παρουσίασης των διαφορετικών τύπων γραφημάτων, τον σωστό σχεδιασμό διαγραμμάτων, την κατανόηση της μορφής στην απεικόνιση δεδομένων και άλλες πτυχές της απεικόνισης δεδομένων πρακτική. Δεδομένου ότι πρέπει να χρησιμοποιήσετε τις επιλογές D3 για να αποκτήσετε πρόσβαση στην κινούμενη εικόνα μέσω d3-transition, είναι μια μεγάλη επένδυση που μπορεί να δαπανηθεί καλύτερα για την εξομάλυνση με άλλους τρόπους.

Μια άλλη πτυχή της κινούμενης εικόνας που καθιστά προαιρετική την εκμάθηση να το κάνουμε με τη D3 είναι ότι υπάρχουν και άλλες βιβλιοθήκες που κάνουν καλή animation, όπως το GSAP, καθώς και λύσεις κινούμενων σχεδίων που είναι εγγενείς στη μέθοδο που χρησιμοποιείτε εσείς (ή η ομάδα σας) για τη διαχείριση DOM.

Τα τμήματα ανάλυσης δεδομένων

Βρίσκουμε πιο κοντά στην απεικόνιση δεδομένων εδώ. Η ανάλυση δεδομένων όπως οι CSV και οι διάφορες γεύσεις (οριοθετημένη με ετικέτες, οριοθετημένη με κόμμα) είναι ένα σημαντικό μέρος της απεικόνισης δεδομένων και δεν έχω δει μια βιβλιοθήκη που το κάνει τόσο εύκολα όπως το d3-dsv. Αλλά πολλά από τα δεδομένα παραγωγής μου έρχονται επεξεργασμένα και διατίθενται ως δομές δεδομένων JavaScript και δεν απαιτούν την επεξεργασία των CSV. Το d3-quadtree είναι μια εκπληκτικά διασκεδαστική και χρήσιμη βιβλιοθήκη για τη χωρική αναζήτηση, αλλά η άμεση εφαρμογή της είναι πολύ σπάνια στον πραγματικό κόσμο (κάτω από τα τετράγωνα της κουκούλας χρησιμοποιούνται για πράγματα όπως τα διαγράμματα δικτύου που έχουν κατασκευαστεί με d3-δύναμη). Οι λειτουργίες binning και εμφύτευσης από τη συλλογή d3 και τη σειρά d3 εμπίπτουν επίσης σε αυτήν την κατηγορία.

ΤΑ ΑΝΤΑΛΛΑΚΤΙΚΑ ΕΝΗΜΕΡΩΣΗΣ ΣΤΟΙΧΕΙΩΝ

Το πραγματικό κρέας του D3 για την απεικόνιση δεδομένων βρίσκεται στις λειτουργίες του για τη διακόσμηση των δεδομένων με οδηγίες σχεδίασης, τη δημιουργία νέων σχετικών δεδομένων από τα δεδομένα προέλευσης, τη δημιουργία διαδρομών SVG και τη δημιουργία στοιχείων απεικόνισης δεδομένων (όπως ένας άξονας) στο DOM από τα δεδομένα και τις μεθόδους σας. Είναι χρήσιμο να διαχωρίσετε τη γραφική λειτουργικότητα του D3 σε γεννήτριες, εξαρτήματα και διατάξεις. Δεδομένου ότι οι διατάξεις και οι γεννήτριες δεν παράγουν στοιχεία DOM, αλλά μόνο πρώτες ύλες για τη δημιουργία στοιχείων DOM, εξακολουθείτε να πρέπει να περάσετε τα δεδομένα που δημιουργούν στο DOM, μια διαδικασία που περιγράφω χρησιμοποιώντας το React σε ένα παλιότερο άρθρο.

Ένα διάγραμμα από το D3.js στην ενέργεια που περιγράφει τη διαφορά μεταξύ γεννητριών, εξαρτημάτων και διατάξεων.

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

Οι λειτουργίες οπτικοποίησης δεδομένων D3

Το σχήμα d3 έχει μια δέσμη πολύ αξιόλογων λειτουργιών που αντλούν μονοπάτια SVG από πίνακες δεδομένων που είναι χρήσιμα στον εαυτό τους και ως μοντέλα για το πώς μπορείτε να δημιουργήσετε τις δικές σας γεννήτριες. Η ενσωματωμένη λειτουργικότητα rendering καμβά είναι ωραία, αλλά υπάρχει μια υπάρχουσα λύση για αυτό στη βανίλια JavaScript: Path2D.

Εκτός από τις γραφικές λειτουργίες, οι κλίμακες και οι διεπαφές δεν δημιουργούν γραφικά, αλλά αποτελούν κλειδί για την προβολή γραφικών σε οπτικό χώρο (είτε μέσα στα όρια ενός γραφήματος είτε με το χρώμα, το εύρος διαδρομής ή άλλα κανάλια που χρησιμοποιούνται για την επικοινωνία οπτικά). Οι κλίμακες δεν παρεμβάλλουν μόνο αριθμούς σε αριθμούς, αλλά μετατρέπονται από έναν τρόπο σε άλλο (όπως με κλίμακες κβαντισμού) και εκθέτουν λειτουργίες ευκολίας όπως υπολογισμό τσιμπουριών κατάλληλων για άξονες.

Η ιεραρχία d3 έχει ιεραρχικές διατάξεις (όπως δενδρογράμματα, treemaps και sunbursts), αλλά και μια ιεραρχική δομή δεδομένων που παρέχει βολικούς τρόπους για την αποκοπή και ανάλυση των ιεραρχικών δεδομένων.

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

Τα σχέδια d3-color και d3-color δεν είναι ο μόνος τρόπος αντιμετώπισης του χρώματος και αν ξεκινάτε απλά, θα πρότεινα να συνεργαστείτε με το chroma.js αντί για τα βοηθητικά προγράμματα χρώματος της D3.

Ο άξονας και οι λειτουργίες βούρτσας στο D3 υποφέρουν από το ίδιο πρόβλημα που κάνει η d3-επιλογή, καθώς φτάνουν στο DOM και δημιουργούν τα ίδια τα στοιχεία. Αυτό σημαίνει ότι είναι πιο δύσκολο να ενσωματωθούν σε μια εφαρμογή που χρησιμοποιεί Vue ή React για τη διαχείριση του DOM.

Ορισμένες λειτουργίες, όπως το καμβά-SVG της d3-διαδρομής, μπορεί να είναι χρήσιμες σε ορισμένες γωνιακές περιπτώσεις, αλλά η πραγματική αξία της μάθησης D3 προέρχεται από την εκμάθηση των διαφορετικών μεθόδων απεικόνισης, όπως τα κύματα, τα περιγράμματα, τα πολυγώνια voronoi και τα διαγράμματα χορδών. Η κατανόηση του τρόπου με τον οποίο λαμβάνουν διαφορετικές μορφές δεδομένων και αντλεί εντολές σχεδίασης μπορεί να σας βοηθήσει να καταλάβετε πώς μπορούν να μετασχηματιστούν τα δεδομένα για τις εφαρμογές σας και πώς αλληλεπικαλύπτονται αυτές οι μεταμορφώσεις.

ΤΟ GEO ΑΝΤΑΛΛΑΚΤΙΚΑ

Ενώ είναι σίγουρα ένα μέρος της περιοχής απεικόνισης δεδομένων του D3, το d3-geo είναι πιθανό να είναι πολύ συγκεκριμένο και όχι τόσο εύκολα ενσωματωμένο σε διαφορετικές περιπτώσεις σχεδιασμού, όπως τα ευρύτερα κομμάτια απεικόνισης δεδομένων. Η δημοτικότητά του είναι καλά δικαιολογημένη, καθώς η D3 έχει γίνει κάτι σαν παιδική χαρά για τους νεογγογράφους που πειραματίζονται με χαρτογράμματα, αναπαράσταση ράστερ και άλλα γεωγραφικά στοιχεία.

Αποτελείται από ένα εκατομμύριο προβολές, ένα ολόκληρο σύστημα ροής προβολής, λειτουργίες για τη μετάφραση του GeoJSON σε μονοπάτια, εύρεση κεντροειδών και πλαισίων οριοθέτησης (χρησιμοποιήστε d3-polygon αν θέλετε αυτό για γενικές γεωμετρίες). Πολλά σφαιρικά μαθηματικά και σφαιρικά σχήματα και steradians.

Το D3 σάς επιτρέπει να κάνετε απλούς χάρτες choroplest, εύκολα, αλλά με μια υψηλή καμπύλη εκμάθησης, αν δεν είστε επαγγελματίας GIS ή ένας παίκτης χαρτών. Δεδομένων των καινοτομιών που συμβαίνουν στο χώρο χαρτογράφησης WebGL, αν θέλετε να κάνετε χάρτες, ίσως θέλετε να εξερευνήσετε πρώτα το kepler.gl ή το Mapbox.

Γιατί αυτό έχει σημασία

Οι άνθρωποι δυσκολεύονται να μάθουν το D3. Αν αναμένεται ότι θα μάθετε πρώτα το τμήμα χειρισμού DOM, μπορεί να είναι ένα εμπόδιο ειδικά όταν εργάζεστε σε ένα έργο όπου αυτό το χειρίζεται ήδη. Το σημείο εκμάθησης του D3 είναι να μάθετε πώς να δημιουργείτε προϊόντα απεικόνισης δεδομένων και αυτό είναι πραγματικά μόνο μέρος της βιβλιοθήκης στην οποία μπορείτε να εστιάσετε αντί της συμπληρωματικής λειτουργικότητας.

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

Μπορεί να βρείτε χρησιμοποιώντας το D3 για να είναι όλα κατάλληλα για την πρακτική σας. Αυτό είναι υπέροχο! Θα πρέπει να αγοράσετε το βιβλίο μου, γιατί εξηγεί πώς να χρησιμοποιήσετε όλα αυτά τα κομμάτια. Αλλά έχω διαπιστώσει ότι αυτό συχνά δεν συμβαίνει με τους ανθρώπους που έρχονται να μάθουν D3 και ως εκ τούτου η κοινότητα οπτικοποίησης δεδομένων χάνει έξω από τις συνεισφορές από προγραμματιστές που πραγματικά απλά ήθελαν να κάνουν οπτικοποίηση δεδομένων. Για αυτούς, ελπίζω ότι έχω κάνει μια αξιοπρεπή δουλειά για να καθορίσω πού θα πρέπει να δούμε και τι πρέπει να επικεντρωθούν όταν πρόκειται για τη μάθηση D3.

Για όσους έχουν ήδη κατακτηθεί το D3, ελπίζω ότι αυτό βοήθησε να περιγράψω πόσο περίπλοκο και εκλεκτικό και διαίσθηση της βιβλιοθήκης μπορεί να εμφανιστεί στους ξένους (και δεν έχω καν να μπει σε όλη την αλυσιδωτή λειτουργία ...). Ας μην υποθέσουμε ότι ο τρόπος με τον οποίο μάθαμε ή χρησιμοποιούμε το D3 είναι ο μόνος τρόπος να το κάνουμε, ακόμα κι αν αυτό σημαίνει ότι εξελίσσεται η πρακτική μας.