Meeks E. - D3.js w akcji

58

R o z d z ia ł 1.

Wprowadzenie do biblioteki D3.js

.append(" c ir c le " ) . a ttr C T " . 20) .a ttr (" c x " .2 0 ) . a ttr C c y " .20) . s t y l e C f i l l " . " re d "): d 3 .s e le c t("s v g ") .append(" c ir c le " ) . a t t r C r " . 100) .a ttr("c x ".4 0 0 ) . a t t r C c y " . 400) .s t y le ( " f i 1 1 "."1 ig h tb lu e "): d 3 .s e le c t("s v g ") .append("text") .a ttr C ’x” .400) .a ttr C ’y " .400) .text("ŚW IECIE"):

Zauważ, że koła są rysowane nad linią, a tekst pojawia się nad kołem lub pod nim (zależy to od kolejności wykonywania instrukcji). Przedstawia to rysunek 1.31. Kolej­ ność rysowania na płótnie SVG wynika z kolejności elementów w modelu DOM. Dalej poznasz techniki manipulowania tą kolejnością.

SWIECIE

R ysu n e k 1 .3 1 . W skutek uruchomienia w konsoli kodu z listin g u 1.10 uzyskaliśm y dwa koła, linię i dwa e lem e nty tekstow e. Kolejność rysow ania elem e ntów pow oduje, że pierwsza etykieta je s t zakryta przez wygenerowane później koło ( h ttp ://b l.o cks.o rg /e m e e ks/ If8 fd 67 8b 915 f0e4 0f3f) [ g j

1.6.3. Komunikowanie się z biblioteką D3

Wyświetlanie napisu „Witaj, świecie” za pomocą języków programowania jest tak często spotykanym przykładem, że uznałem, iż należ}7dać światu możliwość udziele­ nia odpowiedzi. Nowy kod (zobacz listing 1.11) ponownie generuje duże i małe koło z poprzedniego przykładu, a ponadto podczas dodaw7ania tekstu wywołuje instrukcję

1.6. Twoja piencsza aplikacja oparta na bibliotece D3 L is tin g 1,

59

E le m e n ty SVG z u s ta w io n y m i id e n ty fik a to r a m i i p rz e z ro c z y s to ś c ią

d3.select("svg") .append("circle") .attrC’r ”. 20) .attrC’cx” .20) .attrC’cy” .20) .sty le ("fill”."red"): d3.select("svg") .append("text") .attrC’id", "a") .attr("x",20) .attrC’y" .20) .style ("opacity". 0) .text("WITAJ. ŚWIECIE”): d3.select("svg") .append("circle") .attrC’r". 100) .attrC’cx” .400) .attrC’cy ".400) .style ("fi 11"."1i ghtblue”): d3.select("svg") .append("text") .attrC’id", "b") .attrC’x” .400) .attrC’y" .400) .style("opacity". 0) .text("CZEŚĆ”): .sty le("o p acity"), sprawiającą, że tekst staje się niewidoczny. Oprócz tego każdem u elementowi tekstowemu przypisywane jest ustawienie .a ttrC ’id"). Tekst obok małego koła ma atrybut id o wartości "a", a tekst przy dużym kole ma atrybut id o wartości "b". Efekt to dwa koła, brak linii i tekstu. Spraw teraz, by tekst się pojawił. Po zastosowa­ niu m etod . tra n s itio n ( ) i .delay( ) uzyskasz stan końcowy pokazany na rysunku 1.32. d3.select("#a").transi ti on().del ay(1000).style("opaci ty". 1): d3.select("#b").transi ti on().del ay(3000).style("opaci ty". .75): Gratulacje! Przygotowałeś swoją pierw szą dynamiczną wizualizację danych. M etoda . tran si t i on ( ) oznacza, że zmiana nie ma następować natychmiast. Użyta w łańcuchu m etoda .delayO pozwala określić, po ilu sekundach należy wprowadzić zmiany w sty­ lach lub atrybutach, opisane w7łańcuchu po wywołaniu . del ay ( ). Dalej poznasz bardziej am bitne techniki, jednak przed ukończeniem tego przy­ kładu przyjrzyj się innej metodzie powiązanej z m etodą .transitionO . Metoda .delayO określa opóźnienie przed zastosowaniem nowego stylu lub atrybutu. O prócz tego można, za pomocą metody . du ra t i on ( ), ustawić czas przeprowadzania zmiany. Poniższy7 kod pow inien przenieść figury w7kierunku wyznaczanym na rysunku 1.33: d3.selectAll("circle").transitionO .duration(2000).attrC’cy". 200):

R o z d z ia ł 1. Wprowadzenie do biblioteki D3.js

60

^ ^ T A J . ŚWIECEE

Cześć.

R y s u n e k 1 .3 2 . O peracja tra n sitio n w połączeniu z operację delay powoduje przerwę przed zastosowaniem atrybutu lub stylu

WITAJ. ŚWIEC EE

Czesc

R y s u n e k 1 .3 3 . O peracja tra n s itio n w połączeniu z o p e ra cją du ra tio n pozwala przenieść fig u ry w nowe miejsce w określonym czasie. Ponieważ dla obu kó ł używ ana je s t ta sama pozycja na osi y, pierw sze koło je s t przenoszone w dół, a drugie — w górę. Koła tra fia ją na w skazane m iejsce pomiędzy ich początkową lokalizacją ( h ttp ://b l.o cks.o rg /e m e e ks/ 5090dadl2ed99da67e77) [ 3

Metoda .d u ra tio n O powoduje wprowadzenie zmiany w czasie określonym w milise­ kundach. W ten sposób zostały omówione podstawy działania i projektu biblioteki D3. Opisane tutaj zagadnienia będą wielokrotnie wykorzystywane w7dalszych rozdziałach, gdzie poznasz bardziej skomplikowane techniki reprezentowania danych i manipulowania nimi.

1.7. Podsumowanie

61

1.7. Podsumowanie Ten rozdział stanowił przegląd biblioteki D3. Nacisk położono w nim na pokazanie, jak dobrze biblioteka ta spełnia potrzeby programistów piszących aplikacje sieciowe przeznaczone dla nowych przeglądarek. Opisano tu standardy i nowinki pozwalające uzyskać pożądane efekt}7. Oto omówione temat}7: ■ Przykładowe rodzaje wizualizacji danych możliwe do wygenerowania za pomocą biblioteki D3. ■ Mapa procesu prowadzącego od danych, przez wizualizację, po interaktywność. Mapa obejmuje informacje o tym, gdzie w7książce opisane są poszczególne kroki. ■ Przegląd technologii DOM, SVG i CSS. ■ Pierwsze wzmianki o stosowaniu wiązania danych i selekcji do tworzenia oraz modyfikowania elementów7na stronie. ■ Przegląd różnych typów danych spotykanych w7planowaniu i tworzeniu wizu­ alizacji. ■ Proste animacje oparte na przejściach z biblioteki D3. D3.js to jedna z tysięcy bibliotek JavaScriptu, która jednak dobrze ilustruje zmiany w7oczekiwaniach dotyczących możliwości stron internetowych. Choć wiele osób począt­ kowo używało biblioteki D3 do budowania jednorazowych wizualizacji danych, ma ona dużo bardziej rozbudowane możliwości i funkcje. Z tej książki dowiesz się, jak używać biblioteki D3 do tworzenia sterowanych danymi bogatych dokumentów7, które urzekają i robią wrażenie.

R o z d z ia ł 1 .

Wprowadzenie do biblioteki D3.js

Przepływ danych podczas wizualizowania informacji

Zawartość rozdziału: ■ Wczytywanie danych z zewnętrznych plików w różnych formatach ■ Stosowanie skal biblioteki D3 ■ Formatowanie danych na potrzeby analiz i wyświetlania ■ Tworzenie grafiki z wykorzystaniem atrybutów graficznych opartych na atrybutach danych ■ Animacje i zmienianie wyglądu grafiki

W prostych przykładach i internetowych programach demonstracyjnych dane cza­ sem są prezentowane jako tablice JavaScriptu (patrz rozdział 1.). Jednak w7praktyce dane mogą pochodzić z interfejsu API lub bazy danych, dlatego trzeba je najpierw wczytać, sformatować i przekształcić, a dopiero potem można przejść do tworzenia elementów7stron na podstawie tychże danych. W tym rozdziale opisano proces prze­ kształcania danych na odpowiednią postać. Omówiono też podstawowe wzorce często wykorzystywane podczas stosow7ania biblioteki D3 — wczytywanie danych z zewnętrz­ nych źródeł, formatowanie danych i tworzenie ich graficznych reprezentacji (talach jak na rysunku 2.1).

64

R o z d z i a ł 2.

Przepływ danych podczas wizualizowania informacji

R y s u n e k 2 .1 . Przykłady z tego rozdziału — diagram ilu s tru ją c y w iązanie danych (po lew ej, podrozdział 2 .2 ), w ykres pu nktow y z e tykie ta m i (pośrodku, pu nkt 2 .3 .2 ) i w ykres słupkow y (po prawej, punkt 2.2.2)

2.1. Praca z danymi W tym rozdziale wykorzystywane są dwa małe zbiory danych. Są one przetwarzane w ramach uproszczonego piecioetapowego procesu (rysunek 2.2), obejmującego wszyst­ kie potrzebne operacje na danych niezbędne do ich zwizualizowania za pomocą biblio­ teki D3. Jeden zbiór danych obejmuje kilka miast, ich lokalizację geograficzną i liczbę ludności. Drugi zawiera lalka fikcyjnych tweetów z informacjami o ich autorach i oso­ bach, które zareagowały na dane wpisy. Są to często prezentowane rodzaje danych. Zadanie polega na określeniu, które tweety wywierają na odbiorców duży wpływ, a także ustaleniu miast mocno narażonych na katastrofy naturalne. Z tego rozdziału dowiesz się, jak za pomocą biblioteki D3 można na różne sposoby mierzyć dane, a także jak przy użyciu dostępnych metod generować wykresy.

R ysu ne k 2.2. Proces wizualizowania danych, omawiany w tym rozdziale, rozpoczyna się od zbioru danych. Celem procesu je s t tw orze nie (i a ktu a lizo w a n ie ) in te ra ktyw n ych lub dynam icznych w izualiza cji danych

W praktyce używane są znacznie większe zbiory danych, obejmujące setki miast i tysiące tweetów. Stosuje się jednak do nich zasady opisane w tym rozdziale. Niniejszy rozdział nie pokazuje, jak tworzyć złożone wizualizacje danych, natomiast zawiera szczegółowe omówienie wybranych najważniejszych procesów potrzebnych do generowania takich wizualizacji za pomocą biblio teki D3. 2.1.1. Wczytywanie danych

W rozdziale 1. wspomniano, że dane zwykle są formatowane w różne, ale standardowe sposoby. Niezależnie od źródła dane mają zwykle postać pojedynczych plików w7 for­ macie XML, CSV lub JSON. Biblioteka D3 udostępnia kilka funkcji przeznaczonych

2.1. Praca z danymi

65

do importowania i używania takich danych (pierwszy krok przedstawia rysunek 2.3). Ważną różnicą miedzy poszczególnymi formatami jest model danych. JSON i XML umożliwiają kodowanie zagnieżdżenia danych w sposób niedostępny w formacie CSV. Inna różnica polega na tym, że funkcje d3.csv() i d3. json() generują tablice obiektów JSON, natomiast funkcja d3.xml ( ) tworzy dokument XML, do którego dostęp uzyskuje się w inny sposób.

R ysu n e k 2.3 . Pierwszy krok w tworzeniu wizualizacji danych to ich pobranie FORM ATY PLIKÓW

Biblioteka D3 udostępnia pięć funkcji do wczytywania danych. Funkcje te (d3.text(), d3.xml (), d3. json(), d3.csv() i d3. html ()) odpowiadają pięciu typom plików, z których prawdopodobnie będziesz korzystał. W tej książce najczęściej używane są funkcje d3.csv() i d3.json(). W następnym rozdziale zetkniesz się z funkcją d3.html O podczas tworzenia złożonych elementów7modelu DOM zapisywanych jako prototypy. W zależ­ ności od tego, jak korzystasz z danych, przydatniejsze dla Ciebie mogą okazać się funkcje d3.xml() i d3.text(). Możliwie, że wolisz używać formatu XML zamiast JSON. Wtedy możesz korzystać z funkcji d3.xml() i odpowiedniej składni wywołań. Jeśli preferujesz posługiwanie się łańcuchami znaków7, możesz do pobierania danych zastosować funkcję d3.text(), a następnie przetwarzać je za pomocą innej biblioteki. Składnie wywołań funkcji d3.csv() i d3. jsonO wyglądają tak samo. Należy podać ścieżkę do wczytywanego pliku i zdefiniować wywoływaną zwrotnie funkcję. d3.cs v("ci ti es.csv".functi on(error.data) {console .1og(error,data)}):

Zmienna error jest opcjonalna. Jeśli w7wywoływanej zwTotnie funkcji deklarowana jest tylko jedna zmienna, określa ona dane. d3.csv("cities.csv”,function(d) {console.1og(d )}):

Dostęp do danych po raz pieiwszy uzyskuje się w wywoływanej zwTotnie funkcji. Dane możesz zadeklarować za pomocą zmiennej globalnej, dzięki czemu można z nich korzystać w dow7olnvm miejscu. Najpierw potrzebny jest plik z danymi. W tym roz­ dziale używane są dw7a pliki — plik CSV z dan\7mi o miastach i plik JSON z danymi o tweetach. Zawartość plików7pokazana jest na listingach 2.1 i 2.2. L is t i n g 2 .

Z a w a r t o ś ć p l ik u c i t i e s . c s v

"1 abel"."population"."country"."x"."y" "San Francisco". 750000."USA".122.-37 "Fresno". 500000."USA".119.-36 "Lahaur".12500000."Paki stan".74.31 "Karaczi".13000000,"Pakistan".67,24 "Rzym".2500000."Włochy".12.41

66

R o z d z i a ł 2.

Przepływ danych podczas wizualizowania informacji

"Neapol".1000000."Włochy".14.40 " Ri o " .12300000."Brazyli a " .-43.-22 "Sao Paul o " .12300000."Brazyli a",-46.-23 L is tin g 2 . 2 Q

w a r t o ś ć p li k u t w e e t s . j s o n

tw eets": [ "user": "A lan", "co nten t": "Uwielbiam owoce morza.", "timestamp": " Mon Dec 23 2013 21:30", "re tw eets": [" A r e k " ," P io tr” ,"J a n "], "fa v o rite s ": ["M a ja "]}. "user": "A lan", "co nten t": "Cofam to - nie smakują zbyt dobrze.". "timestamp": "Mon Dec 23 2013 21:55". "re tw eets": ["J a n "], "fa v o rite s ": [ ] } . "user": "Alan". "co nten t": "Od te ra z jem ty lk o kanapki z serem.", "timestamp": "Mon Dec 23 2013 22:22". "re tw eets": [ ] . "fa v o rite s ": ["J a n ". "M a ja "]}. "user": "Jan", "co nten t": "Fantastyczny tre n in g !" , "timestamp” : " Mon Dec 23 2013 7:20" "re tw eets": [ ] . "fa v o rite s ": [ ] } . "user": "Jan", "co nten t": "Fenomenalna owsianka!", "timestamp” : " Mon Dec 23 2013 7:23". "retw eets: [ ] . " fa v o rite s ” : [ ] } . "user": "Jan", "co nten t": "Cudowny ko re k!", "timestamp": " Mon Dec 23 2013 7:47". "re tw eets": [ ] . "fa v o rite s ": [ ] } . "user": "Jan", "co nten t": "Właśnie dostałem mandat za SMS-owanie za kó łkiem !", "timestamp” : " Mon Dec 23 2013". "re tw eets": [ ] . "fa v o rite s ": ["M aja", "S ylw ia". " P io t r " ] } . "user": " P io tr ” , "co nten t": "Gotuję ja jk a . " . "timestamp": " Mon Dec 23 2013 18:23", "re tw eets": [ ] . "fa v o rite s ": ["S y lw ia " ]}. "user": " P io tr ” , "co nten t": "Może trochę poćwiczę.", "timestamp": " Mon Dec 23 2013 19:47", "re tw eets": [ ] . "fa v o rite s ": ["S y lw ia " ]}. "user": "Maja", "co nten t": "@Jan Chodźmy na o b ia d .", "timestamp": " Mon Dec 23 2013 11:05", "re tw eets": [ " P io t r ” ] , "fa v o rite s ": ["S y lw ia ", " P io t r " ] }

Dostęp do danych z tych dwóch plików można uzyskać za pomocą odpowiednich funkcji używanych do wczytywania informacji: d 3 .c s v ("c itie s .c s v ".fu n c tio n (d a ta ) {co nsole.lo g (d a ta )}) : d3. json( "tweets, j son ".fu n c tio n (data) {console, lo g (d a ta )}):

<

