# Kodowania graficzne

#### Wstęp

Co znajdziesz w tym artykule?

* Dowiesz się, czym jest percepcja.
* Poznasz kilka skutecznych strategii kodowania informacji na wykresach.
* Poznasz własności kodowań graficznych.
* Poznasz podstawy efektywnego tworzenia wizualizacji.

Pojęcie "kodowanie" najczęściej odnosi się jedynie do czynności pisania kodu, dlatego jego użycie w omawianym przez nas kontekście, może zaskakiwać. Warto jednak zauważyć, że kodowanie w świecie idealnie pasuje również w naszym kontekście. Zauważmy, że kodowanie w świecie programistycznym to jeden z wielu elementów bardzo złożonego programowania, obejmujących wiele czynności, m.in. szukanie rozwiązań problemów i różnorakie testy programu, który ma przynieść określone wartości.

Podobnie jest i tutaj. Możemy myśleć o kodowaniu graficznym jako o rodzaju zapisywania informacji na wizualizacji i dobieraniu odpowiedniej formy do jej przedstawienia.
Jednak z tym procesem wiąże się także wiele innych zadań: selekcja danych, wybór reprezentacji wykresu, analityka problemu i testy rozwiązania problemu.
W artykule zostaną przedstawione pewne przydatne koncepcje, które wprowadzą nas w świat kodowania graficznego.

#### Obciązenia percepcyjne

Wizualizacja danych jest w bardzo dużym stopniu ograniczona przez nasze możliwości percepcyjne i obciążenie kognitywne, jakie możemy skutecznie przetworzyć w danym czasie. Percepcją nazywamy procesy zmysłowe oraz interpretacyjne, które wychwytują i identyfikują określone obiekty lub wydarzenia pochodzące ze świata zewnętrznego. W omawianym kontekście oznacza to konsekwencje związane z projektowaniem wizualizacji. To analityk danych jest odpowiedzialny za odpowiednią selekcją danych i ich właściwą reprezentację. Łatwo jest pokazać płaską strukturę danych, podczas gdy pewnym wysiłkiem staje się przyswojenie informacji przedstawionej za pomocą przestrzennej struktury danych, np. wykresu 3D.

##### Percepcja wizualna

Proces percepcji wizualnej to sposób, w jaki oczy i mózg interpretują informacje wyświetlane na ekranie. Proces ten zachodzi tak szybko, że często nie jesteśmy świadomi, że go wykonujemy. Proces wizualny to sposób, w jaki nasze oczy i mózg współpracują ze sobą, aby sformułować wniosek dotyczący tego, co akurat widzimy. Nasz wizualny proces percepcyjny zachodzi w trzech szybkich krokach.

###### Krok 1 - Skanowanie struktury i układu wizualizacji

W pierwszym kroku nasze oczy i mózg szybko i nieświadomie skanują strukturę i układ widzianej treści. Neurony w mózgu wyłapują przeduwagowe atrybuty wykresów, takie jak: forma, kolor, pozycja i ruch.


W tym kroku zauważamy główne postacie z wizualizacji, czyli w naszym przykładzie dwa główne wykresy na dashboardzie.

###### Krok 2 - Sprawdzanie wizualizacji pod kątem wzorców

Po wstępnym skanowaniu mózg dokonuje przeglądu wizualizacji. W pierwszym kroku mózg wykonał pracę mającą na celu poznanie struktury, w drugim skupia się na poszukiwaniu wzorców w grafice. W tym kroku mózg rozpoznaje najważniejsze szczegóły w oglądanych wizualizacjach danych.


Ten krok pozwala nam zauważyć na wizualizacji wartości, które znacząco odbiegają od innych. W omawianym przykładzie takimi wartościami będą kolor i kształt wykresu.

###### Krok 3 - Sprawdzanie wykresów w poszukiwaniu istotnych szczegółów

Pamięć robocza przechowuje kilka wyraźnych punktów z kroku drugiego, a teraz szuka istotnych szczegółów do tego, co zapamiętała. To w tym kroku mózg stara się wyciągnąć użyteczne wnioski z przedstawionej wizualizacji danych.


W tym kroku skupiamy się na szczegółach naszej wizualizacji. Rozpoznajemy detale, które w poprzednim kroku przykuły naszą uwagę.

##### Podsumowanie

