Η οπτικοποίηση δεδομένων είναι ένα σημαντικό μέρος της αφήγησης ιστοριών, αλλά μπορείτε να χαθείτε στα ζιζάνια με το D3.js για ώρες μόνο για να δημιουργήσετε μερικά απλά γραφήματα. Εάν τα γραφήματα είναι το μόνο που χρειάζεστε, υπάρχουν πολλές βιβλιοθήκες που τυλίγουν το D3 και σας παρέχουν βολικούς τρόπους για να δημιουργήσετε απλές απεικονίσεις. Αυτήν την εβδομάδα, θα αρχίσουμε να βλέπουμε το React-vis, μια βιβλιοθήκη χαρτογράφησης που δημιούργησε η Uber και ανοιχτού κώδικα.
Το React και το d3.js έχουν μια ενδιαφέρουσα σχέση. Το React έχει να κάνει με τη δηλωτική απόδοση των στοιχείων και το D3.js έχει να κάνει με τον υποχρεωτικό χειρισμό στοιχείων DOM. Είναι δυνατή η χρήση τους μαζί αναφs, αλλά είναι πολύ καλύτερο να ενσωματώνουμε όλο τον κώδικα χειραγώγησης σε ένα ξεχωριστό στοιχείο, ώστε να μην χρειάζεται να αλλάζετε τα περιβάλλοντα τόσο πολύ. Ευτυχώς, η βιβλιοθήκη React-vis το κάνει ήδη για εμάς με μια σειρά από συνθετικά στοιχεία που μπορούμε να χρησιμοποιήσουμε για να δημιουργήσουμε τις απεικονίσεις μας.
Ο καλύτερος τρόπος για να δοκιμάσετε βιβλιοθήκες οπτικοποίησης δεδομένων, ή οποιαδήποτε βιβλιοθήκη πραγματικά, είναι να δημιουργήσετε κάτι μαζί της. Ας το κάνουμε αυτό, χρησιμοποιώντας το σύνολο δεδομένων Δημοφιλή ονόματα μωρών της πόλης της Νέας Υόρκης.
Προετοιμασία των δεδομένων για React-vis
Για να ξεκινήσω, έχω ξεκινήσει ένα έργο React με δημιουργία-αντίδραση-εφαρμογή και πρόσθεσε μερικές εξαρτήσεις: αντιδράσει, d3-fetch για να τραβήξετε τα δεδομένα CSV και στιγμή για βοήθεια με τη μορφοποίηση ημερομηνίας. Έβαλα επίσης λίγο κώδικα boilerplate για να τραβήξω και να αναλύσω το CSV που περιλαμβάνει τα δημοφιλή ονόματα που χρησιμοποιούν d3-ανάκτηση. Σε μορφή JSON, το σύνολο δεδομένων που τραβάμε έχει περίπου 11.000 σειρές και κάθε καταχώριση μοιάζει με αυτήν:
{ "Έτος γέννησης": "2016",
"Γυναικείο φύλο",
"Εθνικότητα": "ΑΣΙΑ ΚΑΙ ΕΙΡΗΝΑ ΝΗΣΙΑ",
"Όνομα παιδιού": "Olivia",
"Count": "172",
"Κατάταξη": "1"
}
Επειδή τα κενά στα πλήκτρα και οι αριθμοί που αναπαρίστανται ως συμβολοσειρές θα καθιστούσαν αυτά τα δεδομένα άβολα για εργασία, θα τροποποιήσουμε τα δεδομένα κατά το χρόνο φόρτωσης για να κάνουμε κάποιο μασάζ. Αυτός ο κωδικός χρησιμοποιεί απλά το dsv μέθοδο από d3-λήψη:
εισαγωγή {dsv} από το "d3-fetch";εισαγωγή στιγμής από τη στιγμή
dsv (",", dataUrl, (d) => {
ΕΠΙΣΤΡΟΦΗ {
yearOfBirth: + d [«Έτος γέννησης»],
φύλο: δ [«Φύλο»],
εθνικότητα: d [«Ethnicity»],
Όνομα: d [«Όνομα παιδιού»],
μέτρηση: + d ['Count'],
κατάταξη: + d ['Rank'],
};
});
Τώρα τα δεδομένα εισόδου μας είναι πολύ πιο φιλικά. Μοιάζει με αυτό:
{ "yearOfBirth": 2016,
"γυναικείο φύλο",
"εθνικότητα": "ΑΣΙΑ ΚΑΙ ΕΙΡΗΝΑ ΝΗΣΙΑ",
"firstName": "Olivia",
"μέτρηση": 172,
"rank": 1
}
Η πρώτη μας πλοκή με το React-vis
Το πρώτο συστατικό που πιθανότατα θα χρησιμοποιείτε είναι κάποια μορφή XYPlot, το οποίο περιέχει άλλα στοιχεία και υπάρχει σε σχεδόν κάθε γράφημα που δημιουργείτε. Αυτό είναι ως επί το πλείστον απλώς ένα περιτύλιγμα που καθορίζει το μέγεθος της οπτικοποίησης, αλλά μπορεί να περιλαμβάνει και κάποιες ιδιότητες που μεταδίδονται και στα παιδιά. Από μόνο του, XYPlot δεν δίνει τίποτα εκτός από κενό χώρο:
<>πλάτος = {300}
ύψος = {300}
>
Για να δείξουμε πραγματικά δεδομένα, θα πρέπει να χρησιμοποιήσουμε μια σειρά κάποιου είδους. Μια σειρά είναι το στοιχείο που αντλεί πραγματικά τα δεδομένα, όπως ένα κατακόρυφο γράφημα ράβδων (VerticalBarSeries) ή ένα γράφημα γραμμών (LineSeries). Έχουμε 14 σειρές στη διάθεσή μας έξω από το κουτί, αλλά θα ξεκινήσουμε με ένα απλό VerticalBarSeries. Κάθε σειρά κληρονομείται από ένα βασικό σύνολο χαρακτηριστικών. Το πιο χρήσιμο για εμάς θα είναι το δεδομένα Χαρακτηριστικό:
<>πλάτος = {300}
ύψος = {300}
>
δεδομένα = {δεδομένα}
/>
Αυτό όμως θα αποτύχει, επειδή το React-vis αναμένει ότι τα στοιχεία στη συστοιχία δεδομένων θα έχουν το ακόλουθο σχήμα:
{ x: 2016, // Αυτό θα αντιστοιχιστεί στον άξονα x
y: 4 // Αυτό θα αντιστοιχιστεί στον άξονα y
}
Για παράδειγμα, για να εμφανιστεί ο συνολικός αριθμός των μωρών που μετράται στα δεδομένα κατά έτος, θα χρειαστεί να επεξεργαστούμε τα δεδομένα για να λάβουμε ένα μόνο αντικείμενο για κάθε έτος όπου Χ χαρακτηριστικό είναι το έτος και το γ χαρακτηριστικό είναι ο συνολικός αριθμός μωρών στο σύνολο δεδομένων. Ο κώδικας που έγραψα για να το κάνω είναι αρκετά σύντομος:
const totalBabiesByYear = Object.entries (data.reduce ((acc, σειρά) => { εάν (row.yearOfBirth σε acc) {
acc [row.yearOfBirth] = acc [row.yearOfBirth] + row.count
} αλλιώς {
acc [row.yearOfBirth] = row.count
}
επιστροφή acc;
}, {})). χάρτης (([k, v]) => ({x: + k, y: v}));
Όταν το συνδέετε στο VerticalBarSeries, έχουμε μερικά αποτελέσματα!
Αυτό δεν είναι ιδιαίτερα χρήσιμο από μόνο του, αλλά ευτυχώς η βιβλιοθήκη React-vis παρέχει ορισμένα πρόσθετα στοιχεία που μπορούν να χρησιμοποιηθούν για τη συγκράτηση των πληροφοριών. Ας εισαγάγουμε XAxis και YAxis έτσι μπορούμε να εμφανίσουμε περισσότερες πληροφορίες στο γράφημα μας. Θα αποδώσουμε αυτά τα στοιχεία μέσα στο XYPlot παράλληλα με το δικό μας VerticalBarSeries. Ο κώδικας και τα αποτελέσματα μοιάζουν με αυτό:
<>πλάτος = {600}
ύψος = {600}
>
δεδομένα = {totalBabiesByYear}
/>
Οι ετικέτες του άξονα y έχουν αποκοπεί και οι ετικέτες του άξονα x διαμορφώνονται ως αριθμοί, αλλά σημειώνουμε πρόοδο. Για να αντιμετωπίσουμε τον άξονα x ως διακριτές κανονικές τιμές σε αντίθεση με ένα συνεχές αριθμητικό εύρος, θα προσθέσουμε xType = "ordinal" ως ιδιοκτησία στο XYPlot. Ενώ είμαστε σε αυτό, μπορούμε να προσθέσουμε λίγο αριστερό περιθώριο στο γράφημα για να δούμε περισσότερες από τις ετικέτες του άξονα y:
<>πλάτος = {600}
ύψος = {600}
περιθώριο = {{
αριστερά: 70
}}
xType = "ordinal"
>
Είμαστε στην επιχείρηση! Το γράφημα μας φαίνεται ήδη εξαιρετικό - και το μεγαλύτερο μέρος της δουλειάς που έπρεπε να κάνουμε σχετίζεται με το μασάζ δεδομένων, και όχι με την πραγματική απόδοση.
Την επόμενη εβδομάδα, θα συνεχίσουμε να διερευνούμε τα στοιχεία της βιβλιοθήκης React-vis και να ορίσουμε ορισμένες βασικές αλληλεπιδράσεις. Δείτε αυτό το έργο στο GitHub εάν θέλετε να παίξετε με το σύνολο δεδομένων και τη βιβλιοθήκη React-vis. Έχετε οραματισμούς που κάνατε με το React-vis; Στείλτε μου ένα στιγμιότυπο οθόνης στο Twitter @freethejazz.
