UPDATE: Bár a 2012-es cikkben bemutatott eszközök közül sok még mindig hatékony és még hasznosabbá vált, érdekelheti Önt az interaktív adatvizualizációs eszközökről szóló újabb sorozatunk.

Komplex adatvizualizációs eszközök

Köszöntöm az interaktív adatvizualizációs (dataviz) eszközökről szóló sorozatom második részében. Az 1. részben három klassz eszközt mutattunk be, amelyekkel diagramok és grafikonok, valamint sok más adattípus weblapon történő megjelenítését végezhetjük el. A második részben további három olyan eszközt nézünk meg, amelyek kicsit összetettebbek, de hihetetlen adatvizualizációs képességekkel rendelkeznek.

1. jQuery Visualize (1. rész)
2. Google Charts (1. rész)
3. Highcharts (1. rész)
4. Simile Exhibit
5. JavaScript InfoVis Toolkit
6. D3.js

Simile Exhibit

Az Exhibit egy nagyon robusztus és testre szabható ajánlat. Egyik fő erőssége az adatok megjelenítésének egyedi megközelítése. A könnyen használható szűrő-, rendezési és keresőeszközök mellett lehetővé teszi, hogy egy HTML-sablon (az Exhibitben “lencsének” nevezett) segítségével úgy építsen fel mindent az oldalon, hogy pontosan úgy nézzen ki, ahogyan Ön szeretné. Ez majdnem olyan, mint egy mini-CMS a datavizhez, ahol az adatokhoz az attribútumértékeken keresztül közvetlenül a lencsében férhet hozzá. Az olyan projektek esetében, amelyek nagyfokú érzékenységet igényelnek a megjelenítéssel kapcsolatban, ez a rendkívüli rugalmasság az adatvizualizációk építéséhez fantasztikus.

• Támogatott vizualizációs típusok:
• Adatbeviteli források: Vonaldiagramok, térképek, szórásdiagramok, többszörösen szűrhető listák, idővonalak, idődiagramok és még sok más… widgetekkel!
• Adatbeviteli források: JSON, Táblázat
• Adatkimenetek: JSON, Táblázat
• Adatkimenet: HTML
• Formázási lehetőségek: Javascript könyvtár

PROS

Flexibilis & Hatékony megközelítés a tervezéshez
Nekem nagyon tetszik az Exhibit megközelítése, ahol az adatok egy “lencsén” keresztül kerülnek bemutatásra – egy HTML sablonhéj, amelybe az elemek kerülnek. Ezáltal a rendszer teljesen testreszabhatóvá és CSS-stilizálhatóvá válik, ami azt jelenti, hogy a tervezők imádják, és az ügyfelek márkáinak konzisztenciájának megteremtése gyerekjáték.

Elég erős szűrés/rendezés/keresés
Hihetetlenül hasznos, ha a felhasználók bármilyen kritérium alapján szűrhetik az adatokat, és az információkat statikus tartalomból valódi interaktív funkcióvá alakítja. A szűrés közvetlenül az Exhibitbe van beépítve, és könnyen megvalósítható. A szerveroldali szűrés nehézkes lehet (nem is beszélve a drágaságról), így az Exhibit igazán kiemelkedik a felhasználói szűrés hihetetlenül gyors és egyszerűvé tételében. Ugyanez vonatkozik a rendezésre és a keresésre is. Az Exhibit nagyon egyszerűvé teszi, hogy a webhely felhasználóinak kezébe adja az irányítást, hogy pontosan azt a nézetet kapják az adatokról, amit szeretnének, és így jobban megérthetik, hogy miért fontosak.

Magas dokumentáció
A komplex dataviz eszközökbe való belevágás vállalkozás lehet, és igényel némi próbálkozást és hibázást. Az Exhibit valóban felgyorsítja a folyamatot a weboldalán található nagyszerű dokumentációval és néhány kiváló kezdő oktatóanyaggal.

Widgets!
Az Exhibitet még tovább szeretné tolni? Funkcionalitást adhat hozzá widgetekkel. Léteznek widgetek bibliográfia- és idézetgyűjteményekhez, CoverFlow stílusú képnézegető, idővonalak és idődiagramok – hogy csak néhányat említsünk. Ez a fajta termékbővítés teszi az Exhibitet az egyik legrobosztusabb és legrugalmasabb lehetőséggé az adatvizualizáció terén.

CONS

Steep Learning Curve
A többi összetettebb könyvtárhoz hasonlóan az Exhibit esetében is több kódolásra van szükség, mint a legtöbb lehetőségnél, és a korábbi Javascript-tapasztalat mindenképpen nagyon hasznos. Én azonban úgy találtam, hogy az oktatóanyagok nagyon jól sikerültek és szórakoztatóak, így ha egyszer belekezdesz, nagyon könnyű belekezdeni.

