Autor: Michał Santus
3 kwietnia 2020

Jak korzystać z kolorów do prezentacji danych?

Percepcja kolorów

Kolory, kolory… nie dla wszystkich. Jest pewien odsetek osób, które mają problemy z rozróżnianiem kolorów. W dodatku sprawa nie jest “prosta”, są różne wady i ich stopnie. Nie jest tak, że osoby z zaburzeniami postrzegania kolorów widzą świat czarno biały.

Kolory do prezentacji danych
Rozróżnianie kolorów

Jedną z częstych wad jest na przykład problem z rozróżnieniem koloru czerwonego i zielonego z jednoczesnym brakiem problemów z wszystkimi innymi. Osoby bez wad zobaczą liczbę 74, osoby z pewnymi problemami zobaczą liczbę 21 a niektórzy nie będą potrafili odczytać żadnej liczby.

Źródło: Wikipedia

W związku z tym, by zapewnić jak najszerszy odbiór naszych dashboardów analitycznych, powinniśmy mądrze operować kolorem. Z tego wpisu dowiesz się, jak zrobić to zgodnie z dobrymi praktykami i z myślą o szerszym gronie odbiorców. Do tego kilka praktycznych i kilka ciekawych zastosowań.

Jak dobierać kolory z palet standardowych w wizualizacjach danych?

Kolory według miar

Wnikliwy użytkownik Qlik zauważy, że w gamach kolorystycznych narzędzia Qlik Sense nie ma skali czerwony-zielony, która wydawałaby się najpopularniejszą do reprezentowania wskaźników źle-dobrze. W to miejsce mamy skalę niebieski-czerwony, gdyż z tą właśnie gamą najmniej użytkowników ma problem. Możemy ją interpretować tak:

czerwony – źle (krew)niebieski – dobrze (niebo)
czerwony – wzrost (gorąco), niebieski – spadek (zimno)
Gradient rozbieżny Qlik

Jest to tak zwany gradient rozbieżny, gdzie skala koloru przechodzi płynnie od jednej do drugiej, reprezentującej jej przeciwieństwo.

 

Kolejną bezpieczną skalą w standardach Qlik jest skala jednego koloru, ale różnego nasycenia. Każdy użytkownik, nawet z największymi problemami w odróżnianiu kolorów będzie potrafił odróżnić jasne i ciemne zabarwienie tego samego (dowolnego) koloru.

Gradient sekwencyjny Qlik

Jest to tak zwany gradient sekwencyjny, gdzie zmienia się tylko natężenie koloru.

Klasy sekwencyjne Qlik

Oba gradienty występują w opcji przedziałów. Jest to lepsza reprezentacja, gdy chcemy mieć jasną informację przedziałach w jakich znajduje się dana wartość.

 

Przedziały kolorów

Qlik automatycznie decyduje o przedziałach, później zobaczymy, jak sami możemy nimi sterować.

Co ciekawe, kolor belki wykresu nie musi odpowiadać wartości miary, jest to wręcz niewskazane, gdyż nie wnosi żadnej dodatkowej informacji. Sens ma za to pokolorowanie według innej miary, na przykład marży %.

Kolorowanie według drugiej miary Qlik

To bardzo ciekawe rozwiązanie. Pozwala zestawić dwie miary. Mimo że Telefony są na górze listy z największą sprzedażą, wcale nie zarabiamy na nich najwięcej! Największa marża wartościowa jest w podkategorii Kopiarki.

Kolorowanie według drugiej miary - selekcja

Co ciekawe – a wielu użytkowników może to przeoczyć – mamy możliwość wykonania selekcji na legendzie koloru. W naszym przykładzie możemy wybrać wszystkie Podkategorie z marżą poniżej zera. Wystarczy przeciągnąć wskaźnik myszy po legendzie. Dla precyzji – mamy możliwość wpisania w “chmurce” konkretnej wartości.

Dotychczas używane kolory pochodziły z wbudowanych, domyślnych palet. Qlik Sense dysponuje jeszcze paletami alternatywnymi a w razie potrzeby mamy możliwość prostego wgrania palet własnych (lub palet pobranych z internetu). Co ciekawe, palety te zmieniają naraz wygląd wszystkich obiektów. W ten sposób możemy stworzyć identyfikację kolorystyczną firmy i używać jej we wszystkich budowanych w firmie dashboardach.

Kolory według miary

Kilka ciekawych przykładów użycia koloru według miary:

