Co je vizualizace dat a proč ji využívat na webu?

V PUXdesign máme specialisty, kteří se právě na vizualizaci dat zaměřují a dokáží proto s jednotvárnými čísly a grafy úplná kouzla. Pokud se tedy rozhodnete, že byste takto chtěli zpestřit svůj web, stránku na e-shopu nebo sekci zákaznického portálu pro své klienty, promyslete si dopředu několik věcí.

Co budeme vizualizovat?

• chcete vizualizaci pro ozvláštnění webu, nebo své klienty informovat spíše seriózním způsobem? Od toho, co vizualizace zobrazují, se odvíjí i jejich vzhled. A bude vizualizace jen doplňovat obsah vašeho webu, nebo je jeho primárním cílem?

Kdo si bude tyto vizualizace prohlížet?

• každé sdělení si prohlíží různí lidé. Jinak bude proto vypadat bublinový graf oblíbenosti jídel z fast foodů a úplně jinak zase vývoj cen energií v České republice za posledních 12 měsíců.

Jsou ta data v dohodnutém formátu?

• v PUXdesign se s klienty nejčastěji domlouváme na formátu .csv, .json nebo pomocí API, ze kterého si dokážeme vše sami vytáhnout. Umíme pracovat ale i se specifickými daty, například souřadnicemi satelitů ve vesmíru. Na místě je zde rozhodně i zamyslet se, zdali máte k dispozici data, která budeme graficky zpracovávat.

Tuším, jak by měla vizualizace vypadat a jakou barevnou kombinaci chci?

• efektní variantou je například sladění vizualizovaných dat do firemních barev – u nich si však rovnou dopředu připravte přesné kódy odstínů.

Jaké typy vizualizací můžete na svém webu mít?

Vizualizace ve formě liniového grafu je jen začátek. V PUXdesign s vámi probereme představu a tu přetavíme na konkrétní a mnohdy i originální řešení – mohou jím být bubliny, koláče, mapa světa, wordcloud pro zobrazení nejfrekventovanějších výrazů či stromová mapa alias vizualizace prostřednictvím čtverců. Pojďte si projít některé už hotové vizualizace na webech našich klientů.

• Základní a jednoduché grafy
• Komplexnější vizualizace
• Vizualizace ceny na e-shopu
• Zábavné a efektní vizualizace

Základní a jednoduché grafy

Sloupcové grafy, liniové grafy, koláče či křivka jako jednoduché zpracování dat – to je nejspíš to první, co by vás po názvu vizualizace dat mohlo napadnout. A máte pravdu. 

Axiory

Na webu traderské společnosti Axiory jsme měli možnost připravit hned několik typů vizualizace dat a ty jednoduché grafické mezi ně patří také.

• Filtrace
• Po najetí myší se konkrétní sloupec zatmaví a zobrazí se konkrétní data

Nespočet vizualizací pro Datovou zprávu Brno region 2022

Sloupcový graf meziročního růstu pracovníků v podnicích

• Filtrace
• Po najetí myší na konkrétní sloupec se zobrazí přesná hodnota
• Barevná legenda
• Export dokumentu

Lineární graf znázorňující podíl pracovníků ku všem zaměstnaným v regionu

• Filtrace
• Po najetí myší na linii se zobrazí konkrétní čísla v uvedených letech
• Barevná legenda
• Export dokumentu

Koláčový graf ukazující odvětví, kterým se určité firmy nejvíce věnují

• Filtrace
• Barevné rozlišení
• Po najetí myší na výsek se zobrazí konkrétní počet firem, které se odvětví věnují
• Export dokumentu

Mapa republiky znázorňující procentuální podíl pracovníků ku všem zaměstnancům v regionu

• Filtrace
• Nájezdová mapa pro rychlé zobrazení konkrétních čísel jednotlivých krajů
• Export dokumentu

Bubliny znázorňující počet projektů v Jihomoravském kraji v jednotlivých organizacích

• Bubliny nesou poměrnou velikost ku počtu projektů organizací
• Po najetí myší se zobrazí přesný počet projektů
• Export souboru

Wordcloud znázorňující oborové zaměření projektů 

• Čím frekventovanější obor, tím větší znázornění
• Po najetí myší se zobrazí přesný počet projektů v konkrétním oboru
• Export dokumentu

Stromový graf pro ukázku zahraničních studentů

• Čím větší množství studentů z dané země, tím větší pole
• Po najetí myší se barva pole ztmaví
• Filtrace
• Export dokumentu

Mapa Evropy rozdělená na regiony/kraje 

• Filtrace
• Zabarvení mapy dle zvyšujících se čísel v legendě
• Nájezdová mapa, která ukazuje konkrétní čísla v jednotlivých krajích
• Export dokumentu

Trading a vizualizace v živém přenosu 

Pro klienta Axiory jsme vytvořili i vizualizaci měnových kurzů, která se aktualizuje každých pět vteřin. Zájemci o forexový trh mají díky tomuto šikovnému nástroji ty nejčerstvější informace po ruce.

Komplexnější vizualizace 

Pro EGÚ Brno

Poradenská společnost v oblasti energetiky EGÚ Brno má od nás nejen zbrusu nový web, ale vsadila i na vizualizace. Například zobrazení monitoringu cen plynu a elektřiny nabízí klientům zvolit si přesné či předvolené období nebo filtrovat konkrétní typ komodity. Na závěr si konkrétní data můžete i stáhnout, abyste je měli kdykoliv k dispozici – i když budete offline.

• Filtrace komodit
• Filtrace dle času
• Zobrazení konkrétních hodnot po najetí myší na část grafu
• Uložení grafu v .png

Vizualizace ceny na e-shopu

Se zvyšující se inflací a rostoucími cenami se stává na e-shopech v roce 2022 velmi populární vizualizace cen. Díky této vychytávce mohou provozovatelé online obchodů ukázat, jak se (ne)měnila cena jejich produktů v čase. Tuto ukázku vizualizace jsme přebrali z e-shopu czc.cz.

• Filtrace
• Po najetí myší se vám ukáže přesná cena ve vybraném čase
• Barevné rozlišení dle růstu ceny

Zábavné a efektní vizualizace 

Informace můžete předat i vtipně! Rafinovanost do sdělení zakomponovala Ekonomicko-správní fakulta Masarykovy univerzity v Brně. Té jsme k výročí 30 let od založení vytvářeli prezentační web, na kterém nesměly chybět i nějaké ty zajímavosti – třeba jaké je nejoblíbenější jídlo v menze nebo jaké je národnostní rozložení mezi studenty. Zde jsme využili dalšího typu grafu, tzv. progress bar – v praxi vypadá jako linka nebo kruh, který se postupně doplňuje do určitého procenta.