Javascript InfoVis Toolkit

A JavaScript InfoVis Toolkit egy szép eszközkészlet a grafikonok és grafikonok létrehozásához egy weboldalon. Szép listát tartalmaz a támogatott diagramtípusokból, és bevezet néhány animációs funkciót a keverékbe (pl. egy oszlopdiagram oszlopai kitágulhatnak a méretükre, amikor a diagram betöltődik – ilyesmi). Az animációk szépek, és határozottan egy plusz csiszolási szintet adhatnak a webhelyének. Van néhány klassz interaktív funkció is, például “szűrő” alkalmazása egy grafikonra kattintással. A grafikon ezután csak azt a sorozatot mutatja, amelyre rákattintottál, amíg el nem távolítod a szűrőt. Nézze meg a demókat, hogy többet lásson arról, mire képes ez az eszközkészlet.

• Támogatott megjelenítési típusok: Területi diagram, oszlopdiagram, kördiagram, fadiagram, erőirányított, radiális diagram, napkitörés, jégcsap, térfa, hiperfa
• Adatbevitel: Canvas
• Styling:
• Típus: Javascript paraméterek
• Típus: Javascript könyvtár

PROS

Egyedi diagram típusok
Nagyon tetszenek az InfoVis Toolkitben elérhető különböző nem szabványos megjelenítési típusok. Ez az eszköz talán túlzás az alkalmi kördiagramokhoz, de igazán ragyoghat, amikor bonyolultabb adatok megjelenítési lehetőségeit kell megközelíteni.

Animációk / interakciók
Az animációk nagyszerű kiegészítői ezeknek a diagramoknak és grafikonoknak. Egy szép Flash-szerű minőséget kölcsönöznek ezeknek a diagramoknak, ami igazán szép. És az interakció képessége ezekkel a grafikonokkal – a dolgok áthúzása és a grafikon manipulálása (mint ez) nagyon klassz és nagyon hasznos lehet.

CONS

Learning Curve
Ezekkel a nagyszerű funkciókkal együtt jár a komplexitás is, és bár a weboldalon található dokumentáció jónak tűnik, ez az eszköz jó Javascript-tapasztalatot igényel ahhoz, hogy a legtöbbet hozza ki belőle.

D3.js

Wow, a D3.js király! Csak eltévedtem néhány órára a D3 weboldalán bóklászva, és a lehetőségek végtelennek tűnnek. Ez az eszköz határozottan elég magas szintű jártasságot igényel a Javascript és a JSON terén, de gyönyörű, kifinomult grafikonokat generál. Nézd meg a példákat.

A D3 nem igazán olyan, mint a többi. Ez nem egy “kész” diagramkészítő eszköz, hanem inkább egy keretrendszer az adatalapú elemek rajzolásához. A D3 honlapja mondja ezt a legjobban: “Ahelyett, hogy egy monolitikus rendszert biztosítana minden olyan funkcióval, amire valakinek valaha is szüksége lehet, a D3 csak a probléma lényegét oldja meg: az adatokon alapuló dokumentumok hatékony manipulációját.”

És mivel SVG grafikát is készíthet, ezt a kimenetet bárhol felhasználhatja, beleértve a nyomtatási alkalmazásokat is. A D3 lehet a központja egy dörzsölt webes/nyomtatott kiadási munkafolyamatnak egy grafikusan nehéz projekt esetében.

• Támogatott vizualizációs típusok: Minden? A határ a csillagos ég.
• Adatbevitel: JSON, GeoJSON, CSV
• Kimenet: HTML, SVG
• Styling: Javascript könyvtár

PROS

Korlátlan rugalmasság
A D3.js segítségével nagyjából bármit megrajzolhatsz az adatok alapján, amit csak akarsz. Ez egy csodálatos eszköz azok számára, akik új adatvizualizációkat és igazán nagy adathalmazokra épülő vizualizációkat készítenek.

Kimenet
Nagyon menő, hogy a D3-nak meg lehet mondani, hogy hozzon létre HTML elemeket és SVG-t is. Határozottan megnyitja az ajtót a CSS-szel való formázás előtt, ami ideális.

CONS

Tanulási görbe
Elégedett Javascript, JSON és matematikai embernek kell lenned ahhoz, hogy a D3 átugorja a karikákat. És néhány példa megzavarja az elmédet, de menj előre, és fuss végig a tutorialon. Nem is olyan rossz, és ha egy kicsit is ismered a jQuery-t vagy a Prototype-ot, sok minden ismerősnek fog tűnni. És sok minden nem…

Következtetés

Ez a hat termék csak a jéghegy csúcsa a dataviz területén. Tucatnyi más nagyszerű termék létezik. De ezeknek jó képet kell adniuk arról, hogy mi történik, és érzékeltetniük kell az interaktív dataviz világának képességeit és összetettségét.