[Παίζει μουσική] 

DAVID Chouinard: Είμαι Δαβίδ Chouinard, και αυτό είναι D3. Καλώς ήρθατε. Εμείς πάμε για να μάθουν για D3 σήμερα. D3 είναι ένα πλαίσιο το JavaScript για την οικοδόμηση ενός υψηλής ποιότητας διαδραστικό οπτικοποιήσεις για το web. Τα πράγματα όπως αυτό που είμαστε βλέπουμε στην πλάτη μου, θα πάμε να μάθουν να κάνουν εκείνους τα πράγματα, το είδος των βασικών του. Αλλά πρόκειται να είναι δροσερό. Ας ξεκινήσουμε κάνει όμορφες εικόνες. Έχουμε περισσότερες επιδείξεις των προοπτικών που διανοίγονται. Ας το κάνουμε. 

Πράξη Ι, DOM manipulation-- θα πάμε να ξεκινήσει αμέσως κάνοντας δροσερά πράγματα. Πρώτα απ 'όλα, στα αριστερά, έχουμε κώδικα. Στα δεξιά, έχουμε το αποτέλεσμα του κώδικα μας. Ας πάμε μέσα από αυτό. 

Ας κάνουμε έναν κύκλο. Πώς αυτός ο θόρυβος; svg.append circle-- μόλις κάναμε έναν κύκλο. Δεν με πιστεύετε, έτσι δεν είναι; Δεν είναι εκεί. 

Έτσι, αυτό που κάναμε δικαίωμα αυτό εδώ είναι, SVG είναι scalable vector graphics. Αυτός είναι ο τρόπος με τον οποίο πείτε στον browser να κάνει διανυσματικά γραφικά στο πρόγραμμα περιήγησης. Αυτό που μόλις κάναμε τώρα προστίθεται ένα κύκλο για να περιηγηθείτε. 

Η υπόσχεση είναι ότι ο κύκλος απαιτεί ένα κομμάτι των βασικών χαρακτηριστικών για να μπορέσουμε να δούμε την πραγματικότητα. Πρέπει να το πω x θέση του, θέση Υ του, η ακτίνα του. Εμείς δεν το πω τίποτα από αυτά, γι 'αυτό δεν το βλέπουμε τώρα. Αλλά ας το πω πράγματα. 

Έτσι, πρώτα απ 'όλα, έχετε για να δώσει τον κύκλο μας ένα όνομα. Ας το ονομάσουμε κύκλο. Κύκλος μας έχει ένα όνομα τώρα. Και ας δώσω μερικά χαρακτηριστικά. Πόσο περίπου cx θα πρέπει να εστιαστούν x, έτσι το κέντρο της θέσης x. Ας πούμε, 200 200 pixels. 

Ας δώσουμε μια ομάδα 200 pixels, καθώς και. Και ένα R, μια ακτίνα, περίπου 40 pixels. Τώρα ας δούμε. Δεν μπορώ να συλλαβίσω. 

Εκεί θα πάτε. Έχουμε έναν κύκλο στη θέση 200 pixels, 200 pixels, ακτίνα 40 pixels. Είδος δροσερό, σωστά; Έχουμε έναν κύκλο. Ναι. 

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

Ας κάνουμε περισσότερα πράγματα. Αυτό το μαύρο κύκλο είναι πραγματικά άσχημο. Λυπάμαι για αυτό το σφάλμα μηνύματα εκεί. Εκεί πάμε. 

Ας δώσουμε ένα χρώμα. Πώς σας φαίνεται αυτό; Μου αρέσει να το μπλε χάλυβα. Λοιπόν, τον κύκλο μας άλλαξε χρώμα. Αυτό είναι μεγάλη. Ας το κάνουμε ημι-διαφανές too-- ημι-διαφανές. 

Έτσι, αυτά είναι τα χαρακτηριστικά είμαστε ορισμό στον κύκλο. Το πρώτο πράγμα που κάναμε είναι βάζουμε ένα κύκλο στην σελίδα. Και τότε είμαστε καθορισμό ένα μάτσο χαρακτηριστικά. Μερικά από αυτά είναι απαραίτητα, όπως CX, CY, και η ακτίνα. Και άλλα είναι προαιρετικά. 

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

