Dziś mamy przyjemność zaprezentować gościnny wpis Piotra Migdała. Wpis zawierać będzie zbiór 45 linków dotyczących biblioteki D3 i jej zastosowań. Biblioteka D3 to świetne narzędzie dla interaktywnych wykresów, ale można też użyć tej biblioteki do statycznych rysunków. Osobiście nie jestem fanem Java Scriptu, ale na razie nie widać silnej konkurencji o podobnych możliwościach (no może Processing…). Więc jeżeli myślimy o prezentacji danych w przeglądarce to warto poznać D3.
Metawstęp do wizualizacji danych w D3.js…
Piotr Migdał
D3.js (Data-Driven Documents) to biblioteka w języku JavaScript do wizualizacji danych. Zamiast dawać gotowce (czyli konkretne wykresy) pozwala łatwo manipulować podstawowymi elementami graficznymi i łączyć elementy HTMLa z danymi. Tym samym to raczej nie tyle gotowa wizualizacja, co narzędzie do tworzenia takowych.
(TagOverflow dla strony Stack Overflow i pytań powiązanych z tagiem [data-visualization]. Wielkość wierzchołka mówi o liczbie pytań, szerokość krawędzi – liczbie pytań mających oba tagi naraz, zaś odcień – o tym jak mocną są skorelowane.)
Jak wygląda w praktyce? Zobacz galerię ze strony D3.js lub ten duży zbiór wizualizacji (sam zbiór jest w D3.js, zaś lista dynamicznie ładuje się z tego pliku Google Spreadsheet). I co istotne, jest wiele takich wizualizacji w artykułach prasowych, projektach naukowych itd. Wydaje się, że D3.js stała się domyślnym narzędziem do wizualizacji w sieci!
(Przykłady: Simpson Paradox, Nutrient Contents – Parallel Coordinates, MIT Pantheon, Immersion, How Americans Die.)
Kiedy warto pomyśleć o D3.js:
- nietypowe wizualizacje (wszystko, czego nie da się stworzyć jedną funkcją z jakiegoś pakietu do wykresów),
- interaktywność (choćby pojawiające się parametry punktu, gdy się na niego najedzie myszką),
- do obejrzenia przez każdego (nie wymaga specjalnych programów, działa na dowolnym urządzeniu z przeglądarką),
- separacja danych od wizualizacji (łatwo dać dane do pliku csv lub json).
Rzecz jasna, gdy nie potrzebujemy takich autów (np. porzebujemy prosty, nieinteraktywny histogram) – prościej i szybciej użyć gotowca z naszej ulubionej bilbioteki do rysowania wykresów. Ale gdy tylko nasz pomysł odbiega od standardowego wykresu, nieraz łatwiej jest stworzyć od zera niż frustrować się na siłę nanosząc wiele modyfikacji.
Kusiło mnie wielokrotnie, by napisać wprowadzenie do d3.js. Nie zrobiłem tego z powodu niedostatku czasu, a także bo nie brakuje wstępów do owej bilbioteki. Zatem pokuszę się na metawstęp – tj. gdzie szukać i skąd polecam się uczyć.
By korzystać z D3.js należy choć trochę wiedzieć co to jest HTML i znać nieco JavaScripta. Zwykle przy pomocy D3.js rysuje się w SVG (Scalable Vector Graphics) podstawowymi obiektami graficznymi – kółkami, kreskami i prostokątami, tekstami. Jeśli te pojęcia (tj. HTML, JS, SVG; zakładam, że wiesz co to kółko) są dla Ciebie obce – nie ma obawy, nauczenie się ich jest w miarę proste. I nie trzeba wszystkiego wiedzieć – są dokumentacje, jest Google, jest Stack Overflow – zatem można uczyć się w trakcie napotkania konkretnych problemów.
W kwestii języka JavaScript – jeśli rozumie się takie napisy:
- var dane = [{x: 10, y: 15}, {x: 20, y: -30}, {x: -30, y: -45}]
- dane
- .filter(function (d) { return d.x > 0; })
- .map(function (d) {return d.y / d.x; });
- // [1.5, -1.5]
powinno wystarczyć.
Jeśli nie, lub jeśli ma się chęć lepszego poznania tego języka, można uczyć się z Mozilla JavaScript Guide (zwłaszcza na szybki start i referencję) lub darmowej interaktywnej książki Eloquent JavaScript (bardzo dobre, ale też bardziej czasochłonne), ew. jakiś interaktywny kurs np. z Codeacademy.
Z wielu różnorakich wprowadzeń do D3.js najbardziej skondensowane wydaje mi się D3 Intro – Vadim Ogievetsky. Klikamy strzałkę w prawo, by zmieniać slajdy; przykłady są interaktywne – kod można (i warto!) edytować, by zobaczyć co się dzieje. O ile pierwsze zdanie może płoszyć początkujących (In JS functions are first class citizens.), oznacza ono tyle, że w języku JavaScript funkcje są zmiennymi, i np. nieraz daje się je jako argumenty funkcji.
Z innych wprowadzeń:
- D3 Tutorial by Christopje Viau – zawiera pełne pliki HTML dające dany efekt,
- D3 Tutorial by Scott Murray – dłuższe i bardziej dogłębne; pokrótce też daje wstęp do rzeczy związanych z HTMLem,
- D3.js experiments in the console by Sarah Allen – zgodnie z nazwą, interakcje z konsoli przeglądarki,
- Getting started with D3.js by Eyal Arubas – pokazuje jak modyfikować już istniejącą wizualizację.
Co dalej? Autor D3.js, Mike Bostock, umieścił wiele swoich wizualizacji na strone http://bl.ocks.org/mbostock (od elementarnych, przez proste i średnie do zaawansowanych). Co jest najbardziej niesamowitego to to, że widzimy wizualizację i pełen kod od razu. Nieraz właśnie najłatwiej zrobić swoją wizualizację startując od istniejącej, i krok po kroku modyfikując kod. Jest też wiele innych projektów z widocznym kodem – np. do Parallel Coordinates, biblioteki korzystającej z D3.js. Można też doczytywać różne strony z poradami, jak choćby D3 Tips & Tricks.
Jeśli już się opanowało podstawy, warto rzucać okiem na źrodła stron, na których są wizualizacje. Nieraz są one właśnie w D3.js i można się czegoś z nich nauczyć. Sam mam wyrobiony odruch ⌘⌃U (skrót w przeglądarce Chrome na Macu). O ile dla wielu osób JavaScript nie jest ulubionym językiem programowania, to jego niewątpliwą zaletą jest to, że kod zawsze jest dostępny do wglądu.
Gdzie się bawić? Najprościej na własnym komputerze. Gdy plik HTML nie ładuje żadnych danych z innych plików, wystarczy go otworzyć w przeglądarce i powinno działać (zależy to też m.in. od przeglądarki; np. Safari jakoś potrafi ładować dane). Jednak nie zawsze to wystarcza – wtedy należy uruchomić lokalny serwer, np. wspisując w lini polecań
- $ cd folder/z/wizualizacja
- $ python -m SimpleHTTPServer
i otwierając przeglądarkę na "stronie" http://0.0.0.0:8000/.
Można też próbować, zwłaszcza mniejsze rzeczy, robić w Plunker (wstęp tu, ładny przykład, zwodniczy przykład) lub JSFiddle (np. to i to); w obu trzeba ustawić, że korzystamy z biblioteki D3.js.
"Mamo, zobacz jakie ładne!" – czyli gdzie upubliczniać?
Ćwiczenia i przykłady można rozpowszechaniać przy pomocy wyżej wymienionych Plunker i JSFiddle. Wolnostojące – najprostsze jest pewnie Site44 (jak się ma Dropboxa). Trochę bardziej skomplikowane (do nauczenia się, potem to już łatwo) jest postawienie strony na GitHub (rzeczy na branch ’gh-pages’ są automatycznie wyświetlane; mój przykład: źródło i strona). Ew. można zrobić swoje bl.ocks – wpierw trzeba wrzucić na GitHub gist.
Na zakończenie pozwolę jeszcze dodać, że takie tworzenie wizualizacji z podstawowych elementów sprzyja minimalistycznym wizualizacjom. I bardzo dobrze – jak pokazujemy dane, zwykle mamy dużo do powiedzenia i jest ryzyko rozproszenia czytelnika. (Zupełnie przeciwna sytuacja do takiej, w której chcemy przekazać mało informacji i do przykucia uwagi porzebujemy pracować nad formą graficzną.)
Przy okazji, prowadzę blok Wizualizujemy Wikipedię w ramach 10. Wakacyjnych Warsztatów Wielodyscyplinarnych dla licealistów, które odbędą się 18-29 sierpnia 2014 w Głogowie. Zapraszam do zgłoszeń! A zadania kwalifikacyjne są tak dobrane, by nauczyć D3.js, więc nawet jak nie aplikujesz – też zachęcam.
Jeśli któreś porady czy linki okazały się wyjątkowo celne (lub chybione), czy też uczyliście się z innych materiałów – gorąco zachęcam przekazania mi tej informacji, w komentarzu lub mailu.
Dziękuję Marcie Czarnockiej-Cieciurze i Michałowi Kotowskiemu za cenne uwagi do tekstu.