Viz-palet til datavisualiseringsfarve

Tidligere denne måned frigav Susie Lu og jeg Viz Palette, et værktøj til at hjælpe datavisualiseringsdesignere med at evaluere og forbedre deres paletter. Den viser paletten, der bruges på tværs af forskellige datavisualiseringstyper, men måler også de individuelle farver ved hjælp af teknikker, der prøver at identificere, hvornår farver er for ligner hinanden visuelt, men også når navnene på farver er for ens.

Jeg plejede at være akademiker, så da jeg først begyndte at tænke på farve, læste jeg Josef Albers 'Interaction of Color, det sædvanlige arbejde med farve fra et psykologisk perspektiv. Jeg kiggede på Albers og et par andre for at hjælpe mig med at forstå farve snarere end den mere moderne kognitive videnskabsmetode, fordi jeg ikke tænkte på farve som et teknisk problem at løse. Det involverede noget andet, som jeg på det tidspunkt ville have kridt op til ”æstetik”, men som jeg nu kalder design. Men jeg fandt få regler, som jeg let kunne anvende til datavisualisering.

Albers 'arbejde med farve og form havde intet at gøre med, hvad vi traditionelt tænker på som den visuelle visning af information, men fremhævede den kombinatoriske virkning, som farve, placering og form har på hinanden, og som skal redegøres for i enhver visning af information, som bruger farve som kodning.

Værktøjer og softwarebiblioteker ser ud til konstant at "løse" farveproblemet. Der er værktøjer til at generere paletter, til at visualisere farveområdet på dine paletter eller vise paletter, der bruges i billeder. Jeg henviste til flere af disse i Color Advice for Data Visualization med D3.js. Men snarere end at løse problemet med at forstå farve, så det ud til, at de bare blev en voksende liste, der skulle kopipasteres, når nogen spurgte om effektiv farvebrug. På medium har copypasta formen af ​​The Color Essay og består af lidt mere end en annoteret liste over alle disse værktøjer sammen med nogle farvehjul og diagrammer, der viser spektret af synligt lys.

Disse lister og essays giver lidt materiale til aktivt at forbedre dit arbejde. De antyder, at der er en funktion eller et værktøj, der simpelthen løser problemet og frigiver datavisualiseringsdesigner ansvaret. Enhver fejl er rent teknisk snarere end et resultat af design eller metoder. Hvert værktøj mister et nyt farverum eller en ny teknik til måling af særegenhed og får en flok genvindinger eller en pris på en konference (afhængigt af dit mål for succes) og gør derefter lidt mere end at blive et andet eksempel på den liste.

Dette er typificeret af Colorgorical, der lover at automatisk generere en farvepalet, der er karakteristisk og effektiv til datavisualisering. Colorgorical er afhængig af en teknik, der kaldes Just Noticeable Difference (JND), som måler, om en farve af en bestemt størrelse skal være mærkbar forskellig fra en bestemt procentdel af befolkningen. Det kombinerer dette med farvenavnets tydelighed (om navnene på farverne kan genkendes, og om de overlapper hinanden) sammen med par-præference til automatisk generering af paletter. Det ser ud til, at det skulle have "løst" paletgenerering, men efter min erfaring er de udvalgte farver så grønne at de altid kommer med farvepaletter, der kun kan beskrives som spy-inspireret. Min gæt er, at dets afhængighed af XKCDs farvenavne har noget at gøre med det sammen med, at grønne nuancer naturligt mere tydelige.

En serie på 11 tilfældige paletter genereret af Colorgorical, som måske bedre kaldes Colorgreenical.

Dette er ikke beregnet til at udskille Colorgorical, som demonstrerer nogle gode forskningsområder, som vi brugte i Viz Palette (JND og farvenavn). Snarere er problemet hele det teknologiske optimistiske perspektiv af farve som noget, du ikke behøver at investere i. Farve er bare en irritation, og når vi finder det rigtige værktøj, der løser det for os, kan vi fortsætte med det virkelige arbejde med datavisualisering.

