Viz Paleta za boju vizualizacije podataka

Ranije ovog mjeseca, Susie Lu i ja izdali smo Viz Palette, alat koji će pomoći dizajnerima vizualizacije podataka da ocijene i poboljšaju svoju paletu. Prikazuje paletu koja se koristi u raznim vrstama vizualizacije podataka, ali također mjeri i pojedinačne boje pomoću tehnika kojima se pokušava vizualno prepoznati kada su boje previše slične jedna drugoj, ali i kad su imena boja previše slična.

Nekada sam bio akademik pa sam, kad sam prvi put počeo razmišljati o boji, pročitao interakciju boja Josefa Albersa, seminarski rad o boji iz psihološke perspektive. Pogledao sam Albersa i nekolicinu drugih koji su mi pomogli razumjeti boju, a ne moderniji kognitivni pristup jer nisam boja razmišljao kao tehnički problem koji treba riješiti. To je podrazumijevalo nešto drugo, što bih u to vrijeme smatrao estetikom, ali što bih sada nazvao dizajnom. Ali našao sam nekoliko pravila koja bih lako mogla primijeniti na vizualizaciju podataka.

Albersov rad s bojom i formom nije imao nikakve veze s onim što tradicionalno smatramo vizualnim prikazom informacija, ali istaknuo je kombinatorni učinak koji boja, položaj i oblik imaju jedni na druge i koji se moraju uzeti u obzir u bilo kojem prikazu informacija koje koristi boju kao kodiranje.

Biblioteke alata i softvera stalno se pojavljuju kako bi konačno riješili problem u boji. Postoje alati za generiranje palete, za vizualiziranje prostora boja vaših paleta ili za prikaz palete koja se koristi u slikama. Uputio sam se na nekoliko njih u odjeljku Savjeti u boji za vizualizaciju podataka pomoću D3.js. No umjesto da riješimo problem razumijevanja boje, činilo se kao da su tek postali rastući popis koji treba kopirati kad god se netko pita o učinkovitoj uporabi boja. U prosjeku, ova copypasta ima oblik The Color Essay i sastoji se od nešto više od navođenog popisa svih ovih alata, zajedno s nekoliko kotača u boji i ljestvicama koje pokazuju spektar vidljive svjetlosti.

Ovi popisi i eseji daju malo materijala za aktivno poboljšavanje vašeg rada. Oni podrazumijevaju da postoji funkcija ili alat koji jednostavno rješava problem i oslobađa dizajnera za vizualizaciju podataka od odgovornosti. Svaki neuspjeh je isključivo tehnički radije, a ne rezultat dizajna ili metoda. Svaki alat osvaja novi prostor u boji ili novu tehniku ​​mjerenja prepoznatljivosti, a na konferenciji dobiva hrpu retweeta ili nagradu (ovisno o vašoj mjeri uspjeha), a zatim čini tek nešto više od postajanja još jednim primjerom na tom popisu.

To je opisano Colorgorical-om, koji obećava automatski generiranje paleta boja koje su karakteristične i učinkovite za vizualizaciju podataka. Colorgorical se oslanja na tehniku ​​poznatu pod nazivom Just Just opatable razlika (JND) koja mjeri treba li boja određene veličine biti primjetno drugačija za određeni postotak stanovništva. To kombinira s razlikovanjem naziva boja (prepoznaju li se imena boja i preklapaju li se) zajedno s preferencijama za automatsko generiranje palete. Čini se kao da bi trebala imati "riješenu" generaciju paleta, ali po mom iskustvu, njegove odabrane boje toliko favoriziraju zelenu da se uvijek može naći u paleti boja koje se mogu opisati samo kao povraćanje. Pretpostavljam da njegovo pouzdanje u nazive boja XKCD-a ima neke veze sa tim što će zelene nijanse naravno biti izrazitije.

Niz od 11 slučajnih paleta koje generira Colorgorical, a koje bi se bolje moglo nazvati Colorgreenical.

Ovo nije namijenjeno izdvajanju Colorgorical-a, što pokazuje dobra područja istraživanja koja smo koristili u Viz Palette (JND i imenovanje boja). Umjesto toga, problem je cjelokupna tehnološka optimistička perspektiva boja kao nešto u što ne morate ulagati. Boja je samo neugodno i kad pronađemo pravi alat koji to rješava za nas, možemo nastaviti s pravim radom vizualizacija podataka.