I w y ś w ie tla w k o n s o li te k s t ^ „ o b je c t { tw e e ts : A r r a y [ i o ] > "

W obu przypadkach plik z danymi jest wczytywany jako tablica obiektów JSON. Tablica z danymi z pliku tweets.json jest dostępna jako data .tweets, a tablica z danymi z pliku cities.csv zostaje wczytana jako data. Funkcja d3. jsonO umożliwia wczytywanie plików w formacie JSON, w których mogą występować obiekty’ i atrybuty niedostępne w7pli­ kach CSV. Podczas wczytywania pliku CSV7zwracana jest tablica obiektów7inicjowana tu jako tablica data. Gdy wczytujesz plik JSON, zwrócony może zostać obiekt z kil­ koma parami nazwa-wartość. W tym przypadku obiekt jest inicjowany pod nazwą data

2.1. Praca z danymi

6

i zawiera parę nazwa-wartość tweets : [Array of Data]. To dlatego trzeba używać nazwy data .tweets po wczytaniu pliku tweets.json i nazwy data dla wczytanego pliku cities.csv. Struktura pliku tweets.json odzwierciedla tę różnicę. Funkcje d 3 .c s v i d3. json działają asynchronicznie i zwracają sterowanie po zgło­ szeniu żądania otwarcia pliku, a nie po jego przetworzeniu. Wczytywanie pliku zwykle zajmuje więcej czasu niż wykonanie większości funkcji, dlatego operacja ta zostaje ukończona dopiero po wywołaniu innych funkcji. Jeśli funkcja wymagająca danych zostanie wywołana przed ich wyczytaniem, wystąpi błąd. Z asynchronicznym działa­ niem funkcji można poradzić sobie na dwa sposoby7. Jednym z nich jest zagnieżdżenie funkcji manipulującej danymi w funkcji wczytującej dane: d3.cs v( ” somefi 1es.csv” . fu n c ti on(data) {doSomethingWi thData(data) } ) :

Możesz też wykorzystać bibliotekę pomocniczą, na przyJdad queue.js (jest ona uży7wana m.in. w rozdziale 7.), by7zgłaszać zdarzenia po zakończeniu wczytywania plików7. Z działaniem biblioteki queue.js zapoznasz się w7 dalszych rozdziałach. Zauważ, że dla funkcji d3.csv() można wywołać metodę .parseO, która pozwala wykorzystać blok tekstu zamiast zewnętrznego pliku. Jeśli potrzebujesz wtększej kontroli nad pobie­ raniem danych, zapoznaj się z dokumentacją funkcji d3.xhr(), zapewniającej bardziej precyzyjne sterow7anie wysypianiem i pobieraniem danych. 2.1.2. Formatowanie danych

Po wczytaniu zbiorów danych należy7zdefiniować metody7, aby7powiązać atrybuty dan\7ch z ustawieniami określającymi kolor, wielkość i pozycję elementów7graficznych. Jeśli chcesz wyświetlać miasta z pliku CSV, prawdopodobnie użyjesz kół o wielkości zależ­ nej od liczby7mieszkańców7i o lokalizacji opartej na w7spółrzędn\7ch geograficznych. Istnieją dobrze ugruntowane sposoby^ graficznego reprezentowania miast na mapach, czego nie można jednak powiedzieć o tweetach. Nie wiadomo, jaki symbol graficznym zastosow7ać do przedstawienia pojedynczych tweetów7, na jakiej podstawie ustalić wiel­ kość tego symbolu i gdzie go umieścić. Abymokreślić te aspekty7, trzeba zrozumieć posta­ cie danych napotydcanych podczas tworzenia wizualizacji. W językach programowa­ nia i ontologiach zdefiniowane są różne tyrpy7danych. Dane te można podzielić na następujące kategorie: liczbowe, kategorialne, topologiczne, geometryczne, czasowe i surowe. DANE LICZBOW E

Dane liczbowe (ilościowe) to najczęściej używany ty7p danych w7 kontekście wizuali­ zacji. Dane te można efektywnie przedstawiać za pomocą wielkości, pozycji lub kolom. Zwykle dane liczbowe trzeba znormalizować (jest to drugi krok w7procesie tworzenia wizualizacji danych, pokazanym na lysunku 2.4) z wykorzystaniem skal. Można do tego zastosować opisaną w7punkcie 2.1.3 funkcję d3.scale(). Inne rozwiązanie polega na przekształceniu danych liczbowych w7kategorialne — na przyddad za pomocą kwanty7li, które łączą wartości liczbowe w7grupy7.

68

R o z d z i a ł 2.

Przepływ danych podczas wizualizowania informacji

R ysu n e k 2 .4 . Po wczytaniu danych trzeba się upewnić, że są one sform atowane w taki sposób, iż m ogą być używane do generowania grafiki za pomocą różnych fun kcji JavaScriptu

W jednym z używanych zbiorów dane liczbowe są łatwo dostępne. Chodzi tu o liczbę mieszkańców z pliku cities. csv. Może się wydawać, że w zbiorze danych o tweetach nie występują żadne dane liczbowe. Jednak w punkcie 2.1.3 zobaczysz, jak przekształcać takie i inne dane. DANE KATEGORIALNE

Dane kategorialne należą do odrębnych grup (zwykle reprezentowanych za pomocą tekstu), określających na przykład narodowość lub płeć. Takie dane często przedsta­ wia się za pomocą kształtów lub kolorów. Kategorie można powiązać z różnymi kolo­ rami lub kształtami, by wyróżnić grupy elementów, których pozycje są wyznaczane na podstawie innych atrybutów. W danych o tweetach kategorie występują w informacjach o użytkownikach. Intu­ icyjnym rozwiązaniem jest przypisanie tweetom kolorów7 odpowiadających autorom poszczególnych wpisów. Techniki tworzenia danych kategorialnych poznasz później. DANE TO POLOG ICZNE

Dane topologiczne opisują relacje między7 danymi i mogą by7ć też inną formą danych 0 lokalizacji. Powiązania rodzinne między7dworna osobami lub odległość ze sklepu do stacji kolejow7ej wyznaczają relacje między7 obiektami. Atrybuty7 topologiczne można przedstawiać jako unikatowe identyfikatory7tekstow7e lub w7skaźnild do inny7ch obiek­ tów7. Dalej w7rozdziale zobaczysz, jak utworzy7ć dane topologiczne w7postaci zagnież­ dżonych hierarchii. W danych o miastach na pozór nie występują żadne dane topologiczne. Można je jednak łatwo uzy7skać. Wystarczy wybrać jedno miasto (na przyid ad San Francisco) jako punkt odniesienia, a następnie obliczy7ć wartość „odległość do San Francisco” używaną jako dane topologiczne. W danych o tweetach aspekt topologiczny7kryje się w7tablicach fa v o r ite s i re tw e e ts stanowiących punkt wyjścia do tworzenia sieci społecznościowych. DANE GEO M ETRYCZNE

Dane geometryczne najczęściej dotyczą granic i linii w7danych geograficznych — na przyidad państw, rzek, miast lub dróg. Dane geometryczne mogą też mieć postać kodu SVG reprezentującego potrzebną ikonę, tekstu z klasą kształtu lub wartości liczbowej określającej wielkość kształtu. Takie dane, co nie jest zaskoczeniem, najczęściej przed­ stawiane są za pomocą kształtów7i rozmiarów. Można je też (podobnie jak inne dane) przekształcać, na przy7kład na postać liczbow7ą w7wyniku obliczeń powierzchni i obwodu. W danych o miastach występują oczywiste dane geometryczne w7postaci długości 1 szerokości geograficznej. Umożliwiają one umiejscowienie punktów7 na mapie. W danych o tweetach nie występują łatwo dostępne dane geometryczne.

2.1. Praca z danymi

69

DANE CZASOW E

Datę i czas można przedstawić za pomocą liczby dni, lat lub miesięcy, a także przy użyciu specjalnego kodowania używanego w skomplikowanych obliczeniach. Najczę­ ściej używany format talach danych to ISO S601. Jeśli dane są dostępne jako łańcuch znaków w tym formacie, można łatwo przekształcić je na typ datę z JavaScriptu, co opisano w punkcie 2.1.4. Dały7i czas to często używane dane. Na szczęście dostępne są zarówno wbudowane funkcje JavaScriptu, jak i funkcje pomocnicze biblioteki D3, które służą do obsługi i przedstawiania trudnych w7pomiarze danych z tej kategorii. W zbiorze danych o miastach nie występują dane czasowe. Pamiętaj jednak, że często są one dostępne dla miast i państw. W sytuacji, gdy możesz łatwo rozbudować zbiór danych o dane czasow7e, zastanów się, czy w7rozwijanym projekcie ma to sens. W danych o tweetach dostępne są łańcuchy znaków7w formacie RFC 2822 (jest to inny, obok ISO S601, format dat obsługiwany w7JavaSciipcie), które można łatwo prze­ kształcić na typ date JavaScriptu. DANE SUROW E

Dane surowe (nieustrukturvzow7ane) to zwykle tekst lub grafika. Takie dane można przekształcić w7wyniku pomiarów7 lub zaawansowanych analiz tekstu i grafiki, aby uzyskać atrybuty lepiej dostosow7ane do wizualizacji. W nieprzetworzonej postaci dane surowe są używane w7polach jako treść elementów graficznych (na przyidad jako ety­ kiety lub fragmenty7tekstu). W zbiorze danych o miastach w postaci ety7kiet można łatwo wykorzystać nazwy miast. Jak jednak nazwać poszczególne tweety? Jedną z możliwości jest wykorzystanie całej treści tweetu jako ety7kiety7 (to podejście zastosowano w7rozdziale 5.). W korzy7staniu z surowych dan\7ch najtrudniejszym i najważniejszym zadaniem jest wymyśle­ nie sposobów7ich podsumowywania i mierzenia. 2.1.3. Przekształcanie danych

Gdy7używasz danych w7różnych postaciach, zmieniasz ich typ na inny7, by7móc lepiej je reprezentować. Dane można przekształcać na wiele sposobów7. W tym miejscu opisano rzutowanie, normalizację (skalowanie), grupow7anie i zagnieżdżanie. RZUTO W ANIE - ZM IENIANIE TYPU DANYCH

Rzutowanie danyuh polega na zmianie ich ty7pu w7języ7ku programow7ania. W tym p o ­ kładzie używany jest JavaScript. Gdy7wczytujesz dane, często mają one postać łańcu­ cha znaków7, nawet jeśli reprezentują datę, liczbę całkowitą, liczbę zmiennoprzecin­ kowy lub tablicę. Na prz\7kład łańcuch znaków7 z datą w7 dan\7ch o tweetach trzeba przekształcić na ty7p dan\7ch date, jeżeli programista chce używać metod tego ty7pu dostępnyuh w7 JavaSciipcie. Powinieneś zapoznać się z funkcjami JavaScriptu prze­ znaczonymi do przekształcania danych. Oto wybrane funkcje: p a rse ln t( "7 7 ") :

<----------- R z u tu je ła ń c u c h z n a k ó w 77 na lic z b ę 77 bez m ie js c po p rz e c in k u

p a rseF lo at("3.14” ):

<--------- R z u tu je ła ń c u c h z n a k ó w 3 .1 4 na lic z b ę 3 ,1 4 z m ie js c a m i po p rz e c in k u

70

R o z d z i a ł 2.

Przepływ danych podczas wizualizowania informacji

Date.parse(“ Sun. 22 Dec 2013 08:00:00 GMT"): te x t = "alpha, bet a. gamma": t e x t . s p l i t ( ,,1" ) :

R o z b ija r o z d z ie lo n y p r z e c in k a m i ła ń c u c h z n a k ó w na ta b lic ę . P od w z g lę d e m te c h n ic z n y m n ie je s t to rz u to w a n ie , a le p ro w a d zi do zm ia n y ty p u d a n y c h

R z u tu je ła ń c u c h zna ków w fo rm a c ie IS O 8 6 0 1 lu b RFC 2 8 2 2 na ty p d a n y c h d a te

UW AGA JavaScript domyślnie przeprowadza konwersję typów w porównaniach ==, natomiast nie wykonuje jej w porównaniach === i podobnych. Dlatego kod często działa poprawnie bez konieczności rzutowania typówT. Problem pojawi się jednak w7sytuacjach, gdy domyślnie używany typ nie jest typem oczekiwa­ nym przez programistę — na przykład przy próbie posortowania tablicy liczb, jeśli JavaScript uporządkuje je alfabetycznie. SKALE I SKALO W ANIE

Dane liczbowa rzadko bezpośrednio odpowiadają pozycjom i wielkościom elemen­ tów^ graficznych na ekranie. Możesz wykorzystać funkcję d 3 .s c a le ( ) , by znormalizo­ wać dane na potrzeby ich prezentacji na ekranie (funkcja pozwala też wykonywać inne zadania). Pieiwsza z omawianych tu skal to d 3 . s c a le ( ) . l in e a r O . Odwzorowuje ona bezpośrednio jeden przedział wartości na inny. W skalach można za pomocą tablic podać dziedzinę i przeciwdziedzinę. Dziedzina określa zestaw przekształcanych war­ tości, a przeciwdziedzina wyznacza grupę wartości docelowych. Na przykład na pod­ stawie największej i najmniejszej liczby mieszkańców z pliku cities.csv możesz uzyskać skalę pozwalającą wygodnie przedstawić różnice między tymi liczbami na płótnie o szerokości 500 pikseli. Rysunek 2 5 i przedstawiony poniżej kod pokazują, że liniowa zmiana wartości od 500 000 do 13 000 000 jest reprezentowana za pomocą liniowej zmiany wartości od 0 do 500. Dziedzina

500000

13 000 ooo

Przeciwdziedzina o

500

R ysu n e k 2.5 . Skale z biblioteki D3 odwzorowują jeden zestaw wartości (dziedzinę) na inny zbiór (przeciwdziedzinę). Relacja między dziedziną a przeciwdziedziną zależy od typu użytej skali

Aby uzyskać docelową skalę, należ}7utworzyć nowy obiekt reprezentujący skalę i ustawić jego dziedzinę oraz przeciwdziedzinę: var newRamp = d 3 .s c a le .lin e a r O . domain([500000.13000000]).range([0. 500]) newRamp(1000000): <• Z w ra c a 20 , co p o w o d u je newRamp( 9000000): < ---------- z w ra c a 3 4 0 u m ie js c o w ie n ie m ia s ta o p o p u la c ji 1 OOO OOO newRamp.in v e r t(313): < — F u n k c ja in v e r t p rz e p ro w a d z a o d w r o tn e p rz e k s z ta łc e n ia — tu z w ra c a w a rto ś ć 8 3 2 5 OOO

na p o z y c ji 20 p ik s e li od le w e j

2.1. Praca z danymi

71

Możesz też tworzyć skale kolorów. W tym celu w polu określającym przeciwdziedzinę należ}7podać nazwy kolorów ze stylów CSS, kolory w formacie RGB lub kolory w for­ macie szesnastkowym. Skutkiem jest liniowe odwzorowanie na zestaw kolorów prze­ działu wartości zdefiniowanego w dziedzinie. Pokazuje to rysunek 2.6. Dziedzina

500000

Blue

13000000

Red

R ysu n e k 2.6 . Skale można wykorzystać także do odwzorowania wartości liczbowych na kolory. Pozwala to łatw o identyfikować wartości na podstawie skali kolorów

Kod tworzący skalę kolorów jest prawie taki sam jak wcześniejszy fragment. Różnica dotyczy podania kolorów w instrukcji range: va r newRamp = d 3 .s c a le .lin e a rO .d o m a in ( [500000,13000000]).r a n g e ( [” b lu e " . "re d ” ] ) :

< i Z w ra ca " # 0 a 0 0 f5 " , co p o zw a la p rz y p is a ć c ie m n y <------------ Z w ra c a " # a d 0 0 5 2 " I f io le t d o m ia s ta o 1 0 0 0 0 0 0 m ie s z k a ń c ó w newRamp. i n v e rt ( "#ad0052 " ) : < i F u n k c ja in v e r t d z ia ła ty lk o d la p r z e c iw d z ie d z in y newRamp( 1000D0D) : newRamp(9000000) I

I o b e jm u ją c e j lic z b y , d la te g o tu z w ra c a w a rto ś ć NaN

Ponadto możesz stosować instrukcje d 3 .s c a le . lo g ( ) , d 3 .s c a le .p o w O , d 3 .s c a le .o r d in a l O oraz inne, rzadziej wykorzystywane skale, gdy lepiej pasują do używanego zbioru danych. Działanie różnych skal poznasz w dalszej części książki podczas omawiania różnych rodzajów zbiorów danych. Instrukcja d 3 .tim e .s c a le ( ) tworzy skalę liniową dla typów danych związanych z datami i jest opisana dalej w rozdziale. G RU POW ANIE -

O KREŚLANIE KATEGORII DANYCH

Dane liczbowe często warto dzielić na kategorie. Polega to na umieszczaniu wartości w przedziałach w celu utworzenia grup. Jedną z metod jest użycie kwantyli. Tablica jest wtedy dzielona na fragment}7o równej wielkości. Skala kwantylowa w7bibliotece D3 jest tworzona za pomocą instrukcji d 3 . scale .q u a n t ile ( ) i przyjmuje te same ustawie­ nia co inne skale. Liczbę fragmentów i ich etykiet}7można podać za pomocą instruk­ cji . range( ). Ta skala, w7odróżnieniu od innych, nie zwraca błędu, gdy liczba wartości z instrukcji .dom ainO i .ra n g e O jest niedopasowana. Dzieje się tak, poniew7aż warto­ ści z dziedziny są automatycznie sortow7ane i przydzielane do kategorii wyznaczanych przez mniejszą liczbę wartości z przeciw7dziedziny. Omawiana skala sortuje tablicę liczb z instrukcji .dom ainO od najmniejszej do naj­ większej wartości, po czym automatycznie dzieli tablicę w7 odpowiednich punktach, by utw7orzyć potrzebne kategorie. Liczba przekazana do funkcji skali kwantylowej pow7oduje zwrócenie jednej z kategorii ustalonej na podstawie punktów7podziału.

72

R o z d z ia ł 2.

P rzepływ danych podczas w izualizow ania inform acji

var sampleArray = [423.124.66.424.58.10.900.44.1]: var qScale = d3.scalę.quantile().domain(sampleArray).range([0,1.2]): qScale(423) : < z w ra c a 2 qScale(20): < z w ra c a o qScal 0(10000): <----- Z w ra c a 2

