Není to tak dávno, co se stala velmi populární dvourozměrná forma zobrazování žebříčků. Jedním z prvních byla dozajisté služba Last.fm, u které je vizualizace žebříčků podstatou její činnosti a tehdy jsem se o této technice dozvěděl i já a implementoval ji na svůj blog pro zobrazení používaných klíčových slov.

Primitivní žebříček
Primitivní žebříček netřeba představovat. Jedná se o prostý seznam, který je seřazen podle váhy. Touto vahou je povětšinou počet dané hodnoty v seznamu. Nevýhodou prostého seznamu je, že řadí pouze jednu proměnnou a tedy onu váhu. Zní to jako nesrozumitelný kočkopes? Tak se podívejme na jednoduchý příklad.

Mějme pět bister s čínskými nudlemi. Kolemjdoucích se pak ptáme, jaké z těchto bister nejčastěji navštěvují. Z výsledného žebříčku se následně dozvíme, jaká bistra jsou nejoblíbenější, pokud však chceme vyhledat své oblíbené bistro, musíme projít celý seznam, jelikož ten je řazen podle váhy (v konkrétním případě tedy podle počtu návštěvníků), nikoliv podle názvu bister.

Primitivní žebříček

Dvourozměrný žebříček

Dvourozměrný žebříček je narozdíl od primitivního žebříčku řazen podle více proměnných - nejčastěji se jedná o dvě proměnné, proto jsem zvolil označení dvourozměrný. Primitivní seřazení je v tomto případě realizováno alfanumericky a váha je pak realizována změnou vlastnosti prvku v seznamu - povětšinou velikostí použitého písma. Letmým pohledem na 2D seznam tedy okamžitě známe, jaké prvky jsou důležité z hlediska jejich váhy a zároveň se v seznamu položek také snadno orientujeme, jelikož prvky seznamu jsou řazeny alfanumericky.

Výše zmíněný příklad tedy překreslíme do 2D podoby a ejhle, již snadno vyhledáme název bistra, jelikož seznam je řazen podle abecedy. Zároveň relativním srovnáním vidíme, jak si asi stojí vzhledem ke konkurenci (absolutní hodnoty mohou být schovány v bublinové nápovědě a zobrazí se po najetí myši nad prvek seznamu).

Dvourozměrný žebříček
Seznam je seřazený podle abecedy a váha je vyjádřena velikostí písma. Žebříček je seřazen podle dvou proměnných (název a počet návštěvníků).

Trojrozměrný žebříček
2D seznam můžeme snadno rozšířit na 3D seznam, 4D seznam a další složitější struktury implementací změn dalších grafických atributů. Vedle velikosti písma můžeme totiž měnit další vlastnosti dle charakteru proměnné (tuto logiku lze aplikovat jak na kvantitativní tak na kvalitativní proměnné - nominální a ordinální). Kvalitativní nominální proměnné můžeme zobrazit například změnou fontu písma, ordinální a intervalové pak například intervalovou změnou barvy písma .

Tedy abych to napsal slušně srozumitelně, pokud onou proměnnou bude dejme tomu typ školy (ZŠ, SŠ, VOŠ, VŠ), pak tuto proměnnou mohu zobrazit změnou fontu písma. Naopak počet čtenářů mohu zobrazit změnou velikostí písma, změnou jeho barvy budu-li uvažovat šedý spojitý gradient od černé po bílou aj.

Následující příklad je rozšířením běžně používaného 2D seznamu. Je alfanumericky seřazen a má dvě váhy. První vahou je nám známý počet návštěvníků a druhou vahou budiž třeba cena nudlového pokrmu. Žebříček se najednou stává složitější strukturou, která je ovšem velmi přehledná. Snadno tedy zjistíme, že ačkoliv je nejnavštěvovanější bistro Hu Huang, nejlevněji se najíme v Yang Huang. Cena je zde tedy znázorněna pomocí intervalu barev (šedého gradientu). Nejlevnější bistra jsou tmavá, nejdražší bistra jsou světlá.