Ας κάνουν περισσότερα κύκλους. Πώς σας φαίνεται αυτό; Ας κάνουμε έναν άλλο κύκλο. Αυτό είναι συναρπαστικό, έτσι δεν είναι; 

Έτσι λέω απλώς να αντιγράψετε και επικολληθεί από άλλες τι είχαμε ήδη. Ας το ονομάσουμε circle2. Και ας κάνουμε το ακριβές ίδιο πράγμα και να δώσει Χαρακτηριστικά, έχουν ένα Χ, θέση 300. Yay, έχουμε δύο κύκλους τώρα. 

Και φυσικά, θα μπορούσαμε να επικαιροποίηση των αξιών αυτών. Θα μπορούσα να το θέσω σε 400, και τώρα κινείται. Και δεδομένου ότι είναι ενοχλητικό, ας αφαιρέστε το, έτσι circle2.remove. Είναι πλέον φύγει. 

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

Τώρα, εδώ είναι όπου παίρνει ενδιαφέρον. Έτσι, αργότερα στον κώδικα, θα μπορούσαμε ακόμα αναφέρονται στο αρχικό κύκλο εδώ. Ας επαναφορά της ιδιότητάς του να cx. Ας πούμε, χ θέση του 400. Και Πάω να μετάβαση ότι, γι 'αυτό είναι προφανές. Εκεί πάμε. 

Έτσι προσθέσαμε έναν κύκλο. Θέτουμε κάποια χαρακτηριστικά. Προσθέσαμε έναν άλλο κύκλο, αφαιρείται το. Και τότε είμαστε τροποποίηση το αρχικό κύκλο. 

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

Έτσι, αντί να δίνει 400 εδώ, μπορούμε να κάνουμε κάποιους υπολογισμούς on the fly για ό, τι θέλετε αυτό το χαρακτηριστικό να είναι. Έτσι, αυτό είναι το πώς θα ήθελα να εκφράσω αυτό. Εμείς λέμε, αντί για 400, επιτρέψτε μου να να σας δώσω μια λειτουργία αντ 'αυτού. Και εδώ, μέσα αυτή τη λειτουργία, Μπορούμε να κάνουμε οποιοδήποτε τρελό υπολογισμό. 

Θα μπορούσαμε να πάρουμε το χρόνο και εξετάσουμε σε κάποιο άλλο πράγμα και δυναμικά να αποφασίσει για ο κύκλος τι αξία που θέλουμε. Πόσο περίπου δίνουμε ακριβώς είναι μια τυχαία θέση x; Έτσι, αυτό είναι αυτό. 

Έτσι, αυτό που λέει είναι, για κάθε x, εκτελέστε αυτή τη λειτουργία. Και αυτό που κάνουμε είναι υπολογισμό κάποια πράγματα, μια τυχαία φορές το πλάτος και την επιστροφή αυτό. Έτσι, κάθε φορά που τρέχει ότι, έχουμε ένα κύκλο που πηγαίνει σε μια τυχαία θέση. Είναι είδος δροσερό. Νιώθω σαν να μπορούσε να εξετάσει σε αυτό για λίγο. Αρχίζουμε να φτάσετε στο κάτι ενδιαφέρον εδώ. Ας κάνουμε αυτά τα δεδομένα οδηγείται τώρα. Δεν υπάρχει καμία δεδομένα εδώ. Ας το αλλάξουμε αυτό. 

Πράξη ΙΙ, τα δεδομένα με γνώμονα Documents-- Ας επιστρέψουμε εδώ. Και ας απαλλαγούμε από circle2, επειδή είμαστε απλά προσθέτοντας και αφαιρώντας αυτό. Γι 'αυτό και δεν το χρειάζεστε πραγματικά. Πρέπει να είναι πολύ πιο έξυπνος εδώ. Ας πούμε, έχουμε ορισμένα στοιχεία κάποιου είδους. Ένα moment-- ας πούμε, είχαμε δεδομένα αυτής της μορφής. Είχαμε μια σειρά, απλά μια δέσμη των αριθμών. Έχουμε επτά αριθμούς εδώ, όποια και αν είναι αυτά represent-- ποσό σε άτομα τραπεζικό λογαριασμό, πώς πολύ το βάρος τους, ο Θεός ξέρει τι. 