Zauważ, że wartości w przeciwdziedzinie na rysunku 2.7 są stałe. Można przypisać im tekst odpowiadający określonej klasie ze stylów CSS, kolorowi lub dowolnej innej wartości. Dziedzina

R ysu n e k 2 .7 . Skale kwantylowe przyjm u ją zbiór wartości i dzielą je na grupy o równej liczbie elem entów var qScaleName = d3. sc a1e . qua nt i 1e ( ) . doma i n ( sampl eAr ra y). r ange ( [ " sma1 1 "." medi urn" . " 1a r ge" ] ) : qScaleName ( 6 8 ): < ------- Z w ra c a " m e d iu m ” qScaleName (20): < ------- z w ra c a " s m a ll" qScaleName (10000): < ------- Z w ra c a " la r g e " DANE ZAGNIEŻD ŻO NE

Hierarchiczne reprezentacje danych są przydatne i dotyczą nie tylko danych o typowej lub jawnie określonej hierarchii (na przykład zbiorów7 danych opisujących rodziców7 i dzieci). Szczegółowe omówienie hierarchicznych danych i reprezentacji znajdziesz w7 rozdziałach 4. i 5. W przedstawionym przykładzie używana jest funkcja zagnież­ dżająca z biblioteld D 3 , nosząca nazwę d3.nest(). Przy zagnieżdżaniu wspólne atrybuty danych można wykorzystać do posortowania elementów na odrębne kategorie i podkategorie. Jeśli chcesz na przykład pogrupować tweety na podstawie ich autorów7, możesz wykorzystać zagnieżdżanie: d3.jso n ( "tweets .j son“ .fu n c ti on(data) { var tweetData = data.tw eets: var nestedTweets = d3 .nest() .k e y (fu n c tio n (e l) {re tu rn e l.u s e r}) .e n trie s(tw e e tD a ta ):

}): W tym przypadku funkcja zagnieżdżająca łączy7tweety w7tablice w7nowych obiektach z etykietami utworzonymi na podstawie unikatowych wartości atrybutu user. Pokazuje to rysunek 2.8. Po wczytaniu danych i przekształceniu ich na dostępne typy7pora przejść do analiz wzorców występujących w7danych. W tym celu należy7dokonać pomiarów (jest to trzeci krok na lysunku 2.9).

2.1. Praca z danymi

73

stedTw eets O b je c t key: " A l " ▼ v a lu e s : A r r a y [3 ] ► C: O b je c t » 1: O b je c t »- 2: O b je ct le n q th : 3 ► _ p r o t o _ : A r r a y [01 t __ p ro to __ : O b je c t

, ▼ O b je c t O k ey: "R oy" ▼ v a lu e s : A r r a y [4 J ► 0: O b je c t » 1: O b je c t * 2: O b je c t ► 3: O b je c t le n g th : 4 * __p r o to __ : A r r a y [0 ] ► p ro to : O b je c t

,, ▼ O b je c t , ▼ O b je c t key: " P r is " key: "Sam" ▼ v a lu e s : A r r a y [2] ▼ v a lu e s : A r r a y ll ) t 0 : O b je c t ► 0 : O b je c t » 1 : O b je c t le n q th : 1 le n q th : 2 » p ro to : A r r a y [0 ] ► p rc ito : O b je c t ► p r o to : A r r a y [0 ] ► __ p r o to __ : O b je c t

R ysu ne k 2.8. Obiekty zagnieżdżone w nowej tablicy to elementy tablicy array w nowych obiektach, w których a tryb u t key je s t ustawiony na wartość użytą w funkcji d3.nest.key

R y s u n e k 2 .9 . Po sform ato w an iu danych należy przeprow adzić ich pom iar, aby się upewnić, że generowane grafiki m ają odpowiednie wielkości i pozycje, ustalone na podstawie param etrów zbioru danych

2.1.4. Pomiar danych

Po wczytaniu tablicy z danymi jedną z pierwszych czynności, jakie należy wykonać, jest pomiar i posortowanie danych. Ważne jest zwłaszcza ustalenie rozkładu wartości określonych atrybutów, a także poznanie wartości minimalnych i maksymalnych oraz nazw atrybutów. Biblioteka D3 udostępnia zestaw dotyczących tablic funkcji, które pomagają w zrozumieniu danych. Programista zawsze używa tablicy zapełnionej danymi i na podstawie względnych wartości atrybutów (określanych według rozkładu wartości w tablicy) oblicza wielko­ ści i pozycje elementów. Dlatego należ}7zapoznać się z metodami określania rozkła­ dów wartości w7tablicach za pomocą biblioteki D3. Najpieiw zobacz, jak używać tych funkcji dla tablic liczb. Dalej dowiesz się, jak wykorzystywać je dla bardziej skompli­ kowanych i bogatszych w7dane tablic obiektów7JSON. var te s tA rra y = [8 8 .1DDD0.1.75,12,35]:

Prawie wszystkie funkcje pomiarowe biblioteki D3 działają według tego samego sche­ matu. Najpieiw należ}7podać tablicę i akcesor mierzonych wartości. Tu używana jest tablica liczb, a nie tablica obiektów7, dlatego akcesor musi jedynie wskazać element: d3 .m in(testA rray, fu n ctio n (e l) {re tu rn e l } ) : d3.max(testArray, fu n ctio n (e l) {re tu rn e l } ) : d3.mean(testArray. fu n ctio n (e l) {re tu rn e l } ) :

<-

Z w ra c a m in im a ln ą w a rto ś ć z ta b lic y

< -

Z w ra c a ś re d n ią z w a rto ś c i z ta b lic y - 1 7 0 1 .8 3 3 3 3 3 3 3 3 3 3 3 5

<—

Z w ra c a m a k s y m a ln ą w a rto ś ć z ta b lic y -

10000

Gdy używasz bardziej skomplikowanej tablicy obiektów7JSON, musisz podać atrybut, który chcesz mierzyć. Na przykład, jeśli korzystasz z tablicy obiektów7JSON utworzonej na podstawie pliku cities.csv, możesz chcieć poznać minimalną, maksymalną i średnią liczbę mieszkańców miast: d S .c s v C 'c itie s .c s v ” . fu n c tio n (data) { d3.min(data. fu n c tio n (e l) {re tu rn + e l.p o p u la tio n }):

Z w ra c a m in im a ln ą w a rto ś ć a tr y b u tu p o p u la tio n s p o ś ró d w s z y s tk ic h o b ie k tó w z ta b lic y - 5 0 0 0 0 0

74

R o z d z i a ł 2.

Przepływ danych podczas wizualizowania informacji

d3.max(data. function (el) {return +el.population }): d3.mean(data. function (el) {return +el.population }): }) :

< -----

Z w ra c a ś re d n ią w a rto ś ć a tr y b u tu p o p u la tio n d la w s z y s tk ic h o b ie k tó w z ta b lic y — 6 8 5 6 2 5 0

Z w ra c a m a k s y m a ln ą w a rto ś ć a tr y b u tu p o p u la tio n s p o ś ró d w s z y s tk ic h o b ie k tó w z ta b lic y - 1 3 0 0 0 0 0 0

Ponieważ wartości minimalna i maksymalna są pobierane tak często, funkcja d3. extent () ułatwia pracę i zwraca wartości d3.min() i d3.max() w dwoi elementowej tablicy: d3. extent (data. function (el) {return+el .population}):

<-----------z w ra c a [500000 , 13000000 ]

Pomiar jest możliwy także w przypadku danych nieliczbowych, na przykład tekstu. Można wtedy wykorzystać funkcję .lengthO JavaScriptu dostępną dla łańcuchów7 znaków7i tablic. Gdy używasz danych topologicznych, potrzebujesz bardziej zaawan­ sowanych miar struktury sieci (na przykład miar centralności i analizy skupień). Dla danych geometrycznych można matematycznie obliczyć obszar i obw7ód figur, choć dla skomplikowanych kształtów7bywa to trudne. Po wczytaniu, sformatowaniu i zmierzeniu danych można utworzyć wizualizację. Wymaga to wykorzystania selekcji i powiązanych z nimi funkcji. Ich szczegółowa omówienie zawiera następny punkt.

2.2. Wiązanie danych O wiązaniu danych wspomniano już w7rozdziale 1. W niniejszym podrozdziale omó­ wiono to zagadnienie szczegółowa. Dowiesz się, jak selekcje razem z wiązaniem danych pozwalają tworzyć elementy (czwarty krok na rysunku 2.10) i modyfikować elementy po ich wygenerowaniu. W pierwszym przykładzie stosow7ane są dane z pliku cities.csv. Później zobaczysz proces wykorzystujący te dane oraz proste tablice liczbow7e, a jeszcze dalej zapoznasz się z ciekawymi operacjami wykonywanymi na danych o tweetach.

R ysunek 2.10. Aby utworzyć grafikę za pomocą biblioteki D3, należy zastosować selekcje i powiązać dane z elem entam i modelu DOM

2.2.1. Selekcje i wiązanie

Selekcje stosuje się do modyfikowania struktury i wyglądu stron internetowych za pomocą biblioteki D3. Pamiętaj, że selekcja obejmuje jeden element modelu DOM lub ich większą liczbę, a także powiązane z elementami dane (jeśli są dostępne). Za pomocą selekcji można też tworzyć i usuwać elementy oraz zmieniać ich styl i zawar­ tość. Widziałeś już, jak przy użyciu instrukcji d 3.select() zmodyfikować elem ent modelu DOM. Dalej opisano, jak tworzyć i usuwać elementy na podstawie danych. W przedstawiam™ przykładzie źródłem danych jest plik cities.csv. Trzeba wczytać ten plik i uruchomić w7wywołaniu zwrotnym funkcję generującą wizualizację dany7ch, abyTutworzy7ć zestaw7nowych elementów7. Efekt przedstawia rysunek 2.11.

2.2. Wiązanie danych

San Francisco Fresno Laliaur Karać zi Rzym Neapol Rio Sao Paulo d iv .c itie s

191px *

^ 0

1 Elements

Network

Sources

75

Timeline »

>_

$

D,

X

► # s h a d o w - ro o t ► < head>_< /head>

▼ < d iv > < /d iv > ► < f c o te r > ...< /fo o te r : < d iv c l a s s = " c i t i e s " -San F r a n c is c o < /d iv > < d iv c la s s = " c it i e s " > F r e s n o < / d i v > 18px|

< d iv c la s s = " c it ie s " > L a h a u r : / d iv > < d iv c la s s = ” c i t i e s " > K a r a c z i< / d iv > < d iv c la s s = " c it ie s " > R z y n < / d iv > < d iv c l a s s = " c i t i e s " ■N e a p o l< /d iv > < d iv c la s s = " c i t ie s " > R io < / d iv > < /body> ► < d iv id = ' c o F r a n e O iv ' s t y l e = " h e i g h t : 0 p x ; d i s p l a y :n c n e ;" > _ .< /d iv > < /h tn l*

R y s u n e k 2 .1 1 . Użycie selekcji do powiązania danych z pliku citie s.csv ze stro n ą prowadzi do utworzenia ośmiu nowych elementów

klasy "cities" i o zawartości utworzonej na podstawie danych ( h ttp://b l.ocks.org /e m eeks/d 5c74 5f00 aclf4 33d ee 7) I B d 3 .c s v (" c itie s .c s v ” .fu n c tio n (e rro r.d a ta ) (d a ta V iz(d a ta ): } ) : fu n ctio n dataViZ( incomingData) { I Pusta selekcja, ponieważ w elemencie < body> d3. select ( "body"). S electA ll ("d i V .c itie s " ) <---------1 nie ma elementów

klasy "cities" . data ( i ncomi ngData) <--------- Wiąże dane z selekcją .e n te r()

<

i Określa, ja k kod ma reagować, I gdy danych je st więcej niż elementów modelu DOM w selekcji . append( "d i V” ) <--------- Tworzy element w bieżącej selekcji . a t t r ( ” cla ss" . " c i t i e s " ) <--------- Ustawia klasę każdego nowo tworzonego elementu }

.h tm l(fu n c tio n (d .i) { re tu rn d .la b e l: } ) : — , Sets the content... - Ustawia zawartość ' tworzonego elementu

Przedstawiony w tym miejscu proces generowania selekcji i wiązania danych jest często stosowany na dalsz}rch stronach książki. Selekcja podrzędna powstaje, gdy naj­ pierw wybierany jest jeden element, a następnie jego element}7podrzędne. W dalszej części znajdziesz szczegółowy opis tej techniki. Najpierw jednak przyjrzyj się poszcze­ gólnym fragmentom tego przykładu. IN STRU KCJA D3.SELECTALL()

Tworzenie selekcji zaczyna się od instrukcji d3. sel ect () lub d3. sel ectAl 1O z identy­ fikatorem CSS, określającej fragment modelu DOM. Często do identyfikatora nie pa­ sują żadne elementy. Powstaje wtedy pusta selekcja, wykorzystywana do utworzenia nowych elementów na stronie za pomocą funkcji .enterO. Można uzyskać selekcję na podstawie selekcji, aby określić, jak tworzyć lub modyfikować elementy podrzędne wybranego elementu modelu DOM. Zauważ, że utworzenie selekcji podrzędnej nie pow7oduje automatycznego wygenerowania elementu nadrzędnego. Taki element musi już istnieć lub trzeba go dodać za pomocą instrukcji . append(). IN STRU KCJA .DATA()

Ta instrukcja łączy tablicę z wybranymi elementami modelu DOM. Każde miasto ze zbioru danych jest wiązane z elementem modelu DOM z selekcji. Powiązane dane są zapisywane w atrybucie date elementu. Dostęp do wartości można uzyskać ręcznie przy użyciu kodu w7JavaScripcie:

76

R o z d z i a ł 2.

Przepływ danych podczas wizualizowania informacji

document.getElementsByClassName( "cities")[0]. data <------ . z w ra c a

w s k a ź n ik d o o b ie k tu I re p re z e n tu ją c e g o San F ra n c is c o

Dalej w rozdziale wartości z danych będą wykorzystywane w zaawansowany sposób z wykorzystaniem biblioteki D3. INSTRU KCJE .E N TER O I -EXIT()

Gdy dane są wiązane z selekcjami, elementów modelu DOM może być więcej, mniej lub tyle samo w porównaniu z liczbą wartości z danych. Gdy wartości jest więcej niż elementów7modelu DOM w selekcji, należy użyć funkcji .enterO . Określa ona, co trzeba zrobić z każdą wartością, dla której w7selekcji brakuje elementu modelu DOM. W naszym przykładzie funkcja .enter() jest wywoływana ośmiokrotnie, ponieważ nie istnieją żadne elementy "di v.cities" w7modelu DOM, a tablica incomingData zawiera osiem wartości. Gdy wartości w7danych jest mniej niż elementów7, wywoływana jest funk­ cja .exit(). Jeśli liczba wartości w7danych jest taka sama jak liczba elementów7 modelu DOM w7selekcji, program nie wywołuje ani funkcji .e x it(), ani funkcji .enterO. INSTRU KCJE .A P P EN D O I .INSERT()

Gdy wartości w7danych jest więcej niż elementów7modelu DOM, prawie zaw7sze dodaw7ane są now7e elementy. Funkcja .appendO umożliwia dodanie nowych elementów7 i ich zdefiniow7anie. W przykładowym kodzie dodaw7ane są elementy7

. Dalej w7 rozdziale dołączane są kształty7 SVG, a w7 innych rozdziałach — tabele, przyciski i elementy7różnych typów7dostępne w7HTML-u. Funkcja . in sert( ) działa podobnie do .appendO, ale zapewnia kontrolę nad miejscem w7modelu DOM, w7którym ma zna­ leźć się nowy element. Obie funkcje można też wywoływać bezpośrednio dla selek­ cji. Pow7oduje to dodanie jednego, określonego w7 funkcjach, elem entu modelu DOM dla każdego elementu z selekcji. IN STRU KCJA .ATTR()

Wiesz już, jak zmieniać style i atrybuty za pomocą składni biblioteki D3. Warto dodać, że zdefiniowane w7tej instrukcji funkcje są stosow7ane do każdego now7ego elementu dodaw7anego do strony. W przykładzie każdy z ośmiu nowych elementów ma klasę class=,,cities". Pamiętaj, że choć w selekcji określony jest w7arunek "di v.cities", to trzeba ręcznie zadeklarować, że tworzone są elementy7

, a także ręcznie ustawić ich klasę na "cities". IN STRU KCJA .HTML()

Zawartość tradycyjnych elementów7 modelu DOM ustawia się za pomocą funkcji . html (). W następnym punkcie zobaczysz, jak określać zawartość elementów7modelu DOM na podstawie powiązanych z nimi danych. 2.2.2. Dostęp do danych za pomocą funkcji wewnątrzwierszowych

Jeśli uruchomisz pokazany wcześniej przykładowy kod, zobaczysz, że każdy element

otrzymuje inną zawartość, określoną na podstawie tablicy z danymi powiązanej z selekcją. Odpowiada za to w7ewiiątrzwierszow7a funkcja anonimow7a z selekcji, auto­

2.2. Wiązanie danych

77