Trojrozměrný žebříček
Seznam je seřazený podle abecedy a váha je vyjádřena velikostí písma a jeho barvou. Tento žebříček tedy seznam řadí podle tří proměnných (název, počet návštěvníků a cena).

Jak vypočítat správnou váhu?

Již tedy víme, jak a co lze v 2D/3D a více-dé-žebříčcích zobrazit, nicméně neméně důležitou otázkou zůstává, jak ony hodnoty proměnných zohlednit. Mějme dvě klíčové slova z nichž jedno je zastoupeno 2x a druhé 20x. Jak tyto hodnoty převést do grafické podoby? Lze zvolit například některý z těchto pěti přístupů.

CSS třídy
- pomocí CSS tříd, či prosté změny CSS stylu uvnitř prvku zohledníme hodnoty kvalitativních proměnných (změna fontu podle typu školy aj.)

CSS intervalové kategorie
- jedná se o nejjednodušší statický způsob, který je sice bezpečný ovšem není příliš efektivní u kvantitativních proměnných, neboť musíme pro větší přesnost explicitně nadefinovat mnoho kategorií. V CSS šabloně si jednoduše vytvoříme několik tříd pro různé intervaly a podle hodnoty proměnné ji použijeme. Bude-li tedy klíčové slovo zastoupeno 1-10x, použije se například CSS třída .malypocet, bude-li naopak zastoupeno 11-20x, použije se CSS třída .velkypocet.

Lineární velikost
- tento způsob je také jednoduchý, nicméně nebezpečný z hlediska struktury. Každému prvku seznamu jednoduše přiřadíme velikost odpovídající hodnotě kvantitativní proměnné s tím, že použijeme určitý offset, abychom zabránili nízkým absolutním velikostem písma u klíčových slov s malou četností. Výsledná velikost v pixelech tedy může být například: "font-size:10+n", kde "n" představuje hodnotu proměnné. Vedle pixelové velikosti můžeme použít relativní velikost v procentech či v jiných jednotkách. Nevýhodou lineární absolutní velikosti je fakt, že nemáme ošetřeny krajní hodnoty a poměr mezi nízkými a vysokými hodnotami (použitím offsetu posuneme jak nízké tak vysoké hodnoty). Vygenerovaný seznam pak může obsahovat prvky s velikostí 10px ale také velmi četná klíčová slova s velikostí 50px a tento nárůst není nikterak v kontrole designera.

Logaritmická velikost
- logaritmická funkce s adekvátním offsetem může být odpovědí na zápory lineární velikosti, neboť kontroluje mezní hodnoty. Pokud použijeme pro management velikosti prvku logaritmickou logiku, velikost prvku bude růst až po určitou mez velmi dramaticky a od tohoto kritického bodu se nárůst velikosti naopak dramaticky zmenší. Logaritmická funkce nám tak tedy kontroluje mezní hodnoty a pokud ji správně ošetříme a zabalíme, bude se nám dobře starat o obor typických četností a a četnější klíčová slova nebudou narozdíl od lineárního růstu dosahovat extrémních velikostí. Opakem logaritmické funkce je exponenciální růst, který se může v některých případech také hodit (malý růst v oboru nízkých hodnot a velký růst v oboru vysokých hodnot; tedy zdůraznění četnějších klíčových slov).

Lineární vs. logaritmická velikost prvků v seznamu
Lineární zvětšení Logaritmické zvětšení
Klikněte pro zvětšení. Zleva: lineární výpočet a logaritmický výpočet absolutní pixelové velikosti a jejich zřejmé výhody a nevýhody.

Poměrová optimalizace
- v tomto případě zoptimalizujeme absolutní rozdíly mezi hodnotami. Pokud je rozdíl mezi nejčetnějším a nejméně četným klíčovým slovem velmi velký, jednoduše jej zmenšíme a přetransformujeme celé pole. Rozdíly mezi největším a nejmenším prvkem pak nejsou tak velké a zároveň je stále jasné, které prvky mají jaké váhy. Poměrovou optimalizací je například i výše zmíněná CSS intervalová kategorizace.

A jakou techniku používáte Vy? Podělte se v diskuzi.