Χρωματικές συμβουλές για απεικόνιση δεδομένων με D3.js

Χρησιμοποιώντας χρώμα σε έναν κόσμο post-category20

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

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

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

Χωρίς το μοναδικό χρώμα που βλέπετε, συχνά θα δείτε CSS "μπλε", "κόκκινο" και "μαύρο". Και αυτό δεν είναι μόνο στο D3 - η παλέτα Tableau βρίσκεται εκεί πάνω στον κατάλογο χρωμάτων, ώστε το γράφημά σας να μοιάζει με κάθε άλλο προϊόν οπτικοποίησης δεδομένων που έγινε ποτέ. Μία από τις σημαντικές αλλαγές στο πρόσφατα κυκλοφόρησαν D3 v5 είναι να ξεφορτωθεί τελικά αυτή την κλίμακα "κατηγορίας20". Ενσωματωμένα σε αυτή την έκδοση και πιθανώς εκεί για να βοηθήσουν στην κονσόλα εκείνα που βρίσκονται στην εποχή της απώλειας είναι d3-scale-chromatic που είναι ως επί το πλείστον περιτύλιγμα γύρω από τις δοκιμασμένες και πραγματικές κλίμακες colorBrewer από την Cynthia Brewer.

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

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

  • Αποφύγετε τα προεπιλεγμένα σχήματα χρωμάτων. Τουλάχιστον, χρησιμοποιήστε μια κλίμακα χρωματισμού. Αν πραγματικά δεν μπορείτε να καταλάβετε πώς να επιλέξετε χρώματα, χρησιμοποιήστε Colorgorical. Έχει ζητήματα, αλλά τουλάχιστον σας αναγκάζει να έχετε μια στιγμή για να εξετάσετε και να εφαρμόσετε το χρώμα.
  • Αν χρησιμοποιείτε χρώμα για να διακρίνετε μεταξύ λιγότερων από 10 ή 20 κατηγοριών δεδομένων, μην χρησιμοποιείτε κλίμακα 10 ή 20 κατηγοριών. Τα δύο πρώτα χρώματα της παλιάς κλίμακας κατηγορίας20 ήταν και τα δύο μπλε και όταν το κοινό σας σκέφτηκε ότι τα δύο αυτά πράγματα σχετίζονταν, αυτό οφείλεται στο γεγονός ότι ο οπτικός φλοιός τους είπε ότι ήταν.
  • Διακοπή χρήσης βασικών χρωμάτων CSS. Όχι γιατί υπάρχει κάτι έμφυτο λάθος με το "κόκκινο" ή το "μπλε", αλλά επειδή είναι ένα σημάδι ότι πιθανότατα δεν το σκέφτεστε. Θα πρέπει να σκεφτόμαστε το χρώμα των στοιχείων σας, δεν θα πρέπει να είναι ένα πράγμα που εκχωρείτε αυθαίρετα.
  • Ομοίως, εάν θέλετε να είναι λιγότερο κορεσμένο το χρώμα, μην χρησιμοποιήσετε αδιαφάνεια, βγείτε έξω και βρείτε τον κωδικό RGB για τη λιγότερο κορεσμένη έκδοση αυτού του χρώματος. Η διαφάνεια έχει συνδυαστικές επιπτώσεις που δεν πρέπει να αγνοήσετε απλά επειδή θέλατε μια παστέλ παλέτα.
  • Βεβαιωθείτε ότι οι παλέτες σας είναι κατασκευασμένες από το ίδιο είδος χρωμάτων, όπως τα παστέλ ή τα χρώματα υψηλής ποιότητας. Δεν ξέρω τι σημαίνει αυτό; Πηγαίνετε να διαβάσετε τις παλέτες χρωμάτων και να μάθετε γιατί το χρώμα είναι σημαντικό και δεν μπορείτε να θεωρήσετε τον εαυτό σας έναν εξειδικευμένο επαγγελματία οπτικοποίησης δεδομένων εάν ένα από τα κύρια κανάλια που χρησιμοποιείτε για τη μεταφορά πληροφοριών είναι κάτι για το οποίο δεν καταλαβαίνετε καν πιο βασική ορολογία.
  • Να γνωρίζετε ποια είναι η τύφλωση χρώματος και προσπαθήστε να χρησιμοποιήσετε τα χρώματα ασφαλών χρωμάτων. Αυτό δεν σημαίνει αποφύγετε το κόκκινο και το πράσινο, αλλά αυτό σημαίνει ότι αν κωδικοποιείτε με κόκκινο και πράσινο, παρέχετε και άλλα μηνύματα όταν το κοινό σας είναι έγχρωμο. Παρομοίως, δεν είναι όλα τα χρώματα πανομοιότυπα, οπότε όταν χρησιμοποιείτε παλέτες "colorsafe" βεβαιωθείτε ότι καταλαβαίνετε πόσο ασφαλείς είναι.
  • Μη χρησιμοποιείτε παρεμβαλλόμενες περιοχές χρώματος για να υποδείξετε ποσότητα. Οι κεκλιμένες ράμπες είναι φρικτές για την ποσότητα. Μάθετε να χρησιμοποιείτε τις ποσότητες χρησιμοποιώντας quantizing, quantiles, CKMean και τα παρόμοια, ώστε να μπορείτε να χρησιμοποιείτε διαβαθμισμένες έγχρωμες ράμπες (κυλήστε το δικό σας ή χρησιμοποιήστε ράμπες colorbrewer όπως κόκκινα ή πράσινα).