OEE (Overall Equipment Efficiency). Kalendarz wykorzystania maszyn w zakładzie produkcyjnym. Mało czerwonych punktów, czyli stuprocentowego wykorzystania w ciągu dnia. Sporo przestojów. Zdecydowanie pole do poprawy efektywności.

Jak nie używać kolorów

Kolory wymiarów

Tak samo jak wbudowanymi kolorami gradientowymi, dysponujemy w Qlik paletami kolorów dla wymiarów.

Przede wszystkim zwróćmy uwagę, że nie powinniśmy kolorować słupków na wykresie, w którym występuje tylko jedna miara. Jest to zła praktyka. Poszczególne słupki rozróżniane są… właśnie słupkami. I to wystarczy, dodatkowy kolor wprowadza tylko element rozpraszający.

Nie wprowadzamy koloru, jeżeli nie wnosi nic nowego.

Wykres ciastkowy Qlik- kolorowanie według wymiaru

Jednocześnie, kolor wymiaru będzie dość istotny w wykresie kołowym, by ułatwić odróżnienie segmentów.

Kolor ułatwi odróżnienie segmentów w wykresie kołowym, aczkolwiek bez niego też nie będziemy zgubieni – Qlik Sense zadba o oddzielenie poszczególnych segmentów przedziałkiem (po prawej).

Wykres słupkowy - kolorowanie według wymiaru Qlik

Kilka kolejnych przykładów sensownego użycia koloru według wymiaru:

W tym wykresie wyświetlamy przychód według produktu, ale kolorujemy według kategorii. Od razu widzimy ciekawe wnioski – top cztery produkty należą do kategorii Technologia.

 

Wykres rozrzutu - kolorowanie według wymiaru Qlik

Wykres badający wartość eksportu i importu danego kraju (rok 2016). Kierunek (eksport lub import) jest wymiarem i również według tego wymiaru nadane jest kolorowanie. Dzięki temu widzimy, że (bez zaskoczeń) Chiny więcej eksportują, a USA więcej importuje. Gospodarka Niemiec to również w dużej części eksport. Nie da się uzyskać takiej przejrzystości i zagęszczenia informacji np. na wykresie słupkowym.

 

Wykres rozkładu jakości maszyn Qlik

OEE (Overall Equipment Efficiency). Jakość produkcji według maszyny i zmiany. Jeden punkt to zmiana na danej maszynie. Jak widać, zmiana dzienna ma z reguły większe problemy z jakością produktów niż zmiany poranne i nocne.

Kolor wymiaru wykres liniowy Qlik

Oczywiście kolorowanie według wymiaru jest istotne w wykresie liniowym z dodatkowym wymiarem, rozbijającym linię. Bez niego nie udałoby się nam rozróżnić linii.

 

Kolory segmentu miary Qlik

Kolory własne

Kolory własne miar

W Qlik Sense korzystamy z bibliotek miar i wymiarów. Po utworzeniu miary, możemy określić jej zakres kolorystyczny i użyć go w wizualizacji, w miejsce standardowych kolorów layoutu aplikacji.

  1. Wybieramy schemat szablonu – sekwencyjny (czyli ze stopniowymi przejściami) lub klasy. 2. Decydujemy, czy przedziały kolorów będą bezwzględne (np. powyżej 1 mln zł marży i poniżej) czy względne (np. top 80% sprzedaży na pewien kolor). Uwaga! Dla miar procentowych zastosujemy przedziały bezwzględne od 0 do 1. 3. Decydujemy o wartości i kolorze przedziału.

Dzięki własnej definicji mamy pełną kontrolę nad przedziałami. W przypadku nierównomiernego rozłożenia wartości możemy delikatnie “podrasować” te liczne, ale najniższe, jak w przykładzie poniżej. Dane dla serwisu Mapillary (społecznościowe zbieranie zdjęć ulic i dróg).

Użycie koloru na mapie

Kolorowanie kraju według liczby zdjęć. Wyróżniają się Stany Zjednoczone (gdzie wykonano ponad 400 milionów zdjęć), pozostałe kraje zlewają się.

Użycie kolorów na mapie skewed

Ten sam wykres i ta sama miara, ale ze zmienioną skalą koloru. Poza USA widzimy istotną liczbę zdjęć w Niemczech, Francji czy Rosji.

Gradient koloru Qlik
Gradient koloru Qlik 2
Nadanie kolorów wartościom wymiarów Qlik

Kolory własne wymiarów

