Ten post jest początkiem nowego mini cyklu, w którym przedstawię kilka przydatnych, darmowych i prostych w obsłudze narzędzi, umożliwiających tworzenie efektownych wizualizacji.
Dziś skupię się na narzędziu Google Charts.
Wstęp
W trakcie realizacji jednego z projektów, stanąłem przed zadaniem przedstawienia zjawiska transferów użytkowników pomiędzy różnymi systemami IT. Transfery te odbywały się w kilku etapach, co stanowiło wyzwanie dla stworzenia wizualizacji. Miała ona być kluczowym elementem prezentacji: pozwolić odbiorcom, a zarazem decydentom, zrozumieć i ocenić skalę i przebieg transferów, a co za tym idzie, wybrać optymalny kierunek działań.
Tradycyjne wykresy słupkowe czy liniowe nie były w stanie w pełni oddać złożoności omawianego procesu. Dlatego też zdecydowałem się na użycie wykresu Sankeya, który umożliwia przedstawienie przepływu danych w formie strumieni.
Wizualizacja przy pomocy wykresu Sankeya spotkała się z pozytywnym odbiorem. Dzięki niej mogli oni w łatwy sposób zrozumieć złożony proces transferów. Wizualizacja pozwoliła również na identyfikację obszarów, w których można było poprawić efektywność procesu.
Co to jest wykres Sankeya?
Wykres Sankeya to typ diagramu przepływu, w którym grubość linii łączących elementy jest proporcjonalna do wielkości przepływu. Diagramy te są często używane w celach naukowych i biznesowych.
Wykres Sankeya składa się z dwóch podstawowych elementów:
Węzłów, które reprezentują różne stany lub etapy przepływu.
Łączników, które reprezentują przepływ między węzłami.
Grubość łącznika jest proporcjonalna do całkowitej ilości przepływu między węzłami.
Wykresy Sankeya mają różnorodne zastosowania. Mogą pokazywać:
Migracje klientów, na przykład z jednego systemu CRM do drugiego.
Przepływy pieniężne, na przykład w przedsiębiorstwie lub w gospodarce.
Przepływ informacji, na przykład w sieci komputerowej.
Wykorzystanie materiałów w procesie produkcyjnym.
Pozostało pytanie, jak przygotować taki wykres. Na rynku dostępnych jest wiele darmowych narzędzi, takich jak Visual Paradigm. Alternatywą są dodatki do programu Excel, dostępne zarówno w oficjalnym sklepie, np. ChartExpo, jak i od innych dostawców, takich jak Power User. Instalacja dodatkowego oprogramowania nie jest jednak zawsze możliwa, na przykład na służbowym komputerze. Wiąże się też z reguły z kosztami, koniecznością zamówienia subskrypcji itp.
W tym przypadku wybrałem PowerBI. Okazał się narzędziem umożliwiającym stworzenie wykresu, spełniającego moje wymagania. Wykres był czytelny, interaktywny i można było go aktualizować. Jestem jednak świadom, że PowerBI nie jest narzędziem dostępnym dla wszystkich, a jego obsługa może wymagać wprawy.
Postanowiłem zbadać inne dostępne na rynku możliwości i znaleźć darmowe narzędzia, które umożliwią łatwe i bezpieczne przygotowanie niestandardowych wizualizacji, bez konieczności instalowania dodatkowego oprogramowania. Bezpieczeństwo danych było dla mnie priorytetem, dlatego w pierwszej kolejności szukałem rozwiązania, które pozwoliłoby na przygotowanie wizualizacji lokalnie, na własnym komputerze, bez konieczności przesyłania danych do Internetu.
Oczywiście, potwierdzam, że udało mi się odnaleźć narzędzia, które zasadniczo spełniają postawione kryteria. W niniejszym oraz w nadchodzących postach tej serii, z przyjemnością podzielę się z Państwem owocami moich poszukiwań. Przygotowałem krótkie poradniki, które krok po kroku przeprowadzą Was przez proces korzystania z wyselekcjonowanych narzędzi.
Google Charts
Pierwszą propozycją, którą chciałbym przedstawić w ramach tej serii, jest Google Charts – usługa stworzona przez giganta technologicznego, Google / Alphabet. Google Charts umożliwia użytkownikom tworzenie wykresów na podstawie dostarczonych danych. Po wprowadzeniu informacji i określeniu preferencji dotyczących formatowania, usługa generuje wykres, a także dostarcza kod HTML/JavaScript, który można wykorzystać do zintegrowania wizualizacji z własną stroną internetową. Przykład użycia Google Charts do stworzenia wykresu Sankeya został zaprezentowany we wstępie do tego posta.
Google Charts posiada wiele zalet, które sprawiają, że jest to atrakcyjne narzędzie do tworzenia wizualizacji danych.
Zalety Google Charts:
Bogata galeria dostępnych wizualizacji oraz szerokie możliwości ich dostosowania do indywidualnych potrzeb użytkownika.
Interaktywność wykresów, co znacząco podnosi jakość prezentowanych danych.
Po opanowaniu podstaw oraz przygotowaniu własnych szablonów, korzystanie z Google Charts staje się intuicyjne i proste.
Gotowe wizualizacje można z łatwością osadzić na stronie internetowej czy w firmowym Sharepoint.
Niemniej jednak, Google Charts posiada także pewne ograniczenia, które mogą być uznane za jego wady.
Wady Google Charts:
Edycja kodu HTML może być przytłaczająca, szczególnie dla osób, które nie miały z nim wcześniej styczności. Na szczęście, po przygotowaniu jednego, działającego wzorca, jego modyfikacja pod konkretne potrzeby staje się znacznie prostsza.
Konieczność wprowadzania danych bezpośrednio do kodu HTML, zamiast ich importowania ze źródła, co może stanowić pewną barierę dla użytkowników nieznających tego języka programowania.
Brak możliwości osadzenia wizualizacji np. w PowerPoint (tak aby np. zachowała interaktywność działania).
Jak przygotować wizualizację w Google Charts?
Krok 1. Zdobądź i przygotuj dane.
Rozpocznij od zebrania i starannego przygotowania potrzebnych danych. Upewnij się, że są one wiarygodne i kompleksowe. W tym etapie zwróć uwagę na selekcję istotnych informacji. Po wybraniu narzędzia, konieczne może być też dostosowanie danych do jego wymagań.
Dekalog wizualizacji, to zbiór fundamentalnych zasad, które pomogą Ci stworzyć wizualizacje wspierające narrację opartą na danych. Szerzej opisałem go w tym artykule.
Krok 3. Zaprojektuj wizualizację.
Na tym etapie może pojawić się najwięcej trudności, zwłaszcza jeśli dopiero rozpoczynasz pracę z nowym narzędziem. Google Charts nie posiada wbudowanego kreatora czy edytora. Dlatego trzeba posłużyć się dodatkowym narzędziem do pracy. Poniżej przedstawię dwie możliwości, a także pokażę, jak łatwo korzystać z Google Charts, nawet bez znajomości HTML. Na tym etapie sugeruję, aby pracować na syntetycznych lub poglądowych danych.
Krok 4. Wprowadź dane do wizualizacji.
Po zaprojektowaniu wizualizacji, można przenieść ją do docelowego środowiska i wprowadzić rzeczywiste dane.
W przykładzie pokażę Państwu jak przygotować wyżej osadzony wykres Sankey.
Jak pracować z Google Charts?
Zanim przejdziemy do kolejnych kroków, warto zastanowić się nad wyborem narzędzia, w którym będziemy projektować naszą wizualizację. Przedstawię dwie opcje: program Microsoft Word oraz internetowe narzędzie JSFiddle. Jeśli zdecydują się Państwo na korzystanie z JSFiddle, zalecam przeprowadzenie procesu nauki i testowania na danych innych niż te, które są używane w Państwa przedsiębiorstwie, aby zapewnić bezpieczeństwo informacji.
Microsoft Word.
Word to narzędzie, które nie tylko umożliwia tworzenie stron WWW, ale także oferuje opcję bezpośredniego edytowania kodu HTML. Dla celów tej demonstracji, wykorzystamy kod wykresu Sankeya, który został zaprezentowany wcześniej. Pierwszym krokiem będzie utworzenie pustego pliku w Wordzie z rozszerzeniem *.htm. Korzystam z anglojęzycznej wersji aplikacji.
Następnie, aby umożliwić otwieranie pliku w różnych trybach i edytowanie kodu HTML, konieczne jest odpowiednie skonfigurowanie programu Word. W opcjach programu należy przejść do karty "Advanced", a następnie przewinąć do sekcji "General". Tam odznaczamy opcję "Confirm file format conversion on open". Dzięki temu uzyskamy dostęp do różnych trybów otwierania pliku i będziemy mogli swobodnie edytować kod HTML.
Następnie otwierając plik zaznaczamy opcję "Plain Text".
Po pierwszym otworzeniu pliku, kasujemy zawartość tak utworzonego pliku.
I wklejamy kod HTML skopiowany ze strony Google Charts.
Po wykonaniu powyższych kroków, efekt naszej pracy możemy zweryfikować, otwierając plik w naszej ulubionej przeglądarce internetowej. Kluczową zaletą tego podejścia jest możliwość edycji kodu bezpośrednio w Wordzie, co znacząco ułatwia proces. Po dokonaniu zmian w kodzie, wystarczy odświeżyć podgląd w przeglądarce, aby zobaczyć efekt wprowadzonych modyfikacji.
Aby sprawdzić wprowadzone zmiany, konieczne jest odświeżenie wizualizacji w przeglądarce, podobnie jak robimy to przy przeglądaniu standardowych stron internetowych.
JSFiddle.
Jako alternatywę dla Worda możemy użyć z narzędzi dostępnych online. Jest ich całe mnóstwo. Nie jesteśmy w stanie omówić ich wszystkich, ale jedną z opcji jest JSFiddle. Bezpośrednio z Google Charts możemy przejść do edycji w JSFiddle, klikając odpowiedni link przy wizualizacji w Google Charts.
Aby zobaczyć efekt zmian w kodzie należy każdorazowo kliknąć przycisk "Run" w prawym górnym rogu ekranu.
Jak projektować wizualizację w Google Charts?
Pierwszym krokiem jest otwarcie witryny: https://developers.google.com/chart.
Następnie wybieramy "Chart Gallery".
Z listy dostępnych opcji wybieramy "Sankey Diagram".
Przewijamy niżej i kopiujemy jeden z podanych wariantów kodu HTML do Worda lub uruchamiamy JSFiddle.
Opcji modyfikacji kodu jest wiele, a wszystkie niezbędne instrukcje znajdują się bezpośrednio na stronie Google Charts. Tam też znajdą Państwo informacje, jak dostosować kolory wstęg, grubość węzłów czy czcionki. Na poniższym przykładzie wkleiłem propozycję Google Charts dotyczącą kolorowania wstęg, co zaznaczyłem żółtym markerem.
A oto uzyskany efekt w przeglądarce (Google Chrome).
Wprowadzanie danych do wykresu przygotowanego w Google Charts
Po zakończeniu pracy nad wizualizacją, możemy przejść do przygotowywania danych. Kluczowe jest to, że gotową wizualizację możemy traktować jako szablon, który będziemy uzupełniać o aktualne dane.
Poniżej przedstawiam fragment kodu HTML, który odpowiada za przetwarzanie danych.
W kodzie HTML, kolumna po lewej stronie przedstawia źródło przepływu danych ("Z"/"From"), środkowa kolumna to cel przepływu ("Do" / "To"), a ostatnia kolumna reprezentuje wartość przepływu.
Jako praktyczne rozwiązanie, proponuję przygotowanie arkusza kalkulacyjnego w Excelu, gdzie będą wprowadzone wszystkie niezbędne wartości. Po ich zaktualizowaniu, jedynym krokiem, który pozostaje do wykonania, jest zmiana zaznaczonej na żółto części kodu. Poniżej znajduje się zrzut ekranu, który pokazuje dane niezbędne do stworzenia wykresu Sankeya, wraz z formułą umożliwiającą ich przekształcenie do odpowiedniego formatu.
A oto produkt końcowy.
Użycie przygotowanego wykresu Google Charts
Po przygotowaniu wykresu, możliwości jego wykorzystania są liczne. Możemy umieścić kod wykresu na stronie internetowej lub, jak wcześniej wspomniano, osadzić go w dedykowanym oknie, na przykład na firmowym portalu SharePoint.
Jeśli chcielibyśmy wykorzystać wykres w prezentacji PowerPoint, sytuacja staje się nieco bardziej skomplikowana, co można uznać za jedną z wad Google Charts. Po przetestowaniu kilku możliwości, widzę dwa efektywne rozwiązania:
Możemy stworzyć link do pliku z wykresem na slajdzie i otworzyć go podczas prezentacji. Minusem tej metody jest konieczność opuszczenia prezentacji PowerPoint, a także kwestie estetyczne (link otworzy się w domyślnej przeglądarce internetowej).
Możemy uzupełnić kod o element wskazany tu. W tej sytuacji, wykres będzie można zapisać jako obrazek *.png. Nie jest to jednak możliwe w przypadku każdego wykresu.
Inną opcją jest zapisanie obrazka z wykresem (na przykład poprzez zrzut ekranu) i umieszczenie go bezpośrednio w prezentacji PowerPoint. Wadą tego rozwiązania jest brak interaktywności wykresu, jednak warto zastanowić się, czy interaktywność jest nam rzeczywiście potrzebna podczas prezentacji.
Podsumowanie
Niniejszy post rozpoczyna serię o darmowych i prostych narzędziach do tworzenia wizualizacji danych. Dziś skupiłem się na Google Charts, usłudze od Google umożliwiającej tworzenie interaktywnych wykresów. Działanie Google Charts omówiłem na przykładzie wykresu Sankeya, który świetnie oddaje złożoność przepływów danych.
Zalety Google Charts to m.in.
duży wybór wizualizacji,
łatwość osadzenia wykresu na stronie internetowej oraz
interaktywność wizualizacji.
Wady to:
konieczność wprowadzania danych do kodu HTML oraz
trudność w osadzaniu wizualizacji w PowerPoint.
Źródła:
Google Charts, Sankey Diagram
Michał Szudejko, Dekalog wizualizacji
Podobał się Ci ten post? Zachęcam do subskrypcji!