matycznie zapewniająca dostęp do dwóch zmiennych potrzebnych podczas prezen­ towania danych w formie graficznej — do samej wartości z danych i do pozycji war­ tości w tablicy. W większości przykładów zmienna d reprezentuje dane, a zmienna i — indeks tablicy, możesz jednak stosować dowolne nazwy. Aby zobaczyć, jak działają te zmienne, najlepiej jest utworzyć prostą wizualizację danych. Posłuży do tego plik d3ia.html, utworzony w rozdziale 1. Plik ten zawiera kod prostej strony HTML z niewielką liczbą elementów7modelu DOM i stylów. Histo­ gramy i wykresy słupkowie to jedne z najprostszych i najskuteczniejszych technik przed­ stawiania danych liczbowych podzielonych na kategorie. Na razie pomińmy skompli­ kowane zbiory danych i zacznijmy od prostej tablicy liczb: [1 5 . 50. 22. 8. 100. 10]

Po powiązaniu tej tablicy z selekcją można wykorzystać wartości do określenia wyso­ kości prostokątów' (słupków7na wykresie słupkowym). Szerokość słupków7należy7dosto­ sować do ilości miejsca przeznaczonego na wykres. Zacznij od ustawienia szerokości słupka na 10 pikseli: d3.select("svg") .selectAUCrect") .d a ta ( [1 5 . 50. 22. 8. 100. 1 0 ]) .e n te rO . append ( " r e c t " ) I U staw ia sta łą w a rto ść . a t t r ( " w id t h " , 10) < ----------' szerokości p ro sto ką tó w i u sta w ia w ysokość ró w n ą w a rto ści danych . a t t r ( " h e ig h t " . fu n c tio n ( d ) { re tu r n d : } ) : < --------- 1 pow iązanych z każdym elem entem

Gdy w7punkcie 2.2.1 wykorzystywano wartości tekstowe z tablicy do tworzenia etykiet elementów , używano atrybutu 1abel obiektów7. Tu wykorzystywana jest tablica literałów liczbowych, dlatego należy7 zastosować wewTiątrzwierszow7ą funkcję do bezpośredniego w7skazy7w7ania wartości w tablicy. Na podstawie tych wartości ustalane są wysokości prostokątów7. Efekt, widoczny7 na lysunku 2.12, prawdopodobnie nie spełnia Tw7oich oczekiwań. Wszystkie prostokąty nachodzą na siebie, poniew7aż mają te same domy7ślne współrzędne x i y7. Figury7można łatwiej zauważyć, gdy7kolor obramowania jest inny7od kolom wypełnienia. Ponadto można utworzyć przezroczy7ste prostokąty. W tym celu należ}7ustawić styl opacity. Efekt pokazano na rysunku 2.13. d3.select("svg") .selectAUCrect") .d a ta ( [1 5 . 50. 22. 8. 100. 1 0 ]) .e n te rO .a p p e n d ("re c t") . a t t r ( " w i d t h " . 10) . a t t r C h e ig h t " . fu n c tio n ( d ) { re tu r n d : } ) . s t y l e ( " f i l i " , "b lu e " )

R y s u n e k 2 .1 2 . Domyślne ustaw ienia dla kształtó w SN/G pow o dują użycie czarnego w ypełnienia bez obram owania. Dlatego trudno je s t zauważyć jedne kształty nachodzące na inne ( http ://b l .ocks.org/em eeks/ cceabdb4ee0870eebf54) R y s u n e k 2 .1 3 . Dzięki zmianie ustawień wypełnienia, obram ow ania i przezroczystości można zobaczyć nachodzące na siebie prostokąty ( http://bl.ocks.org/em eeks/ 03aaed39e048655daad0)

78

R o z d z i a ł 2.

Przepływ danych podczas wizualizowania informacji

.style("stroke". "red”) .styleC'stroke-width". "lpx") .style("opacity". .25): Może zastanawiać Cię praktyczny sens użycia w funkcji wewnątrzwierszowej drugiej zmiennej (zwykle o nazwie i). Jednym z zastosowań pozycji wartości w tablicy z danymi jest określanie lokalizacji elementów graficznych. Po ustawieniu współrzędnej x każ­ dego prostokąta na podstawie wartości i (pomnożonej przez szerokość prostokąta) uzyskasz efekt bardziej zbliżony do wykresu słupkowego: d3.select(”svg") .selectAlK" rect") .data([15. 50. 22. 8. 100. 10]) .enter() .appendCrect”) .attr(“width". 10) .attr("height", function(d) {return d:}) .styleC'fill". "blue") .style("stroke". "red”) .styleC'stroke-width". "lpx") .style("opacity". .25) .attrC’x". functioned.i) {return i * 10}): Histogram jest wyświetlany od góry do dołu (rysunek 2.14), ponieważ SVG rysuje prostokąty na prawo i w dół od podanego punktu 0, 0. Aby to zmienić, trzeba przesu­ nąć każdy prostokąt w taki sposób, by współrzędna y odpowiadała pozycji ustalonej na podstawie wysokości figur. Wiadomo, że najwyższy prostokąt ma wysokość 100 pik­ seli. Pozycja y jest mierzona od lew^ego górnego narożnika płótna, dlatego gdy atry­ but y każdego prostokąta zostanie ustawiony tak, aby jego w^artość wynosiła długość figury minus 100, histogram będzie wyświetlany w oczekiwany sposób. Ilustruje to rysunek 2.15.

R y s u n e k 2 .1 5 .

R ysu n e k 2 .1 4 . Prostokąty SVG są rysowane od góry do dołu ( h ttp ://b l.o c k s . org/em eeks/ c9de86dl95920fb35919)

d3.select("svg") .selectAlK" rect") .data([15. 50. 22. .enter()

8 . 1 0 0 . 10 ])

Po ustawieniu współrzędnej y prostokąta na odpowiednią wartość minus wysokość figury prostokąty są rysowane od góry do dołu od uzyskanej współrzędnej ( h ttp ://b l.o c k s .o rg / emeeks/adebad9e7 d73a 4a 3cl5 b)

2.2. Wiązanie danych

79

.append("rect") .attr("width". 10) .attr("height", function(d) {return d:})

.style("fi 11". "blue") .style("stroke", "red") .style("stroke-width". "lpx") .style("opacity". .25) .attrC’x " . function(d.i) {return i * 10:}) .attr("y". function(d) {return 100 - d :}):

2.2.3.

Uwzględnianie skal

Opisana technika generowania histogramu sprawdza się dla tablic wartości, które bezpośrednio odpowiadają wysokościom prostokątów (względem wysokości i szero­ kości elementu

Rysunek 2.16 pokazuje, jak źle kod działa dla takich danych. d3.select("svg")

.selectAUCrect") .data([14. 68. 24500. 430. 19. 1000. 5555]) .enter() .append("rect") .attr("width". 10) .attr("height", function(d) {return d})

.style("fi 11". "blue") .style("stroke", "red") .style("stroke-width". "lpx") .style("opacity". .25)

.attrC x” . function(d.i) {return i * 10:}) .attrCy". function(d) {return 100 - d:}):

Sytuacja nie poprawia się po ustawieniu przesunięcia współrzędnej y na maksymalną wartość z danych. d3.select("svg")

.selectAUCrect") .data([14. 68. 24500. 430. 19. 1000. 5555]) .enter() .append("rect") .attr("width". 10) .attr("height", function(d) {return d})

R y s u n e k 2 .1 6 . K szta łty SVG w ych od zą tu poza ekran ( h ttp ://b l.o c k s .o rg /e m e e k s / 97 52 0 4 e 8 1 9 f6 4 5 ca 0 d 8 1 )

.style("fi 11". "blue") .style("stroke", "red") .style("stroke-width". "lpx") .style("opacity". .25) .attrCx". function(d.i) {return i * 10:}) .attrCy". function(d) {return 24500 - d:}):

Nie ma potrzeby pokazywać zrzutu — ta wersja wyświetla jeden pionowy pasek na płótnie. Najlepszym rozwiązaniem jest zastosowanie funkcji skalujących z biblioteki

80

R o z d z i a ł 2.

Przepływ danych podczas wizualizowania informacji

D3 w celu znormalizo\vania wartości na potrzeby ich wyświetlania. Dla tego wykresu słupkowego stosowana jest stosunkowo prosta skala d3.scale.linear(). Skale w7biblio­ tece D3 mają dwie podstawowe funkcje — .domainO i .rangeO. Obie te funkcje przyj­ mują tablice. Aby wyniki były prawidłowe, obie tablice muszą mieć te samą długość. Tablica z funkcji .domainC) określa serię wartości odwzorowywaną na tablicę bardziej przydatnych w7praktyce wartości funkcji . rangeO. Zacznij od utworzenia skali dla osi y: var yScale = d 3 .s c a lę .lin e a rO .d o m a in ([0 .24500]).ra n g e ([0 .100]): yScale(O): < -------zwraca o yScale(100): < ------- Zwraca 0.40816326530612246 yScale(24000): < ------- Zwraca 97.95918367346938

Skala yScale pozwala odwzorować wartości tak, by można je wyświetlić. Jeśli teraz zasto­ sujesz skalę yScale do określenia wysokości i współrzędnej y prostokątów7, otrzymasz bardziej czytelny wykres słupkowy, widoczny7na lysunku 2.17. var yScale = d3.scalę.linearO .domain([0.24500]) .range([0.100]) : d 3 .s e le c t("s v g ") .s e le c tA ll( " r e c t” ) .da ta ([1 4. 6 8 . 24500. 430. 19. 1000. 5555]) .en te rO .appendC rect") .a ttr C w id th " . 10) .a ttr C h e ig h t" . fu n ctio n (d ) {re tu rn y S c a le (d ):}) . s t y l e C f i l l " . "b lu e ") .s ty le C s tro k e " . "re d ") .s ty le ("s tro k e -w id th ". Mlp x ") .s ty le ("o p a c ity ". .25) . a t t r ( " x " . fu n c tio n (d .i) {re tu rn i * 1 0 :}) . a t t r C y " . fu n c tio n (d ) {re tu rn 100 - yS ca le (d ): } ) :

Gdy7 używane są tak bardzo zróżnicowane wartości, często lepiej jest wykorzystać skalę wieloliniową (ang. polylinear). Jest to odmiana skali liniowej, w7 której w7 dziedzinie i przeciwdziedzinie ustawianych jest wiele punktów7. Załóżmy7, że w7 używanym zbiorze danych istotne są zwłaszcza wartości od 1 do 100, przy7 czym czasem pojawiają się wartości od 100 do 1000 i rzadko występują większe wartości odstające. Taką skalę można przedstawić w7następujący sposób:

R ysu n e k 2.17. Wykres słupkowy w yg en erow an y za pom ocą skali

liniowel

var yScale = d 3 .s c a lę .lin e a rO .d o m a in ([0 .100.1000.24500]).ra n g e ([0 .50.75.100]):

Po zastosow7aniu tej skali przedstawiony7wcześniej kod generuje inny7wykres, poka­ zany7na lysunku 2.18. Może występować wartość graniczna, po której przekroczeniu określanie dokład­ nej wartości danych nie ma znaczenia. Załóżmy7, że dane pokazują liczbę odpowiedzi w7ankiecie. Sukcesem jest uzyskanie więcej niż 500 odpowiedzi. Możliwe, że progra­ mista chce wyświetlać tylko wartości od 0 do 500 i wyraźniej zaznaczyć zróżnicowa­ nie wartości od 0 do 100. Umożliwia to następująca skala:

2.3. S ty l atrybuty i treść w prezentacji danych

var yScale = d3.scalę.linearO .domai n([0 .IDO.500]).range([0.50.100]):

Możesz sądzić, że to wystarczy do wygenerowania no­ wego wykresu, w którym dla wartości powyżej 500 wy­ sokość słupków jest ograniczana do maksymalnego poziomu 100. Jednak domyślnie skale w7bibliotece D3 działają inaczej. Rysunek 2.19 pokazuje, co się stanie po uruchomieniu kodu rysującego wykres z nową skalą. Zauważ, że prostokąt}7nadal wychodzą nad płótno. Dow7odem na to jest brak obramowania w7 czterech prostokątach odpowiadających wartościom powyżej 500. Można to potwierdzić, przekazując do utworzonej skali wartość większą niż 500: yScale(lOOO): <------- Zwraca 162.5

Skala z biblioteki D3 domyślnie ekstrapoluje wartości większe niż maksymalna wartość z dziedziny i mniej­ sze niż minimalna wartość z dziedziny. Jeśli chcesz ustawić wszystkie takie wartości na maksymalną (dla większych) lub minimalną (dla mniejszych) wartość z przeciwdziedziny, zastosuj funkcję .clampO:

R y s u n e k 2 .1 8 . Ten sam wykres co na rysunku 2.17, z tym że wygenerowany za pomocą skali w ieloliniowej (h ttp ://b l.o c k s .o rg / em eeks/eld488a49c5bb7fb8957)

var yScale = d3.scalę.linearO .domain([0,100,500]) .range([0.50.100]) .clamp(true):

Kod generujący wykres wyświetla teraz prostokąty7 o maksymalnej wysokości 100 i odpowiedniej pozycji, co widać na rysunku 2.20. Aby się przekonać, że kod działa w oczekiwany sposób, przekaż do skali yScaleO wartość większą niż 500: yScale(lOOO): <

zwraca

100

Funkcje związane ze skalami są bardzo w7ażne przy określaniu pozycji, wielkości i kolorów elementów7 w7wizualizacjach danych. W dalszej części tego roz­ działu i w7całej książce zobaczysz, że opisane tu tech­ niki tworzą podstawowy7proces używania skal w bi­ bliotece D3.

R y s u n e k 2 .1 9 . Wykres słupkowy wygenerowany za pomocą skali liniowej, w której wartość maksymalna z dziedziny je s t mniejsza niż wartość maksymalna ze zbioru danych

2.3. Styl, atrybuty i treść w prezentacji danych Teraz zobaczysz, jak na podstawie danych o miastach i tweetach utworzyć drugi wykres słupkowy7, wykorzystując techniki omówione w7tym rozdziale i w7rozdziale 1. Następ­ nie poznasz bardziej zaawansowane metody potrzebne do zaprezentowania danych

81

82

R o z d z i a ł 2.

Przepływ danych podczas wizualizowania informacji

o tweetach w prostej wizualizacji. Przy okazji dowiesz się, jak określać style i atrybuty na podstawie danych powiązanych z elementami, a także zobaczysz, jak bi­ blioteka D3 tworzy, usuwa i modyfikuje elem enty w7o dp owiedzi na zmiany w7danych. 2.3.1. Wizualizacja oparta na wczytanych danych

Wykres słupkowy oparty na danych z pliku cities.csv jest prosty7. Wymaga jedynie skali opartej na maksymalnej liczbie ludności, ustalanej za pomocą funkcji d3.max() (zobacz listing 2.3). Utworzony7 wykres słup­ kowy7, przedstawiony7z komentarzami na iy7sunku 2.21, ilustruje liczbę mieszkańców miast ze zbioru danych. R y s u n e k 2 .2 0 . W ykres słupkow y w ygenerow any z w a rto ścia m i ze zbioru danych większymi niż wartość maksymalna z dziedziny skali, ale z ustawieniem true w fun kcji clam p()

Wielkość Prostokąty mają stałą szerokość określoną w ich atrybucie "width'. Wysokość jest określana na podstawie liczby mieszkańców i skalowana w sposób zdefiniowany w funkcji yScale, tak by pasowała do płótna

Pozycja Każdy prostokąt jest wyświetlany na osi x na podstawie pozycji danych we wczytywanej tablicy. Pierwsze dwa elementy reprezentują San Francisco i Fresno, dwa następne - Lahaur i Karaczi itd. Ponieważ prostokąty są rysowane od lewego górnego rogu w dół. współrzędnay jest dostosowywana na podstawie wysokości figur

Marginesy są tworzone w wyniku przesunięcia prostokątów o 20 pikseli od góry i utworzenia skali, w której dla maksymalnej wartości ’ przeciwdziedziny uwzględniono 20 pikseli marginesu na dole

R ysu n e k 2 .2 1 . Dane z pliku cities.csv przedstawione na wykresie słupkowym z wykorzystaniem maksymalnej wartości atrybutu population w ustawieniu domain skali ( http://bl.ocks.org/em eeks/ 4c80fe802853fl2fd0d6) [B |

2.3. S ty l atrybuty i treść w prezentacji danych

S3

L isting 2 .3 . W c z y t y w a n i e , r z u t o w a n i e , p o m i a r i w y ś w i e t l a n i e d a n y c h w p o s t a c i w y k re su s łu p k o w e g o d3.csv("cities.csv",function(error,data) {dataViz(data):}): function dataViz(incomingData) { var maxPopulation = d3.max(incomingData, functional) { return parselnt(el.population):}

<----------- P rz e k s z ta łc a w a rto ś ć p o la p o p u la tio n na lic z b ę c a łk o w itą

):

var yScale = d3.scale.linearO .domain([0,maxPopulation]).range([0,460]): d3.select(,,svg,,).attr(,,style".,,height: 480px: width: 600px:"): d3.sel ectC’svg") .selectAll("rect") .data(incomingData) .enter() .append("rect") .attr(“width", 50)

.att r ("hei ght". funct i on(d){ret urn ySca1e(parseInt(d.popu1at i on)):}) .attrC'x". function(d.i) {return i * 60:}) .attrC'y”. function(d) {return 480 - yScale(parseInt(d.population)):}) .styleC'fiir, "blue") .style("stroke", "red") .style("stroke-width". "lpx") .style("opacity". .25):

} Utworzenie wykresu słupkowego na podstawie danych z Twittera wymaga dodatko­ wych transformacji. Na pokazanym poniżej listingu 2.4 użyto instrukcji d3.nest() w celu powiązania tweetów z ich autorem oraz wykorzystano uzyskaną tablice do utwo­ rzenia wykresu słupkowego z liczbą tweetów poszczególnych osób (zobacz opatrzony komentarzami rysunek 2.22). L is t i n g 2.<