O kolorach dla poszczególnych wartości wymiaru decydujemy również po zdefiniowaniu pola jako wymiar w bibliotece.

Każdej wartości przypisujemy wybrany kolor. Możemy również zdefiniować “Inne” (które będą zastosowane przy ograniczeniu wymiaru do top N produktów) oraz wartości Null.

Użycie własnych kolorów wartości wymiarów Qlik

W naszym przykładzie – wykres punktowy (jeden punkt to klient) porównania sprzedaży i marży %. Kolor według rodzaju działalności. Widzimy wyraźnie, że klienci, z którymi handlujemy na zasadzie brokerskiej (Cintano i Castagneto) nie mają może największej sprzedaży, ale największą marżę %, Dodatkowo jeden klient – Bollengo – ma kolor szary, czyli kolor, który zdefiniowaliśmy dla wartości Null. Wynika to z tego, że z tym klientem handlujemy na zasadzie zarówno działalności brokerskiej jak i dystrybucyjnej.

Kompozycje (Themes)

Poza kolorami z palet standardowych mamy w Qlik Sense możliwość wgrania palet własnych. Są to tak zwane kompozycje.

Qlik ma kilka wbudowanych kompozycji. Standardowo aplikacje otwierają się w kompozycji Qlik Sense Classic. Alternatywą jest na przykład Qlik Sense Breeze – z ładnym motywem morskim.

 

Kompozycja Qlik Sense Classic

Kompozycja Qlik Sense Classic:

kompozycja-qlik-sense-breeze-morska

Kompozycja Qlik Sense Breeze:

Poza wbudowanymi kompozycjami mamy możliwość wgrywania własnych. Możemy pobrać przykładowe z internetu (wgrywane jak zwykłe Extensions na serwer) lub stworzyć własne. Do obu celów społeczność Qlik stworzyła stronę internetową – wizarda, dostępną pod adresem https://sensetheme.com.

Jest to odpowiedź na potrzeby firm, które mają opracowaną własną identyfikację wizualną i pragną, by została również przeniesiona do Qlik. Zaletą kompozycji jest to, że raz zdefiniowana ulega ponownemu użyciu. Za każdym razem, gdy tworzymy nową aplikację to Qlik Sense dba o spójność wyglądu.

Kompozycja grafiki własna Qlik

Przykładowa własna kompozycja. Sposób na kontrolę koloru tła, tekstu, osi ale również rozmiaru i kroju czcionki:

Wyrażenia kolorów

W większości miejsc w Qlik (miary i wymiary) mamy możliwość kolorowania według wyrażeń, które to formuły nadpisują kolory z kompozycji. Gdziekolwiek widzimy opcję koloruj według wyrażenia, możemy wstawić funkcję, która zwraca kolor. Powinna ona zwracać kolor w formacie RGB (red, green, blue) lub ARGB (alfa – czyli przezroczystość, red, green, blue) lub kolor w formacie heksadecymalnym (#000000 – to kolor czarny). Opcjonalnie możemy jeszcze zwrócić kod koloru jedną z funkcji o nazwie kolor, np. Red(), Blue(), Cyan() etc.

W tym miejscu używamy dowolnej formuły, która zwróci kolor w jednym z wymienionych formatów. Najczęściej będą to funkcje IF lub COLORMIX ale może to być również… pole zawierające kod koloru dla wymiaru wczytany razem z nim w modelu danych.

By uzyskać efekt dynamicznego przejścia między kolorami dla miar, które zwracają wartości ciągłe, używamy jednej z funkcji COLORMIX. Najprostszą jest funkcja ColorMix1. Pierwszym jej parametrem jest wartość o 0 do 1, drugim kolor dla wartości zero a trzecim kolor dla wartości 1. Wszystkie wartości miary pomiędzy zero i jeden uzyskają odpowiednią barwę obliczoną przez Qlik Sense i przypisaną tak, by zachować ciągłość między jednym a drugim kolorem.

Uzycie ColorMix1

Użycie ColorMix1 do kolorowania tła komórki w tabeli.

Kolorowanie komórek wizardem

Qlik Sense udostępnia również łatwiejszą możliwość kolorowania komórki, bez wyrażenia, a z wizardem. Identycznie, jak warunkowe formatowanie koloru w obiekcie KPI.

W celu poznania innych praktycznych zastosowań koloru i przećwiczenia tych opcji w praktyce, zapraszamy do udziału w naszych szkoleniach oraz webinariach.