Tworząc informacje wizualne, pamiętaj o systemie wzrokowym. Odróżniaj ogólne kategorie informacji od siebie kolorem lub formą, tak aby stały się one wyraźne już na pierwszym etapie percepcji. Dostosuj krok drugi, wyróżniając kluczowe informacje ze wzorca. Pamiętaj, że pamięć robocza może w jednym momencie pomieścić jedynie ograniczoną ilość informacji, dlatego aby przyspieszyć proces analizy w kroku trzecim, wyeliminuj wszystkie zbędne informacje.

##### Własności kodowań graficznych:

Bazując na teorii percepcji wizualnej, łatwo zauważyć, jak ważne jest, aby w tworzonych wizualizacjach, wyróżniać kluczowe informacje. W tym celu potrzebna jest specjalna hierarchia, tzw. hierarchia właściwości kodowań.

Poniżej znajduje się lista najważniejszych właściwości kodowań graficznych, które zostały ustawione od najbardziej skutecznych do najmniej.

1. Pozycja (na tej samej skali).

1. Pozycja (na różnej skali).
2. Długość, kierunek, kąt
3. Powierzchnia.
4. Objętość, krzywizna.
5. Faktura, nasycenie Koloru.

Hierarchia własności kodowań graficznych przedstawiona w artykule *Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods*. Jego autorzy, Cleveland & Mc Gill, znaleźli wykresy kołowe i ułożone wykresy słupkowe, które w przybliżeniu są równoważne w wydajności. Zalecili użycie wykresu słupkowego lub punktowego do kodowania tych samych informacji.


Obraz pochodzi ze strony: [In Defence of the Humble Pie Chart – Brian Cort](https://briancort.com/in-defence-of-the-humble-pie-chart/)

Ta hierarchia wyjaśnia również, dlaczego wykresy 3D są tak nieskuteczne. Na przykład wykres słupkowy 3D koduje objętość/długość i jako medium informacji jest mniej skuteczny niż kodowanie pozycji/długości przy użyciu wykresu słupkowego. Innym przykładem jest kodowanie zmiennych za pomocą wykresu kołowego, który przekazuje dane za pomocą połączenia kąta, powierzchni i długości. Bardziej skutecznym przedstawieniem tych samych danych będzie ich prezentacja na wykresie słupkowym, który, który koduje informacje za pomocą pozycji i długości.

##### Przykład:

Podany przykład porównuje kodowanie zmiennej klasy biletów przy pomocy wykresu kołowego posiadającego kąt (wykres 1.) i wykresu kołowego posiadającego pozycje (na tej samej skali) (wykres 2.).



Wykresy słupkowe ustawiają serie słupków wzdłuż wspólnej osi, dzięki czemu można łatwo zobaczyć ich względną długość. Intuicyjnie widać, że jeśli zakrzywimy wykres słupkowy tak, że jego koniec dotyka początku, to stworzymy wykres kołowy.

##### Przykład:

Rozważmy teraz przykład dwóch wykresów kolumnowych. Postaraj się odpowiedzieć na następujące pytanie:

* Gdzie jest więcej kobiet w G1, czy w G5?

Zauważ, że analizując pierwszy wykres, trudno jest uzyskać odpowiedź na postawione pytanie.


Teraz przyjrzyj się drugiemu wykresowi


Warto wspomnieć o wartościach kodowanych przez przedstawione przykłady. Pierwszy wykres koduje długość. Drugi zaś koduje pozycje na tej samej skali.

Drugi wykres jest bardziej skuteczny i ma mniejsze obciążenie kognitywne, co pozwala odbiorcy skuteczniej przetworzyć przedstawiane na nim informacje.

### Podsumowanie

Kodując informacje wizualne, pamiętaj o systemie wzrokowym. Odróżniaj ogólne kategorie informacji od siebie kolorem lub formą, tak aby stały się one wyraźne już na pierwszym etapie percepcji. Pamiętaj, że pamięć robocza może w jednym momencie pomieścić ograniczoną ilość informacji, dlatego aby przyspieszyć proces analizy, wyeliminuj wszystkie zbędne informacje. Pamiętaj również o własności kodowań graficznych i obciążeniach percepcyjnych.

Kod użyty dla wizualizacji:

https://colab.research.google.com/drive/12LBQXreQg7Adj6d-wqqtymeuzduIXU6C?usp=sharing

Bibliografia:

* Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods, William S. Cleveland and Robert McGill
* https://www.zencos.com/blog/data-visualization-improve-perception/