10. Návrh efektivních vizualizací www.business2community.comwww.idvbook.com www.greenplum.com www.cmu.edu Efektivní vizualizace • Úspěšná vizualizace = efektivní a přesné sdělení zamýšlené informace cílovému publiku + účel vizualizace (prozkoumání, potvrzení hypotézy, prezentace, …) • Existuje nesčetně mnoho možností pro mapování datových komponent na grafické entity a atributy i celá řada interaktivních nástrojů – nalezení jejich vhodné kombinace není jednoduché Neefektivní vizualizace • Příliš matoucí či složité pro interpretaci cílovým publikem • Nežádoucí deformace, ořezání nebo ztracení dat při mapování • Nedostatečná podpora interakce – změny pohledu, ovlivnění použité barevné škály, … • Zanedbaná estetická složka Efektivní vizualizace • Je mnohem jednodušší navrhnout špatnou vizualizaci než kvalitní • Cílem je tedy poskytnout přehled možných návrhů vizualizace včetně běžných problémů a jejich řešení www.vizworld.com Periodická tabulka vizualizačních metod • http://www.visual- literacy.org/periodic_table/periodic_table.html Hlavní kroky při návrhu vizualizace 1. Rozhodování, jakým způsobem mapovat datová pole na grafické atributy 2. Výběr a implementace metod pro změnu pohledu 3. Výběr množství dat pro vizualizaci 4. Zobrazení doplňkových informací – labels, použité barvy, … 5. Celková estetika výsledného zobrazení Intuitivní mapování dat na vizualizaci • Při vytváření efektivní vizualizace je nutné vzít v úvahu sémantiku dat a kontext typického uživatele • Výběr vhodného mapování dat na grafické entity, které vyhovuje mentálnímu modelu uživatele • Čím více je návrhář při předpovídání očekávání uživatele konzistentní, tím je menší riziko dezinterpretace Intuitivní mapování dat na vizualizaci • Intuitivní mapování vedou k rychlejší interpretaci www.physlink.com Způsoby mapování • Nejběžnější je mapování prostorových atributů dat (zeměpisná šířka, délka) na pozice na obrazovce • První vizualizace využívaly lidskou schopnost určit vztah mezi pozicí vykreslenou na výstupním zařízení a odpovídající pozicí ve 3D světě • S příchodem animace došlo k intuitivnímu a přirozenému způsobu zobrazení dat měnících se v čase Způsoby mapování • Některá mapování jsou intuitivní až ve spojení s příslušným kontextem – např. mapování teploty na barvu • Barva má specifickou interpretaci v mnoha oblastech – kartografie, geologie, … • Aplikační doména vizualizace tedy významně ovlivňuje použití barevného atributu Způsoby mapování • Jiný způsob reprezentace teploty (v případě, že vyčítáme hodnoty z teploměru) – výška, délka čáry • Délka často využívána v medicíně – zobrazení krevního tlaku, … www.my-health-software.com Výběr způsobu mapování • Nejdůležitější je kompatibilita mezi škálováním dat a škálováním odpovídajících grafických entit nebo atributů – pro uspořádané datové atributy (např. věk) není vhodné použít neuspořádané grafické atributy (tvar) – neuspořádané datové atributy (místo narození) není vhodné mapovat na uspořádané grafické atributy (délka) Výběr způsobu mapování • V některých případech ale zajímavé prozkoumat data použitím ne zcela intuitivního mapování – odhalení nečekaně zajímavých vlastností dat • Pravidlo mapování = co nejintuitivnější nastavení defaultního mapování, aby odpovídalo požadavkům běžného uživatele + umožnění uživateli měnit různá nastavení Výběr a modifikace pohledů • Často je použití jednoho pohledu na data nedostatečné pro prozkoumání všech vlastností a vztahů obsažených v těchto datech • Klíčem je schopnost odhadnout způsoby pohledů a změn pohledů, které typicky uživatelé používají a poskytnutí intuitivního ovládání a úpravy pohledů na základě požadavků uživatele Výběr a modifikace pohledů • Každý podporovaný pohled by měl být jasně označen a výběr nového pohledu by měl vyžadovat minimální akce ze strany uživatele • Změny pohledu spadají do několika kategorií a jejich zahrnutí do základní funkcionality by mělo odrážet priority uživatele • Tyto kategorie jsou: Výběr a modifikace pohledů • Operace rolování (posouvání) a zoomování – nutné v případech, kdy nelze celou datovou množinu zobrazit uživateli v požadovaném rozlišení. • Modifikace barevné palety – požadovaná téměř vždy. Minimálně možnost používat různé barevné palety. Dále možnost ovlivňovat jednotlivé barvy nebo celé barevné palety. Výběr a modifikace pohledů • Modifikace mapování – umožňuje uživateli přepínat mezi různými způsoby vizualizace stejných dat. Vlastnosti dat, které jsou v jednom mapování skryty, se objeví v jiných. Výběr a modifikace pohledů • Řízení škálování – dovoluje uživateli modifikovat rozsah a rozložení hodnot příslušného datového pole ještě před jeho mapováním. • Řízení level-of-detail – poskytuje schopnost eliminovat nebo naopak zvýraznit detaily a podporovat pohledy na různých úrovních abstrakce. Možnost přepínat mezi různými úrovněmi (viz obrázek) Výběr a modifikace pohledů • Ve všech případech je zásadní, aby manipulace s pohledy byly intuitivní a uživatelsky lehce zapamatovatelné a aby měly vhodně zvolenou přesnost • Pokud je to možné, je obecně preferována možnost přímé manipulace (změny jsou specifikovány přímo na obrázku) Hustota informace • Jedním z klíčových rozhodnutí při návrhu vizualizace je určení, kolik informace zobrazit • Rozlišujeme dvě extrémní situace: 1. máme pouze malé množství informace pro zobrazení 2. snažíme se sdělit příliš mnoho informace 1. Malá hustota informace • Často rozlišujeme mezi dvěma nebo třemi odlišnými hodnotami – poměr žen a mužů – odvození dalších veličin ze základních – např. zobrazení dvou čísel, jejich součtu a rozdílu • V těchto případech je efektivnější jednoduše zobrazit tyto kvantitativní hodnoty jako text – šetříme místo na obrazovce www.regent-college.edu 1. Malá hustota informace Pouze proto, že můžeme vizualizace vytvářet, ještě neznamená, že je musíme vytvářet! 2. Vysoká hustota informace • Přílišné množství informace může vést ke zmatení a obtížné interpretaci na straně uživatele • Důležitá informace obsažená v datech může být tímto rozptýlena a uživatel může mít problém s určením, kam zaměřit svoji pozornost 2. Vysoká hustota informace • Existuje mnoho efektivních řešení: – např. uživatel může zobrazovat a skrývat různé komponenty zobrazení – uživatel se často rozhodne, které části jsou pro něj nejdůležitější a ostatní části jsou zobrazeny na požádání – využití násobných obrazovek – ve formě disjunktních panelů nebo lze povolit částečné překryvy Klíče, označení, legendy • Dalším běžným problémem mnoha vizualizací je neposkytnutí dostatečné doplňkové informace, jejíž přítomnost by zabránila nejednoznačné a nepřesné interpretaci • Tato dodatečná informace by měla obsahovat detailní popisek příslušných zobrazených datových polí • Pokud jsou použity symboly, musí být poskytnut klíč pro určení jejich významu • Pokud má i barva svůj význam, musí být přítomna dostatečná informace pro její jednoduchou interpretaci Klíče, označení, legendy Klíče, označení, legendy • Využití značek má svá pozitiva i negativa • Špatný výběr značek a jejich hustota mohou zastínit samotné zobrazené datové hodnoty Klíče, označení, legendy • Samotné pozice označení mají vztah k tomu, jak čitelná bude daná interpretace dat Klíče, označení, legendy • Musíme rozhodnout, jaký rozsah hodnot bude zobrazen • Pokud nezobrazíme samotný rozsah, riskujeme špatnou interpretaci dat • Např. při práci s procentuálním vyjádřením očekáváme, že zobrazená data jsou v rozsahu 0 – 100. To v mnoha případech vede k plýtvání prostoru obrazovky: Klíče, označení, legendy Klíče, označení, legendy • Při použití násobných oken je nutné zachovat konzistentní označení • Změna pozice označení a klíčů nebo rozsahu zobrazených hodnot pro stejné pole dat může způsobit zmatení a zvyšuje riziko špatné interpretace dat • Pokud jsou například změny v rozsahu nezbytné, měla by označení tyto změny rovněž reflektovat Použití barvy • Jeden z nejčastěji špatně používaných parametrů při návrhu vizualizace je barva • Výběr špatné barevné škály nebo pokus o sdělení přílišného množství kvantitativní informace za použití barvy vede k neefektivní a zavádějící vizualizaci • Vnímání barvy je navíc závislé na použitém kontextu Použití barvy • Musíme mít na paměti, že řada lidí je barvoslepých nebo trpí jinou poruchou vnímání barvy (až 10% mužů) • Následující pravidla mohou pomoci při návrhu efektivního využití barvy ve vizualizaci: Použití barvy 1. Pokud daný vizualizační úkol vyžaduje absolutní rozhodnutí, měli bychom použít pouze omezený počet různých numerických úrovní Použití barvy 2. Pokud je to možné, využívat redundantní mapování, například mapování určitého pole dat na barvu a velikost zároveň Použití barvy 3. Při vytváření barevných map pro reprezentaci numerické informace se musíme ujistit, že pro každý záznam je změněna barva i její sytost Použití barvy 4. Zahrnout klíč určující, jakým způsobem jsou barvy namapovány na data – pomáhá interpretaci barvy • Barva může vizualizaci přidat významnou vizuální působivost, ale může naopak i významně snížit efektivitu celého komunikačního procesu • Někteří návrháři preferují při iniciálním návrhu využití pouze šedotónních odstínů • Přidání barvy až po otestování prvotního návrhu může být provedeno mnohem efektivněji Důležitost estetiky • Nakonec musíme zhodnotit estetickou stránku návrhu • Nejlepší vizualizace jsou jak informativní, tak vizuálně přitažlivé • Na opačném pólu stojí vizualizace, které jsou tak vizuálně nehezké, že přímo odrazují od komunikačního procesu • Vizuálně přitažlivé vizualizace naopak lákají uživatele prozkoumat data více do hloubky Důležitost estetiky • Existuje řada pravidel pro návrh atraktivních vizualizací: – Focus (zaměření) – Balance (vyváženost) – Simplicity (jednoduchost) www.tableausoftware.com Focus • Uživatel by měl být směrován na tu část vizualizace, která je nejdůležitější Balance • Prostor obrazovky by měl být využit efektivně, nejdůležitější komponenty by měly být umístěny do středu Simplicity • Hlavním pravidlem je nesnažit se nahustit co nejvíce informace na jednu obrazovku a nepoužívat různé grafické triky jenom proto, že jsou dostupné – například nepoužívat histogramy s 3D Phongovým stínováním, když tu stejnou informaci jednoduše sdělíme pomocí bodového nebo čárového grafu • Běžná procedura pro eliminaci těchto „chyb“ u již navržených vizualizací je založena na iterativním odstraňování vlastností a poté měření velikosti ztráty sdělované informace Simplicity Důležitost estetiky • V literatuře nalezneme mnoho příkladů „ošklivých“ vizualizací (viz další slide) • Po provedení návrhu vizualizace je vřele doporučováno nechat si výsledek esteticky zhodnotit, než bude prezentován uživatelům www.cs.ubc.ca www.seo.com Důležitost estetiky Problémy při návrhu efektivních vizualizací • Zaměříme se na prozkoumání některých běžných problémů vyskytujících se při vizualizacích, které se mohou objevit, i když dodržujeme předchozí uvedená pravidla • Tyto problémy mají hlubší kořeny a souvisí s rozhodnutím, co vlastně vizualizovat a jaká je pro to nejvhodnější metoda Zavádějící vizualizace • Jedním z hlavních pravidel při vizualizaci je skutečnost, že obrázek by měl přesně znázorňovat požadovaná data • V historii je mnoho příkladů, kdy deformovaná vizualizace dat dokázala změnit názor uživatelů a v podstatě jim lhát – „viz lies“ • Podíváme na některé běžné strategie používané pro vytváření zavádějících vizualizací - abychom se jim mohli v budoucnu vyhnout Zavádějící vizualizace • Data scrubbing – Surová data mohou být často velmi hrubá, a proto jsme při návrhu vizualizace často v pokušení tuto hrubost odstranit – Výběr může být proveden tak nešťastně, že po eliminaci dat objevím vztahy, které v původních datech vůbec nebyly (viz obrázek další slide) Zavádějící vizualizace Zavádějící vizualizace • Běžnou taktikou používanou v této situaci je odstranění významně se odlišujících hodnot (outliers) • I když je oprávněný důvod věřit, že tyto odlišné hodnoty vznikly díky chybám při procesu získávání dat, neměly by být odstraněny bez toho, aniž bychom o tom uživatele informovali Zavádějící vizualizace • Unbalanced scaling – Škálování je velmi silným nástrojem používaným při vizualizaci, protože pečlivý výběr škálovacích faktorů může odhalit vzory a struktury, které nejsou v neškálovaných datech viditelné – Škálování může být použito i k oklamání pozorovatele, který pak věří, že daný trend v datech je silnější nebo slabší, než je ve skutečnosti = tzv. „lie factor“ (poměr mezi změnou v surových datech a změnou znázorněnou pomocí vizualizace) Zavádějící vizualizace • Velikost (šířka i výška) objektů v pozadí je redukována s perspektivou, čímž narušujeme možnost jejich porovnání s objekty vepředu Zavádějící vizualizace • Range distortion – Uživatelé často mají jistá očekávání týkající se rozsahu hodnot v příslušné dimenzi – Nastavení rozsahu zcela odlišného od tohoto očekávání může opět vést k dezinterpretaci – Častým příkladem je posun osy takovým způsobem, že už dále nekoresponduje s očekávanou nulovou hodnotou (viz obrázek další slide) Zavádějící vizualizace Zavádějící vizualizace • Abusing dimensionality – Počet chyb v interpretaci je úměrný mocnině počtu dimenzí zobrazovaných dat – Naše chybovost při posuzování objemu je mnohem vyšší než při posuzování plochy a ta je vyšší než při posuzování délky – Mapování skalární hodnoty na grafický atribut objem tedy významně zvyšuje pravděpodobnost chybné interpretace – I zde platí pravidlo: čím jednodušší, tím lepší Vizuální nesmysly • Vizualizace jsou vytvářeny pro sdělení informace a je důležité, aby tato informace byla smysluplná • Vizualizace jsou často vytvářeny kombinováním datových sad pocházejících z různých zdrojů • Je jednoduché kombinovat nesouvisející komponenty do jedné vizualizace a identifikovat v nich strukturu Vizuální nesmysly • Vykreslení hodnot na burze proti výskytu skvrn na Slunci Vizuální nesmysly • Při rozhodování, která data kombinovat, je důležité se nejdříve ujistit, že je v jejich kombinaci určitá logika • Další faktor, který musíme vzít v úvahu, je kompatibilita mezi časovými a prostorovými rozsahy porovnávaných dat • Při vytváření datových sad pro vizualizaci musíme vzít v úvahu i kompatibilitu jednotek Vizuální nesmysly • Často jsme v pokušení aplikovat operace, které jsou vhodné pro uspořádaná nebo spojitá data, na kategorická, neuspořádaná data – jednoduše protože výsledkem mapování byla uspořádaná grafická reprezentace www1.lf1.cuni.cz Ztráta dat díky Chart Junk • Chart Junk = veškeré vizuální prvky v grafech a diagramech, které nejsou nezbytné pro pochopení informace prezentované v grafu a spíše rozptylují pozornost uživatele http://en.wikipedia.org/wiki/Chartjunk Ztráta dat díky Chart Junk • Tato doplňková informace může vést nejen k přehnaně složitým vizualizacím, ale rovněž k okluzi a zeslabování vizuální reprezentace původních dat • Rozhodnutí, jaké množství doplňkové grafiky použít, je často obtížný proces • Pracujeme s dynamickým a uživatelsky měnitelným médiem, můžeme tedy uživateli umožnit ovlivňovat míru zobrazení těchto doplňkových informací Ztráta dat díky Chart Junk • V některých vizualizačních úkolech může uživatel přepínat mezi kvalitativním náhledem a kvantitativní analýzou • V prvním případě je obvykle důležitější poskytnout uživateli čistý pohled na data, zatímco ve druhém případě jsou žádoucí doplňkové nástroje, které pomáhají kvantifikovat zobrazené prvky Ztráta dat díky Chart Junk • Pravidlo: Poskytnout dostatečné nástroje pro podporu kvantitativních náhledů a zároveň umožnit jejich odstranění nebo změnu stupně jejich zapojení do vizualizace Surová vs. odvozená data • Běžnou praktikou při snaze o dosažení co nejlepšího vizuálního výsledku je spočtení analytického modelu dat reprezentovaného křivkami či povrchem • Tato technika může opět vést ke zkreslení a ve výsledku ke špatným předpokladům a odvozeným závěrům Surová vs. odvozená data • V některých vizualizacích je běžnou praktikou odstranit všechna surová data a nahradit je hladkou aproximací odvozenou z těchto dat • Uživatel pak musí věřit, že daná aproximace je přesným zobrazením dat, což často není pravda • Nejvhodnější je v tomto případě zobrazit jak surová data, tak jejich aproximaci, a umožnit uživateli si tyto typy filtrovat na požádání Surová vs. odvozená data Surová vs. odvozená data • Další formou „čištění“ dat je proces převzorkování, kdy jsou surová data umístěná náhodně nebo v řídké mřížce použita pro vytvoření mnohem hustší mřížky • To vede k mnohem bohatším vizualizacím, které se blíží spojitému vzorkování, opět ale klameme uživatele • Čím hustší převzorkování, tím větší pravděpodobnost špatné interpretace dat Surová vs. odvozená data Surová vs. odvozená data • Dalším problémem je nedostatečné vzorkování: Surová vs. odvozená data • Je nutné, aby měl uživatel vždy přístup k surovým datům a aby byl informován o jakékoliv operaci vyhlazení či převzorkování, která byla na data aplikována • V některých oborech, jako například v radiologii, jsou analytici zásadně proti použití jakéhokoliv vyhlazení či filtrování, protože je nebezpečí, že důležitý signál by mohl být vyhodnocen jako šum • Proto je vhodné poskytnout uživateli pohled na surová data i na odvozená a nechat jej rozhodnout, zda dané odvození dostatečně reprezentuje původní data Zajímavé odkazy • Four Pillars of Effective Visualizations http://www.youtube.com/watch?v=nrsdgvauqKg • Designing Data Visualizations http://www.youtube.com/watch?v=lTAeMU2XI4U • Designing Data Visualizations with Noah Iliinsky http://www.youtube.com/watch?v=R-oiKt7bUU8