UPDATE: Podczas gdy wiele z narzędzi przedstawionych w tym artykule z 2012 roku jest nadal skutecznych i rozwinęło się, aby stać się jeszcze bardziej użytecznymi, możesz być zainteresowany naszą nowszą serią na temat Interaktywnych Narzędzi do Wizualizacji Danych.
Kompleksowe Narzędzia do Wizualizacji Danych
Witamy ponownie w drugiej części mojej serii na temat interaktywnych narzędzi do wizualizacji danych (dataviz). W części pierwszej, omówiliśmy trzy fajne narzędzia do wizualizacji wykresów i diagramów oraz wielu innych typów danych na stronie internetowej. W części drugiej przyjrzymy się trzem kolejnym narzędziom, które są nieco bardziej złożone, ale mają niesamowite możliwości wizualizacji danych.
- jQuery Visualize (część 1)
- Google Charts (część 1)
- Highcharts (część 1)
- Simile Exhibit
- JavaScript InfoVis Toolkit
- D3.js
Simile Exhibit
Exhibit jest bardzo solidną i konfigurowalną ofertą. Jednym z jego głównych atutów jest unikalne podejście do renderowania danych. Oprócz łatwego w użyciu filtrowania, sortowania i narzędzi wyszukiwania, pozwala on na użycie szablonu HTML (zwanego „soczewką” w Exhibit), który ma być skonstruowany tak, aby wszystko na stronie wyglądało dokładnie tak, jak chcesz. Jest to prawie jak mini-CMS dla dataviz, gdzie możesz uzyskać dostęp do swoich danych poprzez wartości atrybutów bezpośrednio w obiektywie. Dla projektów, które wymagają wysokiego stopnia wrażliwości na wygląd i odczucia, ten ekstremalny poziom elastyczności w budowaniu wizualizacji danych jest fantastyczny.
- Obsługiwane typy wizualizacji: Line Graphs, Maps, Scatter Plots, Multi-Filterable Lists, Timelines, Timeplots and more…with widgets!
- Data Input Sources: JSON, Spreadsheet
- Data Output: HTML
- Opcje stylizacji: CSS
- Typ: Biblioteka Javascript
PROS
Elastyczność & Potężne podejście do projektowania
Naprawdę podoba mi się podejście Exhibit, gdzie dane są prezentowane przez „soczewkę” – powłokę szablonu HTML, w której umieszczane są elementy. To sprawia, że system jest całkowicie konfigurowalny i stylizowany za pomocą CSS, co oznacza, że projektanci go uwielbiają, a tworzenie spójności dla marek klientów to pestka.
Silne filtrowanie/sortowanie/wyszukiwanie
Umożliwienie użytkownikom filtrowania danych według dowolnej liczby kryteriów jest niesamowicie przydatne i zmienia twoje informacje ze statycznej zawartości w prawdziwą interaktywną funkcję. Filtrowanie jest wbudowane w Exhibit i jest łatwe do wdrożenia. Filtrowanie po stronie serwera może być uciążliwe (nie wspominając o kosztach), więc Exhibit naprawdę wyróżnia się tym, że filtrowanie przez użytkownika jest niezwykle szybkie i łatwe. To samo dotyczy sortowania i wyszukiwania. Exhibit sprawia, że bardzo łatwo jest dać użytkownikom Twojej strony kontrolę nad uzyskaniem dokładnie takiego widoku danych, jaki chcą, a tym samym bardziej wartościowe zrozumienie, dlaczego jest to ważne.
Solidna dokumentacja
Skoczenie do złożonych narzędzi dataviz może być przedsięwzięciem i wymaga pewnych prób i błędów. Exhibit naprawdę przyspiesza ten proces dzięki świetnej dokumentacji na swojej stronie i kilku doskonałym samouczkom dla początkujących.
Widżety!
Chcesz popchnąć Exhibit jeszcze dalej? Możesz dodać funkcjonalność za pomocą widgetów. Dostępne są widżety dla kolekcji bibliografii i cytatów, przeglądarka obrazów w stylu CoverFlow, linie czasu i wykresy czasowe – to tylko kilka z nich. Ten rodzaj rozszerzenia produktu sprawia, że Exhibit jest jedną z najbardziej solidnych i elastycznych opcji wizualizacji danych.
CONS
Steep Learning Curve
Podobnie jak w przypadku innych bardziej złożonych bibliotek, Exhibit wymaga więcej kodowania niż większość opcji, a posiadanie wcześniejszego doświadczenia w Javascript jest zdecydowanie bardzo pomocne. Znalazłem jednak tutoriale, które są naprawdę dobrze zrobione i zabawne, więc kiedy już zaczniesz, naprawdę łatwo jest się rozkręcić.
Javascript InfoVis Toolkit
Javascript InfoVis Toolkit to ładny zestaw narzędzi do tworzenia wykresów i grafów na stronach internetowych. Zawiera ładną listę obsługiwanych typów wykresów i wprowadza kilka funkcji animacji do mieszanki (np. słupki wykresu słupkowego mogą rozwinąć się do swojego rozmiaru, kiedy wykres jest ładowany – tego typu rzeczy). Animacje są ładne i zdecydowanie mogą dodać dodatkowy poziom dopracowania do Twojej strony. Istnieje również kilka fajnych interaktywnych funkcji, takich jak zastosowanie „Filtra” do wykresu poprzez kliknięcie na niego. Wykres pokazuje wtedy tylko jedną serię, na którą kliknąłeś, dopóki nie usuniesz filtra. Sprawdź dema, aby zobaczyć więcej z tego, do czego ten zestaw narzędzi jest zdolny.
- Obsługiwane typy wizualizacji: Area Chart, Bar Chart, Pie Chart, Tree Map, Force Directed, Radial Graph, Sunburst, Icicle, Space Tree, Hyper Tree
- Data Input: JSON
- Wyjście: Canvas
- Stylizacja: Parametry Javascript
- Typ: Javascript Library
PROS
Unique Chart Types
Naprawdę podobają mi się różne niestandardowe typy wizualizacji dostępne w InfoVis Toolkit. To narzędzie może być zbyteczne dla okazjonalnego wykresu kołowego, ale może naprawdę zabłysnąć, gdy trzeba podejść do opcji wyświetlania bardziej skomplikowanych danych.
Animacje / Interakcje
Animacje są świetnym dodatkiem do tych wykresów i grafów. Nadają one tym wykresom miłą, przypominającą Flasha jakość, która jest naprawdę miła. A możliwość interakcji z tymi wykresami – przeciąganie rzeczy wokół i manipulowanie wykresem (jak ten) jest bardzo fajna i może być naprawdę przydatna.
CONS
Krzywa uczenia się
Z tymi wszystkimi wspaniałymi funkcjami przychodzi złożoność i chociaż dokumentacja na stronie internetowej wydaje się być dobra, to narzędzie wymaga trochę dobrego doświadczenia w Javascript, aby uzyskać z niego jak najwięcej.
D3.js
Wow, D3.js jest fajne! Właśnie zgubiłem się na kilka godzin grzebiąc na stronie D3 i możliwości wydają się nieograniczone. To narzędzie zdecydowanie wymaga dość wysokiego poziomu znajomości Javascript i JSON, ale generuje kilka wspaniałych, wyrafinowanych wykresów. Sprawdź przykłady.
D3 nie jest tak naprawdę jak inne. Nie jest to „gotowe do użycia” narzędzie do tworzenia wykresów, ale raczej framework do rysowania elementów opartych na danych. Strona internetowa D3 mówi o tym najlepiej: „Zamiast dostarczać monolityczny system ze wszystkimi funkcjami, których ktokolwiek może kiedykolwiek potrzebować, D3 rozwiązuje tylko sedno problemu: efektywne manipulowanie dokumentami opartymi na danych.”
A ponieważ możesz tworzyć grafiki SVG, mógłbyś używać tego wyjścia wszędzie, w tym w aplikacjach do drukowania. D3 może być centrum zgrabnego przepływu publikacji w sieci/druku dla projektów o dużej zawartości wykresów.
- Obsługiwane typy wizualizacji: Wszystkie? The sky’s the limit.
- Wprowadzanie danych: JSON, GeoJSON, CSV
- Dane wyjściowe: HTML, SVG
- Stylizacja: CSS, Javascript
- Typ: Biblioteka Javascript
PROS
Nieograniczona elastyczność
Możesz całkiem sporo użyć D3.js, aby narysować cokolwiek chcesz na podstawie danych. Jest to niesamowite narzędzie dla ludzi, którzy tworzą nowe wizualizacje danych i wizualizacje zbudowane na naprawdę dużych zbiorach danych.
Output
Bardzo fajne, że możesz powiedzieć D3, aby tworzyło elementy HTML, jak również SVG. Zdecydowanie otwiera to drzwi do stylizacji za pomocą CSS, co jest idealne.
CONS
Krzywa uczenia się
Musisz być doświadczonym użytkownikiem Javascript, JSON i matematyki, aby D3 przeskakiwało przez obręcze. Niektóre z przykładów przyprawiają o zawrót głowy, ale przejdź przez tutorial. To nie jest takie złe i jeśli jesteś zaznajomiony z jQuery lub Prototype, wiele z tego będzie wyglądać znajomo. A wiele nie będzie…
Wnioski
Te sześć produktów to tylko wierzchołek góry lodowej dla dataviz. Są tam dziesiątki innych wspaniałych produktów. Ale te powinny dać ci dobry pomysł na to, co się dzieje i poczucie zakresu możliwości i złożoności interaktywnego świata dataviz.
.