Αυτοί είναι οι αριθμοί, και εμείς θέλετε να χρησιμοποιήσετε κύκλους μας να αντιπροσωπεύουν τους αριθμούς αυτούς με κάποιο τρόπο. Θέλουμε να δέσουν μας κύκλους σε αυτούς τους αριθμούς. Έτσι, ό, τι κάνουμε. Ας πούμε, θέλουμε ένα κύκλος για κάθε αριθμό. Θα μπορούσαμε να κάνουμε το παλιό πράγμα ήμασταν doing-- κύκλος προσάρτησης και circle2 και circle3. Αλλά αυτό παίρνει από το χέρι, και υπάρχει πολλή επανάληψη λογική. 

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

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

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

Είναι ότι τα δεδομένα ήταν δεμένος. Έτσι, κάθε μία από τις τα εν λόγω στοιχεία δεδομένων, 10, 45, 105, ήταν υποχρεωμένη σε ένα συγκεκριμένο κύκλο. Έτσι, αυτοί όχι μόνο δημιούργησε μια δέσμη των κύκλων αλλά δένει αυτά τα δύο πράγματα μαζί. 

Και στο μέλλον, γιατί δημιουργήσαμε αυτούς τους κύκλους με αυτή τη λειτουργία D3, αν μπορώ να σας δώσω έναν κύκλο, μπορείτε να να μου δώσει τα δεδομένα που σχετίζονται με αυτό. Έτσι, μπορούμε να ρωτήσουμε D3. Γεια σου, D3, έχω αυτόν τον κύκλο. Ποια είναι τα δεδομένα που έχει ο κύκλος; Και D3 θα μας πει 10 ή 45 ή 105. 

Αυτά τα πράγματα συνδέονται. Αυτό είναι ένα πολύ, πολύ βασική έννοια. Ας ρίξουμε μια ματιά σε αυτό. 

Έτσι, ο τρόπος με τον οποίο είχα ζητήσει D3-- έτσι Αυτό είναι άσχετο με αυτό, αλλά μόνο την εμπιστοσύνη μου σε αυτό. Αυτό είναι το πώς ζητάμε D3. Γεια σου, D3, να μου δώσει την πρώτη κύκλος που μπορείτε να βρείτε. Δώσε μου τον πρώτο κύκλο που μπορείτε να βρείτε. Και τότε θα μπορούσαμε να ζητήσουμε D3, τι είναι τα δεδομένα για το ότι, όπως αυτό, 10. 

Γι 'αυτό και απλά ρωτήστε D3, βρείτε μου Ο πρώτος κύκλος μπορείτε να βρείτε. Ποια είναι τα δεδομένα του; 10, που είναι πράγματι μας πρώτο στοιχείο δεδομένων. Θα μπορούσαμε να ζητήσουμε, hey, D3, βρείτε μας τρίτο κύκλο μας. 105. Γιατί είναι αυτό το πραγματικά σημαντικό; 

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

Έτσι, αυτό το χ postition-- αντί του ακριβώς λέει, όλους τους ενδιαφερόμενους κύκλους, να πάρει θέση x 200, εμείς θα μπορούσε να δώσει μια λειτουργία. Και εδώ, μπορούμε να κάνουμε κάποιους υπολογισμούς. και d εδώ σημαίνει σε θέση για τα δεδομένα. Έτσι, κάθε φορά που έχουμε ένας κύκλος, βασικά, D3 θα δημιουργήσει αυτά τα επτά κύκλους. Και στη συνέχεια για κάθε 

κύκλος, πρόκειται να πάει, hey, circle1 τι χ θέση σας. Προηγουμένως, ήμασταν πάντα απαντώντας 200. Αλλά τώρα, κάθε φορά που ζητά D3 μας τι χ θέση σας, πρόκειται να δώσει us-- έχουμε αυτόν τον κύκλο, έτσι έχουμε τα δεδομένα. Δεν πρόκειται να μας δώσει τα στοιχεία και να πω, τι θέλεις η έκθεση να είναι, με βάση τα δεδομένα. 

