DOPLNĚNÍ: Přestože mnohé z nástrojů uvedených v tomto článku z roku 2012 jsou stále účinné a vyvinuly se tak, aby byly ještě užitečnější, možná vás bude zajímat náš novější seriál o nástrojích pro interaktivní vizualizaci dat.
Nástroje pro komplexní vizualizaci dat
Vítejte zpět u druhé části mého seriálu o nástrojích pro interaktivní vizualizaci dat (dataviz). V prvním díle jsme se zabývali třemi zajímavými nástroji pro vizualizaci tabulek a grafů a mnoha dalších typů dat na webové stránce. V druhé části se podíváme na další tři nástroje, které jsou trochu složitější, ale mají neuvěřitelné možnosti vizualizace dat.
- jQuery Visualize (část 1)
- Google Charts (část 1)
- Highcharts (část 1)
- Simile Exhibit
- JavaScript InfoVis Toolkit
- D3.js
Simile Exhibit
Exhibit je velmi robustní a přizpůsobitelná nabídka. Jednou z jeho hlavních předností je jedinečný přístup k vykreslování dat. Kromě snadno použitelných nástrojů pro filtrování, třídění a vyhledávání umožňuje použít šablonu HTML (v aplikaci Exhibit se nazývá „čočka“), kterou lze sestavit tak, aby vše na stránce vypadalo přesně podle vašich představ. Je to téměř jako mini-CMS pro dataviz, kde můžete přistupovat k datům prostřednictvím hodnot atributů přímo v objektivu. Pro projekty, které vyžadují vysokou míru citlivosti na vzhled, je tato extrémní úroveň flexibility při vytváření vizualizací dat fantastická.
- Podporované typy vizualizací: Čárové grafy, mapy, grafy rozptylu, seznamy s možností filtrování, časové osy, časové grafy a další… s widgety!
- Zdroje vstupních dat: Výstupní zdroje dat: JSON, tabulkový procesor
- Výstupní zdroje dat: JSON, tabulkový procesor
- HTML
- Možnosti stylování: CSS
- Typ: Javascriptová knihovna
PROS
Flexibilní & Výkonný přístup k designu
Velmi se mi líbí přístup Exponátu, kde jsou data prezentována prostřednictvím „čočky“ – šablony HTML shell, do které jsou umístěny prvky. Díky tomu je systém zcela přizpůsobitelný a stylovatelný pomocí CSS, což znamená, že si ho designéři zamilují a vytvoření konzistence pro značky klientů je hračka.
Silné filtrování/třídění/vyhledávání
Nechat uživatele filtrovat data podle libovolného počtu kritérií je neuvěřitelně užitečné a mění vaše informace ze statického obsahu ve skutečnou interaktivní funkci. Filtrování je zabudováno přímo v aplikaci Exhibit a lze jej snadno implementovat. Filtrování na straně serveru může být pracné (nemluvě o tom, že je drahé), takže Exhibit opravdu vyniká tím, že filtrování uživatelů je neuvěřitelně rychlé a snadné. Totéž platí pro třídění a vyhledávání. Exhibit umožňuje velmi snadno poskytnout uživatelům webu kontrolu nad tím, aby získali přesně takový pohled na vaše data, jaký chtějí, a tím i hodnotnější pochopení toho, proč jsou důležitá.
Silná dokumentace
Přejít na složité nástroje datavizu může být náročné a vyžaduje to určité pokusy a omyly. Exhibit tento proces skutečně urychluje díky skvělé dokumentaci na svých webových stránkách a několika vynikajícím návodům pro začátečníky.
Widgets!
Chcete špičkový Exhibit posunout ještě dál? Můžete přidat funkce pomocí widgetů. K dispozici jsou widgety pro sbírky bibliografií a citací, prohlížeč obrázků ve stylu CoverFlow, časové osy a časové grafy – to je jen několik příkladů. Tento druh rozšíření produktu dělá z aplikace Exhibit jednu z nejrobustnějších a nejflexibilnějších možností vizualizace dat.
CONS
Stupňovitá křivka učení
Stejně jako u ostatních složitějších knihoven je i u aplikace Exhibit zapotřebí více kódování než u většiny možností a předchozí zkušenosti s Javascriptem jsou rozhodně velmi užitečné. Výukové programy mi však přišly opravdu dobře zpracované a zábavné, takže jakmile začnete, je opravdu snadné se do toho pustit.
Javascript InfoVis Toolkit
Javascript InfoVis Toolkit je pěkná sada nástrojů pro vytváření grafů a diagramů na webové stránce. Obsahuje pěkný seznam podporovaných typů grafů a zavádí do nich některé animační funkce (např. sloupce sloupcového grafu se mohou při načítání grafu roztáhnout do své velikosti – takové věci). Animace jsou pěkné a rozhodně mohou vaší stránce dodat další úroveň lesku. K dispozici jsou také některé skvělé interaktivní funkce, například použití „filtru“ na graf kliknutím na něj. Graf pak zobrazuje pouze jednu řadu, na kterou jste klikli, dokud filtr neodstraníte. Podívejte se na ukázky, abyste viděli více z toho, čeho je tato sada nástrojů schopna.
- Podporované typy vizualizace: Plošný graf, sloupcový graf, koláčový graf, stromová mapa, silokřivka, radiální graf, sluneční paprsek, osmiúhelník, prostorový strom, hyperstrom
- Vstup dat: Výstupní data: JSON
- : Plátno
- Stylizace: Javascriptové parametry
- Typ: Vizualizace: Javascriptová knihovna
PROS
Unikátní typy grafů
Mám velmi rád různé nestandardní typy vizualizací, které jsou k dispozici v sadě nástrojů InfoVis. Tento nástroj je možná přehnaný pro občasný koláčový graf, ale může opravdu zazářit, když je třeba přistoupit k možnostem zobrazení složitějších dat.
Animace / interakce
Animace jsou skvělým doplňkem těchto grafů a diagramů. Propůjčují těmto grafům příjemnou kvalitu podobnou Flashi, která je opravdu pěkná. A možnost interakce s těmito grafy – přetahování věcí a manipulace s grafem (jako v tomto případě) je velmi skvělá a mohla by být opravdu užitečná.
CONS
Křivka učení
Se všemi těmito skvělými funkcemi přichází i složitost, a přestože se dokumentace na webu zdá být dobrá, tento nástroj vyžaduje dobré zkušenosti s Javascriptem, abyste z něj vytěžili maximum.
D3.js
Páni, D3.js je super! Právě jsem se na několik hodin ztratil při procházení webu D3 a možnosti se zdají být nekonečné. Tento nástroj rozhodně vyžaduje docela vysokou úroveň znalostí Javascriptu a JSON, ale generuje nádherné, propracované grafy. Podívejte se na příklady.
D3 opravdu není jako ostatní. Nejedná se o „hotový“ nástroj pro tvorbu grafů, ale spíše o rámec pro kreslení prvků založených na datech. Webové stránky D3 to říkají nejlépe: „Místo toho, aby D3 poskytoval monolitický systém se všemi funkcemi, které kdy kdo může potřebovat, řeší pouze jádro problému: efektivní manipulaci s dokumenty založenými na datech.“
A protože můžete vytvářet grafiku SVG, můžete tento výstup použít kdekoli, včetně tiskových aplikací. D3 by se mohl stát středobodem elegantního webového/tiskového publikačního workflow pro projekt s velkým množstvím grafů.
- Podporované typy vizualizace: Všechny? Výstup: JSON, GeoJSON, CSV
- Výstupní data: HTML, SVG
- Stylizace: CSS, Javascript
- Typ: D3.js: Javascriptová knihovna
PROS
Neomezená flexibilita
Pomocí D3.js můžete na základě dat vykreslit v podstatě cokoli. Je to úžasný nástroj pro lidi, kteří vytvářejí nové vizualizace dat a vizualizace postavené na opravdu velkých souborech dat.
Výstup
Velmi cool je, že můžete D3 říct, aby vytvářel položky HTML i SVG. Rozhodně to otevírá dveře ke stylování pomocí CSS, což je ideální.
CONS
Křivka učení
Musíte být zkušený člověk v Javascriptu, JSON a matematice, aby vás D3 přeskočil. A nad některými příklady zůstává rozum stát, ale klidně si výukový program projděte. Není to tak špatné, a pokud jste alespoň trochu obeznámeni s jQuery nebo Prototype, spousta věcí vám bude připadat povědomá. A hodně toho nebude…
Závěr
Těchto šest produktů je jen špičkou ledovce pro dataviz. Existují desítky dalších skvělých produktů. Ale tyto by vám měly poskytnout dobrou představu o tom, co se děje, a představu o rozsahu možností a složitosti světa interaktivních datavizů.