To je zato što boja djeluje zastrašujuće i tko ne bi želio da se njime rukuje dobro dizajniran alat? O boji pisao sam u oba izdanja D3.js-a u akciji. Ipak, i dalje sam bio nervozan dajući autoritativne izjave o tome. Znao sam tehničke i akademske aspekte boja, interakcije boja gestalta i kulturne norme, ali bilo je teško sav taj signal prevesti u praksu. S druge strane, iako su ljudi gradili sjajne alate kao što su d3-jnd i chroma.js, ti se uređaji činili malo više od ekspertnih sustava za određene trenutke u procesu boja (poput želje da se osvijetli, uljepša ili interpolira).

Zbroj konkretnih pravila koja sam znao:

Ne koristite rampe u boji za kvantitativne podatke.

Pa kad smo izgradili Viz paletu željeli smo se uvjeriti da je praktična, a da ne bude primitivna. Zbog toga omogućuje aktivni prikaz vaše palete na različite tipove podataka. U tom pogledu Viz Palette nalikuje drugim alatima u boji povezanim s vizualizacijom podataka (poput uglednog ColorBrewer-a ili Colorgorical-a Cynthia Brewer).

Colorgorical (lijevo) prikazuje područja, šipke i obrise dok je ColorBrewer (desno) izgrađen za karte i, naravno, prikazuje choropleth kartu s odabranom paletom.

Proširivši se na ovaj pristup, Viz Palette ne prikazuje samo linije i područja, već pokazuje različite varijacije ovih grafičkih primitivaca koji se pojavljuju u zajedničkim kartama. Ovaj odjeljak nazivamo Boje u akciji. Sva vizualizacija podataka vrši se linijama i ispunjenim područjima, ali u praksi na oblikovane oblike utječe položaj, zajedničke obrube i drugi atributi koji su najbolje izraženi primjerom.

Paleta Colors in Action Viz, koja prikazuje vašu paletu na tekstu kao i razne vrste grafikona.

Nije dovoljno znati da su različite boje učinkovite kao područja jer postoje drugi faktori u vizualizacijama koji koriste područja. Karte violine ne graniče se s drugima poput složenog područja u složenom grafikonu. Područja u boxplotu ili treemapu nisu nalik područjima na traci, jer uključuju i linije koje utječu na interakcije u boji. Slično tome, linije u linijskom grafikonu nisu iste kao linije u mrežnom dijagramu.

Svaki od tih prikaza koristi područja za kodiranje istog skupa podataka. Nije dovoljno da se radi o područjima, važno je dijele li granice, redovno se postavljaju, kodiraju veličine ili na drugi način imaju mogućnost utjecaja na signal koji prolazi kroz područje koje kodira podatke.

Ne postoje pouzdane mjere ovog efekta geštalta i na koji način povećava ili smanjuje razumijevanje podataka u grafikonu. Možda nećemo imati dobru tehničku mjeru tog efekta, ali možemo vam to pokazati. Također dajemo jednostavan prekidač kako bismo ispitali kako ocrtavanje, a ne opisivanje područja i oblika može utjecati na percepciju. To smo učinili kako bismo bili sigurni da pokazujemo kako oblik i boja djeluju u vizualizaciji podataka na načine koji su neočekivani i teško opisati jednostavnim pravilima. Paleta boja koja ne razlikuje osobito boje na crtežu za violinu može stvarno uspjeti za složeno područje područja zbog učinka područja boja koja graniče jedno s drugim.

Boje koje se ne mogu razlikovati u odvojenim područjima još su uvijek različite između područja koja graniče.

Zbog toga vam Viz Paleta pomaže da vidite izazove u boji na praktičan i analitički način. Da biste nadopunili praktični prikaz, Izvještaj u boji daje vam percepciju i imenovanje sukoba pomoću istih tehničkih pristupa koje sam gore spomenuo (poput JND). Umjesto opskurnog grafikona prostora boja, on ističe sukobe boja s naglaskom na to jesu li one dovoljno blizu da uzrokuju probleme kao linije ili točke ili područja. Za imenovanje boja, a ne da se oslanjaju na upitni popis boja generiran pomoću crowdsourcinga, Izvještaj o boji koristi prilagođeni popis imena boja kreiran od strane Susie. Popis XKCD sadrži "losos" i "vapno zeleno" kao nazive boja, ne nude smeđe i niti jednu od "svijetlih" varijacija naziva boje. Fokus je bio na boji kao nijansi, ali jedan od razloga što uparene palete vidite kao popularan izbor u vizualizaciji podataka jest taj što čitatelj lako može verbalno razlikovati tamno narančastu i svijetlo narančastu liniju na način koji nije tako lak u razlikovanju čvorova u boji lososa od narančastog čvora.