Ας επιστρέψουμε τα πραγματικά δεδομένα. Έτσι, αν τρέξουμε αυτό, αυτό δίνει δεδομένα μας οδηγείται έγγραφα. Αυτές οι κύκλοι με βάση σε σχέση position-- ότι είναι βάσεων ως συνάρτηση των δεδομένων. 

Έτσι, για το πρώτο κύκλο, D3 βάζει ένα κύκλο. Και τότε D3 μας ρωτά, τι κάνουμε θέλετε η έκθεση να είναι. Και απλά λέμε, ό, τι τα δεδομένα. Κάντε την έκθεση 10. 

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

Έτσι το πολλαπλασιάσετε επί 3, πολλαπλασιάστε τα δεδομένα κατά 3. Κύκλος μας πήρε ακριβώς επεκταθεί και έξω. Η αξία μας τριπλασιάστηκε. 

Ο κύκλος είναι πραγματικά στην άκρη, οπότε ας ίσως ένα είδος να την αντισταθμίσουν. Ας πούμε, από 20. Εδώ μπορείτε να πάτε. 

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

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

Έτσι, βέβαια, όλα αυτά τα στοιχεία, Όλα αυτά τα χαρακτηριστικά από εδώ, μπορούμε να χρησιμοποιήσουμε μια συνάρτηση, δεν μόνο οι αριθμοί, όχι μόνο τα x και y θέσεις. Έτσι, μπορούμε να χρησιμοποιήσουμε μια συνάρτηση για το χρώμα. Γι 'αυτό και θα κάνουμε το ίδιο. Θα δώσει μια λειτουργία. 

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

Ας δώσουμε μια εντολή if εδώ. Ας πούμε, αν τα δεδομένα μας είναι λιγότερο από 50, αυτό είναι κάποιο κατώφλι ότι μας ενδιαφέρει μέσα για κάποιο λόγο. Ας το κάνουμε πράσινο. Διαφορετικά, ας κάνουμε το κόκκινο. Πώς σας φαίνεται αυτό; Νίκαιας. 

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

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

Έπειτα επάνω, Πράξη ΙΙΙ, Scales-- Έτσι, ένα πρόβλημα δικαιώματος εδώ είναι, αν αλλάξουμε μας δεδομένα σε αυτό 200 value-- αν θέλουμε να το αλλάξετε σε 400 ή κάτι τέτοιο και ανανέωσης, τότε αυτή η τιμή πήγε ακριβώς offscreen. Έτσι, η λογική μας εδώ του πώς το κάνουμε οι χρόνοι 3 και 20, να απλώνεται και έπειτα να αντισταθμίσει αυτό το κομμάτι είναι πραγματικά ογκώδη. 

Τι σημαίνουν αυτοί οι αριθμοί; Είναι απλά σκληρά κωδικοποιούνται εκεί. Και όπου και αν πολύ δεμένη με τα δεδομένα. Θέλουμε ένα έγγραφο δεδομένων οδηγείται. Θέλουμε ένα πολύ ευέλικτο έγγραφο, ότι τα δεδομένα στοιχεία, προσαρμόζεται σε αυτό και αντιπροσωπεύει. 

Αυτό που χρειαζόμαστε είναι βασικά, εμείς έχουν αυτό το φάσμα των αριθμών 10. 45, 105. Και θέλουμε να χαρτογραφήσει ότι έξω επάνω το πλάτος, το πλήρες πλάτος εδώ. Έτσι έχουμε το εύρος της αριθμοί θα 0-100. Και έχουμε αυτό το πανεπιστήμιο μου πηγαίνει 20-700, σε αυτήν την περίπτωση. 

Είμαστε είδος θέλετε να αντιστοιχίσετε ότι στις. Θέλουμε να αναβαθμίσουν ότι μέχρι και τότε αντισταθμίσει λίγο. Αποδεικνύεται ότι η D3 έχει αυτά. Είναι ονομάζεται κλίμακα. Οπότε ας το χρησιμοποιήσει. 