Αυτή η ανάρτηση είναι μια γενικότερη κριτική της έλλειψης στοχασμού γύρω από το χρώμα στην απεικόνιση δεδομένων, η ισχυρότερη κριτική μου αφορά ειδικά την τυπική προσέγγιση στο χρώμα στο D3.js. Πώς λοιπόν θα έπρεπε να ενσωματώσετε μια πιο στοχαστική προσέγγιση στο χρώμα με την D3; Είναι εύκολο. Όλες αυτές οι κατηγορικές κλίμακες στα παραδείγματα που ακολουθείτε χρησιμοποιούν είτε μια κλίμακα με κουτάβια είτε μια συνεχή κλίμακα. Αν είναι μια συνεχής κλίμακα για το χρώμα, διαγράψτε το και αντικαταστήστε το με μια κλίμακα με κουκκίδες. Αν είναι μια κλίμακα με κουτάβι, παίρνει μια τιμή (που έχει οριστεί στην .domain ()) και επιστρέφει ένα από αυτά τα είκοσι φρικιαστικά χρωματισμένα χρώματα. Έτσι, κάθε φορά που βλέπετε κάτι σαν:

const χρώματα = d3.scaleOrdinal (AnyNameOfColorsIRecognize);

Απλά το αντικαταστήστε με τη δική σας ποικιλία χρωμάτων που επιλέξατε. Από πού θα πάρετε μια τέτοια σειρά; Θα μπορούσατε να αγοράσετε ένα αντίγραφο του Δείκτη Χρώμα 2 από Krause και να επιλέξετε μια παλέτα που αισθάνεστε καλύτερα ταιριάζει με τη διάθεση του έργου στο οποίο εργάζεστε. Ή, αν αυτό είναι πάρα πολύ, θα μπορούσατε να χρησιμοποιήσετε το Color Picker της Tristen Brown με βάση τη βιβλιοθήκη Chroma.js για να επιλέξετε μια ράμπα με τις απαραίτητες στάσεις. Ή ακόμα, αν ακόμα είναι πάρα πολύ πατροπαράδοτο, θα μπορούσατε να βασιστείτε στους αλγόριθμους συσσωμάτωσης για να διαλέξω διαφορετικά χρώματα για εσάς (ακόμη και δίνοντας τη δυνατότητα δημιουργίας ανθρώπινων μη αναγνώσιμων συνδυασμών 30 ή 50 χρωμάτων).

Είτε έτσι είτε αλλιώς, θα καταλήξετε τελικά με μια σειρά από χρώματα όπως: ["# A07A19", "# AC30C0", "# EB9A72", "# BA86F5", "# EA22A8"]. Σε εκείνο το σημείο, απλά χρησιμοποιήστε αυτήν τη συστοιχία ως εύρη σας σε κανονική κλίμακα:

const χρώματα = d3.scaleOrdinal.range (["# A07A19", "# AC30C0", "# EB9A72", "# BA86F5", "# EA22A8"));

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

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

Μια έκδοση αυτού του δοκίμιου δημοσιεύτηκε αρχικά στο elijahmeeks.com το 2015.