Izuzetno sam zadovoljan koliko dobro funkcionira Viz Palette, ali po meni je prava vrijednost bila izgrađena. To mi je pomoglo da stvarno shvatim praksu u boji za vizualizaciju podataka tako da mogu dati još nekoliko pravila za upotrebu boja u vizualizaciji podataka:

Optimizirajte svoju paletu za svoj zbir podataka

Ne koristite paletu boja u 20 boja za skup podataka koji ima samo četiri kategorije. Ako ste zastrašili gradnjom paleta boja, a zatim odaberite 20 najprepoznatljivijih i lako imenovanih i tematski sličnih boja iz svoje 20 paleta boja, nemojte samo koristiti prve četiri.

Boja je Društvena

Viz Palette ne zna za što koristite svoje boje. Ne znate pokušavate li sastaviti oštru paletu za veliku prezentaciju ili sastanak ispunjen pitanjima ili za vaš istraživački viz u bilježnici. Ako je sastanak i očekujete da će drugi ljudi razgovarati o vašem grafikonu, onda biste trebali pokušati prepoznati dobro ime. To znači da se boje na grafikonu trebaju verbalno razlikovati tako da ako član publike imenuje jedan od obojenih elemenata, ne bi bilo šanse za zbrku. "Crveni" ne bi trebao započeti razgovor o tome je li referenca na točku fuksije ili na sumornu ružu podataka ili na tamno ružičastu točku podataka. S druge strane, ako je riječ o vašoj bilježnici, trebali biste naglasiti razliku u boji. Nije važno ako ne možete imenovati boje na grafikonu koji koristite za istraživanje, jer nije suradljiv, već samo trebate biti sigurni da možete učinkovito prepoznati razliku između podataka. Ako se radi o velikoj prezentaciji, pripazite na sljepoću i pokušajte održati neku tematsku sličnost.

Sve su to vizualno različite boje i pogodne su za ove rasporede vizualizacije podataka. Ako je ovo bilo u istraživačke svrhe, to ne bi predstavljalo nikakve probleme, ali ako bi to bilo predstavljeno publici, imali bi vremena da o tome komuniciraju jer bi se svi elementi mogli opisati narančasto.

Boja visoke kardinalnosti je loša

Umjesto da pokušavate pronaći tu nemoguću paletu boja s 20 boja, prestanite koristiti boju kada imate toliko dimenzija. Prepoznatljivo je, zbunjujuće je i jednostavno preuzimate složenost i odlučivanje za svog čitatelja. Ali ako morate, prepoznajte da je teško i da će trebati vremena i truda. Usmjerite to prema svojim dionicima, zakažite malo vremena za to, nemojte ga samo brisati. Jedan glavni razlog zašto su ljudi toliko loše u boji pri vizualizaciji podataka je taj što ne predviđaju vrijeme za to.

Vizualno prepoznatljiva paleta 24 boja poput ove je ostvariva, ali nikad je ne treba koristiti. Ako je svrha objašnjenje, tada boju treba koristiti samo za važne točke, a ostatak treba pretvoriti u kontekstualne točke pomoću zajedničke odgovarajuće zasićene boje. Ako je svrha istraživanje, tada se treba koristiti interaktivnost ili dopunski ukras, kao što su napomene, a ne glomazna legenda od 24 predmeta.

Neka bude lijepo

Izbjegavao sam bilo kakvo spominjanje estetike, ali to je besprijekorno odjeveni slon u sobi. Umjesto da ciljate na ljepotu, usredotočite se na teme boja, poput tonova zemlje, visokog ključa, neona, pastelnih i nezasićenih. Pokušajte održati temu svojim bojama, u suprotnom će se boje koje nisu u toj temi isticati i signalizirati važnost vašim čitateljima. To može značiti boje s istom razinom zasićenosti (prigušene sivkaste boje) ili istu svjetlost (pastelnu), ali i susjedne nijanse na kotaču u boji (ako imate uglavnom plavu i zelenu i jednu narančastu boju koja će se narančasta istaknuti kao da je posebna) ,