Ο τρόπος που works-- Πάω να πληκτρολογήστε αυτό και στη συνέχεια να το εξηγήσω. Αυτό είναι μια κλίμακα. Αυτό που θα κάνουμε είναι, θα χαρτογραφήσει τιμές από 1 έως 200 στους 20 έως 600. Μπορούμε να το ελέγξουν. Μπορούμε να δούμε ότι εδώ. 

Έτσι, αν ταΐζω 1-- μια στιγμή. Δώσε μου ένα δευτερόλεπτο. Πρέπει να έχω το λάθος πληκτρολόγησης. Εκεί θα πάτε. Λυπάμαι γι 'αυτό. 

Έτσι τι κλίμακα θα κάνει είναι, θα πάρει μια τιμή και στη συνέχεια να μετατρέψετε ότι, επεκτείνουν ότι έξω, έτσι ώστε να γεμίζει όλο το φάσμα ζητάτε. Έτσι, σε αυτή την περίπτωση, αν θέλουμε να δώσουμε μία, πρόκειται να χαρτογραφήσει ότι έξω επάνω 20. Και αν δίνουμε 200, είναι πρόκειται να χαρτογραφήσει ότι στις 600. Και κάπου στη μέση, αν παίρνουμε 100, είναι πρόκειται να είναι κάπου μεταξύ 20 και 600. 

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

Well-- Ω, έχουμε ένα μικρό λάθος εδώ. Είμαστε ελλείποντα στοιχεία. Εκεί θα πάτε. Και αυτό επεκτείνεται έξω. 

Αυτό μας δίνει το ίδιο αποτέλεσμα που είχαμε πριν, αλλά αντί εκείνων σκληρό κωδικοποιούνται περιορισμούς. Και αν το μέγεθος της μας αλλαγές καμβά, για παράδειγμα, αν θέλουμε να έχουμε αυτό ξανά 400 pixels και squishes έξω, μπορούμε να την έχουμε over-- μπορούμε να το επεκτείνει, ή εμείς μπορεί να μειώσει αυτό το αριστερό περιθώριο κάτι λιγότερο ή περισσότερο από 20. Οι αριθμοί αυτοί, αυτοί σκληρά κωδικοποιημένες αριθμοί κάνουν τώρα νόημα για μας. 

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

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

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

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

Και αντί να Αυτό το είδος της λογικής ογκώδη έχουμε εδώ με την εξαρτάται από εκεί, θα μπορούσαμε να έχουμε μια something-- γραμμική κλίμακα μεταξύ αυτών. Γι 'αυτό και θα χρησιμοποιήσει την κλίμακα που μόλις που δημιουργήθηκε, το οποίο ονομάσαμε χρώμα. Και είχαμε δώσει D, η οποία Είναι το στοιχείο δεδομένων μας. Και εκεί θα πάμε. Έχουμε μια χρωματική κλίμακα. 

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

Πράξη IV, Με Εργασίας Data-- το πρώτο πράγμα εμείς θα θελήσετε να κάνετε για να μας οπτικοποίηση πιο ενδιαφέρουσα είναι να μετακινήσετε τα δεδομένα κάπου αλλού. Είναι πολύ ογκώδη για να έχουν τα δεδομένα του σκληρού κωδικοποιηθούν εδώ. Και γενικά, θα είμαστε ζητώντας κάποιος άλλος για τα δεδομένα. Θα ζητήσουμε ίσως από την κυβέρνηση, Το Census Bureau, τι είναι τα δεδομένα σας και, στη συνέχεια, ότι συνωμοτούν ή ρωτώντας κάποια οντότητα τρίτους για ορισμένα δεδομένα και στη συνέχεια την οικοδόμηση ενός οπτικοποίηση σε αυτό. 