Det skyldes, at farve er skræmmende, og hvem ønsker ikke, at den bare skal håndteres af et godt designet værktøj? Jeg har skrevet om farve i begge udgaver af D3.js i handling. Alligevel følte jeg mig stadig nervøs med at give autoritative udsagn om det. Jeg kendte de tekniske og akademiske aspekter af farve, gestaltfarveinteraktionerne og de kulturelle normer, men det var svært at oversætte alt det signal til praksis. På den anden side, selvom folk havde bygget store værktøjer som d3-jnd og chroma.js, syntes disse meget mere end ekspertsystemer til bestemte øjeblikke i farveprocessen (som at ville lyse eller lysne eller interpolere).

Summen af ​​de konkrete regler, som jeg kendte, var:

Brug ikke farveramper til kvantitative data.

Så da vi byggede Viz-paletten, ville vi sikre dig, at den var praktisk uden at være primitiv. Derfor giver den en aktiv visning af din palet på en række forskellige datatyper. I den forbindelse ligner Viz Palette andre farveværktøjer, der er relateret til datavisualisering (som Cynthia Brewer's ærverdige ColorBrewer eller Colorgorical).

Colorgorical (til venstre) viser områder, søjler og cirkelkonturer, hvorimod ColorBrewer (til højre) blev bygget til kort og viser naturligvis et koropletkort med den valgte palet.

Udvidet med denne tilgang viser Viz Palette ikke kun linjer og områder, den viser forskellige variationer af disse grafiske primitiver, der vises i fælles diagrammer. Vi kalder dette afsnit Farver i aktion. Al datavisualisering er lavet med linjer og udfyldte områder, men i praksis påvirkes de oprettede figurer af position, delte rammer og andre attributter, der bedst udtrykkes ved eksempel.

Farverne i handling af Viz-paletten, der viser din palet på tekst såvel som en række korttyper.

Det er ikke nok at vide, at forskellige farver er effektive som områder, fordi der er andre faktorer i visualiseringer, der bruger områder. Violin diagrammer grænser ikke op til hinanden som stablede områder i et stablet diagram. Områderne i en boksdiagram eller et treemap er ikke som områdene i et søjlediagram, fordi de også indeholder linjer, der påvirker farveinteraktionerne. Tilsvarende er linjerne i et linjediagram ikke de samme som linjerne i et netværksdiagram.

Hver af disse visninger bruger områder til at kode det samme datasæt. Det er ikke nok, at de er områder, det er vigtigt, om de deler grænser, regelmæssigt er placeret, indkoder størrelsesorden eller på anden måde har muligheden for at påvirke signalet, der sendes af det område, der koder for dataene.

Der er ingen pålidelige mål for denne gestalteffekt, og hvordan den forbedrer eller mindsker forståelsen af ​​dataene i et diagram. Vi har måske ikke et godt teknisk mål for denne effekt, men vi kan vise det for dig. Vi giver også en enkel switch til at undersøge, hvordan skitsering og ikke skitsering af dine områder og former kan påvirke opfattelsen. Vi gjorde dette for at sikre os, hvordan form og farve interagerer i datavisualisering på måder, der er uventede og vanskelige at beskrive med enkle regler. En farvepalet, der ikke helt skelner mellem farver i en violinplot, kan faktisk fungere fint til stablede områdekart på grund af virkningen af ​​farveområder, der grænser op til hinanden.

Farver, der ikke kan skelnes i separate områder, er stadig forskellige mellem områder, der grænser op til hinanden.

Derfor hjælper Viz Palette dig med at se farveudfordringer på både en praktisk og analytisk måde. For at supplere den praktiske visning giver farverapporten dig opfattelse og navngivning af konflikter ved hjælp af de samme tekniske tilgange, som jeg nævnte ovenfor (som JND). I stedet for et uklart kort over farverum fremhæver det farvekonflikter med vægt på, om de er tæt nok til at forårsage problemer som linjer eller punkter eller områder. Til farvenavn, i stedet for at stole på en tvivlsom liste over farver, der er genereret via crowddsourcing, bruger Color Report en brugerdefineret kurateret liste over farvenavne oprettet af Susie. XKCD-listen har "laks" og "limegrøn" som farvenavne, ingen brune og ingen af ​​de "lette" variationer af et farvenavn. Det var tilsyneladende fokus på farve som farvetone, men en af ​​grundene til at du ser parrede paletter som et populært valg i datavisualisering er, at en læser let verbalt kan skelne mellem den mørk orange linje og den lysorange linje på en måde, der ikke er så let at gøre for at skelne den laksefarvede knude fra den orange knude.

Jeg er meget glad for, hvor godt Viz Palette fungerer, men for mig kom den reelle værdi ved at opbygge den. Det hjalp mig virkelig med at forstå farvepraksis til datavisualisering, så jeg kan give et par flere regler for farvebrug i datavisualisering:

Optimer din palet til dit datasæt

Brug ikke en 20-farvepalet til et datasæt, der kun har fire kategorier. Hvis du er skræmmet af at bygge farvepaletter, skal du vælge de fire mest genkendelige og let navngivne og tematisk lignende farver fra din 20 farvepalet, så brug ikke bare de første fire.

Farve er social

Viz Palette ved ikke, hvad du bruger dine farver til. Det ved ikke, om du prøver at sammensætte en skarp palet til en stor præsentation eller et møde fyldt med spørgsmål eller til din udforskende viz i din notesbog. Hvis det er et møde, og du forventer, at andre mennesker skal tale om dit diagram, skal du prøve at have et godt navnestykke. Dette betyder, at farverne på et kort skal være mundtligt adskillelige, så hvis et publikumsmedlem kaldte et af de farvede elementer, var der ingen chance for forvirring. ”Den røde” skulle ikke starte en samtale om, hvorvidt henvisningen var til fuchsia-datapunktet eller den mørke rosa datapoint eller den mørkrosa datapoint eller ej. På den anden side, hvis det er din bærbare computer, skal du understrege farvedifferensen. Det betyder ikke noget, hvis du ikke kan navngive farverne i diagrammet, du bruger til udforskning, fordi det ikke er et samarbejde, men i stedet skal du bare sørge for at fortælle forskellen mellem datapunkter effektivt. Hvis det er en stor præsentation, skal du redegøre for farveblindhed og også prøve at opretholde en vis tematisk lighed.

Disse er alle visuelt forskellige farver og egnede til disse datavisualiseringslayouts. Hvis dette var til sonderende formål, udgør det ingen problemer, men hvis dette blev præsenteret for et publikum, ville de have en udfordrende tid med at kommunikere om det, fordi alle elementerne kunne beskrives som orange.

Farve med høj kardinalitet er dårlig

I stedet for at prøve at finde den umulige 20-farvepalet, skal du stoppe med at bruge farve, når du har så mange dimensioner. Det kan ikke skelnes, det er forvirrende, og du lægger bare ind over kompleksiteten og beslutningstagningen til din læser. Men hvis du er nødt til det, skal du erkende, at det er svært, og at det vil tage tid og kræfter. Påpeg, at dine interessenter, planlæg et stykke tid for det, ikke bare børste det af. En vigtig årsag til, at folk er så dårlige ved at farve i datavisualisering, er fordi de ikke budgetterer noget tid til det.

En visuelt distinkt 24-farvepalet som denne er opnåelig, men bør aldrig bruges. Hvis formålet er forklaring, skal farve kun bruges til de vigtige punkter, og resten skal omdannes til kontekstuelle punkter via en delt passende desatureret farve. Hvis formålet er udforskning, skal interaktivitet eller supplerende dekoration, som f.eks. Kommentarer, bruges snarere end en besværlig 24-artikels legende.

Gør det smukt

Jeg har undgået enhver omtale af æstetik, men det er den upåklageligt klædte elefant i rummet. I stedet for at sigte mod skønhed skal du dog fokusere på farvetemaer, som jordfarver, høj nøgle, neon, pastel og desatureret. Prøv at opretholde et tema med dine farver, ellers vil de farver, der ikke er i dette tema, skille sig ud og signalere vigtigheden for dine læsere. Dette kan betyde farver med det samme niveau af mætning (dæmpede grålige farver) eller den samme lethed (pastel), men også tilstødende nuancer på et farvehjul (hvis du for det meste har blues og greener og en orange, som orange vil skille sig ud som den er speciel) .

Kunstneriske paletter som denne split-komplementære palette er altid et godt valg til at prøve at udvikle en karakteristisk palet. Mens kunstneriske og især maleriske paletter ikke altid egner sig til datavisualisering, kan du måle deres effektivitet ved hjælp af Viz Palette.

Tænk på farveinteraktion

Gestaltfarveeffekter betyder, at en farvepalet, der fungerer til en korttype, muligvis ikke for en anden. Nogle korttyper er meget elastiske (som diagrammerne med stablede områder), mens andre er meget skrøbelige (alle linjediagrammer), og det bør påvirke din beslutning ikke kun om, hvilken farve du skal bruge, men hvilken layout du skal bruge. Forsøg især at undgå gennemsigtige farver, som aldrig skal bruges bare til at lysne (brug den solide lysere farve, du forventer), og som sjældent skal bruges på anden måde. Dette graduerede symbolkort over vandforbrug fra New York Times viser ikke planlagt til farveinteraktion mellem de lagdelte gennemsigtige elementer, der skaber farver, der ikke findes i sagnet, og også farver, der findes i sagnet, men ikke præciserer dataene.

Integrer farve, tilføj ikke bare den

Farvebeslutninger er ikke adskilt fra andre grafiske beslutninger. Du kan behandle et datasæt og redegøre for dets struktur i dine farvestrategier. Forsøg at sikre, at hvis du virkelig har brug for at repræsentere 20 forskellige værdier, eller du er begrænset af et andet forfærdeligt valg (som mærkefarver), er layoutet et elastisk. I disse situationer skal du prøve hårdere for at sikre, at farver ikke overlapper hinanden, eller at regioner i diagrammet ikke er farvet tilfældigt, men i stedet farves for at undgå de mest udfordrende farvekonflikter.

Disse netværksdiagrammer, der bruger et komplekst farveskema og har stor visuel kompleksitet. Det ville ikke være nok at finde den perfekte palet, de har brug for tankevækkende design og supplerende elementer (som minimap eller gitteret fra samfund).

Farvenavne er vigtigere for samarbejde og ikke efterforskning

Farvenavn og andre sociale aspekter ved datavisualisering er vigtige. Hvis du har et diagram med tre forskellige greener, vil du føle dig ret stum, når nogen siger "Den grønne er vigtig", og svaret er ikke konstruktivt, men snarere "Du mener den lysegrågrønne grøn eller den mørkere havgrøn? ”Hvis din organisation har brugt bestemte farver eller paletter til at signalere bestemte målinger eller tærskler, skal du redegøre for det i dit design. Hvis skemaet er beregnet til at blive præsenteret for grupper med stærke kulturelle foreninger om farve, skal du redegøre for det. Der er ingen regel for dette, rødt er ikke altid dårligt og grønt er ikke altid godt, det afhænger af indstillingen.

Brug værktøjerne

Der er værktøjer og farverum, der giver mulighed for nem måling af farveegenskaber, der kan bruges til at opbygge bedre paletter, herunder farvesikre paletter og højtydende paletter med høj kardinalitet. Viz Palette er fantastisk, men måske har du en mere bestemt sag til farve-navngivning eller JND. At forstå biblioteker som chroma.js er et must for enhver, der ønsker at være effektiv med datavisualisering.

Ser frem til

Vi er ikke færdige med Viz Palette. Efter at have set folk bruge det og høre feedback, har vi drøftet et par funktioner til at tilføje det, som vi tror ville forbedre dets effektivitet.

  • Redegør for luminans (så du ikke utilsigtet har en farve i din palet, der er meget lysere end resten af ​​dine farver).
  • Har en sammenligningstilstand, så du kan se den ene palet ved siden af ​​den anden.
  • Lad farverapporten og farverne i handling let integreres.

Mere generelt vil jeg gerne se Viz Palette fungere som et tilgængeligt indgangspunkt i mere avancerede, men stadig praktisk vigtige aspekter af farve. Efter min erfaring er datavisualiseringsfællesskabet for hurtigt til at afvise farve med den gamle undskyldning "Farve er hård". Farve er hård, men det samme er netværksvisualisering, annotation, animering af et treemap og lavelse af et bobleoversigt. At gøre Viz Palette forbedrede dramatisk min forståelse af farve, og dit engagement i farve vil gøre det samme.

Tak til Susie Lu & rachel binx & Helen Ngo for feedback.