W c z y ty w a n ie , z a g n ie ż d ż a n ie , p o m ia r i p r z e d s ta w ia n ie d a n y c h

d3. jso n ( "tw eets. jso n " . fu n c tio n (e r r o r .data) {dataVi z (d a ta .tw eets) } ) : <■ fu n ctio n dataViz(incomingData) {

var nestedTweets = d3.nest() .key(function (el) {return el.user:}) .entri es(i ncomi ngData): nestedTweets.forEach(function (el) { el .numTweets = el.values.length: <-

W s k a z u je p o le d a ta .tw e e ts , w k tó r y m z a p is a n a je s t ta b lic a z d a n y m i

T w o rz y n o w y a tr y b u t na p o d s ta w ie lic z b y tw e e tó w

}) var maxTweets = d3.max(nestedTweets. function(el) {return el.numTweets:}): var yScale = d3.scale.1i near().domain([Q.maxTweets]).range([0,100]): d3.select("svg") .selectAUC'rect") .data(nestedTweets) .enter() .append("rect")

84

R o z d z i a ł 2.

Przepływ danych podczas wizualizowania informacji

R y s u n e k 2 .2 2 . Dzięki zagnieżdżeniu danych i zliczeniu zagnieżdżonych o b ie któ w można utw o rzyć wykres słu pko w yna podstawie danych hierarchicznych ( h ttp ://b l.o cks.o rg /e m e e ks/ 7ccc82e776b6e761a3f2) [jg

.attrCwidth". 50) .attrCheight". function(d) {return yScale(d.numTweets):}) .attr("x". function(d.i) {return i * 60:}) .attrC y". function(d) {return 100 - yScale(d.numTweets):}) .s ty le C fill” . "blue") .styleCstroke". "red") .style("stroke-widthM. ’Tpx") .style("opacity". .25):

} 2.3.2. Ustawianie kanałów

Do tej pory wartości z danych obrazowano jedynie za pomocą wysokości prostokątów. Gdy uwzględniane są tylko pojedyncze wartości z danych liczbowych, takie podejście wystarcza. To dlatego wykresy słupkowe są tak popularne w arkuszach kalkulacyj­ nych. Jednak zwykle używane są dane wielowymiarowe, na przykład spisy ludności gmin lub dokumentacja medyczna pacjentów. „Wielowymiarowość” oznacza w tym miejscu, że każdy punkt danych ma wiele aspektów. Na przykład historia medyczna nie zawiera jednej wartości od 0 do 100. Zamiast tego obejmuje liczne wyniki badań wyjaśniające różne aspekty zdrowia pacjenta. Dla tego rodzaju wielowymiarowych danych trzeba opracować techniki reprezentowania wielu punktów w7tej samej postaci. W ujęciu technicznym do wizualnego prezentowa­ nia danych używane są kanały. W zależności od tego, jakiego typu dane są wyko­ rzystywane, różne kanały lepiej nadają się do graficznego przedstawiania informacji.

2.3. S ty l atrybuty i treść w prezentacji danych

85

Pojęcie z dziedziny wizualizowania informacji — kanały Gdy prezentujesz dane za pomocą grafiki, powinieneś ustalić optymalne metody wizu­ alnego przedstawiania używanych typów danych. Każdy obiekt graficzny, a także zawar­ tość całego ekranu można rozbić na kanały przekazujące informacje w postaci wizualnej. Takie kanały, jak na przykład wysokość, szerokość, obszar, kolor, pozycja czy kształt, dobrze nadają się do prezentowania różnych klas informacji. Na przykład określone wielkości można przedstawiać za pomocą zmiany rozmiarów koła. Jeśli jednak bezpo­ średnio powiążesz wielkości z promieniem, odbiorcy mogą być zdezorientowani, ponieważ przyzwyczajeni są uwzględniać powierzchnię koła, a nie jego promień. Kanały występują na wielu poziomach. W niektórych technikach wykorzystuje się na przykład odcień, nasy­ cenie i jasność barwy do reprezentowania trzech różnych porcji informacji, zamiast sto­ sować kolor na ogólnym poziomie. Ważne jest, żeby nie używać zbyt wielu kanałów. Należy skoncentrować się na kanałach najlepiej dostosowanych do danych. Jeśli nie zmieniasz kształtu (na przykład używasz wykresu słupkowego z samymi prostokątami), możesz wykorzystać kolor do określania kategorii, a jasność do reprezentowania określonych wielkości.

W róć teraz do pliku tweets.json. Na pozór nie obejm uje on dużej ilości danych, które można umieścić na wykresie. Jednak w zależności od tego, jakie aspekty chcesz mierzyć i wyświetlać, możesz zastosować kilka różnych podejść. Załóżmy, że chcesz zmierzyć oddziaływanie tweetów (tweety uznane za ulubione i tweety z odpowiedziami są wtedy traktowane jako ważniejsze od pozostałych). Tym razem zamiast wykresu słupkowego warto utworzyć wykres punktowy. Zamiast określać pozycję na osi x na podstawde pozycji w7tablicy, wykorzystywany jest do tego czas. Pozwala to pokazać, że tweety7pisane o określonych porach częściej są uznawane za ulubione i zarazem częściej pisane są odpowiedzi na nie. Pozycja na osi y jest ustalana na podstawie mak­ symalnego oddziaływania tweetów7 ze zbioru. Dalej przede wszystkim omawiana jest zaprezentowana na listingu 2 5 funkcja dataViz(), ponieważ powinieneś już wiedzieć, jak pobierać dane i jak przekazywać je do takich funkcji. L is t i n g 2.!

T w o rz e n ie w y k r e s u p u n k to w e g o

function dataViz(incomingData) {

G e n e ru je w s k a ź n ik o d d z ia ły w a n ia na p o d s ta w ie s u m y d o d a ń do u lu b io n y c h i o d p o w ie d z i

incomingData.f orEach(function (el) { el.impact = el.favorites.length + el.retweets.length: <— e l.tweetTime = new Date(el .timestamp): < , Pr2ekS2tałca tancuch 2naków zgodny })

| z fo r m a te m IS O 8 9 0 6 na ty p d a te

var maxlmpact = d3.max(incomingData, function(el) {return el.impact:} ) : var startEnd = d3.extent(incomingData. function(el) { return el.tweetTime: }) :

<----------- Z w ra c a p ie rw s z ą i o s ta tn ią g o d z in ę , co p o z w a la u tw o rz y ć s k a lę

var timeRamp = d3.time.scaleO.domain(startEnd).range([20,480]):
86

R o z d z i a ł 2.

Przepływ danych podczas wizualizowania informacji

.data(incomingData) .e n te r() .append(" c ir c le " ) . a t t r C r " . fu n c tio n (d ) {re tu rn rad iu sS cale id .im p act): } ) .a t t r ( "ex". fu n c tio n ( d .i) {re tu rn timeRamp(d.tweetTime):} ) . a t tr C ’c y". fu n c tio n (d ) {re tu rn 480 - yS cale(d .im p act):} ) .s ty le C ’f i l l " . fu n c tio n (d ) {re tu rn c o lo rS c a le id .im p act):} ) . s ty le ( "s tro k e ". "b la ck") .s ty le ("s tro k e -w id th ". " lp x " ):

<■

W ie lk o ś ć , k o lo r i p o z y c ja w p io n ie w y n ik a ją z p o z io m u o d d z ia ły w a n ia

}: Rysunek 2.23 pokazuje, że dla każdego tweetu lokalizacja w pionie zależ)7od oddziały­ wania, a w poziomie — od godziny. Ponadto im większe oddziaływanie, tymi większe koło i ciemniejszy odcień czerwonego. W dalszej części kolor, wielkość i pozycja figur posłużą do reprezentowania różnych atrybutów danych, na razie jednak wszystkie te aspekty dotyczą oddziaływania. Oś czasu Koła są umieszczane na osi x w zależności od godziny, co określa skala timeRamp. \A/^-roćnjej SZe tweety znajdują się po ronię, a późniejsze - po prawej

Skala oddziaływania Koła reprezentujące tweety o większym oddziaływaniu są większe i ciemniejsze oraz znajdują się wyżej na płótnie. Jest tak, ponieważ utworzono trzy skale ustawiające te kanały na podstawie wskaźnika oddziaływania. Koła dla tweetów o mniejszym oddziaływaniu są mniejsze i jaśniejsze oraz znajdują się niżej na płótnie

R y s u n e k 2 .2 3 . T w eety są reprezentow ane ja k o koła o w ielkości zależnej od sum y dodań do ulubionych i odpowiedzi. Pozycja kół na osi x na płótnie wynika z godziny publikacji, a na osi y — z tego samego wskaźnika oddziaływania, który służy do określania wielkości figur. W lewym do ln ym rogu w idoczne są nachodzące na siebie koła dla dwóch tw e e tó w o ta k im sam ym od działyw an iu, opublikow anych w niem al tym sam ym czasie ( h ttp ://b l.o c k s .o rg /e m e e k s / 8 1 6 8 b 9 7 1 fe b 9 fll2 f0 1 d ) M

2.3. S ty l atrybuty i treść w prezentacji danych

87

2.3.3. Instrukcje enterf update i exit

Już wielokrotnie używałeś instrukcji . e n t e r O dla selekcji. Teraz przyszła pora, by przyjrzeć się jej odpowiednikowi — instrukcji . e x i t ( ). Obie te funkcje są uruchamiane, gdy liczba wartości wiązanych z selekcją jest niedopasowana do liczby elementów modelu DOM w selekcji. Jeśli danych jest więcej niż elementów7modelu DOM, uru­ chamiana jest funkcja .e n te r ( ). Gdy danych jest mniej, wykonywana jest funkcja . e x i t ( ). Ilustruje to rysunek 2.24. Za pomocą funkcji s e le c t i on. e n te r ( ) można zdefiniować proces tworzenia nowych elementów7 na podstawie używanych danych. Funkcja s e l e c t io n . e x it ( ) służy do określania procesu usuwania istniejących elementów7z selek­ cji w7reakcji na usunięcie odpowiadających im danych. Aktualizowanie danych, jak zobaczysz w7następnym przykładzie, odbywa się w wyniku ponownego zastosowania funkcji używanych do tworzenia elementów7graficznych na podstawie danych. |

j Punkt danych

< > H Element modelu DOM

Selekcja

R y s u n e k 2 .2 4 . Gdy liczba e lem entów m odelu DOM w selekcji je s t niezgodna z liczbą wartości w tablicy, w yw oływ ana je s t fu n kcja .e n te r() (w ięcej w artości w tablicy) lub .exit() (więcej elementów w modelu DOM)

88

R o z d z i a ł 2.

Przepływ danych podczas wizualizowania informacji

Każde wywołanie .e n te r( ) lub .e x it( ) może obejmować operacje wykonywane na elementach podrzędnych. Jest to przydatne zwłaszcza w7funkcji .enterO, gdy7używa się funkcji .appencK) do dodaw7ania nowych elementów7. Jeśli nowe elementy7są zade­ klarowane jako zmienne i mogą (jak na przyddad element ) obejmować elementy7 podrzędne, pozwala to dodać dowolną liczbę elementów7podrzędnych. Spośród ele­ mentów7SVG jedynie

do elementu . Załóżmy7, że chcesz wyświetlić wykres słupkowy na podstawie obliczonego wskaź­ nika oddziaływania i dodać etykiety do słupków7. Należy7wtedy7w7początkowej selekcji dodać do płótna

o rz e n ie e ty k ie t d la e le m e n tó w < g >

var tweetG = d 3 .s e le c t("s v g ") .s e le c tA llC g ” ) .data(incomingData) .e n te rO .append("g ") .a ttr("tra n s fo rm ". fu n ctio n (d ) re tu rn " tra n s la té e + timeRamp(d.tweetTime) + + (480 - yS c a le id .im pact))

<-

E le m e n t < g > w y m a g a tr a n s fo r m a c ji p rz y jm u ją c e j w y g e n e ro w a n y ła ń c u c h znaków

}): tweetG.append("ci rc l e ") .a ttr C ’ r " . fu n c tio n (d ) {re tu rn ra d iusS caleid.im pact):} ) . s t y le ( " f i l l " , "#990000") .s t y le ( "s tro k e ". "b la ck") .s ty le ("s tro k e -w id th ". " lp x " ): tweetG.append(" t e x t " ) .te x t(fu n c tio n (d ) {re tu rn d.user +

U życie in s tr u k c ji .g e tH o u r s () p o z w a la p o p ra w ić c z y te ln o ś ć e ty k ie ty

+ d.tw eetTim e.getH oursO :}):

< --------

Na opatrzonym komentarzami ry7sunku 2.25 pokazano efekt działania tego kodu. Te same koła znajdują się na niezmienionych pozycjach. To oznacza, że transformacja translate zmienia współrzędne x i y kół, przy7czym można dodać też inne elementy7 SVG, na przy7kład elementy7 z etykietami. Etykiety w7lewym dolnym rogu są nieczytelne. Napisy7przy7innych kołach też nie są wyraźne. Dalej dowiesz się, jak generować lepsze etykiety. Funkcja wewnątrzwierszowa

2.3. S ty l atrybuty i treść w prezentacji danych

89

Zako tw icza n ie te k s tu

Domyślnie tekst w formacie SVGjest zakotwiczony na początku elementu. To powoduje, że jest

Elementy podrzędne Każdy punkt danych jest reprezentowany za pomocą złożonej grafiki obejmującej elementy , i . Każdy element podrzędny ma wyjściową pozycję określoną na podstawie elementu nadrzędnego, jednak jest wyświetlany według własnych reguł. Dlatego tekst jest zakotwiczony, koła są wyśrodkowane, a prostokąty są wyświetlone względem pozycji 0,0 nadrzędnego elementu