Έτσι, το πρώτο πράγμα που θέλουμε να κάνουμε είναι να μετακινήσετε ότι κάπου αλλού. Έτσι, Πάω να δημιουργήσει ένα αρχείο εδώ ονομάζεται data.json. JSON είναι η μορφή των δεδομένων. Δεν χρειάζεται να γνωρίζετε πολλά για αυτό. Και θα πάμε να αντιγράψετε το λίγα στοιχεία που έχουμε εκεί, επικολλήσετε εκεί αυτολεξεί, πηγαίνετε πίσω στον κωδικό οπτικοποίηση μας εδώ, και να χρησιμοποιήσετε αυτή τη λειτουργία εδώ. Δεν χρειάζεται να γνωρίζουν τις λεπτομέρειες. Αλλά αυτό που θα κάνουμε είναι, θα βρείτε αυτό το αρχείο, φέρω αυτό, και να το επιστρέψετε σε μας. Έτσι τι είναι αυτό, πηγαίνει και να πάρει το αρχείο data.json. Και τότε όλος ο κώδικας που είναι εσοχή inside-- κατ 'ουσίαν, όλος ο κώδικας που έχουμε there-- θα τρέχει μόνο όταν παίρνουμε πίσω τα δεδομένα. Και στη συνέχεια, πρόκειται να τρέξει ότι κώδικας με τα δεδομένα που έχουμε. Μεγάλη, έχουμε ένα απεικόνισης που ερωτήματα για κάποιο κώδικα κάπου άλλο, το οποίο είναι συνήθως όπου διερωτάται κάποια δεδομένα από κάπου αλλού, η οποία είναι συνήθως πώς λειτουργούν απεικονίσεις. 

Αλλά θέλω να πάω πίσω στα δεδομένα. Έτσι, τα δεδομένα θεμελιωδώς D3-- D3 καταναλώνει δεδομένα που είναι μια λίστα με τα πράγματα. D3 αναμένει τα δεδομένα είναι απλώς μια λίστα των πραγμάτων, μια σειρά από πράγματα. Δεν έχει σημασία τι αυτά τα πράγματα είναι, εφ 'όσον αυτό είναι μια σειρά από αυτά. 

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

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

Έτσι και πάλι, αυτό είναι μια λίστα με τα πράγματα. D3 δεν με νοιάζει. Αυτά τυχαίνει να είναι ένα string. Έχουμε αλλάξει τα δεδομένα μας. 

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

Λοιπόν, τι θα κάνουμε is-- κάθε φορά μας συνάρτηση καλείται με ένα κορδόνι, θα βρείτε ότι είναι το μήκος και στη συνέχεια να περάσει ότι σε κλίμακα. Το χρώμα, εγώ θα επιστρέψει ότι σε μπλε χάλυβα. Και εκεί θα πάμε. Έχουμε μια απεικόνιση του Crimson πρωτοσέλιδα. 

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

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

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

Αλλά αν δεν βρούμε μια του παχέος εντέρου, εμείς θα επιστρέψει πράσινο. Και αν το κάνουμε, εμείς θα επιστρέψει κόκκινο. Έτσι και πάλι, ότι πρωτοσέλιδα έχουν μια άνω και κάτω τελεία θα είναι κόκκινο. Αυτό είναι ό, τι αυτό means-- ωραίο. 

Φαίνεται, λοιπόν, ότι μου υπόθεση ανεβαίνει. Υπάρχουν μόνο δύο. Έχουμε μόνο έξι σημεία δεδομένων και μόνο δύο είχαν άνω και κάτω τελεία. Φαίνεται, όμως, λίγο περισσότερο στο κάτω άκρο, στην πραγματικότητα. Τίτλοι με άνω και κάτω τελείες φαίνεται σε γενικές γραμμές να είναι μικρότερη, τουλάχιστον στα δεδομένα μας set-- ενδιαφέρουσα. 

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

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

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

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

Έτσι, εδώ, είναι η ίδια έννοια. Αλλά τώρα, d περιέχει περισσότερα πράγματα. δ περιέχει πολλά στοιχεία δεδομένων. Γι 'αυτό και λαμβάνουμε D πίσω. D3 μας δίνει δ. Και εμείς ανταποκρινόμαστε με την εύρεση του μεγέθους d και στη συνέχεια παρόδω ότι στην κλίμακα. 

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

Ας ανανεώσετε. Νίκαια, έχουμε μια απεικόνιση. Είναι ενδιαφέρον να note-- έτσι υπάρχουν δύο σημεία δεδομένων τα οποία είναι σχεδόν ακριβώς πάνω από κάθε αφετέρου, από άποψη μεγέθους. Θα δείτε αυτό από την αδιαφάνεια που χρησιμοποιούμε. 

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

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

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

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

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

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

