Interaktivní vizualizace dat a metadat

Design Marek Detko

Neustálý příliv dat vyžaduje způsob, jak je efektivně zkoumat tak, abychom z nich získali podstatné informace. Surová data jsou nudná a je těžké se v nich vyznat. Když někoho jen zasypete kopou čísel, moc je nepochopí. Ale když přidáte vizualizaci, dostanete něco, co dokáže každý lehce pochopit a strávit. Nejen, že data budou dávat smysl rychleji, ale můžete také pozorovat zajímavé vzorce, které by jenom z pohledu na statistiky nebylo vidět.

Proč vizualizovat data

Vizualizaci můžeme definovat jako kognitivní aktivitu, která probíhá v mysli člověka, a jejím výsledkem je zformování interního modelu umožňujícího pochopit význam zobrazených dat a vztahy mezi nimi.

Vizualizace informací je obor, který se věnuje digitálnímu zpracování a prezentování abstraktních údajů. Kvantitativní data se získají měřením, analýzou anebo statistickými metodami. Hlavním cílem je zpracovat komplexní údaje a zobrazit je ve vizuální podobě, která je pro člověka přirozenější než numerické vyjádření. Vysoká informační hustota obrazové reprezentace navíc umožňuje znázornit velké množství údajů na menším prostoru. Poskytuje tak člověku příležitost získat přehled o zpracovávaném tématu, odhalovat vzorce, vlastnosti a vztahy mezi údaji a v důsledku pomáhá pochopit zprávu, která se v abstraktních datech ukrývá.

V případě, že je výsledkem statická reprezentace, používá se pojem informační grafika (nebo též infografika). Ta často zachycuje menší množství dat a její tvorba a prezentace není závislá na použitých technologiích.

Rozložení informací ve vizualizaci, např. členění údajů, umístění prezentace dat, popisného textu, legendy a ovládacích prvků, se odvíjí od záměru projektu a kontextu použití. Jiné dělení je potřebné v případě, že uživatel s vizualizací pravidelně pracuje.

Neuronová síť v mozku

Tato interaktivní vizualizace využívá technologii WebGL na vykreslení neuronové síťové struktury mozku, kterou je možné díky webovým technologiím posouvat, zvětšovat a otáčet. Červeně zvýrazněné síťové uzly a hrany označují aktivitu v simulované neuronové síti a můžete sledovat, jak aktivované části sítě probíhají v průběhu času.

Online aplikace

Na webu existuje množství webstránek s aplikacemi nabízejícími tvorbu grafů z dat zadaných uživatelem. Liší se od sebe typem vstupu a výstupu, množstvím grafů, z kterých si můžete vybrat, či v množství parametrů, které můžete nastavit, tak i v interaktivitě po publikovaní a v neposlední řadě v automatických aktualizacích při správně zadaném vzorci.

D3.js

Data Driven Documents – D3.js

D3.js, zkratka pro „Data Driven Documents“ (datově řízené dokumenty), je první aplikace, která přijde na mysl většině lidí, když padne pojem vizualizace dat. Využívá HTML, CSS a SVG na renderovaní různých úžasných grafů a diagramů. Kdejakou vizualizaci, kterou si dokážete představit, můžete pomocí D3 převést do reality. D3 je nabitý funkcemi, má promakanou interaktivitu a vypadá opravdu skvěle. Navíc je zadarmo a open-source. Prohlédněte si 1900+ příkladů použití D3.js.

FusionCharts

FusionCharts

FusionCharts má pravděpodobně nejvíce vyčerpávající sbírku grafů a map. S více než 90+ typy grafů v něm určitě najdete všechno, co potřebujete. Podpora prohlížečů je též pořádně rozsáhlá a sahá až po archaický Internet Explorer 6. FusionCharts podporuje formáty JSON a XML a grafy exportuje do PNG, JPEG, PDF nebo SVG. Má pěknou sbírku obchodních dashboardů a živá dema pro inspiraci. Jejich grafy pracují napříč všemi zařízeními a platformami, jsou vysoce přizpůsobitelné a mají promyšlené interakce. Nevýhodou je, že tento nástroj patří mezi ty dražší. Ale vždy je možné začít s neomezenou bezplatnou zkušební verzí, a když se vám zalíbí, tak si koupit plnou.

Chart.js

Chart.js

Chart.js je malá open source knihovna, která podporuje jen šest typů grafů: čárové, sloupcové, radarové, polární, koláčové a prstencové. Právě tato jednoduchost je na ní skvělá. Když je aplikace velká a složitá, mívají velké knihovny jako Google Charts a FusionCharts smysl, ale pro malé hobby projekty je Chart.js perfektním řešením. Pro vykreslení grafů používá HTML5 canvas element. Všechny grafy jsou responzivní a mají v poslední době tolik populární flat design. Z open-source knihoven grafů, které se objevily v poslední době, je toto jedna z nejoblíbenějších.