R ysu n e k 2.2 5. Każdemu tweetowi odpowiada elem ent < g > z kołem i etykietą. Różne tw eety Jana z godziny 7 zostały opublikowane w ta k krótkim odstępie czasu, że trudno je s t wyświetlić ich etykie ty ( http://bl.ocks.org/em eeks/d0cec4c2e294e3bcd0b4) j 8 ]

.text(fu nction (d ) {return d.user + + d.tweetTime.getHoursO}) ustawia etykietę na imię autora tweetu, po którym to imieniu znajdują się kreska i godzina publikacji. Wszystkie funkcje dotyczą tych samych danych, ponieważ elementy podrzędne dzie­ dziczą dane po elementach nadrzędnych. Skoro jednym z elementów danych jest tablica, możesz uznać, że możliwe jest powiązanie jej z selekcją obejmującą element podrzędny. Rzeczywiście tale jest. Z taką operacją zetkniesz się w następnym rozdziale i w dalszej części książki. IN STRU KCJA EXIT

Odpowiednikiem funkcji .append() jest funkcja . remove() powiązana z instrukcją .e x it(). Aby zobaczyć działanie instrukcji .e x itO, w modelu DOM potrzebne są elementy. Mogą one już wcześniej znajdować się w kodzie w7HTML-u, a można też dodać je za pomocą biblioteki D3. Zacznijmy od stanu wygenerowanego przez wcześniejszy kod. Ten stan zapewnia wiele możliwości przetestow7ania funkcji .exitO. Po zmianie zawar­ tości tablicy style i atrybuty elementów modelu DOM nie są aktualizowane, chyba że wywołane zostaną potrzebne funkcje .styleO i .a ttrO . Po powiązaniu tablicy z ist­ niejącymi elementami z modelu DOM można wykorzystać instrukcję .exitO do usunięcia tych elementów: d3.s e ie c tA l1( "g ” ) .data( [ 1 .2 .3 .4 ] ) .exi t ( ) . remove():

90

R o z d z i a ł 2.

Przepływ danych podczas wizualizowania informacji

Ten kod usuwa wszystkie elementy7 oprócz czterech. Jest tak, ponieważ tablica zawiera tylko cztery wartości. W większości omówień funkcji .enter() i .exitO z biblio­ teki D3 nie znajdziesz przykładów7wiązania z selekcją zupełnie now7ej tablicy. Częściej ponownie wiązana jest początkowa tablica przefiltrow7ana z uwzględnieniem zmian wynikających z interakcji z użytkownikiem lub innych czynników7. Takie przykłady znajdziesz w7 różnych miejscach książki. Ważne jest jednak, by zrozumieć różnice między danymi, selekcją i elementami modelu DOM. Dane wiązane z elementami modelu DOM zostały zastąpione, dlatego zamiast bogatych w7dane obiektów7z pliku tweets.csv dostępne są teraz mniej interesujące liczby. Jednak jedyna zmiana w7wizu­ alnej reprezentacji polega na zmniejszeniu liczby elementów w7celu odzwierciedlenia wielkości powiązanej tablicy. D3 nie obowiązuje konwencja, zgodnie z którą zmiana danych pow7oduje aktualizację wyświetlanych informacji. Trzeba samodzielnie napisać kod, który wprowadzi zmiany na stronie. Zapewnia to większą sw7obodę, co opisano w7dalszych rozdziałach książki. A K TU A LIZO W AN IE STRON

Aby zobaczyć, jak wizualne cechy elementów7mogą zmieniać się w7reakcji na mody­ fikacje danych, zaktualizuj element w7każdym elemencie z uwzględnieniem nowo powiązanych danych: d 3 .s e le c tA ll( " g " ) . s e le c t ( " te x t" ) .te x t(fu n c tio n (d ) {re tu rn d } ):

Rysunek 2.26 pokazuje, że długie etykiety zostały zastąpione liczbami powiązanymi z elementami. Q.

0

Element! | NeWorfc

Source!

Timeline

>- # U.

▼



l

* •'.£cran!fonTH.'tran!lste(4tó.239S98i&96231,36»)"> ; strobe: błeck; strcke-iridth: lpx;"X/cir < text> 2< /text>

___________

I

______ * sl3te(*80,250)' >

|

(153, 8, 0>; «rotę: black; streke-*ridtr: lpx;"x/cirele> Wrrl bed/ d>r sva |fl

»

Stolec Event Lctenere D O M Breakpoints Prcpertiec

T8

data

: 3

►attributes: UateCftodełlap PaseUSI: 'http;//localhost/ked/Rys_02_2S.btnl” chlldlleoencCount: 2 ▼ chlldlfcxies: todeLlst[2] ▼ C: circle ▼ data :Ctiject content: ”0d tera; je« tylko kanapki : sere«.” ► favorites: A.-ray(2]

Inpact: 2 ►retveets: Array[0] tlłiestanj: "Mon Dec 23 2813 22.22* ► t»eetTine: ton Dec 23 2013 22:22:&8 GMTV8180 (Śea
R ysu n e k 2 .2 6 . Pozostawiane są tylko cztery elem enty < g > , odpowiadające czterem wartościom z nowej tablicy z danym i. Dla etykie t (elem entów < te x t> ) ustawiane są nowe wartości z tablicy. Jednak gdy zbadasz elem e nt < g > , zobaczysz, że je g o w ła ś c iw o ś ć data (b ib lio te ka D3 przechowuje w niej powiązane dane) je s t inna niż w elemencie podrzędnym < circle > , gdzie nadal zapisany je s t obiekt JSON powiązany podczas tworzenia pierwszej wizualizacji

W tym przykładzie trzeba za pomocą instrukcji . sel ectAl 1( ) wybrać elementy7 nad­ rzędne, a następnie wybrać elementy7podrzędne w7celu ponownego powiązania z nimi

2.3. S ty l atrybuty i treść w prezentacji danych

91

danych. Ta technika jest potrzebna przy wiązaniu nowych danych z selekcją, w której występują elementy podrzędne. Ponieważ nie zaktualizowano elementów , z każdym z nich wciąż powiązane są dawne dane: Z w ra c a w a rto ś c i z n o w o

p o w ią z a n e j ta b lic y d S .s e le c tA llC ’g'^.eachCfunctionCd) {console. 1og(d ) } ) : < d 3 .s e le c tA l1( " t e x t " ) .each(fu n c tio n (d) {co nsole.lo g ( d ) } ) :
p o n ie w a ż u ż y w a n a je s t z m o d y fik o w a n a s e le k c ja p o d rz ę d n a

Funkcji . e x i t ( ) nie utworzono z myślą o wiązaniu nowych tablic z zupełnie odmiennymi wartościami (co zrobiono w przykładowym kodzie). Ma ona służyć do aktualizowania strony w wyniku usunięcia z tablicy elementów powiązanych wcześniej z selekcją. Jeśli jednak planujesz zastosować tę technikę, musisz określić, jak funkcja . d a t a ( ) ma wiązać dane z wybranymi elementami. Funkcja . d a t a O domyślnie wiąże dane na podstawie ich pozycji w tablicy. To oznacza, że w7przedstawionym przykładzie cztery pierwsze elementy7 selekcji są zachowywane i wiązane z nowymi danymi. Pozostałe są usuwane przez funkcję . e x i t O . Zwy7kle jednak nie należy7wykorzystywać pozy7cji w7tablicy jako klucza przy7wiązaniu danych. Zamiast tego lepiej jest uży7ć znaczących informacji, na przy7klad wartości pochodzącej z obiektu z danymi. Klucz musi mieć postać łańcucha znaków7lub liczby7. Dlatego jeśli przekazujesz obiekt JSON bez wywo­ łania J S O N .s tr in g ify , w7szy7stkie obiekty7są traktowane jako " [ o b je c t o b je c t ] " i zwra­ cana jest tylko jedna unikatow7a wartość. Aby7 ręcznie wskazać klucz używany7 przy7 wiązaniu, zastosuj drugie ustawienie funkcji . d a ta O i ty7pow7ą dla biblioteki D3 wewnątrzwierszową składnię. Potrzebny7kod znajdziesz na listingu 2.7. L is t i n g 2 .7 , U s ta w ia n ie klu c z a p rz y w ią z a n iu d a n y c h

fu n ctio n dataViz(incomingData) { incomingData.forEach( fu n c tio n ( e l) { e l.im p a ct = e l.fa v o rite s .le n g th + e l .retw ee ts.leng th: el.tweetTim e = new Date( e l .tim estam p):

}) var maxlmpact = d3.max(incomingData, fu n c tio n (e l) { re tu rn el.im pa ct

}): var startEnd = d3.extent(incomingData. fu n c tio n (e l) { re tu rn el.tweetTim e

}): var timeRamp = d3 .tim e .scale ().d om a in(startE nd ).ra ng e([ 50. 450 ] ) : var yScale = d 3 .s c a le .lin e a rO .d o m a in ([ 0 .maxlmpact ]).ra n g e ([ 0. 460 ] ) : var radiusScale = d 3 .s c a le .lin e a rO .domain( [ 0. maxlmpact ] ) . range([ 1. 20 ]): d3.s e le c t( " svg" ) . s e le c tA l1( "c i r c le " ) .data(incomingData. fu n c tio n (d ) { re tu rn JS O N .string ify(d ) < -------

Jako k lu c z m o żn a z a s to s o w a ć d o w o ln y u n ik a to w y a tr y b u t. J eśli n ie w y s tę p u ją u n ik a to w e w a rto ś c i, m ożna w y k o rz y s ta ć c a ły o b ie k t, p rz y c zym trz e b a w y w o ła ć d la n ie g o m e to d ę s tr in g ify

92

R o z d z i a ł 2.

Przepływ danych podczas wizualizowania informacji

}) .enter O. append ("circle") .attrC ’r". function(d) { return radiusScale(d.impact) }) .a ttr("cx". functioned, i) { return timeRamp(d.tweetTime) }) .attrC'cy". function(d) { return 480 - yScale(d.impact) } ).s ty le (" fin \ "#990000") .style("stroke". "black") .styleC'stroke-width". "lpx"):

} Efekt wizualny jest taki sam jak na wcześniejszym wykresie punktowym z tymi samymi ustawieniami. Jeśli jednak teraz przefiltrujesz tablicę z danym i i powiążesz wynik tej operacji z selekcją, uzyskasz obraz pokazany na rysunku 2.27. W ymaga to zdefinio­ wania przydatnej operacji . exi t ( ): var filteredData = incomingData.filteri functional) {return e l .impact > 0}

): d3.selectAl1("ci rcle") .data(filteredData. function(d) {return JSON.stringify(d)}) .exit() .removeO:

Użycie obiektu z wywołaniem s trin g ify nie spraw dza się, jeśli zmodyfikujesz dane w7 obiekcie, ponieważ wtedy wynik wywołania jest różny od pierwotnego łańcucha zna­ ków7używanego przy wiązaniu. Jeżeli planujesz wprowadzać znaczne zmiany i aktualiza­ cje, potrzebujesz w7 obiektach unikatowego identyfikatora, który można wykorzystać jako klucz przy wiązaniu.

2.4. Podsumowanie

93

2.4. Podsumowanie W tym rozdziale omówiono szczegółowo podstawowe aspekt}7 generowania wizuali­ zacji danych za pomocą biblioteki D3. Oto opisane zagadnienia: ■ Wczytywanie danych z zewnętrznych plików7w formatach CSV i JSON. ■ Formatowanie i przekształcanie danych za pomocą skal biblio teki D3 i wbu­ dowanych funkcji JavaSciiptu. ■ Pomiar danych w7celu generowania przydatnych wizualizacji. ■ Wiązanie danych w celu generowania grafiki na podstawie atrybutów danych. ■ Używanie selekcji podrzędnych razem z elementem do tworzenia złożonych obiektów7graficznych obejmujących wiele kształtów7. ■ Tworzenie, modyfikowanie i przenoszenie elementów7za pomocą funkcji e n te r ( ) i e x i t ( ) oraz selekcji. Prawie cały kod, jaki będziesz pisał z wykorzystaniem biblioteki D3, to różne warianty lub rozwinięcie technik omówionych w7tym rozdziale. W następnym rozdziale opisano szczegóły projektowe w7ażne w7udanych rozwiązaniach opartych na bibliotece D3, a także wyjaśniono stosow7anie interakcji, animacji i wstępnie wygenerowanych treści w7tej bibliotece.

R o z d z ia ł 2 .

Przepływ danych podczas wizualizowania informacji

Projektowanie sterowane

danymi i inter

Zawartość rozdziału: ■ Zapewnianie interaktywności elementów graficznych ■ Efektywne korzystanie z koloru ■ Wczytywanie tradycyjnego kodu w HTML-u na potrzeby okienek ■ Wczytywanie zewnętrznych ikon SN/G do wykresów

Platformy do wizualizowania danych istniały w formie odróżniającej je od reszty7świata programowania stron internetowych. Gdy aplikacje we Flashu lub Javie są umiesz­ czane na stronie, jedyną kwestią projektową jest upewnienie się, że obejmujący je element

jest wystarczająco duży* lub że można zmienić jego wielkość. Biblioteka D3 działa inaczej i umożliwia zintegrowanie projektu wizualizacji danych z projektem tradycyjnych elementów7stron internetowych. Możesz (i powinieneś) określać styl elementów generowanych za pomocą biblio­ teki D3, korzystając z tych samych ustawień stylów CSS, które stosujesz dla tradycyj­ nych elementów7w7HTML-u. Można łatwo zarządzać talami stylami i uzy skać spójny7 wygląd strony. W tym celu należy7, w7miarę możliwości, stosować te same klasy7z arkusza stylów do elementów7tworzonych za pomocą biblioteki D3 i do tradycyjnych elementów7 stron, a także w7przemyślany sposób korzystać z kolorów7i interaktywności w7grafice generowanej przy7uży7ciu tej biblioteki.

96

R o z d z i a ł 3.

Projektoivanie sterotvane danymi i interakcje

W tym rozdziale omówiono ogólne zagadnienia projektowe. Uwzględniono w nim nie tylko projekt graficzny, ale też projekt interakcji, architekturę rozwiązania i inte­ grację wstępnie wygenerowanych treści. Podkreślono powiązania między biblioteką D3 a innymi technikami tworzenia stron. Poznasz tu biblioteki często używane razem z D3, a także zobaczysz, jak integrować materiały w formacie HTML i SVG wygene­ rowane za pomocą innych narzędzi. Nie da się w tym rozdziale opisać wszystkich zasad projektowych (jest to zagadnienie obejmujące wiele dziedzin). Zamiast tego skon­ centrowano się na wykorzystaniu określonych możliwości biblioteki D3 do zapew­ nienia zgodności z najlepszymi rozwiązaniami opracowanymi przez profesjonalistów z branży projektowej. Zobaczysz, jak na podstawie tych rozwiązań utworzyć prostą wizualizację danych opartą na statystykach z mistrzostw świata w7piłce nożnej odby­ wających się w 2010 roku (rysunek 3.1).

==) m od

Statystyki N azw a zespołu

Niemej*

R egion

U EFA

W ygrane

5

R em isy

0

Przegrane

2

Punkty

15

B ram ki strzelone 16 B ram ki stracone 5 C zyste konto

3

Zołre kartki

10

H olandia

H iszpania

Czerwone kartki 1

O O o

R y s u n e k 3 .1 . W tym rozdziale opisano w czytyw anie kodu w HTML-u z zew nętrznego pliku i aktualizowanie danych (p u n kt 3.3 .2 ), w czytywanie zewnętrznych rysunków używanych ja ko ikony (pu nkt 3.3 .1 ), animowane przejścia (p u n kt 3.2.2) i korzystanie z kolorów (p u n kt 3.2.4)

3.1. Architektura projektu Gdy tworzysz pojedynczą stronę z ciekawą wizualizacją, nie musisz długo się zasta­ nawiać nad lokalizacją plików7. Jeśli jednak rozwijasz aplikację z wieloma punktami interakcji i różnymi stanami, powinieneś ustalić potrzebne zasoby7i odpowiednio zapla­ nować projekt. 3.1.1. Dane

Dane zwykle trafiają do aplikacji na jeden z dwóch sposobów7— albo są dynamicznie dostarczane za pomocą serwera lub interfejsu API, albo pochodzą ze statycznych plików7. Jeśli dynamicznie pobierasz dane za pomocą serwera lub interfejsu API, możliwe, że używasz także statycznych plików7. Dobrze ilustruje to proces budow7ania map, gdzie podstawowa warstwa danych (na przykład mapa państw) pochodzi ze statycznego pliku, a dynamiczna warstwa danych (na przykład miejsca generowania tweetów) jest pobierana z serwera. W tym rozdziale wykorzystywany jest plik worldcup.csv przed­ stawiający statystyki z mistrzostw świata w7piłce nożnej z 2010 roku:

3.1. Architektura projektu

9

"kraj". "region". "wygr.". "przegr.". "remi sy". "punkty". "strz.". "strać.". '-"czyste konto"."żółte"."czerw." "Holandia"."UEFA".6.0.1.18.12.6.2.23,1 "Hiszpania"."UEFA".6.0.1.18.8.2.5.8.0 "Niemcy"."UEFA".5.0.2.15.16.5.3.10.1 "Argentyna"."CONMEBOL".4.0.1.12.10.6.2.8.0 "Urugwaj"."CONMEBOL".3.2.2.11.11.8.3.13.2 "Brazylia"."CONMEBOL".3.1.1.10.9.4.2.9.2 "Ghana"."CAF".2.2.1.8.5.4.1.12.0 "Japonia"."AFC".2.1.1.7.4.2.2.4.0 Z każdą drużyną powiązanych jest wiele danych. Można spróbować wymyślić obiekt graficzny reprezentujący jednocześnie wszystkie dziewięć punktów danych (wzboga­ conych etykietami), w7tym przykładzie jednak zamiast tego stosowane są interaktywne i dynamiczne techniki zapewniania dostępu do informacji. 3.1.2. Zasoby

Wstępnie wygenerowane treści, na przykład komponenty7HTML-a i ręcznie naryso­ wane grafiki SVG, mają postać zewnętrznych plików7. Trzeba wiedzieć, jak je wczytać. W dalszej części rozdziału zobaczysz potrzebny7przykładowy kod. Każdy7plik zawiera kod wystarczający do narysowania kształtu lub utworzenia tradycyjnych elementów modelu DOM dodawanych do strony7. Zawartości katalogu z takim kodem poświęcono więcej miejsca w7punktach 3.3.2 i 3.3.3, gdzie opisano wczytywanie wstępnie wygene­ rowanych treści. 3.1.3. Rysunki

Dalej używane są lysunki w formacie PNG (ang. Portable Network Graphics). Przed­ stawiają one flagi wszystkich zespołów7pochodzące ze zbioru danych. Nazwy plików7 PNG są takie same jak państw, dzięki temu łatwiej jest używać rysunków w7bibliotece D3, o czym wkrótce się przekonasz. Każdy7plik cyfrowy obejmuje kod, natomiast rysunki są zwykle traktowane jako pliki odmiennego typu. Podczas korzystania z formatu SVG ta różnica się rozmywa, ponieważ użytkownicy przyzwyczajeni są traktować pliki SVG jako obrazki. Jeśli używasz rysunków SVG jako obrazków, a nie jako kodu przetwa­ rzanego w7 bibliotece D3, powinieneś umieścić pliki SVG w7katalogu z grafiką. Pliki SVG, które zamierzasz traktować jak kod, zapisz w7katalogu z zasobami. 3.1.4. Arkusze stylów

Choć style CSS w7tym rozdziale są opisywane ty7lko pobieżnie, warto pamiętać, że można zastosować kompilatory7stylów CSS, aby7zapewnić obsługę zmiennych i uzyskać inne zaaw7ansow7ane funkcje. Arkusz stylów z listingu 3.1 obejmuje klasy7odpowiadające róż­ nym stanom przetwarzanych elementów SVG, w7 tym elementów7 tekstowych SVG, dla których czcionka jest ustawiana za pomocą innej składni niż dla tradycyjnych elementów7modelu DOM.

98

R o z d z i a ł 3.

Projektoivanie sterotvane danymi i interakcje

L i s t i n g 3 .1 . P lik d 3 ia .c s s

te x t { fo n t-s ize: 10px:

} g > te x t.a c tiv e { fo n t-s ize: 30px:

} c irc le { f i l l : pink: stroke: black: stroke-width: lpx:

} c irc le .a c tiv e { f i l l : red:

} c irc le .in a c tiv e { f i l l : gray:

} 3.1.5.

Biblioteki zewnętrzne

W tym rozdziale wykorzystywane są dwa dodatkowe pliki .js (oprócz pliku d3.min.js, zawierającego zminimalizowaną wersje biblioteki D3). Pierwszy z tych plików to soccerviz.js. Zawiera on funkcje, które będą rozwijane i stosowane w tym rozdziale. Drugi plik to colorbrewer.js. Jest on udostępniany razem z biblioteką D3 i obejmuje wstępnie zdefiniowane przydatne palet}7kolorów. Te pliki są dołączane w przejrzystym pliku d3ia_2.html, przedstawionym na listingu 3.2. L i s t i n g 3 .2 . P lik d 3 ia _ 2 .h tm l

<1 i nk type="text/css" re i="stylesheet" href="d3ia.css" /> < script src="d3.v3.min.js" type="text/javascript"> < script src="colorbrewer.js” type="text/javascript"> < script src="soccerviz.js" type="text/javascript">

3.1. Architektura projektu

Element

99

obejmuje

dwa elementy