Πρώτα απ 'όλα, επιτρέψτε μου να δείχνουν σας ότι, ναι, έχουμε ένα χάρτη. Οι χάρτες είναι δροσερό. Ας ρίξουμε μια ματιά σε αυτό συνάρτηση παραγωγής. 

Η προβολή είναι πολύ σαν κλίμακα, κλίμακες και πάλι. Έτσι, ό, τι η παραγωγή για Αυτή η λειτουργία προβολής δεν είναι, θα μπορούσαμε να το περάσει γεωγραφικό μήκος και latitudes-- σε αυτή την περίπτωση, Αυτές οι τιμές εδώ είναι η LAT-λαχταρά του κτιρίου καθόμαστε στο δεξί now-- για προβολή. Και προβολή θα μετατρέψει ότι σε τιμές εικονοστοιχείων x και y. 

Λοιπόν, τι κάνει προβολή είναι πολύ παρόμοια με κλίμακα μας. Είναι λαμβάνοντας γεωγραφικά πλάτη μας και γεωγραφικού μήκους που αντιπροσωπεύει μια ολόκληρη υδρόγειο και συρρικνώνεται και διαστασιολόγηση ότι κάτω στην πλατεία που θέλουμε, ότι έχουμε δώσει. Σε αυτή την περίπτωση, είμαστε περνά αυτές τις τιμές. Και αυτό μας έδωσε, επίσης, ότι στην οθόνη σας μέσα 640 pixels. Όλη αυτή η οθόνη είναι 700 pixels ευρύ, ώστε να μας κάνει για εδώ, και 154 pixel κάτω, την οποία θα εκτίμηση είναι λίγο πολύ εδώ. 

Έτσι, λαμβάνοντας τα lat-επιμήκη προϊόντα, τα οποία αντιπροσωπεύουν κάτι για όλη την υδρόγειο και squishing και κινείται γύρω από αυτό να μας χ και γ τιμών pixel δώσει, Αυτό είναι το πρώτο πράγμα που είναι γίνεται σε αυτόν τον κώδικα χαρτογράφησης. Και στη συνέχεια το υπόλοιπο του κώδικας καταναλώνει τα δεδομένα και στη συνέχεια αντιστοιχίζει αυτά τα lat-λονγκ σε κάτι στην οθόνη σας. 

Αλλά θα πάμε να χρησιμοποιήσετε αυτήν την προβολή λειτουργιών, επειδή αποδεικνύεται έχουμε LAT-λονγκ λαχταρά, καθώς και. Κοιτάζοντας πίσω στα δεδομένα μας, έχουμε γεωγραφικά πλάτη και συντεταγμένες γεωγραφικού μήκους για κάθε παρατήρηση. Έτσι ας χρησιμοποιήσουμε προβολή. 

Έτσι, κοιτάζοντας έκθεση μας, θέλουμε exposition-- μας έχουμε ένα γεωγραφικό πλάτος και γεωγραφικό μήκος. Αλλά θέλουμε τιμές των pixel. Και αποδεικνύεται, έχουμε ακριβώς τι want-- προβολή. Μοιάζει πολύ ήμασταν χρησιμοποιώντας κλίμακα εδώ, Τώρα πρόκειται να χρησιμοποιήσει προβολή και να περάσει συντονίζει. Έτσι, το πρώτο πράγμα είμαστε doing-- έτσι είμαστε πάρει ά, το οποίο είναι ένα ατομικά δεδομένα στοιχείο ενός μεμονωμένου σεισμού ανάγνωση. Το πρώτο πράγμα που κάνουμε είναι να πάρετε τις συντεταγμένες. Εντάξει, έχουμε τις συντεταγμένες. 

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

Εμείς θα κάνουμε το ίδιο για το y. Αλλά αντ 'αυτού, εμείς θα επιστρέψει Το δεύτερο στοιχείο, το y. Ετοιμαστείτε για να ανανεώσετε. Ooh, επιπλέον χαρακτήρα here-- ωραίο, έχουμε ένα τα δεδομένα με γνώμονα έγγραφο που είναι απόκρυψη αυτού του αρχείου JSON των αντικειμένων, κάνοντας ένα χάρτη, και η αλλαγή της αποδίδουν σε σχέση με τα δεδομένα να την προβάλουν σε ένα χάρτη. Αυτό είναι πραγματικά ενδιαφέρουσα. Αυτό είναι δροσερό. 

