Farvevejledning til datavisualisering med D3.js

Brug af farve i en verden efter postkategori20

D3.js har gjort så meget for at fremme praksis og teori om datavisualisering. Uden megen anstrengelse kan du finde eksempler på visualiseringer af algoritmer, tid, mekaniske principper, kønsdiskriminering og ja, endda hæren af ​​en ikke-faktisk-ganske så lille franskmand, der bevæger sig gennem Rusland.

Så meget godt som det er gjort, har D3.js også givet en uregelmæssig masse amatører muligheden for at skabe virkelig dårlig datavisualisering. Jeg ved, jeg er en af ​​dem. Min allerførste anvendelse af D3 var vildledende og fjollet, når det ikke var næsten ulovlig brug af datavisualisering. Det kan jeg ikke fordømme, og faktisk synes jeg det er den bedste måde ikke kun at lære D3, men for interlopere og udenforstående til at skubbe markens grænser og finde nye metoder til visuel visning af information.

Men på et område har D3 fungeret som en antikatalysator: brugen af ​​farve. Hvis du ser på en samling af D3-eksempler, vil du blive ramt af følgende tre farver:

Indrømmet, det er ikke den eneste farve, du ser, ofte vil du stadig se CSS "blå", "rød" og "sort". Og dette er ikke kun i D3 - Tableau-paletten er lige der oppe på listen over farveskemaer for at få dit diagram til at se ud som alle andre datavisualiseringsprodukter, der nogensinde er lavet. En af de største ændringer i den nyligt frigivne D3 v5 er endelig at slippe af med denne “kategori20” farveskala. Integreret i denne version og sandsynligvis der for at hjælpe med at trøste dem i deres tab af tid er d3-skala-kromatisk, hvilket for det meste er et indpakning omkring den afprøvede og ægte farveBrygermåler fra Cynthia Brewer.

Feltet med datavisualisering er fyldt med advarsler om, at farve er hård. Men farve er kraftig. Hvis du ikke føler dig i stand til at vælge et farveskema baseret på de grundlæggende principper for, hvordan mennesker opfatter farve, hvad får dig så til at tro, at du kan vælge mellem en bikubeplan og et Gannt-diagram?

Kategori20 er muligvis død, men dårlig farvebrug vil aldrig dø. Så her er nogle tip til dem, der faktisk ønsker at forbedre deres brug af farve.

  • Undgå standardfarveskemaer. Brug i det mindste en farvebryggeres skala. Hvis du virkelig ikke kan finde ud af, hvordan du vælger farver, skal du bruge Colorgorical. Det har problemer, men det tvinger dig i det mindste til at have et øjeblik til at overveje og implementere farve.
  • Hvis du bruger farve til at skelne mellem mindre end 10 eller 20 kategorier af data, skal du ikke bruge en 10-kategori eller 20-kategori skala. De første to farver i den gamle skala fra kategori20 var begge blå, og da dit publikum troede, at disse to ting var relateret, skyldes det, at deres visuelle cortex fortalte dem, at de var det.
  • Stop med at bruge CSS-primærfarver. Ikke fordi der er noget iboende galt med "rød" eller "blå", men fordi det er et tegn på, at du sandsynligvis ikke tænker på det. Du skulle tænke på farven på dine elementer, det burde ikke være en offhand ting, du tildeler vilkårligt.
  • Ligeledes, hvis du ønsker, at en farve skal være mindre mættet, skal du ikke bruge opacitet, gå ud og find RGB-koden til den mindre mættede version af den farve. Gennemsigtighed har kombinatoriske effekter, som du ikke bør henvise til tilfældigt, bare fordi du ville have en pastelpalet.
  • Sørg for, at dine paletter er sammensat af den samme slags farver, f.eks. Pasteller eller højtastede farver. Ved du ikke, hvad det betyder? Gå op på farvepaletter, og find ud af det, fordi farve er vigtig, og du ikke kan betragte dig selv som en kvalificeret praktiserende datavisualisering, hvis en af ​​de vigtigste kanaler, du bruger til at formidle information, er noget, som du ikke engang forstår mest grundlæggende terminologi.
  • Vær opmærksom på, hvad farveblindhed er, og prøv at bruge farveblinde sikre farver. Det betyder ikke at undgå rød og grøn, men det betyder, at hvis du koder med rødt og grønt, giver du også andre signaler, når dit publikum er farveblind. Tilsvarende er ikke al farveblindhed den samme, så når du bruger "coloursafe" paletter, skal du sørge for at forstå, hvor sikre de er.
  • Brug ikke interpolerede farveområder for at angive mængde. Farveramper er forfærdelige for mængde. Lær at spandere dine mængder ved hjælp af kvantificering, kvantiler, CKMean og lignende, så du kan bruge graduerede farveramper (rulle dine egne eller bruge en farvelbryggerampe som røde eller grønne).

Dette indlæg er en mere generel kritik af den manglende opmærksomhed omkring farve i datavisualisering. Min stærkeste kritik vedrører specifikt den standardtilgang til farve i D3.js. Så hvordan ville du gå i gang med at integrere en mere tankevækkende tilgang til farve med D3? Det er nemt. Alle disse kategoriske skalaer i eksemplerne, du følger, bruger enten en bucketed skala eller en kontinuerlig skala. Hvis det er en kontinuerlig skala for farve, skal du slette den og erstatte den med en spændende skala. Hvis det er en bucketed skala, indtager den en værdi (indstillet i .domænet ()) og returnerer en af ​​disse tyve frygteligt overbrugte farver. Så når du ser noget som:

const colours = d3.scaleOrdinal (AnyNameOfColorsIRecognize);

Udskift det bare med din egen række farver, du valgte. Hvor vil du få et sådant array? Du kan købe en kopi af Color Index 2 af Krause og vælge en palet, som du synes bedst passer til stemningen i det stykke, du arbejder på. Eller, hvis det er for meget, kan du bruge Tristen Browns Color Picker baseret på Chroma.js-biblioteket til at vælge en rampe med de nødvendige stop. Eller hvis det stadig er for meget forfatterskab, kan du stole på klynge-algoritmerne ved at jeg vil have farvetone til at vælge forskellige farver til dig (endda give mulighed for at skabe menneskelige uleselige 30- eller 50-farvekombinationer).

Uanset hvad du gør det, vil du endelig ende med en vifte af farver som: ["# A07A19", "# AC30C0", "# EB9A72", "# BA86F5", "# EA22A8"]. På det tidspunkt skal du blot bruge denne matrix som dit interval i din ordinære skala:

const colours = d3.scaleOrdinal.range (["# A07A19", "# AC30C0", "# EB9A72", "# BA86F5", "# EA22A8"]);

Du kan bruge det nøjagtigt på samme måde som du brugte din originale skala og modtage til gengæld mere markant farve for det samme datavisualiseringsprodukt.

Er det det rigtige farveskema for det netværk? Det er ikke let at besvare - det handler om lige så let at svare som spørgsmålet om, hvorvidt et netværk er det rigtige diagram for det datasæt. Men det rigtige farveskema er ikke punktet, fordi der ikke er en enkelt højre farve til alle dine diagrammer. Tænk snarere på farve i din datavisualisering. Tag det alvorligt, selvom du anvender en etableret farveskala i det endelige produkt. Tænk på, hvis du prøver at signalere succes eller en advarsel, og hvilken slags farve du føler bedst formidler det. Tag ikke bare en farvepalet, fordi den er standard - du ville aldrig gøre det med et diagram eller et datasæt, ville du?

En version af dette essay blev oprindeligt sendt på elijahmeeks.com i 2015.