. Jeden ma identyfikator v iz, a drugi — Zwróć uwagę, że w elemencie występuje właściwość onload, w której wywoływana jest funkcja createS occerV iz( ) — jedna z funkcji z pliku soccerviz.js (przedstawionego na listingu 3.3). Ta funkcja wczytuje i wiąże dane, by dla każdego zespołu wygenerować koło z etykietą. Nie jest to rozbudowane rozwiązanie (zobacz rysunek 3.2), ale to dopiero początek. controls.

L is t i n g 3 .3 . P lik s o c c e rv iz .js

fu n ctio n createSoccerVizO { d 3 .csv("w orldcu p.csv'\ fu n ctio n (d a ta ) { overallTeam Viz(data):

<-

I W c z y tu je d a n e i w y w o łu je I d la nich fu n k c ję c re a te S o c c e rV iz

0 f u n c t i o n o v e ra llT e a m V iz (in c o m in g D a ta ) { d 3 . s e l e c t C ’SVg") I D o d a je e le m e n t < g > d o p łó tn a < s v g > , co p o z w a la ła tw ie j ap p en d ( " g ” ) < ' p r z e n ie ś ć i w y ś ro d k o w a ć z a w a r to ś ć e le m e n tu

. a t t r C i d " . "team sG ") . a t t r ( " t r a n s f o r m " . " t r a n s i a t e ( 5 0 .3 0 0 ) " ) .s e le c tA ll( " g " ) .d a ta (in c o m in g D a ta ) .e n te r () .a p p e n d ( " g " ) . a t t r ( " c l a s s ” . " o v e r a llG ” ) .a ttr (" tr a n s f o r m " , f u n c tio n ( d . i ) { r e tu r n " t r a n s l a t é e + ( i * 50) + " , 0 )"}

):

<-

var teamG = d 3 .s e le c tA ll("g .o v e ra llG "): < teamG .a p p e n d ("circle ") .a ttr C ’ r " , 20) .s ty le C ’f i l l " , "p in k ") . s t y le ("s tro k e ", "b la ck1) .s ty le C ’s tro k e -w id th ". 1lpx"

T w o rzy e le m e n t < g > d la k a ż d e g o e le m e n tu , co u m o ż liw ia d o d a n ie e ty k ie t i in n y ch e le m e n tó w w b a rd z ie j z a a w a n s o w a n e j w e rs ji k o d u P rz y p is u je s e le k c ję d o z m ie n n e j. P o z w a la to w s k a z y w a ć s e le k c ję b e z w p is y w a n ia z a k a ż d y m ra z e m in s tru k c ji d 3 .se le c tA II()

teamG .append("text") . s ty le ("te x t-a n c h o r". "m iddle") .a ttr C 'y ” . 30) .s ty le ( " fo n t- s iz e " . "10px") .te x t(fu n c tio n (d ) {re tu rn d . k r a j: } ) :

} } Choć możesz napisać aplikację w całości za pomocą biblioteki D3 i własnego kodu, to w rozbudowanych i długotrwałych projektach trzeba wykorzystać dodatkowe biblioteki zewnętrzne. Tutaj używana jest jedna, stosunkowo prosta biblioteka — colorbrewer.js. Zawiera ona zbiór tablic kolorów przydatnych w wizualizowaniu informacji i tworze­ niu map. Działanie tej biblioteki przedstawiono w punkcie 3.3.2.

100

R o z d z i a ł 3.

Projektoivanie sterotvane danymi i interakcje

oooooooo H c la t x a

H iszp a n ia

N ie m c y

A rgentyna

Urugw aj

B razylia

G hana

Japacin

R ysu n e k 3.2. Koła i etykiety utworzone na podstawie pliku CSV ze statystykam i z m istrzostwa świata z 2010 roku (wersja oryginalna — http://bl.ocks.org/emeeks/ f46481666fc896a30ea0) Q |

3.2. Interaktywne style i model DOM Interaktywne wizualizacje informacji są niezbędne, by umożliwić użytkownikom pracę z dużymi i złożonymi zbiorami danych. Kluczem do dodawania interaktywności w pro­ jektach opartych na bibliotece D3 jest wykorzystanie zdarzeń definiujących operacje podejmowane w odpowiedzi na działania użytkowników. Gdy dowiesz się już, jak zapewniać interaktywność elementów, przyjdzie czas na opanowanie przejść z biblio­ teki D3, umożliwiających modyfikowanie kolorów7lub rozmiarów elementów7w7ramach animacji. Następnie zobaczysz, jak można zmieniać pozycje elementów7w7modelu DOM, co pozwala poprawnie wyświetlać grafikę. W końcowej części rozdziału przyj­ rzysz się bliżej kolorom. Często stosuje się je do reagowania na działania użytkowników. 3.2.1. Zdarzenia

Na początek zaktualizujmy wizualizację przez dodanie przycisków zmieniających wygląd grafiki w7taki sposób, by przedstawiała nowe dane. Można ręcznie zapisać przyciski w7HTML-u i powiązać je z funkcjami, tak jak w7tradycyjnym podejściu do tworzenia stron internetowych. Inną możliwością jest wykorzystanie biblioteki D3 do wykry­ wania i analizow7ania cech danych oraz dynamicznego generowania przycisków. To rozwiązanie ma dodatkow7ą zaletę, ponieważ dostosowuje się do danych. Gdy7w7zbiorze danych pojawią się nowe atrybuty, funkcja automatycznie wygeneruje potrzebne przyciski.

3.2. Interaktywne style i model DOM var dataKeys = d3.keys(incomingData[0]).filter(function(el) { return el != "kraj" && el != "region":

}):

T w orzy p rz y c isk i n a p o d s ta w ie d a n y c h liczb o w y ch , d la te g o n a le ż y u w z g lę d n ić w s z y s tk ie a tr y b u ty o p ró c z n a z w y z e sp o łu i re g io n u ( s ą to łań c u c h y z n a k ó w )

d3.seiect("#controls" ) .seiectAl1( "button.teams ) .data(dataKeys).enter() .append("button") .on("click", buttonClick) <— R e je s tr u je o b s łu g ę k lik n ięcia k a ż d e g o .html(function(d) {return d:}): <— U ży w an a j e s t n a k ła d k a d a ją c a d o s tę p P a m ię ta j, ż e d a ta K e y s to ta b lic a n a z w a tr y b u tó w . D la te g o d o z n a c z a j e d n ą z ty c h n a z w i d o b r z e n a d a je s ię n a e t y k ie tę p rz y c isk u

p rz y c isk u . do danych w iązan y c h z przyciskiem w m o m en cie je g o tw o rzen ia

function buttonClick(datapoint) { <----var maxValue = d3.max(incomingData, function(d) { return parseFloat(d[datapoint]):

}):

F u n k cja w y w o ły w a n a p o d c z a s k lik n ięcia w y b r a n e g o p rz y c isk u . P o w ią z a n e d a n e s ą a u to m a ty c z n ie p r z e s y ła n e ja k o p ie rw s z y a r g u m e n t

var radiusScale = d3.scale.linearO .domain([ 0. maxValue ]).range([ 2. 20 ]): d 3 .seiectAl1("g.overal1G").seiect("ci rcle") .attrC’r", function(d) { return radiusScale(d[datapoint]):

O: }: W przykładzie używana jest instrukcja d3.keys, do której przekazywany jest jeden z obiektów z tablicy. Funkcja d3.keys zwraca tablicę z nazwami atrybutów. Tablica ta jest filtrowana w celu usunięcia atrybutów kraj i region, ponieważ zawierają one dane nieliczbowe, niedostosowane do działania funkcji buttonClick. Oczywiście w więk­ szych i bardziej złożonych systemach warto zastosować lepsze metody wskazywania atrybutów niż ręczne ich podawanie. Przekonasz się o tym później, gdy będziemy używać bardziej skomplikowanych zbiorów danych. W tym przypadku przefiltrowana tablica jest wiązana z selekcją po to, aby można było utworzyć przyciski dla wszystkich pozostałych atrybutów. Etykiety przycisków są tworzone na podstawie nazw atrybutów, co ilustruje rysunek 3.3. Funkcja .on jest nakładką na tradycyjne, związane z myszą zdarzenia HTML-a. Przyjmuje ona zdarzenia "click”, "mouseover", "mouseout" itd. Dostęp do tych samych zdarzeń można uzyskać także za pomocą instrukcji . a ttr, na przykład .a ttr( "oncl ick". "consol e . 1og(' cl ick ’)"). Zauważ jednak, że łańcuch znaków7jest przekazywany w taki sam sposób jak w tradycyjnym HTML-u. Użycie funkcji .on wynika z powndów7doty­ czących biblioteki D3 — powiązane dane są automatycznie przesyłane do funkcji i mają ten sam format co w anonimowych funkcjach wewnątrzwierszowych używanych do ustawiania stylów7i atrybutów. Przyciski można generować na podstawie atrybutów danych i dynamicznie mie­ rzyć dane za pomocą atrybutu powiązanego z przyciskiem. Pozwala to zmieniać wiel­ kość kół reprezentujących poszczególne zespoły, aby pokazywać, które drużyny7osią­ gnęły7najlepsze i najgorsze wyniki w7każdej kategorii. Ilustruje to lysunek 3.4.

101

102

R o z d z i a ł 3.

Projektoivanie sterotvane danymi i interakcje

oooooooo HolnxLa

H is zp a n »

N ie m c y

A igentyna

U iu g w a j

B r a zy l»

0 1 » 1»

Japcoia

wygr. | przegr | remisy | punkty | strz | strać | czyste konto j 2ółte j czerw

o

H o tu A a

o H is zp a n »

ooO°°°

N ie m c y

A igentyna

U ro g u a j

B ra zy ta

O t» na

Japcnia

wygr. | przegr | remisy | punkty | strz | strać | czyste konto j żółte | <

R ysu ne k 3 .3 . Przyciski dla każdego atrybutu liczbowego są dodawane do elem entu

controls pod elem entem < d iv> viz. Kliknięcie przycisku powoduje wyw ołanie fun kcji buttonClick (w ersja oryginalna — h ttp ://b l.o cks.o rg /e m e e ks/ 8 e c l3 f7 ffb b fld 3 c 4 b d 8 ) S

R y s u n e k 3 .4 . Początkowa w ersja fu n k c ji buttonC lick zm ienia w ielkość kół na podstaw ie w artości liczbow ych powiązanych a try b u tó w . Promień każdego koła odzw ierciedla tu liczbę bram ek straconych przez każdy zespół. Ta w artość je s t zapisana w a tryb u cie strać, każdego punktu danych

3.2. Interaktywne style i model DOM

103

Za pomocą funkcji .on() można powiązać zdarzenia z dowolnym obiektem. Dodajmy więc interaktywność do kół, tale by określały, które zespoły należą do tych samych regio­ nów organizacji FIFA: teamG.on( "mouseover", highlig htR e gio n) : fu n ctio n highlightR egion(d) { d3.s e le c tA l1( ”g .o ve ra l1G") . s e le c t( "c i r c le " ) . s t y l e C f i l l " , fu n c tio n (p ) { re tu rn p.region == d.region ? "red" : "gray":

O: }: Tym razem używana jest zmienna d, która często występuje w7prezentowanym w7internecie przykładowym kodzie opartym na bibliotece D3. Zmienną w7funkcji wewnątrzwierszowej zmieniono na p, aby uniknąć konfliktów7 nazw7. W kodzie występuje wewnątrzwierszowa instrukcja i f , porównująca region każdego elem entu z selekcji z regionem elementu, nad którym znajduje się kursor. Efekty7przedstawia rysunek 3 5.

O Holandia

o O O O Hiszpania Niemcy

Argentyna

o o o

Urugwaj Brazylia

Ghana

Japonia

R y s u n e k 3 .5 . Funkcja highlightRegion wybiera elem enty o te j sam ej w artości a tryb u tu region i ustawia ich kolor na czerwony. Kolor pozostałych elem entów je s t ustawiany na szary

Przywracanie początkowego koloiu kół w7reakcji na zdarzenie mouseout jest na tyle proste, że potrzebną funkcję można zadeklarować wewnątrzwierszowo w7funkcji .on: teamG.on("mouseout", f u n ctio n O { d3.s e le c tA l1( "g .o ve ra l1G") . s e le c t( "c i r c le " ) . s t y le ( " f i 11". "p in k " ) :

}): Aby zdefiniować niestandardową obsługę zdarzeń, zastosuj instrukcję d3.dispatch. Jej działanie przedstawiono w7rozdziale 9. 3.2.2. Przejścia graficzne

Jednym z wyzwań dla autorów wysoce interaktywnych i bogatych w7grafikę stron jest zadbanie o to, by zmiany graficzne odbywały się płynnie. Nagła zmiana wielkości lub kolom nie tylko wygląda nieelegancko, ale też utrudnia odbiorcom zrozumienie infor­ macji. W celu zwiększenia płynności rozwiązania stosowane są przejścia, przedstawione pokrótce w7końcowej części rozdziału 1. Przejścia są definiowane dla selekcji. Za pomocą instrukcji delay O można je tak ustawić, by następowały z określonym opóźnieniem. Ponadto przy użyciu instrukcji duration() okr eślany jest czas trwania przejścia. Przejście można łatwo dodać w7funkcji buttonClick. d3. sel ectAl 1( " g . overal 1G" ). sel ect ( "c i r c l e " ). tra n s i t io n ( ) . d u ra ti on(1000) . a t tr C ’ r " , fu n c tio n (p ) { re tu rn ra d iu s S c a le (d [d a ta p o in t]):

}):

104

R o z d z i a ł 3.

Projektoivanie sterotvane danymi i interakcje

Gdy teraz klikniesz przycisk, wielkość kola zmieni się w animowany sposób. Nie jest to tylko efekciarska sztuczka. Program przedstawia nowe dane, a zmiany ilustruje za pomocą animacji. Bez animacji użytkownik musiałby zapamiętywać, czy liczba remisów drużyny niemieckiej jest taka sama jak liczba jej zwycięstw. Dzięki animacji widać, że kolo reprezentujące Niemcy wyraźnie maleje lub rośnie, co ilustruje różnicę między dwoma punktami danych. Za pomocą funkcji .delayO można określić opóźnienie, z jakim ma rozpoczynać się przejście. Ta funkcja, podobnie jak .duration(), przyjmuje wartość w postaci liczby milisekund. Liczba ta określa opóźnienie, z jakim wprowadzane są zmiany. Niewielkie opóźnienie przy zgłaszaniu zdarzenia związanego z interakcją pomaga niekiedy popra­ wić czytelność wizualizacji, ponieważ daje użytkownikom czas na przejście od inte­ rakcji do czytania strony7. Długie opóźnienie jest jednak zwykle błędnie interpretowane jako skutek niskiej wydajności sieci. Z jakich jeszcze przyczyn warto opóźniać uruchamianie animacji? Opóźnienie może powodować skupienie uwagi na elementach wizualnych, gdy7po raz pierwszy pojawiają się na stronie. Migotanie dodawanych elementów informuje użytkowników o tym, że są to dynamiczne obiekty7, i zachęca do kliknięcia lub innej interakcji. Opóźnienie, podobnie jak czas trwania animacji, można ustawiać dynamicznie na pod­ stawie powiązanych danych. Opóźnienie można połączyć z innym mechanizmem — łańcuchem przejść. Polega to na użyciu kilku przejść, jednego po drugim, przy7czym każde z nich jest uruchamiane po zakończeniu poprzedniego. Jeśli w7funkcji overall '-►TeamVizO zmodyfikujesz w7 pokazany7 poniżej sposób kod, któiy dodaje elementy7 do elementów7, zobaczysz przejścia prowadzące do zrzutu widocznego na rysunku 3.6. teamG .append(" c i r c l e " ) . a t t r C r " . 0)

.transitionO .d e la y (fu n c tio n (d .i) {re tu rn i * 100}) .duration(500) .a t tr C ’r " . 40) .tra n s itio n O .duration(500) . a t t r O r " . 20):

R ysu n e k 3 .6 . Zrzut ilustrujący wizualizację w trakcie je j wyświetlania. Poszczególne koła rosną do przesadnej wielkości, po czym m a le ją do docelowego rozm iaru. Odbywa się to w kolejności występow ania państw w powiązanym zbiorze danych (w ersja oryginalna — h ttp ://b l.o c k s .o rg / e m e e ks/f2db 64 el3 1e e3 973 e6 8a ) [ J |

Ten kod pow7oduje pulsowanie, ponieważ tworzony7jest łańcuch z dwoma przejściami (drugie przejście uruchamiane jest po zakończeniu pieiwszego). Na początku rysow7ane

3.2. Interaktywne style i model DOM

są (niewidoczne) koła o promieniu 0. Dla każdego elementu ustawiane jest opóźnie­ nie równe pozycji w tablicy (i), która to pozycja mnożona jest przez 0,1 sekundy (100 milisekund). Po tym czasie rozpoczyna się przejście powodujące zwiększenie promienia kola do 40 pikseli. Drugie przejście zmniejsza promień do 20 pikseli. Efekt trudno jest zaprezentować na zrzucie — wszystkie koła po kolei pulsują. 3.2.3. Manipulowanie modelem DOM

Ponieważ elementy wizualne i przyciski znajdują się w7modelu DOM, ważne jest, by wiedzieć, jak uzyskać dostęp do nich i manipulować nimi za pomocą biblioteki D3 i wbudowanych funkcji JavaScriptu. Choć selekcje z biblioteki D3 dają bardzo duże możliwości, czasem programista chce użyć powiązanego z danymi elementu modelu DOM . Dla tych elementów7dostęp­ nych jest wiele wbudowanych funkcji JavaScriptu. Dostęp do elementu modelu DOM z selekcji można uzyskać na jeden z dwóch sposobów7. Oto one: 1. Użycie słowa th is w7funkcji wewnątrzwierszowej. 2. Użycie funkcji . nocieO.

Funkcje wewnątrzwierszowe zawsze mają dostęp do elementu modelu DOM, a także do punktu danych i jego pozycji w7tablicy z powiązanymi danymi. W takich funkcjach elem ent modelu DOM jest reprezentowany za pomocą słowa th is. Jego działanie pokazuje funkcja .eachO dla selekcji, wykonująca ten sam kod dla każdego elementu selekcji. Poniższy kod tworzy selekcję z kołami, a następnie używa funkcji .eachO do wyświetlenia zmiennych d, i oraz th is w konsoli. Pozwala to zobaczyć, czego dotyczą poszczególne wywołania tej funkcji (efekt powinien być taki jak na rysunku 3.7). d3.select("ci rcle").each(function(d.i ) { console.log(d)rconsole.log(i):console.log(this): }): > d3.select('circle").each(function(d,i) { console.log(d);console.log(i);console.log(this);});

*0bject {kraj: "HoLandia", region: "UEFA", uygr. : "6", przegr.: "0", remisy: "1"...} 0



R y s u n e k 3 . 7 . W id o c z n e w k o n so li w y n ik i b a d a n ia w y b r a n e g o e le m e n tu . N a jp ie rw w y ś w ie tla n y j e s t p u n k t d a n y c h z s e le k c ji, p o te m j e g o p o z y c ja w ta b lic y , a n a s t ę p n i e s a m e l e m e n t SVG

Warto omówić działanie tego kodu. Pieiwszą wyświetlaną zmienną, d, są dane powią­ zane z kołem. Te dane to obiekt JSON reprezentujący drużynę Holandii. Druga wyświe­ tlana zmienna, i, jest pozycją tego obiektu w7 tablicy używanej do tworzenia ele­ mentów. W naszym przykładzie jest to pozycja 0, co oznacza, że elem ent incoming '“►Data[0] jest obiektem JSON reprezentującym Holandię. Ostatnia zmienna wyświe­ tlana w7konsoli, this, jest elementem z modelu DOM. Dostęp do tego elementu DOM można uzyskać także za pomocą funkcji .nodeO selekcji: d3.select("ci rcle").node():

105

106

R o z d z i a ł 3.

Projektoivanie sterotvane danymi i interakcje

Przejście do elementu modelu DOM (zobacz rysunek 3.8) pozwala wykorzystać wbudowane funkcje JavaSciiptu w celu wykonania takich operacji jak pomiar długości elementu lub skopiowanie elementu. Jedna z najbardziej przydatnych (w kon­ tekście używania grafiki SVG) wbudowanych funkcji dla węzłów pozwala ponownie dodać element podrzędny. Pamiętaj, że SVG nie obsługuje warstw Z. To oznacza, że kolejność rysowania elementów jest zależna od porządku ich występowania w modelu DOM. Kolejność rysowania ma znaczenie, ponieważ obiekt}7graficzne używane w inter­ akcjach nie powinny znajdować się za obiektami, które nie są interaktywne. Aby zro­ zumieć, co to oznacza, zmodyfikuj w taki sposób funkcję wyróżniającą elementy, by powodowała zwiększenie etykiety po najechaniu kursorem myszy na element: function highlightRegion2(d.i) { d3.select(thi s).select("text").classedí"active". true).a ttr("y". 10): d3.selectAll("g.overallG").select("circle") .each(function(p.i ) { p.region = d.region ? d3.select(this).classed("active".true) : d3.select(this).classed("inactive".true): ł ^ }I

^

B y tu r n in g ... — U s ta w ie n ie k la s y " a c tiv e " d la e le m e n tu < g > , nad k tó r y m z n a jd u je s ię k u rs o r, p o z w a la w y k o rz y s ta ć re g u łę "g > te x t.a c tiv e " z a rk u s z a s ty ló w CSS, p o w o d u ją c ą z w ię k s z e n ie c z c io n k i e le m e n tó w te k s to w y c h w d a n y m e le m e n c ie < g >

> d 3 .select("circle").node();
}: Aby zobaczyć, jak działa ta skala, kliknij jeden z przycisków. Spow7oduje to standar­ dową zmianę wielkości kół, a dodatkow7o dla każdego zespołu ustawiony zostanie odpo­ wiedni kolor (zobacz rysunek 3.16).

O

o

Holandia Hiszpania

o Niemcy

o c

o Argentyna

Urugwaj

Brazylia

Ghana

Japonia

R ysu n e k 3.1 6. Zastosowanie skali category 10 z biblioteki D3 powoduje przypisanie rozróżnialnych kolorów do każdej kategorii (tu są nimi cztery regiony ze zbioru danych)

112

R o z d z i a ł 3.

Projektowanie sterotvane danymi i interakcje

SKALE KOLOROW DLA DANYCH LICZBOW YCH

Inną możliwość daje zastosowanie schematów kolorów opartych na pracach Cynthii Brewer, która odegrała ważną rolę w badaniach nad skutecznym wykorzystaniem kolorów w kartografii. Na szczęście na stronie http://cl3js.org dostępne są pliki colorbrewer.js i colorbrewer.css pozwalające używać takich schematów. Każda tablica z pliku colorbrewer.js odpowiada jednemu spośród schematów7kolorów7opracowanych przez Brewer i obejmuje określoną liczbę kolorów7. Na przykład skala z odcieniami czeiwonego wygląda tak: Reds :{ 3 :["ffe e 0 d 2 ' . Mffc9272" C"ffee5d9' ."ffcae91" ["#fee5d9” ."ffcae91" ["#fee5d9” ."ffc b b a l" ['•#fee5d9' ."ffc b b a l" 8 : [ " f f f f 5 f 0 " . "#fee0d2'' "ffb6a4a" ."fef3b2c" 9 : [ " f f f f 5 f 0 " . "#fee0d2'' "fef3b 2c‘ . "#cbl81d"

"#de2d26"] . "ffb 6 a 4 a "."fc b l8 1 d "]. ”#fb6a4a". 'fde2d26" " fa 5 0 fl5 " ]. "ffc 9 2 7 2 ". ’ffb6a4a" "fd e 2 d 2 6 "."fa 5 0 fl5 "]. "ffc 9 2 7 2 ". ’ffb6a4a" "fe f3 b 2 c ". "fc b l8 1 d ". "f99 00 0d"]. " ffc b b a l" . 'ffc9272" "fc b l8 1 d ". 'f99000d" " ffc b b a l" . 'ffc9272" "ffb6a4a” "fa 5 0 f15". f67000d"

} Tabhca ta zapewnia czytelne i rozróżnialne odcienie kolom czerwonego, które można przypisać do elementów7. Teraz ponownie przypiszesz kołom kolory, tym razem jed­ nak będą one zależne od wielkości figury. Potrzebny kod należy umieścić w7 funkcji buttonClick. Trzeba zastosować tu skalę z kwantyzacją, podobną do tej z rozdziału 2., poniew7aż skale z pliku colorbrewer.js są zaprojektow7ane dla danych liczbowych podzie­ lonych na kategorie. Oznacza to, że opracow7ano je z myślą o danych liczbowych, które jednak zostały podzielone na przedziały (na przykład w7spisie ludności dzieli się doro­ słych na grupy wiekow7e 18 - 35, 36 - 50, 51 - 65 i powyżej 65). fu n ctio n b u tto n C lick(d a ta p o in t) { < -------N o w a fu n k c ja b u tto n C lic k s o r tu je ko ła var maxValue = d3.max(incomingData. f u n c t io n a l) { w w iz u a liz a c ji w ra m a ch trz e c h k a te g o rii i łą c z y z n im i k o lo ry return p a rs e F lo a t(e l[d a ta p o in t]):

}): var colorQ uantize = d 3 .scale.quantizeO .domai n ([ 0 .maxValu e ]) . range(colorbrewer.Reds[3]): var radiusScale = d 3 .s c a le .lin e a r() .domain([0.maxValue]).ra n g e ([2 .2 0 ]): d3.sel e c tA l1( "g .overal IG " ).s e le c t( "c i r c le " ) . tra n s i t i on( ) . d u ra ti on( 1000) . s t y l e C ' f i l l ” . fu n c tio n (p ) { Skala z k w a n ty z a c ją d z ie li da ne liczb o w e na ty le re tu rn c o lo rQ u a n tiz e (p [d a ta p o in t]): k a te g o r ii, ile o b e jm u je ic h p r z e c iw d z ie d z in a . P o n ie w a ż c o lo r b r e w e r .R e d s [3 ] to ta b lic a } ) . a t t r ( " r ” . fu n ctio n (p ) { o trz e c h w a rto ś c ia c h , z b ió r da n ych je s t d z ie lo n y re tu rn ra d iu s S c a le (p [d a ta p o in t]):

}):