Ας το πάρει επάνω μια εγκοπή. Θέλω να πω, έχουμε δύο κομμάτια πληροφορίες με κάθε σημείο δεδομένων. Θέλω να πω, τρία. Έχουμε τις συντεταγμένες, το οποίο είναι ένα x και y. Και έχουμε το μέγεθος. 

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

Ας κάνουμε ακτίνα. Νομίζω ότι η ακτίνα είναι η πιο διαισθητική. Έτσι και πάλι, θα αντικαταστήσει ότι hard-coded 40 και να κάνει μερικούς υπολογισμούς. Θα χρησιμοποιήσουμε και πάλι το αγαπημένο μας κλίμακα. Και είμαστε το παρελθόν d. Αλλά δεν είναι d γιατί θέλουμε το μέγεθος του δ. δ ακριβώς είναι το σημείο δεδομένων. Θα περάσει το μέγεθος κλίμακα. 

Ας το δοκιμάσουμε ξανά. Ooh, αυτό δεν λειτουργεί. Γιατί δεν λειτουργεί; 

Έτσι θυμηθείτε τι κάνει κλίμακα. Ας ρίξουμε μια ματιά σε κλίμακα και πάλι. Χάρτες κλίμακας 1 έως 10 για σε 22 έως 600, περισσότερο ή λιγότερο. 600 είναι τεράστια. Αυτός είναι ο λόγος που είμαστε να πάρει αυτό. 

Έτσι θέλουμε να αλλάξουμε κλίμακα μας σε κάτι πιο λογικό. Ας πούμε, θέλουμε 0-60. 60 είναι μεγάλη, αλλά 10 σεισμοί είναι απίστευτα σπάνια. Στην πραγματικότητα, ποτέ δεν έχω συνέβη. 

Έτσι αυτό που θα κάνουμε είναι, θα πάρει μεγέθους μας που πηγαίνει 1 - 10 και το χάρτη για να το αναπτύξετε. Και χάρτη για να 0-60. Ας ανανεώσετε. 

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

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

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

Φαίνεται έχουμε ένα επιπλέον ερωτηματικό εδώ. Έτσι, αν αιωρείται πάνω από εδώ, γίνεται πλήρης. Αλλά τώρα, φυσικά, παραμένει γεμάτο, γιατί εμείς Πρέπει να περιγράψει τι συμβαίνει όταν αφαιρείτε δρομέας μας. Ας κάνουμε ακριβώς ότι στις MouseOut, σε αντίθεση με mouseover. 

Και θα γίνει επαναφορά στο τι είχαμε before-- 0.5. Και τώρα, κάθε φορά που hover, έχουμε έναν πλήρη κύκλο. Αυτό μας βοηθά να δούμε τι μπορούμε είμαστε επιλέγοντας ουσιαστικά. 

Και τώρα ας κάνουμε αυτό πραγματικά μεγάλη. Ας συνδέσετε αυτό σε πραγματικά δεδομένα. Ας ζητήσουμε μπορούσε USGS για τα δεδομένα τους. Έτσι, το αμερικανικό Γεωλογικό Ινστιτούτο διαθέτει στοιχεία σχετικά με τους σεισμούς. Έχουν ένα κοινό API που είναι σε θέση πρέπει να καταναλώνεται σε μορφή JSON. Ας το κάνουμε αυτό. 

Έτσι, αυτό είναι ένα κομμάτι του κώδικα που συνδέεται με το USGS API. Και υπάρχει ένα κομμάτι της επεξεργασίας σε αυτό. Αυτό δεν έχει σημασία, αλλά απλοποιεί σε μια απλή μορφή δεδομένων, όπως αυτή είχαμε πριν. Έτσι μπορώ να απαλλαγώ από το αίτημά μας για ψεύτικο data.json μας στο αρχείο. Και αντ 'αυτού, καλώ το USGS ουσιαστικά. 

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

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

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