Umjetničke palete poput ove podijeljene komplementarne palete uvijek su dobar izbor za pokušaj razvoja prepoznatljive palete. Iako umjetničke i osobito slikarske palete nisu uvijek prikladne za vizualizaciju podataka, njihovu učinkovitost možete izmjeriti pomoću Viz Palete.

Razmislite o interakciji boje

Gestalt efekti boja znače da paleta boja koja djeluje za jednu vrstu grafikona ne mora imati drugu. Neke su vrste grafikona vrlo elastične (poput složenog grafikona), dok su druge vrlo krhke (sve crte) i to bi trebalo utjecati na vašu odluku ne samo o tome koju ćete boju koristiti, već i koji izgled koristiti. Pokušajte posebno izbjegavati prozirne boje, koje se nikada ne smiju koristiti samo za posvjetljivanje (koristite čvrste svjetlije boje koje očekujete) i rijetko ih treba koristiti na drugi način. Ova diplomirana simbolička karta upotrebe vode iz New York Timesa prikazuje neplaniranu interakciju boja između slojevitih prozirnih elemenata koji stvaraju boje koje ne postoje u legendi, kao i boje koje postoje u legendi, ali ne prenose točno podatke.

Integrirajte boju, nemojte je samo dodavati

Odluke u boji nisu odvojene od ostalih grafičkih odluka. Možete obraditi skup podataka i računati njegovu strukturu u svojim strategijama boja. Pokušajte osigurati da, ako doista trebate predstavljati 20 različitih vrijednosti ili vas ograničava neki drugi grozan izbor (poput marki boja), izgled je elastičan. U tim se situacijama pokušajte više potruditi da se boje ne preklapaju ili da se regije grafikona ne boje nasumično, već su obojene kako bi se izbjegli najizazovniji sukobi u boji.

Ovi mrežni dijagrami koriste složenu shemu boja i imaju visoku vizualnu složenost. Ne bi bilo dovoljno da pronađete savršenu paletu, potrebna im je promišljen dizajn i dodatni elementi (poput minimapa ili mreže zajednica).

Imena boja važnija su za suradnju, a ne za istraživanje

Imenovanje boja i drugi društveni aspekti vizualizacije podataka su važni. Ako imate grafikon s tri različita zelenila, osjećat ćete se prilično glupo kad netko kaže „Taj zeleni je važan“, a odgovor nije konstruktivan, već: „Mislite na svijetloplavkastu ili tamniju morsku zelenu? "Ako je vaša organizacija koristila određene boje ili palete za signaliziranje određenih mjernih podataka ili pragova, unesite to u svoj dizajn. Ako se grafikon želi predstaviti skupinama s jakim kulturnim udruženjima o boji, vodite računa o tome. Ne postoji pravilo za to, crvena nije uvijek loše, a zelena nije uvijek dobro, to ovisi o podešavanju.

Upotrijebite Alate

Postoje alati i prostori u boji koji omogućuju prikladno mjerenje osobina boja koje se mogu koristiti za izradu boljih paleta, uključujući palete sigurne u boji i visoko uspješne palete visoke kardinalnosti. Viz Palette je sjajna, ali možda imate određeniji slučaj za imenovanje boja ili JND. Razumijevanje knjižnica poput chroma.js obavezno je za sve koji žele biti učinkoviti u vizualizaciji podataka.

Veselim se

Nismo završili s Viz Palette. Nakon što smo gledali kako ga ljudi koriste i čuli povratne informacije, razmotrili smo nekoliko značajki koje bismo im dodali za koje mislimo da bi poboljšale njegovu učinkovitost.

  • Računajte na osvjetljenju (tako da nenamjerno nemate boju u svojoj paleti koja je mnogo svjetlija od ostalih boja).
  • Imajte način usporedbe tako da možete vidjeti jednu paletu pored druge.
  • Dopustite da se Izvještaj o boji i Boje u akciji lako ugrađuju.

Općenitije, volio bih da Viz Palette djeluje kao pristupačna ulazna točka u naprednije, ali još uvijek praktički važne aspekte boje. Po mom iskustvu zajednica za vizualizaciju podataka prebrza je za odbacivanje boje starim izgovorom "Boja je tvrda". Boja je tvrda, ali isto je tako s mrežnom vizualizacijom, napomenama, animiranjem mape proizvoda i pravljenjem mjehurića. Izrada Viz palete drastično je poboljšala moje razumijevanje boje, a isto će učiniti i vaše bavljenje bojom.

Zahvaljujemo Susie Lu & rachel binx & Helen Ngo na povratnim informacijama.