Jak wybrać bibliotekę do wykresów i wizualizacji danych
Wraz z rozwojem internetu, cały czas rośnie ilość produkowanych danych. Każdego dnia tworzone są kwintyliony bajtów danych. Przy takiej skali są dwa główne wyzwania - przetwarzanie danych i wyciąganie z nich sensu. W tym drugim przypadku, kiedy dane mają służyć człowiekowi, z pomocą bardzo często przychodzi wizualizacja danych. W końcu reprezentacja graficzna to coś, co pozwala sprowadzić bardzo skomplikowane dane do łatwo przyswajalnej formy.
By dane były ciągle łatwo dostępne, idealnym rozwiązaniem jest prezentowanie ich w środowisku web, a wiadomo - jak web, to JavaScript. W internecie jest dostępnych setki bibliotek JavaScript, służących do wizualizacji danych, głównie wspomaganej przez tworzenie wykresów. Przyjrzyjmy się najważniejszym kryteriom, pod których kątem warto oceniać dostępne rozwiązania i opiszemy te, które prezentują się najlepiej. By lepiej sprostać temu zadaniu, skorzystaliśmy z pomocy specjalistów - Senior Software Developerów z mTab Poland. Firma ta na co dzień zajmuje się rozwojem własnego rozwiązania do wizualizacji danych, więc zespół deweloperski ma duże doświadczenie zarówno w samej wizualizacji, jak i używaniu wymienionych bibliotek.
Na co zwrócić uwagę przy wyborze biblioteki do wizualizacji danych
Zanim przystąpimy do wyboru konkretnej biblioteki, musimy określić własne potrzeby i wymagania co do finalnego efektu. Ta analiza jest bardzo istotna i może zaoszczędzić dużo czasu na etapie implementacji i dalszego utrzymania rozwiązania. Szczególnie należy zwrócić uwagę na:
- Potrzebne typy wykresów - niektóre biblioteki oferują w zasadzie wszystkie możliwe typy wizualizacji, inne skupiają się tylko na podstawowych rodzajach
- Elastyczność - czyli możliwości konfiguracji wykresów. Warto biblioteki analizować pod kątem ograniczeń. Często biblioteki zakładają jakieś zawężone pole manewru, w którym możemy się poruszać. Istnieje ryzyko, że wraz z ewolucją projektu (wymagań), możemy je przekroczyć - np. customizacja osi, czy aplikowanie corporate identity - zauważa Artur Barcicki
- Interaktywność
- Prostota użycia - która najczęściej sprowadza się do przejrzystości i złożoności API
- Możliwość tworzenia i używania niestandardowych komponentów
- Typ renderowania - SVG lub canvas. To o tyle ważne, że były różne motywy powstania tych dwóch technologii, co zauważa Filip Misiorek: SVG zostało stworzone z myślą o prezentacji grafiki wektorowej. Canvas jest natomiast odpowiedzią na potrzebę realizacji multimedialnych aplikacji 2D/3D. W przypadku obu technologii powstał szereg bibliotek wspierających wykonywanie na nich operacji
- Własne doświadczenie z bibliotekami do wizualizacji - czasem może to być decydujący czynnik, który sprawi, że projekt będzie można skończyć o wiele szybciej
- Budżet wydajności strony i responsywność - ogólnodostępna wizualizacja, z której użytkownicy będą korzystać na urządzeniach mobilnych, powinna być lżejsza niż aplikacja biznesowa, z której będzie się korzystać tylko na desktopie z dostępem do szerokopasmowego internetu
- Już używane w projekcie frameworki i biblioteki - warto tu postawić na bezproblemową integrację, szczególnie, jeżeli gonią terminy
- Wielkość i aktywność społeczności - jest to aspekt, który zapewne można pominąć, gdy chce się narysować parę wykresów. Natomiast w długo żyjącym projekcie aktywna społeczność może długofalowo bardzo wiele ułatwić
- Modularność i dostępne funkcje pomocnicze - Im bardziej biblioteka coś "integruje" tym większa szansa, że będzie trzeba to później "dezintegrować". Większość bibliotek próbuje zaoferować kompaktowe rozwiązania popularnych problemów - jednak przy tworzeniu coraz to bardziej złożonego softu, wykraczamy poza popularność i tworzymy coś unikalnego - jeśli ten fakt widać wcześnie, należy się zastanowić, czy w ogóle warto korzystać z biblioteki lub z których jej części skorzystać. Im więcej sensownych, granularnych helperów/utili, tym lepiej biblioteka się sprawdza. - zauważa Michał Boruczkowski
Trzeba jeszcze pamiętać, że nie ma biblioteki, która rozwiąże wszystkie problemy. Nie wykluczajmy sytuacji, w której w ramach jednego projektu będziemy korzystać z wielu z nich. - zwraca uwagę Artur Barcicki i kontynuuje:
Nie zawsze też dostarczone narzędzia są odpowiedzią na problemy. W bardziej skomplikowanych wyzwaniach (np. rozmieszczenie etykiet tak, aby nie kolidowały), dobrze jest poszukać rozwiązań w pracach naukowych. Czasem też trzeba uzupełnić swoją wiedzę np. o wiedzę z algorytmów wyznaczania struktur graficznych takich jak diagram Woronoja czy otoczki wypukłej.
Lista bibliotek do wykresów i wizualizacji danych
Zaczynamy listę od rozwiązań, które oferują najmniej możliwości, a kończymy na tych, które oferują największy potencjał.
Brak biblioteki
W wielu przypadkach, szczególnie gdy do zaprezentowania są proste wykresy, użycie dedykowanej biblioteki do tego celu może się nie opłacać. Będzie tak szczególnie wtedy, gdy do zaprezentowania są całkowicie statyczne dane, które się nie zmieniają.
Tu najprostszym rozwiązaniem jest użycie obrazka (w formacie jpg, png, webp) z wykresem i użycie srcset w celu uzyskania responsywności. SVG będzie w tym wypadku lżejszy i na każdym rozmiarze ekranu będzie wyglądać dobrze. Największą wadą użycia obrazków jest całkowity brak (jpg, png, webp) lub minimalna interaktywność (statyczne SVG).
Chartist.js
To biblioteka, która reklamuje się jako “proste, responsywne wykresy”. I dokładnie tym jest. Oferuje wykresy liniowe, punktowe, kołowe, słupkowe i prostą konfigurację. Pozwala na animowanie wykresów, ale nie ma opcji służących interaktywności. Do prezentowania wykresów używa SVG, dlatego nie jest rekomendowana dla dużych kolekcji danych. Wersja zminifikowana to jedyne 10 kB, co nie będzie raczej dużym obciążeniem dla użytkowników strony.
Chart.js
Chart.js reklamuje się jako prosta, ale elastyczna biblioteka do wykresów dla deweloperów i designerów. Prostota wynika między innymi z tego, że do dyspozycji jest 8 typów wykresów, z którymi można jednak wchodzić w interakcję - dzięki standardowym eventom JS, np. click.
Chart.js umożliwia też animowanie wykresów i konfigurację ich podstawowych parametrów. Wykresy są renderowane przy pomocy canvas, a biblioteka w wersji min zajmuje nieco ponad 150kB. Dostępne jest też kilka rozszerzeń, które pozwalają np. na rysowanie nowych wykresów, czy nowe interakcje z wykresami. Największym minusem tej biblioteki jest bardzo ciężkie dopasowanie do własnych, niestandardowych potrzeb, na co zwraca uwagę Artur Barcicki: Nie da się użyć własnych styli (bo przecież canvas) i możemy modyfikować tylko to, na co pozwala konfiguracja.
Recharts
Jest to biblioteka bazująca na komponentach reactowych i niektórych modułach z D3. Pozwala na rysowanie 9 typów wykresów przy pomocy SVG. W każdym typie można definiować funkcje obsługujące eventy myszki. Jeżeli używasz Reacta, to może być jeden z najprostszych sposobów na zintegrowanie rysowania wykresów z Twoją aplikacją.
Google Charts
Biblioteka od Google oferuje rysowanie interaktywnych wykresów przy pomocy SVG. Zapewnia dostęp do kilkunastu typów wykresów, z którymi można wchodzić w interakcję, w tym przez użycie eventów, ale też kontrolek. Dzięki temu w Google Charts można tworzyć dashboardy, na których prezentowane będą różne, wzajemnie powiązane wykresy. Kolejną ciekawą funkcją jest możliwość połączenia wykresów z danymi z Google Sheets.
Victory
Kolejna biblioteka do produkowania wykresów wyświetlanych jako SVG przy pomocy komponentów reactowych. Victory oferuje 14 typów wykresów oraz możliwość tworzenia własnych, niestandardowych wykresów. Dodatkowo dostępne jest API do animacji, obsługi eventów, motywów oraz ciekawa funkcja przybliżania i wybierania zakresu danych. Victory oferuje też wersję do integracji z React Native, co z pewnością jest ciekawym dodatkiem.
ApexCharts
ApexCharts to 12 podstawowych typów wykresów oraz możliwość układania ich w dashboardy. Biblioteka pozwala na rysowanie responsywnych, interaktywnych i dynamicznych wykresów, które renderowane są do SVG. Ciekawą funkcją jest dokładanie adnotacji do wykresów, by pomóc użytkownikom zrozumieć dane. Podobnie jak Victory, ApexCharts pozwala na przybliżanie, przewijanie i określanie zakresu wyświetlanych danych. Dodatkowo ta biblioteka jest również dystrybuowana w specjalnej, ułatwiającej integrację wersji dla React i Vue.js.
AmCharts
Biblioteka do rysowania wykresów oraz map napisana w TypeScript. Zapewnia integrację dla aplikacji React, Angular, Vue.js, Ember oraz współpracuje dobrze z Webpackiem, czy RequireJS. Oferuje obecnie 11 typów wizualizacji - w tym chmury słów, lejki, wykresy strunowe i Sankeya. To o tyle ciekawe, że często brakuje takich opcji w innych bibliotekach. Wszystkie wykresy są generowane w SVG, a biblioteka daje opcje renderowania responsywnego. AmCharts - w przypadku nieodpłatnego używania - wymaga jednak wyświetlenia logo i linku do strony na wszystkich wykresach.
Highcharts
Biblioteka ta ma już 10 lat i oferuje naprawdę sporo opcji wizualizacji. Znajdziemy tu 17 typów wykresów, a dodatkowo 3 specyficzne dla notowań giełdowych, mapy, diagram Gantta. A to wszystko jest dostępne przez stosunkowo szerokie API - faktem jest, że z większości opcji nie trzeba korzystać na co dzień. Pomimo mnogości wykresów i opcji konfiguracyjnych, używanie Highcharts nie jest bardzo skomplikowane. Highcharts jest dostępne za darmo do użytku niekomercyjnego, a rysowanie odbywa się przy pomocy SVG.
ECharts
Biblioteka do wizualizacji danych od Baidu. Twórcy biblioteki skupili się głównie na wizualizacji dużych zbiorów danych, w których często pierwszy rzut oka nie wystarczy. Dlatego znalazło się tu bardzo dużo opcji związanych z interaktywnością - od przełączania zakresów i typów danych, przez tworzenie powiązanych wykresów, rysowanie na powierzchni wykresów, czy wyciąganie danych na zasadzie drag-and-drop. Dodatkowo mamy tu prawie 20 typów wykresów, które można ze sobą kombinować, ponad 600 opcji konfiguracji oraz tryb big data do prezentowania naprawdę dużych kolekcji. Żeby to wszystko ze sobą współgrało, autorzy opracowali dość skomplikowaną architekturę, która używa pod spodem silnika ZRenderer do wyświetlania danych na canvasie. To wszystko jest dość kosztowne, jeśli chodzi o kod, bo biblioteka wraz ze wszystkimi wykresami waży około 1MB.
D3.js
O D3.js można by napisać osobny artykuł, bo to znacznie więcej niż biblioteka do wizualizacji, a raczej całe podejście do tworzenia dokumentów opartych na danych. Nie jest to monolit, co tłumaczy Filip Misiorek: D3 w obecnej wersji jest biblioteką modułową, zawiera w sobie szereg narzędzi wspomagających operacje na danych: takich jak przygotowanie skali, renderowanie axisów i map. Biblioteka ta pozwala na dodanie animacji, styli i customowych zachowań.
Właśnie z tego wynika, że w D3.js można zrobić wszystko, co się nam zamarzy. Przychodzi to kosztem dużej inwestycji w naukę biblioteki i zrozumienia powiązań wszystkich modułów. Co ciekawe, dzięki podejściu D3.js cała biblioteka jest niezwykle lekka, biorąc pod uwagę możliwości. W najnowszej wersji waży niewiele ponad 70kB w wersji min. Wiele innych bibliotek bazuje właśnie na D3.js, rozszerzając pewne funkcje, często specjalizując się i ułatwiając konkretne aspekty wizualizacji danych. Przykładem może być tu dc.js, które służy do eksploracji wielowymiarowych zbiorów danych.
Własne rozwiązanie
Przy bardzo specyficznych potrzebach, używanie gotowej biblioteki może być tylko zbędnym bagażem i w szczególnych przypadkach należy wziąć pod uwagę możliwość skorzystania raczej z silnika do renderowania i opracowanie własnego rozwiązania na tej podstawie. Tu zdecydowanie największym plusem jest możliwość tworzenia niestandardowych komponentów, rozwiązań, animacji, interakcji oraz potencjał. W rzeczywistości rzadko będzie to najlepsze rozwiązanie i przed podjęciem się takiego zadania warto spróbować popularnych bibliotek. Jeżeli jednak wszystko inne zawiedzie, to może warto zwrócić się w stronę silnika do renderowania:
Jednym z przykładów bibliotek wspierających renderowanie w HTML5 Canvas jest Pixi JS. Nie jest to biblioteka, która powstała z myślą o tworzeniu wykresów. Priorytetem było uzyskanie maksymalnej wydajności i prostoty w tworzeniu interaktywnych aplikacji lub gier w przeglądarkach. Pomimo tego, że jest to biblioteka wspierająca aplikacje 2D, jej autor wykorzystał fakt, że kontekst 3D posiada lepsze wsparcie do akceleracji ze strony kart graficznych.
Dlatego Pixi renderuje obraz przy użyciu WebGL. Dzięki temu efekty uzyskane dzięki Pixi będą działać płynnie w najnowszych przeglądarkach. Wśród dziesiątek przykładów użycia tej biblioteki znajdują się ciekawe propozycje wizualizacji, często wykraczające poza standardowe bar charty (przykłady: tutaj i tutaj). - reklamuje to podejście Filip Misiorek.
Wybierz mądrze
Jest bardzo dużo bibliotek do wizualizacji i problemem w tym momencie jest wybranie rozwiązania, które najlepiej sprawdzi się w naszym konkretnym przypadku. Dlatego tak ważne jest dobre zdefiniowanie potrzeb.
Zarówno wybranie zbyt prostego, jak i zbyt rozbudowanego rozwiązania w stosunku do problemu może skończyć się znacznym ograniczeniem produktywności lub uniemożliwieniem uzyskania pożądanego rezultatu.
Wizualizacja danych jako obszar rozwija się w bardzo ciekawym kierunku i ciągle powstają nowe narzędzia, które ułatwiają nam pokazywanie sensu danych. Dlatego warto śledzić nowości i być może bardziej zainteresować się tą dziedziną.
Osobom, które chciałyby spróbować swoich sił na tym polu, polecamy bliższe zapoznanie się z mTab Poland z Poznania.