Χαρτογράφηση των υδάτων: μεταξύ Bokeh και D3

Χαρτογράφηση των υδάτων: μεταξύ Bokeh και D3

Εισαγωγή

Έρχεται μια στιγμή στη ζωή ενός εκκολαπτόμενου “low-key αλλά επίσης high-key προσπαθώντας να γίνει σχεδιαστής και προγραμματιστής front-end” όταν πρέπει να μπουν στον κόσμο των βιβλιοθηκών χαρτογράφησης.

Οι βιβλιοθήκες χαρτογράφησης παράγουν οπτικοποιήσεις βάσει δεδομένων. Είναι ο λόγος για τον οποίο μπορείτε να κατανοήσετε γρήγορα τις τάσεις στο προσδόκιμο ζωής στο FiveThirtyEight ή να μετρήσετε το εθνικό συναίσθημα για τις επερχόμενες προεδρικές εκλογές (yikes) στους The New York Times.

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

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

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

Ωστόσο, οι βιβλιοθήκες δεν αποτελούν ποτέ ένα μοναδικό μέγεθος συμφωνίας. Τις περισσότερες φορές, η αρχική σας υπόθεση ότι η βιβλιοθήκη είναι η τέλεια αντιστοίχιση θα είναι εσφαλμένη λόγω απρόβλεπτων εμποδίων που εμφανίζονται.

Ίσως σκέφτεστε: "Ποιες είναι αυτές οι επιλογές;", "Πώς προσεγγίσατε την επιλογή;" ή "Γιατί νιώσατε ηλίθιος;" (αναφέρεται στο μήνυμα Slack παραπάνω).

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

Ας ξεκινήσουμε!

Γιατί δοκιμάσαμε πρώτα τον Bokeh

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

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

Μπείτε στο Bokeh.

Σχετικά με τον Bokeh

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

Μπορείτε επίσης να επιλέξετε να χρησιμοποιήσετε τον διακομιστή Bokeh για να χειριστείτε τη ροή των δεδομένων σας. Στην τεκμηρίωση Bokeh 0.12.13, αναφέρεται: "Αυτή η δυνατότητα συγχρονισμού μεταξύ python και του προγράμματος περιήγησης είναι ο κύριος σκοπός του διακομιστή Bokeh."

Πλεονεκτήματα

Το Bokeh είναι μαγικό για πολλούς λόγους. Παρέχει πρώτα τη χρήση WebGL με εναλλακτικό καμβά HTML5, παρέχει αρκετά ενσωματωμένα εργαλεία για την αλληλεπίδραση με γραφήματα, χειρίζεται τρομερά μεγάλα σύνολα δεδομένων και τελικά δημιουργεί κάτι που μπορεί να μεταβεί στον ιστό αμέσως.

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

Μειονεκτήματα

Ένα μειονέκτημα για τον Bokeh, ωστόσο, είναι ότι περιορίζεται στον βαθμό αλληλεπίδρασης που μπορεί να έχει μια οπτικοποίηση. Το Bokeh σάς δίνει τη δυνατότητα να "χαρτογραφήσετε" με την πιο συμβατική έννοια - προσφέρει ένα 2-D, πλέγμα σαν καμβά με άξονες ως βασική γραμμή. Και αυτό είναι εντάξει, γιατί συχνά αυτό είναι που χρειάζεται και θέλει ο χρήστης. Οι έμπειροι χρήστες του Bokeh μπορούν να κάνουν πραγματικά όμορφα πράγματα (δείτε παραδείγματα εδώ).

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

Το Bokeh προορίζεται επίσης για ανάπτυξη στο Python και όχι στο JavaScript. Ακολουθούν παραδείγματα barcharts στο Bokeh που χρησιμοποιούν Python. Είναι εξαιρετικά απλό και καθαρό.

Bokeh Barchart χρησιμοποιώντας Python (μέσω Jupyter Notebook)

Πριν αρχίσουμε να χρησιμοποιούμε το Bokeh, κάναμε τη συνειδητή απόφαση να κάνουμε σενάριο σε JavaScript αντί για Python, επειδή ολόκληρη η εφαρμογή ιστού ήταν και βασίστηκε σε ένα πλαίσιο JavaScript. Κανένα από τα έγγραφα τεκμηρίωσης του Bokeh δεν είναι σε JavaScript (είναι στο Python, όπως θα περίμενε κανείς), και η προσπάθεια να μπείτε κάτω από την κουκούλα JavaScript αποδείχθηκε δύσκολη.

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

Επιπλέον, υπάρχουν περιορισμοί στο JavaScript υψηλού επιπέδου Bokeh.Chartsκαι στα Bokeh.PlottingAPI - ορισμένα έχουν καταργηθεί, άλλα δυσκολεύουν πολύ να αλλάξετε τις δυνατότητες της πλοκής. Τα παρακάτω παραδείγματα είναι οι προσπάθειές μου να δημιουργήσω γραφήματα Bokeh σε JavaScript.

Bokeh Χαμηλού επιπέδου Barchart χρησιμοποιώντας Javascript

Bokeh υψηλού επιπέδου Barchart χρησιμοποιώντας το Bokeh.Charts Javascript API

