Wizualizujemy Wikipedię

Prowadzący

Piotr Migdał

Opis

Pewnie większość czytelników spotkała się z wykresem punktowym, liniowym, słupkowym i kołowym a także (dla danych dwuwymiarowych) konturowym. Ale, o ile są częste i wszechstronne, to stanowią dopiero wierzchołek góry lodowej wizualizacji. Jest cała masa innych, mniej popularnych, czy też bardziej wyspecjalizowanych, sposobów pokazywania danych (np. równoległe współrzędne do wizualizacji danych wielowymiarowcyh). Co więcej, możemy wymyślić nowy sposób, dokładnie pasujący do danych (najlepszy przykład: układ okresowy pierwiastków)!

Wydaje się, że wizualizacja danych przeżywa swój rozkwit - coraz łatwiej o dane, i coraz łatwiej je przedstawić w interaktywnej formie.

Jeśli chodzi o wizualizację, to trzeba mieć do niej dane. I Wikipedia jest kuszącym miejscem - zarówno dużo różnych rzeczy, otwarto dostępna, jak i wizualizacja a nuż może się okazać ogólnoużyteczna. Przy czym tu postaram się być mało ortodoksyjny - jak ktoś ma pomysł czy chęć na wizualizację innych danych, będę na to otwarty!

Główne tematy:

Jakie dane chcemy przedstawić?
Co z danych chcemy przekazać, podkreślić a od czego - abstrahować?
Jak technicznie to zrobić?

Narzędzia

Z punktu widzenia technologii skupimy się na D3.js (Data Driven Documents) - bibliotekę w JavaScript pozwalającą tworzyć interaktywne wizualizacje z prostych obiektów, łatwo, prosto i przyjemnie (dla oka).

Możliwe, że zahaczy również o w miarę elementarne pobieranie i przetwarzanie danych (np. pobieranie ze strony, generowanie danych w postaci łatwo "zjadalnej" przez JS), np. w Pythonie (ale tylko dodatkowo); czy też np. jak wyekstrahować tabelkę z PDFa. I możliwe, że też trochę analizy i wizualizacji grafów, np. w Gephi.

Program zajęć

Początek
- Wprowadzenie do wizualizacji danych (ogólne zasady, dobre przykłady, tricki i pułapki).
- Wybieramy sobie projekty, burza mózgów co i jak warto przedstawić.
Środek (większość)
- Praca nad własnym projektem, indywidualnie lub w małych grupach. Będę pomagał zarówno technicznie jak i ogólnowizualizacyjnie.
Koniec
- Przedstawiamy swoje projekty i opowiadamy jak doszliśmy do rezultatów, co było "wow!", co trudnością. Innymi słowy: uczymy się ma sukcesach i porażkach swoich i innych. :)

Trudność

Płynna. Tj. minimalna trudność nie jest duża (wystarczy technicznie opanować robienie prostych wizualizacji, co będzie sprawdzone w zadaniach), ale skoro to będą projekty własne - nie ma tu "progu obcięcia" na zdolności - sky's the limit!

Warsztaty adresowane do wszystkich z mat/fiz/inf/astr. Nie zakładam wstępnej znajomości JavaScripta (tj. przed przystąpieniem do zadań :)).

Zadania kwalifikacyjne

Przed przystąpieniem do nich warto przejść przez te slajdy o D3.js (klikamy "prawo", by iść dalej; warto nie dawać "Run" przy przykładach, ale też edytować i patrzeć jak to wpływa). Jak JavaScript wydaje się mętny, daję poniżej linki do wstępów.

NOWE: Właśnie napisałem Metawstęp do wizualizacji danych w D3.js, gościnnie na blogu SmarterPoland.pl. Mam nadzieję, że pomoże w rozpoczęciu przygody z D3.js.

W przypadku zarówno wątpliwości jak, problemów techniczny jak i pytań dotyczących JavaScripta i D3.js - bardzo chętnie pomogę! (Wystarczy mailnąć!) Zwłaszcza, że zadania są głównie, by się nauczyć, a nie tylko sprawdzić.

Zadanie 1: pierwsza przygoda z d3.js

Zadanie 1 jest tu, nie wymaga to logowania.

Należy zaś kliknąć "Fork" (u góry) i edytować swoją wersję. Instrukcje są w treści pliku.

Zadanie 2: układ okresowy (też w d3.js)

państwa i religie / surowce (fajne, ale byłoby zbyt czasochłonne)

Zadanie 2 jest tu. (Ta sama historia z "Fork","Save".)

Stwórz swój układ okresowy korzystając z:

W wersji minimum, samo rozmieszczenie skrótów zgodnie z Group i Period, ale zachęcam do pobawienia się! (Kolorami, wielkością, ew. też samym rozmieszczeniem.)

Wskazówki:

By pozyskać dane najprościej przekopiować tabelkę do Google Docs Speadsheet / Open Office / Excel, po czym zapisać jako plik CSV.
Ten drugi link jest "trudniejszy", gdyż trzeba wyczyścić liczby (można ręcznie, można RegExem, a można po prostu olać te kolumny (i tak wszystkiego się nie pokaże) lub później parsować (patrz punkt niżej)).
d3.csv wczytuje dane jako tekst (String); zatem by zrobić z liczby liczbę, najprościej dać plus przed nią (+"2.122") lub użyć parseFloat (parseFloat("4.002602(2)2 4") - owa funkcja jest odporniejsza na takie "ogony").

Zadanie 3: Twoja wizualizacja

Opisz jakie dane z Wikipedii chcesz zwizualizować i jak zamierzasz to zrobić:

Wskaż konkretne surowce (np. konkretną stronę, rodziny stron lub bazę danych).
Napisz co i jak chcesz pokazać.
Zrób szkice (co najmniej 1) mówiące ideowo jak to ma wyglądać; (ołówek/długopis i skan, Paint, cokolwiek - oceniam koncept, nie wykonanie graficzne).
Jeśli pozyskanie danych jest trudniejsze niż "przeklejamy tabelkę do Excela", wstępnie opisz jak chcesz się do tego zabrać (jak do końca nie wiesz - napisz, a pomogę!).

Dodatkowe info:

O ile projekt może składać się z wizualizacji pojedynczej tabelki na konkretnej stronie Wikipedii, to też może polegać na analizie całej zawartości.
Może to być o zawartości stron, strukturze połączeń między stronami, metadanymi (np. jakie artykuły są edytowane), itd.
Jeśli zamiast Wikipedii chcesz zająć się wizualizacją innych danych, napisz. Muszą to być jednak dane, które potrafisz zdobyć (optymalnie: są ogólnodostępne).
Propozycja nie musi być ostateczna; na warsztatach możesz równie dobrze zrobić to, jak i co innego.

Dodatkowe informacje

Przykładowe projekty

Np.

znane osoby wedle dziedziny, pochodzenia i czasu aktywności,
tech-tree dla danej dziedziny nauki,
historia regionów,
religie i grupy etniczne na świecie,
drzewo życia,
mapa Wikipedii.

Bardzo jestem otwarty na Wasze pomysły!

Jeśli macie jakieś sugestie co do wizualizacji, mogę np. przechrzcić to na "wizualizujemy edukację i naukę" czy coś w tym stylu (np. celując w wizualizację olimpiad krajowych i międzynarodowych). Fajnie jak się uczestnicy czegoś nauczą czy zaciekawią. Naprawdę super, jak jakiś projekt będzie ciekawy czy pożyteczny też dla innych (choćby hermetycznego grona innych uczestników WWW10; może też jakieś wizualizowanie WWW? ;)).

Przygotowania

Jeśli projekt wymaga ściągnięcia sporej ilości danych to warto zrobić to przed WWW (nie wiem jakie będzie łącze na miejscu).

Linki

Daję sporo linków, wiec nie trzeba wszystkiego przeglądać.

d3.js - inspiracje

d3.js - wstępy

Wprowadzenia do JavaScript (acz u nas wystarczy znać składnię):

Przykładowe wprowadzenia do d3.js:

http://vadim.ogievetsky.com/IntroD3/ - ze wstępem do JS (klikamy "prawo" by iść dalej)
http://christopheviau.com/d3_tutorial/
http://alignedleft.com/tutorials/d3/
http://eyalarubas.com/getting-started-with-d3js.html
http://www.ultrasaurus.com/2012/03/d3-js-experiments-in-the-console/

I np. interaktywne przykłady:

I trochę trudniejsze:

Wikipedia dane

http://en.wikipedia.org/wiki/Wikipedia:Database_download
http://dumps.wikimedia.org/
http://www.mediawiki.org/wiki/API:Main_page
http://dbpedia.org/
a pojedynczą stronę można też np. tak: http://en.wikipedia.org/wiki/Special:Export/Almond
Pythonic wrapper for Wikipedia API

Wizualizacje Wikipedii

Inne dane i wizualizacje

Narzędzia i tricki

Import HTML into Google Docs
Tabula - PDF to CSV

Deser

Obrazki na stronie pochodzą z TagOverflow dla Stack Overflow i tagów: d3.js (to na górze) i wikipedia (to na dole).
Z moich zabawek polecam jeszcze Correlation Explorer i Motywy Wolnych Lektur.