na tr z y o d rę b n e k a te g o rie . K a żd e j z n ic h p rz y p is y w a n y je s t in n y o d c ie ń c z e rw o n e g o

Jedną z zalet stosowania pliku colorbrewer.js i skali z dynamiczną kwantyzacją jest to, że po zastąpieniu tablicy colorbrewer.Reds[3] (zobacz rysunek 3.17) tablicą colorbrewer. '“►Reds[5] zbiór danych liczbowych będzie reprezentowany za pomocą pięciu kolorów7 zamiast trzech.

3.3. Wstępnie generowane treści

0 ^ 0 0 0 0 Holandia

Hiszpania

Niemcy

Argentyna

Urugwaj

Brazylia

113

O o Ghana

Japonia

R ysu ne k 3.17. Automatyczna kwantyzacja połączona z trzyelementową skalą dla koloru czerwonego z biblioteki colorbrewer.js pozwala uzyskać rozróżnialne wizualnie kategorie w odcieniach czerwieni (wersja oryginalna — http://bl.ocks.org/em eeks/ea5760799fce0b3a2e7c) fu n ctio n b u tto n C lick(d a ta p o in t) { var maxValue = d3.max(incomingData, fu n c tio n (e l) { return p a rse F lo a t(e l[d a ta p o in t ] ) :

}): var colorQ uantize = d3.scale.quantizeO .domai n ([D .maxValu e ]) . range(colorbrew er.Reds[3]): var radiusScale = d3.s c a le .lin e a rO .domai n ([O .maxValu e ]) . range([2 .2 0 ]): d3.s e le c tA l1( ”g .o ve ra l1G") . s e le c t( "c i r c le " ) . tra n s i t i on() .d u ra tio n ( 1 0 0 0 ) . s t y le ( " fiir . fu n c tio n (p ) { re tu rn colorQ uantize(p[datapoint ] ) : } ) . a t t r ( ” r " . fu n c tio n (p ) { re tu rn radiusS cale(p[datapoint ] ) :

}): }: Kolor ma znaczenie i może wyglądać dziwnie w intemecie. Na przykład większość skal biblioteki colorbrewer.js uwzględnia ważny aspekt dostępności stron, jakim jest zapew­ nienie ich czytelności dla osób nierozróżniających kolorów. Choć dobór i określanie kolorów stanowią skomplikowane zadania, różni mądrzy ludzie od dawna zajmują się tymi zagadnieniami, a ich dokonania wykorzystano w bibliotece D3.

3.3. Wstępnie generowane treści Tworzenie wszystkich elementów7HTML-a za pomocą składni biblioteki D3 oraz zagnieżdżonych selekcji i dołączania elementów7nie jest ani wygodne, ani rozsądne. Co ważniejsze, istnieje cały7ekosystem narzędzi do generowania kodu w HTML-u, gra­ fiki SVG i statycznych rysunków. Nie należy7z nich rezygnować ty7lko dlatego, że do ogólnych manipulacji modelem DOM i wizualizowania informacji używana jest biblio­ teka D3. Na szczęście można łatwo wczytywać zewnętrznie wygenerowane zasoby7 (na przykład lysunki, fragmenty kodu w7HTML-u lub wstępnie wygenerowaną grafikę SVG) i wiązać je z elementami graficznymi. 3.3.1. Rysunki

W rozdziale 1. wspomniano, że pliki GIF, mimo ponownego wzrostu ich popularności, nie są przy7datne w7 bogaty7ch, interaktywnych witrynach. Nie oznacza to jednak, że należy7całkowicie zrezygnować z rysunków. Zobaczysz, że dodanie obrazków7do wizu­ alizacji danych pozwala znacznie je ulepszy7ć. W SVG do dodawania rysunków służy7 element , a źródło grafiki definiuje się za pomocą atrybutu x l i n k : h r e f (jeśli grafika znajduje się w7lokalnej strukturze katalogów7).

114

R o z d z i a ł 3.

Projektoivanie sterotvane danymi i interakcje

W przykładowym kodzie w katalogu images znajdują się pliki PNG z flagami państw. Aby dodać te plild do wizualizacji, wybierz element}7, z którymi są już powiązane dane, i dołącz rysunki SVG: d 3 .s e le c tA ll("g .o v e ra lIG ” ).in s e rt("im a g e ” . " te x t" ) .a ttr C ’x lin k : h r e f " . fu n c tio n (d ) { re tu rn "images/" + d .k ra j + ".png":

}) .a ttr ( " w id th " . " 4 5 p x " ) .a ttr ( “ h e ig h t", “ 2 0 p x ").a ttrC ’x” . ” -22") .a ttr C 'y " . "-1 0 "):

Aby rysunki były poprawnie wyświetlane, należ}7zastosować instrukcję in s e r t ( ) zamiast append O, ponieważ w ten sposób można nakazać bibliotece D3 wstawienie grafiki przed elementami tekstowymi. Dzięki temu etykiety są dodawane za nowymi rysun­ kami. Nazwy plików graficznych są takie same jak nazwy krajów w danych. Dlatego można zastosować funkcję wewnątrzwierszową, by pobierała nazwę kraju z danych i łączyła ją z łańcuchami znaków określającymi katalog i rozszerzenie pliku. Ponadto trzeba zdefiniować wysokość i szerokość rysunków, ponieważ grafiki SVG domyślnie nie mają takich ustawień. Jeśli tego nie zrobisz, flagi nie będą widoczne. Należ}7też ręcznie wyśrodkować grafiki SVG. W naszym przykładzie atrybutom x i y przypisy­ wana jest wartość równa połowie wysokości i szerokości ze znakiem minus. Dzięki temu rysunki znajdują się pośrodku kół, co pokazuje rysunek 3.18.

Holandia

Hiszpania

Niemcy

Q@(gxg>®

Argentyna Urugwaj

Brazylia

Ghana

Japonia

R ysu n e k 3 .1 8 . Graficzna reprezentacja każdego zespołu obejm uje teraz m ałą flagę w formacie PNG p o bra ną z W ikip edii i w czyta n ą za pom ocą elem e ntu SVG < im a g e > (w e rsja oryg in aln a — h ttp://b l.ocks.org /e m eeks/b 322 7fcle ab2 25 5e 9e6 7) U

Zmianę wielkości rysunków7można powiązać ze zdarzeniami przycisków, jednak grafika rastrowa nie nadaje się do modyfikowania rozmiaru, dlatego lepiej stosować ją w7stałej wielkości. Pojęcie z obszaru wizualizowania informacji — zbędne ozdobniki (ang. chartjunk) Skoro już uczysz się dodawać rysunki i ikony do dowolnych elementów, zapamiętaj, że to, iż możesz coś zrobić, nie oznacza jeszcze, że powinieneś wykorzystywać tę możliwość. W tworzeniu wizualizacji informacji podstawową zasadą estetyczną jest niezaśmiecanie wykresów i interfejsów zbędnymi ozdobnikami, takimi jak niepotrzebne ikony, dekora­ cje lub skeumorficzne panele. Pamiętaj, że siła leży w prostocie. Pojęcie chartjunk zostało wymyślone przez Tufte'a i oznacza wszelkie uniwersalne i bezu­ żyteczne ikony często spotykane w prezentacjach przygotowywanych w PowerPoincie. Choć ikony i rysunki w wielu sytuacjach są przydatne i wartościowe (dlatego nie należy z nich rezygnować tylko dlatego, by zapewnić stronie prosty wygląd), zawsze trzeba dbać o to, aby graficzna prezentacja danych była maksymalnie przejrzysta.

3.3. Wstępnie generowane treści

3.3.2. Fragmenty kodu w HTML-u

W tym rozdziale utworzyłeś standardowe elementy modelu DOM — przyciski — w wyniku powiązania danych za pomocą biblioteki D3. Jeśli chcesz, możesz wyko­ rzystać stosowany w tej bibliotece wzorzec wybierania i dodawania elementów, aby w locie tworzyć złożone obiekt}7HTML-a (na przykład formularze i tabele). Istnieją jednak lepsze narzędzia do pisania kodu w HTML-u. Prawdopodobnie będziesz współ­ pracował z projektantami i innymi programistami, którzy będą chcieli używać ty ch narzędzi i dodawać wygenerowane komponenty7w HTML-u do aplikacji. Utwórz na przykład modalne okno dialogowe, w którym można umieszczać wartości powiązane z zespołami. Załóżmy, że okno ma wyświetlać statystyki dotyczące wybranej drużyny. Jednym z najlepszych rozwiązań jest utworzenie okna dialogowego wyświetlanego w reakcji na kliknięcie zespołu. Modalne okno dialogowe to inna nazwa na „pływający” obszar, wyświetlany zwykle tylko po kliknięciu określonego elementu. W odrębnym pliku (pokazanym na listingu 3.4) można zapisać kod w HTML-u potrzebny7dla tabeli. L is tin g 3.<

P lik m o d a l.h tm l