Google Charts

Google Charts

Google Charts vykresluje grafy v HTML5/SVG, poskytuje kompatibilitu mezi prohlížeči a přenosnost na telefony s iOS a Androidem. Obsahuje též VML na podporu starších verzí IE. Nabízí slušnou sbírku grafů, která pokrývá nejčastěji používané typy grafů jako je sloupcový nebo koláčový, ale i hromadu jiných. Je flexibilní a uživatelsky příjemný (protože Google!). Pro představu o tom, jaké grafy a typy interakcí očekávat, navštivte tuto galerii.

Highcharts.com

HighCharts

Highcharts je dalším velkým hráčem na poli grafů. Podobně jako FusionCharts též nabízí pestrou škálu grafů. Kromě normálních grafů tu najdete balík pro burzovní grafy s názvem Highstock, který je též bohatý na funkce. Umožňuje export do PNG, JPG, SVG a PDF. V demo části si můžete si prohlédnout různé typy grafů. Highcharts je zadarmo pro nekomerční a osobní použití, pro používání v komerčních aplikacích si musíte koupit licenci.

Nástroje nevyžadující programování

Datawrapper

Datawrapper

Datawrapper je online nástroj pro tvorbu interaktivních grafů. Po nahrání data ze souboru CSV nebo jejich vložení přímo do pole, bude Datawrapper generovat sloupcové, čárové nebo jakékoli jiné související vizualizace. Mnoho reportérů a zpravodajských organizací používá Datawrapper na vkládání živých grafů do svých článků. Jednoduše se používá a produkuje efektní grafiku. 

Tableau

Tableau

Tableau Public je asi nejpopulárnější vizualizační nástroj, který podporuje nejrůznější schémata, grafy a další druhy grafiky. Jedná se o úplně bezplatný nástroj a grafy, které pomocí něho vytvoříte, můžete snadno vložit na libovolnou webovou stránku. Prohlédněte si vizualizace vytvořené pomocí Tableau.

Raw

RAW

Raw je definovaný jako „chybějící článek mezi tabulkovým procesorem a vektorovou grafikou“. Je postavený na D3.js a velmi dobře navrhnutý. Má intuitivní rozhraní, je open-source a nevyžaduje žádnou registraci. Obsahuje knihovnu 16 typů grafů. RAW je velmi přizpůsobitelný a snadno rozšířitelný.

Timeline JS

Timeline JS

Jak už název napovídá, Timeline JS umožňuje vytvářet krásné časové osy bez nutnosti psaní kódu. Tento bezplatný open-source nástroj používají některé z nejpopulárnějších internetových stránek jako Time a RadioLab. Časovou osu vytvoříte velmi jednoduše ve čtyřech krocích. A to nejlepší? Tento nástroj dokáže vytáhnout data z různých zdrojů a má vestavěnou podporu pro Twitter, Flickr, Google Maps, YouTube, Vimeo, Vine, Dailymotion, Wikipedii, SoundCloud a další podobné weby.

Infogram

Infogram

Infogram umožňuje vytvářet grafy, ale i infografiky online. Nabízí omezenou bezplatnou verzi a dvě placené možnosti zahrnující více než 200 grafů, soukromé sdílení, knihovnu ikon atd. Má snadno použitelné rozhraní a jeho základní grafy jsou dobře navrhnuté. Zásadní nevýhodou je obrovské logo při exportu ve free verzi. Bylo by lepší, kdyby to byl jen malý text jako má např. Datawrapper.

Plotly

Plotly

Plotly je webový nástroj na analýzu dat a tvorbu grafů. Poskytuje dobrou sbírku grafů se zabudovanými funkcemi sdílení na sociálních sítích. Grafy, které jsou k dispozici, mají propracovaný vzhled a působí profesionálním dojmem. Vytvoření pěkného grafu je jen otázkou načítání informací a úpravy struktury, osy, poznámek a legendy.

ChartBlocks

ChartBlocks

ChartBlocks je další online nástroj na tvorbu grafů, který je dobře navrhnutý a umožňuje vytvářet základní grafy velmi rychle. Má omezený počet typů grafů, ale to by neměl být problém, protože většina běžných typů je zahrnutá. Umožní vytáhnout data z různých externích zdrojů, jako jsou tabulky a databáze. Po vytvoření grafu můžeme exportovat pomocí SVG nebo PNG, vložit na své webové stránky či sdílet na sociálních sítích.

Co si dále přečíst

Z deníčku UX/UI designeraZ deníčku UX/UI designera
Z deníčku UX/UI designera

Když jste UX/UI designérem, váš mozek se musí stát nástrojem k ovládání široké škály schopností – od psychologie uživatelů, přes technickou preciz...

Design

Cognito.cz, s.r.o.