Περισσότερα για την ανάπτυξη σε JavaScript με το Bokeh εδώ Όπως μπορείτε να δείτε, η JavaScript με τη βιβλιοθήκη του Bokeh χάνει τις απλούστερες γραμμές κώδικα που παρατηρήσαμε κατά την ανάπτυξη με την Python. Νομίζω ότι χρειάστηκε περίπου μια ώρα να παίζω στην κονσόλα για να προσθέσω ένα λευκό περίγραμμα στις μπάρες και έναν τίτλο στο γράφημα υψηλού επιπέδου μου, το οποίο επαναλαμβάνει τον αγώνα μου για πλοήγηση έξω από τα όρια του Bokeh.ChartsAPI JavaScript όταν θέλετε να αλλάξετε οπτικές λεπτομέρειες του γραφήματος.

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Γιατί αλλάξαμε στο D3

Έτσι κολλήσαμε. Είχαμε φτάσει στο σημείο «αυτή η βιβλιοθήκη ταιριάζει με τις ανάγκες μας, αλλά είναι πόνος να συνεχίσουμε να κάνουμε πράγματα σε JavaScript και ίσως θα φτάσουμε στο ανώτατο όριο μια μέρα όταν συνειδητοποιούμε ότι χρειαζόμαστε κάτι που δεν είναι διαθέσιμο στο Bokeh σωστά τώρα." Δροσερός.

Εισαγάγετε D3.

Η αρχική μας ανησυχία με το D3 ήταν ότι θα καθιστούσε τις απεικονίσεις μας πολύ αργά, δεδομένης της προηγούμενης εμπειρίας με την απόδοση των SVG στο πρόγραμμα περιήγησης με μεγαλύτερες ποσότητες δεδομένων. Γνωρίζαμε επίσης ότι η καμπύλη μάθησης για το D3 ήταν σημαντικά υψηλότερη από την καμπύλη μάθησης του Bokeh.

Αλλά ήμασταν ακόμα αισιόδοξοι δεδομένης της δημοτικότητας του D3, του άπειρου αριθμού των όμορφα τεκμηριωμένων εφαρμογών D3, και της στάσης μας "Λήψη Sh * t Done" ... γι 'αυτό αποφασίσαμε να το δοκιμάσουμε ούτως ή άλλως.

Σχετικά με το D3

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

Πλεονεκτήματα

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

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

Είναι σαν σεφ στην κουζίνα που λαμβάνει μια λίστα παραγγελιών ταυτόχρονα και μπορεί να προετοιμάσει το φαγητό με μια παραγγελία που παραλείπει τον περιττό χρόνο αναμονής, αντί να περιμένει πάντα να λάβει την επόμενη παραγγελία μετά την προετοιμασία ενός πιάτου.

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

Το D3 προορίζεται επίσης για ανάπτυξη JavaScript. Δεν θα υπήρχε πλέον «σκάψιμο κάτω από την κουκούλα» του JavaScript API όπως κάναμε με τον Bokeh. Το παράδειγμα barchart που δημιούργησα χρησιμοποιώντας το BokehJS προηγουμένως σε αυτό το άρθρο εμφανίζεται παρακάτω χρησιμοποιώντας τη βιβλιοθήκη D3.

Δ3 Barchart

Ναι, υπάρχουν πιο περίπλοκες γραμμές κώδικα σε σύγκριση με τον κωδικό που απαιτείται για ένα γράφημα Bokeh. Χρειάστηκε περισσότερος χρόνος και ενέργεια για να πάρει. Αλλά έχετε τον πλήρη έλεγχο σε κάθε μικρή λεπτομέρεια του γραφήματος σας, και όλα τεκμηριώνονται κάπου στο διαδίκτυο (πιθανώς μέσω του δημιουργού, Mike Bostock). Αυτό είναι υπέροχο.

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

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

Μειονεκτήματα

Η αρχική καμπύλη εκμάθησης είναι υψηλότερη για το D3 σε σύγκριση με το Bokeh, υποθέτοντας ότι αναπτύσσεστε στο Python με το Bokeh. Το JavaScript είναι πιο ρητό από το Python. Ωστόσο, αν σαν εμάς σκοπεύατε να αναπτύξετε JavaScript, αξίζει να παρακολουθήσετε τα σεμινάρια D3.

Είναι δύσκολο να κατανοήσουμε πώς λειτουργούν οι επιλογές, τι σημαίνουν ακόμη και τα .enter () και .exit (), και η μαγεία που συμβαίνει μόνο με μια απλή γραμμή κώδικα (.transition () κανείς;). ΑΛΛΑ - αφού έχετε τυλίξει το κεφάλι σας γύρω από τη μοναδική δομή του D3, υποθέτοντας ότι τα πράγματα υπάρχουν πριν υπάρξουν, οι πιθανότητες είναι ατελείωτες.

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

συμπέρασμα

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

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

Πρόκειται για εξερεύνηση, τεκμηρίωση και έλεγχο ξανά με τον εαυτό σας και τους συμπαίκτες σας για να συνεχίσετε να εξελίξετε το έργο με παραγωγικούς τρόπους.

Προς τα εμπρός!

Εάν έχετε σχόλια, διορθώσεις, προτάσεις ή απλώς θέλετε να μιλήσετε, μη διστάσετε να με στείλετε e-mail στη διεύθυνση [email protected] Μπορείτε να βρείτε μέρος της δουλειάς μου στη διεύθυνση //mandilicai.com/.