Interaktywna wizualizacja danych [PDF]

Zitiervorschau

---

Tytuł oryginału: Interactive Data Visualization for the Web Tłumaczenie: Julia Szajkowska ISBN: 978-83-246-8175-4 © 2014 Helion S.A. Authorized Polish translation of the English edition of Interactive Data Visualization for the Web, ISBN 9781449339739 © 2013 Scott Murray. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: [email protected] WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/inwida_ebook Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/inwida.zip Printed in Poland.  Poleć książkę na Facebook.com

 Księgarnia internetowa

 Kup w wersji papierowej

 Lubię to! » Nasza społeczność

 Oceń książkę

Spis treści

Przedmowa ..............................................................................................................................9 1. Wprowadzenie ............................................................................................................. 13 Dlaczego warto przedstawiać dane graficznie? Dlaczego programować? Po co nam interaktywność? Dlaczego w internecie? O czym jest ta książka? Kim jesteś? Czego nie znajdziesz w tej książce? Kod w przykładach Dziękuję!

13 14 14 15 16 16 17 17 18

2. Wprowadzenie do D3 . ................................................................................................. 19 Funkcje biblioteki Funkcje, których nie znajdziesz w bibliotece Początki i tło historyczne Inne możliwości Wykresy od ręki Grafy Odwzorowania kartograficzne Prawie od zera W trzech wymiarach Narzędzia przygotowane za pomocą biblioteki D3

19 20 21 22 23 24 24 25 25 26

3. Podstawy wykorzystywanych technologii ..................................................................27 Kod HTML Treść i struktura Budowanie struktury znacznikami Najczęściej stosowane znaczniki

29 30 31 31

3

Atrybuty Klasy i identyfikatory Komentarze DOM Narzędzia programisty Renderowanie i model pudełkowy Kaskadowe arkusze stylów CSS Selektory Właściwości i wartości Komentarze Wprowadzanie stylów na stronę Dziedziczenie, kaskadowość i szczegółowość JavaScript Witaj, konsolo! Zmienne Inne typy zmiennych Tablice Obiekty Obiekty i tablice Operatory matematyczne Operatory porównania Instrukcje sterujące Funkcje Komentarze Wprowadzanie skryptów na stronę Sposoby na JavaScript SVG Znacznik SVG Proste kształty Nadawanie stylów znacznika SVG Warstwy i kolejność rysowania Przezroczystość O kompatybilności

33 34 34 35 35 38 39 40 41 41 41 43 44 45 45 46 46 47 48 50 50 51 53 54 54 54 58 59 59 61 63 63 65

4. Przygotowania do pracy . .............................................................................................67 Pobieranie biblioteki D3 Odwoływanie się do biblioteki D3 Przygotowanie serwera stron WWW Terminal z interpreterem języka Python MAMP, WAMP i LAMP W drogę

4



Spis treści

67 68 69 69 70 70

5. Dane ...............................................................................................................................71 Tworzenie znaczników Łączenie metod Po jednym odwołaniu Przekazywanie Bez łączenia Dowiązywanie danych W więzi Dane Proszę dokonać wyboru Powiązany i określony Używanie danych Funkcja — rzecz potrzebna Dane chcą być gdzieś zapisane Więcej niż tekst

71 73 74 75 75 75 76 76 79 80 82 83 84 85

6. Graficzne przedstawianie danych ...............................................................................87 Rysowanie za pomocą znaczników div Określanie atrybutów Kilka słów o klasach Wróćmy do słupków Nadawanie stylów Potężna metoda data() Dane losowe Rysowanie za pomocą znaczników SVG Tworzenie znaczników SVG Kształty definiowane danymi Jakie śliczne kolorki! Przygotowywanie wykresu słupkowego Stary wykres Nowy wykres Kolory Etykiety Przygotowywanie wykresu punktowego Dane Wykres punktowy Rozmiar Etykiety Dalsze działania

87 88 89 89 90 91 92 94 95 96 97 98 98 99 104 106 108 108 108 110 111 112

7. Skalowanie ..................................................................................................................113 Jabłka i piksele Dziedziny i zbiory wartości Normalizacja

113 114 115 Spis treści



5

Przygotowywanie funkcji skalującej Skalowanie wykresu punktowego Funkcje d3.min() i d3.max() Skalowanie dynamiczne Stosowanie wartości przeskalowanych Poprawianie wykresu Inne rozwiązania Inne funkcje skalujące

115 116 116 118 118 119 122 123

8. Osie .............................................................................................................................. 125 Poznaj osie Metody przygotowywania osi Porządki Pod kreską A dlaczego nie Y? Ostateczny szlif Formatowanie opisów osi

125 126 127 130 131 132 133

9. Aktualizacje, przejścia i ruch . .................................................................................... 135 Przeróbki w wykresie słupkowym 135 Jak działają skale porządkowe? 136 W zbiorze wartości tylko grupy Referencja do skali porządkowej Inne aktualizacje Aktualizowanie danych Interakcja za pomocą funkcji nasłuchujących zdarzeń Zmienianie danych Aktualizowanie elementów graficznych Przejścia Funkcja duration(), czyli ile to wszystko potrwa? Ostrożnie, osiadamy! Bez opóźnień, proszę! Dane losowe Aktualizowanie funkcji skalujących Aktualizowanie osi Każde przejście ma swój początek i koniec Inne rodzaje aktualizacji Dodawanie wartości (i znaczników) Usuwanie wartości (i znaczników) Łączenie danych za pomocą kluczy Dodaj i usuń, czyli wszystko naraz Powtórzenie

6



Spis treści

138 139 139 139 140 141 141 144 145 146 147 149 150 153 155 161 162 166 169 174 175

10. Interaktywność ............................................................................................................177 Dowiązywanie funkcji nasłuchujących zdarzeń Poznajmy zachowania Najedź kursorem, żeby wyróżnić Grupowanie znaczników SVG Sortowanie kliknięciem Podpowiedzi Domyślne podpowiedzi przeglądarki Podpowiedzi wyświetlane w znacznikach SVG Podpowiedzi wyświetlane w znacznikach div Urządzenia dotykowe Pora ruszać dalej

177 178 179 182 184 187 188 189 191 193 193

11. Układy wykresów ....................................................................................................... 195 Układ kołowy Układ skumulowany Układ siłowy

196 200 203

12. Mapy geograficzne .....................................................................................................209 Poznaj GeoJSON Ścieżki Odwzorowania Kartogram Dodawanie punktów Pobieranie danych geograficznych i ich parsowanie Znajdź pliki kształtów Wybierz rozdzielczość Upraszczanie kształtów Konwersja do GeoJSON

209 211 212 214 217 221 221 221 223 223

13. Eksportowanie . ...........................................................................................................227 Mapy bitowe Plik PDF SVG

227 228 229

A Dalsza nauka . ..............................................................................................................233 Skorowidz . .............................................................................................................................237

Spis treści



7

8



Spis treści

Przedmowa

Niniejsza książka zawiera informacje o programowaniu wizualizacji danych i adresowana jest do osób niebędących programistami. Jeśli pracujesz jako grafik albo projektant graficzny, znasz się na grafice, lecz nie masz doświadczenia w dziedzinie analizy danych i programowania, to ta książka powstała z myślą o Tobie. Jeżeli jesteś dziennikarzem lub badaczem przetwarzającym duże ilości danych, ale brak Ci wiedzy na temat tworzenia grafiki i pisania kodu, także zajrzyj do tej książki. Niniejsza lektura stanowi wprowadzenie do D3, czyli biblioteki bazującej na JavaScripcie, umożliwiającej przesyłanie danych na stronę internetową i generowanie na ich podstawie wizualizacji. Pisząc tę książkę, założyłem, że nie masz żadnego lub prawie żadnego doświadczenia w dziedzinie programowania. Nie wykluczam też, że zdarzyło Ci się już kiedyś programować, ale dopiero zagadnienia związane z biblioteką D3 i wizualizowaniem danych wprowadzą Cię w świat JavaScriptu, który nie cieszy się powszechnie zbyt pochlebną opinią. Cóż, JavaScript bywa trochę dziwny, ale nie jest aż tak zły, jak ludzie utrzymują, więc się nie przejmuj — wszystko będzie dobrze. Proszę, usiądź wygodnie i oddaj się lekturze. Pierwowzorem tej książki jest seria poradników, które zamieściłem na swojej stronie internetowej (http://alignedleft.com/tutorials/d3/). W czasie, gdy pisałem poradniki, czyli w styczniu 2012 roku, trudno było znaleźć informacje o D3 podane w sposób przystępny dla osób nieobeznanych z tematem. Bardzo szybko stronę zaczęły odwiedzać setki, a później tysiące osób dziennie. Był to dowód błyskawicznie rosnącego zainteresowania internautów zagadnieniami związanymi z wizualizacją danych i samą biblioteką D3. Jeśli wcześniej udało Ci się trafić na któryś z moich poradników, część fragmentów tej książki wyda Ci się znajoma, niemniej znajdziesz w niej również mnóstwo nowych informacji, takich jak liczne dodatkowe przykłady wykorzystania wiedzy o D3, cenne wskazówki, a także przestrogi, czego unikać podczas pracy z D3. Ponadto książka zawiera o 78 procent więcej kiepskich żartów. Zagadnienie wizualizowania danych jest interdyscyplinarną dziedziną wiedzy i choćby dlatego nie sposób omówić w jednej książce wszystkich potrzebnych do zajmowania się nim umiejętności. Na szczęście tematyka wizualizowania danych bardzo szybko zyskuje na popularności, w wyniku czego na rynku wydawniczym pojawiło się wiele nowych pozycji, po które możesz sięgnąć i które będą doskonałym uzupełnieniem informacji zawartych w mojej książce.

9

Pozycje zawierające omówienie etapu projektowania wizualizacji:  Designing Data Visualizations: Intentional Communication from Data to Display, Noah Iliinsky

i Julie Steele, O’Reilly Media, 2011.

 Data Visualization: A Successful Design Process, Andy Kirk, Packt Publishing, 2012.

Pozycje, w których opisano podstawy projektowania i techniki wykonywania wizualizacji:  The Functional Art: An Introduction to Information Graphics and Visualization, Alberto Cairo,

New Riders, 2012.  Information Dashboard Design: The Effective Visual Communication of Data, Stephen Few,

O’Reilly Media, 2006. Książki zawierające omówienie praktycznej strony pracy z danymi:  Bad Data Handbook: Mapping the World of Data Problems, Q. Ethan McCallum, O’Reilly Media,

2012.  Data Analysis with Open Source Tools: A Hands-On Guide for Programmers and Data Scientists,

Philipp K. Janert, O’Reilly Media, 2010.  Python for Data Analysis: Agile Tools for Real World Data, Wes McKinney, O’Reilly Media, 2012.

Konwencja typograficzna przyjęta w tej książce W niniejszej książce przyjęto poniżej opisaną konwencję typograficzną. Kursywą oznaczono nowe terminy, adresy stron internetowych, adresy mailowe, nazwy plików oraz ich rozszerzenia. Czcionka o stałej szerokości została użyta do zapisu listingów oraz słów w tekście od-

noszących się do programów, w tym nazw zmiennych i funkcji, baz danych, typów danych, zmiennych środowiskowych, deklaracji i słów kluczowych. Pogrubioną czcionką o stałej szerokości wyróżniono polecenia oraz fragmenty tekstu,

które powinien w niezmienionej formie wpisywać w odpowiednie miejsca użytkownik opisanego w tej książce oprogramowania. Pochylona czcionka o stałej szerokości posłużyła do zaznaczenia przykładowych wartości,

które należy zastąpić wartościami podanymi przez użytkownika aplikacji lub wynikającymi z kontekstu użytkowania aplikacji. Tą ikoną oznaczone zostały wskazówki, sugestie i ogólne uwagi.

Tą ikoną oznaczono ostrzeżenia

10



Przedmowa

Korzystanie z przykładowego kodu Niniejsza książka powstała po to, by ułatwić Ci wykonywanie konkretnej pracy. Zasadniczo masz prawo korzystać ze wszystkich fragmentów kodu, jakie pojawiają się w tej książce, by przygotować własne aplikacje lub ich dokumentację. Jeżeli nie zamierzasz używać znacznych fragmentów przykładowych kodów źródłowych, nie musisz się starać o pisemną zgodę. Wolno Ci, na przykład, napisać program, w którym wykorzystasz nieliczne fragmenty prezentowanych tu aplikacji — to nie wymaga specjalnego zezwolenia. Natomiast sprzedawanie i rozpowszechnianie płyt CD z przykładami wchodzącymi w skład publikacji wydawnictwa O’Reilly wymaga już osobnej zgody. Cytowanie fragmentów niniejszej książki podczas odpowiadania na pytania czy cytowanie przykładowego kodu również nie wymaga uprzedniego uzyskania naszej zgody. Jeśli zaś zamierzasz zamieścić znaczne fragmenty przykładowego kodu źródłowego w dokumentacji sporządzanej do stworzonego przez siebie oprogramowania komercyjnego, powinieneś się z nami skontaktować i uzyskać zgodę na takie działania. Powołanie się na źródło cytowania będzie niewątpliwie mile widziane, choć nie jest bezwzględnie konieczne. Gdy jednak uznasz, że chcesz się podzielić ze światem informacjami dotyczącymi pochodzenia przedstawianej wiedzy, pamiętaj, by podać tytuł książki, nazwisko jej autora, wydawcę i numer ISBN. Jeśli podczas realizacji projektu, pisania publikacji itp. korzystałeś z wiedzy zawartej w niniejszej książce, będziemy wdzięczni za umieszczenie stosownej informacji w Twojej pracy lub w dokumentacji do oprogramowania, mimo że zamieszczanie takich przypisów nie jest przez nas wymagane. Typowy przypis źródłowy zazwyczaj zawiera następujące informacje: tytuł publikacji źródłowej, imię i nazwisko jej autora, nazwę wydawnictwa oraz numer ISBN. Na przykład: Interaktywna wizualizacja danych, Scott Murray, Helion, ISBN: 978-83-246-8172-3.

Podziękowania Choć na okładce tej książki widnieje moje imię i nazwisko, w głębi duszy czuję, że pisząc ją, zaledwie zebrałem i przelałem na papier wiedzę setek innych, błyskotliwych umysłów. W pierwszej kolejności muszę podziękować swojej żonie Norze, której wielką zasługą jest to, że jako pierwsza powiedziała: „Hej! Powinieneś z tych swoich poradników internetowych zrobić książkę”. Bez wsparcia i zachęt z jej strony nigdy nie wziąłbym się za ten projekt. Podziękowania należą się także Rostenowi Woo (http://wehavenoart.net), z którym współpracowałem, tworząc swój pierwszy projekt w D3 — za pomoc i ostatecznie skłonienie mnie do poznawania zupełnie nowego narzędzia pracy. Dziękuję Joemu Golike’owi (http://golike.com/) za pomoc przy sprawdzaniu kodu pierwszych projektów w D3, nad którymi pracowałem w tamtym czasie, i przy usuwaniu z niego błędów, a także Jenowi Lowe’owi (http://www.datatelling.com/) oraz Sha Hwangowi (http://postarchitectural.com/) za ich opinie i komentarze na temat pierwszych przygotowanych przeze mnie poradników. Jestem niewysłowienie wdzięczny Caseyowi Reasowi (http://reas.com), Danowi Shiffmanowi (http://www.shiffman.net), Joshui Noble’owi (http://thefactoryfactory.com) i Noah Iliinsky’emu (http://complexdiagrams.com) nie tylko za rady dotyczące procesu tworzenia książki, lecz również za wielką wiedzę na temat sztuk plastycznych, projektowania, kodu źródłowego i danych. Ich praca znacząco wpłynęła na to, czym i jak się zajmuję. Przedmowa



11

Idąc tym tropem, muszę podziękować także Janowi Kubasiewiczowi z MassArt’s Dynamic Media Institute (http://www.dynamicmediainstitute.org/). W 2007 roku Jan zachęcił mnie, abym przyjrzał się czemuś o nazwie Processing (http://processing.org/), co ostatecznie sprowadziło mnie na zupełnie nową drogę rozwoju zawodowego i wprowadziło w świat sztuki wizualizacji bazującej na kodzie programistycznym i graficznego przedstawiania danych, doprowadzając w efekcie do powstania tej książki. Prawdziwą przyjemnością była dla mnie wspólna praca z redaktor Meghan Blanchette oraz całym zespołem z wydawnictwa O’Reilly odpowiedzialnym za wydanie niniejszego poradnika. Dziękuję Meghan i jej zespołowi za przeprowadzenie całego procesu tworzenia książki, który zaczął się od luźnego pomysłu, a w rezultacie dał prawdziwy, fizycznie istniejący plik kartek zadrukowanych słowami i dziwacznymi wykresami. Szczególne podziękowania należą się Mike’owi Bostockowi (http://bost.ocks.org/mike/), Jen Lowe (http://www.datatelling.com/), Annie Powell-Smith (http://anna.ps/) oraz Daisy Vincent (http:// codenoobcentral.tumblr.com/) za to, że zgodzili się ocenić książkę od strony technicznej i udzielili mi niezwykle cennych uwag. Dzięki nim produkt końcowy jest dużo lepszy od jego pierwotnej wersji. Jeśli więc czytając niniejszy poradnik, natkniesz się na błąd lub niejasny kawałek kodu, wiedz, że wymienieni wyżej ludzie zapewne błagali mnie o przepisanie tego niefortunnego fragmentu, a ja się uparłem, by pozostał on w niezmienionej formie. Mike zasłużył na dodatkowe podziękowania przede wszystkim za rozwijanie technologii D3. Bez tego zgrabnie napisanego oprogramowania społeczność zajmująca się praktycznym wizualizowaniem danych nie przypominałaby tej dynamicznie żyjącej, entuzjastycznie nastawionej do pracy, przestrzegającej określonych standardów wspólnoty, z jaką mamy do czynienia dzisiaj. Skoro już napisałem o społeczności D3, muszę dodać, że wiele innych osób — między innymi Jérôme Cukier (http://wwwjeromecukier.net), Lynn Cherny (http://www.ghostweather.com), Jason Davies (http://www.jasondavies.com), Jeff Heer (http://hci.stanford.edu/jheer/), Santiago Ortiz (http://moebio.com), Kim Rees (http://periscopic.com), Moritz Stefaner (http://moritz.stefaner.eu), Jan Willem Tulp (http://tulpinteractive.com) oraz wszyscy ci, których wymienić zapomniałem — rozwijających D3 i związane z nią technologie przyczyniło się bezpośrednio do ukształtowania mojego pojmowania tych zagadnień, przez co wpłynęło na proces powstawania tej książki. Dziękuję Wam za wsparcie. Jestem szczęściarzem, ponieważ miałem okazję współpracować z tak wieloma utalentowanymi ludźmi.

12



Przedmowa

ROZDZIAŁ 1.

Wprowadzenie

Dlaczego warto przedstawiać dane graficznie? Wiek informacji, jak bywają określane czasy, w których przyszło nam żyć, coraz częściej zdaje się wiekiem nadmiaru informacji. Nadmierne ilości danych przytłaczają, a informacje zawarte w liczbach zaczynają mieć sens dopiero wówczas, gdy zastosujemy odpowiednie metody opracowywania wyników. Na szczęście człowiek jest istotą o mocno rozwiniętym zmyśle wzroku. Wprawdzie tylko nieliczni potrafią dostrzec wzory kryjące się w kolumnach liczb, ale nawet małe dzieci umieją właściwie odczytać wykresy słupkowe, czyli odebrać informacje skryte w liczbach, o ile dane te zostaną przedstawione graficznie. Dlatego właśnie opanowanie umiejętności przedstawiania danych w postaci, którą szybko da się ogarnąć wzrokiem, jest takie ważne. Odpowiednio przygotowana graficzna reprezentacja wyników to najszybszy sposób przekazania ich innym. Oczywiście grafika, podobnie jak słowa, może mamić, wprowadzać w błąd lub wypaczać prawdę, ale jeśli dane przetwarzane są uczciwie, z zachowaniem wszystkich obowiązujących podczas tego procesu zasad, graficzne ich przedstawienie może ukazać świat z zupełnie nowej perspektywy. Dzięki wizualizacji danych odnajdujemy w najmniej oczekiwanych miejscach ukryte wzorce albo w wydawałoby się niepowiązanych liczbach trafiamy na ściśle zdefiniowany trend. Dobrze przygotowane dane są równie fascynujące co pasjonująca opowieść. Mówiąc bardziej dosłownie: wizualizowanie to proces polegający na odwzorowywaniu danych w postaci graficznej. Z czasem doczekaliśmy się rozwinięcia solidnego zestawu reguł pozwalających poprawnie interpretować zbierane w trakcie badań informacje i przedstawiać odpowiadające im wartości liczbowe w postaci specjalnych rysunków. Przykładowo zwykły wykres słupkowy widoczny na rysunku 1.1 powstaje według banalnie prostego przepisu: wyższe słupki są odwzorowaniem większych wartości.

Rysunek 1.1. Dane liczbowe przedstawione w postaci graficznej 13

Bardziej złożone wizualizacje są odwzorowaniem zestawów danych o znacznie bardziej złożonej strukturze niż zestaw liczb przedstawiony na rysunku 1.1. Do ich właściwego przeanalizowania używa się też zdecydowanie bardziej skomplikowanych zestawów reguł.

Dlaczego programować? Graficzne odwzorowywanie danych na papierze, choć wysoce satysfakcjonujące, przede wszystkim jest powolne i uciążliwe. Dlatego takie zadania powierzamy najczęściej maszynom liczącym, co znacznie przyśpiesza cały proces. Zaoszczędzony w ten sposób czas pozwala przetwarzać znacznie większe ilości danych — typowe zestawy liczą sobie dziś tysiące, a czasami nawet miliony pozycji. To, co dawniej musiałoby trwać latami, dziś odbywa się w okamgnieniu. Nie wolno też zapominać, że rozwój technologiczny dał nam jeszcze jedno narzędzie, którego wartości nie sposób przecenić: dziś możemy niemal od ręki zastosować do danego zestawu danych odmienny rodzaj odwzorowania, zmieniając tym samym natychmiast zestaw reguł, według których analizowane są wartości. Samo odwzorowywanie również odbywa się w jednej chwili. Powstała w ten sposób pętla napisz – narysuj – oceń ma kluczowe znaczenie w iteracyjnym procesie usprawniania projektu. Zestawy reguł odwzorowywania funkcjonują pod wspólną nazwą systemów projektowania. Człowiek nie wytwarza już grafiki będącej ostatecznym przedstawieniem danych — to zadanie powierzamy dziś komputerom. Nasza rola sprowadza się do określenia celów systemu projektowania oraz obmyślenia i spisania reguł, jakim ma on podlegać w chwili wcielania w życie przez odpowiednie oprogramowanie. Niestety programy komputerowe (a w zasadzie wszystkie narzędzia obliczeniowe) zupełnie nie rozumieją, o co dokładnie chodzi ludziom. (Chociaż, prawdę mówiąc, wielu ludzi również ma problemy, by sprostać temu niełatwemu zadaniu). Ponieważ komputery działają w systemie dwójkowym, w ich świecie wszystko jest czarno-białe: włączone lub wyłączone, tak lub nie, tak lub siak, wte lub wewte. My, ludzie, jesteśmy mniej zasadniczy, znacznie bardziej subtelni z natury, a komputery wcale nie chcą wychodzić nam naprzeciw — to my musimy nagiąć się do ich reguł. Tu właśnie należy upatrywać źródła wysiłków, które podejmujemy niezmiennie, by opanowywać kolejne języki programowania. Tylko w ten sposób — za pomocą mocno ograniczonej i wybitnie ścisłej składni — możemy przekazać swoje intencje maszynom. A mimo to ciągle podejmujemy trud programowania. Wspomniane niedogodności są niczym w porównaniu z korzyściami, jakie dają możliwości graficzne dzisiejszych komputerów. Dzięki odwzorowywaniu danych mamy szansę ujrzeć to, czego nikt przed nami nie widział. Przypomina to uwalnianie graficznego dżina z butelki enigmatycznych liczb.

Po co nam interaktywność? Statyczne wizualizacje pozwalają pokazać jedynie wybrane widoki na zgromadzone dane, zatem żeby ująć problem z szerszej perspektywy, często trzeba się posłużyć wieloma statycznymi obrazami tego samego zbioru danych. Do tego dochodzi ograniczenie liczby wymiarów, w których możemy wizualizować dane, bo statyczny wykres pozwoli ująć tylko wartości znajdujące się na powierzchni w danej chwili. Przedstawianie na klasycznych wykresach wzorców ukrytych w wielowymiarowych zestawach danych to prawdziwe wyzwanie.

14



Rozdział 1. Wprowadzenie

Statyczny obraz sprawdza się doskonale, gdy nie potrzebujemy ani nie chcemy przedstawiać innego punktu widzenia, a w przypadku publikowania danych w tradycyjny sposób, czyli na papierze, jest zwyczajnie koniecznością. Dynamiczne, interaktywne wizualizacje pozwalają ludziom na samodzielne badanie przedstawionego zestawu danych. Podstawowe funkcje interaktywnych narzędzi tego rodzaju niewiele się zmieniły od 1996 roku, kiedy to Ben Shneiderman z Uniwersytetu Marylandu sformułował po raz pierwszy „mantrę poszukiwania danych graficznych”: najpierw ogólny rzut, potem przybliżenie i filtrowanie, a wreszcie prezentowanie szczegółów na życzenie. Odbicie tej reguły znajdziemy w większości dzisiejszych wizualizacji. To połączenie funkcji jest szczególnie wygodne, ponieważ sprawia, że obrazowane zgodnie z powyższymi wytycznymi dane stają się przydatne dla niemal każdego, kto ma do nich dostęp — od osób tylko przeglądających wyniki czy starających się je poznać po ludzi pragnących znaleźć w nich konkretne odpowiedzi na określone pytania. Interaktywne graficzne przedstawianie danych prezentuje je przekrojowo, oferując jednocześnie narzędzia pozwalające wgryźć się w szczegóły. Tym samym spełnia kilka funkcji naraz i trafia w potrzeby szerszego przekroju odbiorców — od nowicjuszy w temacie po osoby pierwszy z nim kontakt mających już za sobą. Oczywiście interaktywność angażuje odbiorcę w znacznie większym stopniu niż dane przedstawiane na statycznych obrazach. Animowane przejścia i starannie przygotowany interfejs sprawiają, że w pewnych przypadkach poznawanie wyników badań przypomina raczej rozrywkę. Interaktywne wizualizacje danych nadają się doskonale do wprowadzenia w dowolny temat odbiorcy, który w innej sytuacji zapewne wcale by się nim nie zainteresował.

Dlaczego w internecie? Wizualizacja nie spełni swojej roli, jeśli nie da się jej zobaczyć. Przedstawienie rezultatów pracy innym ludziom jest w gruncie rzeczy najważniejsze, a publikowanie wyników w sieci to najszybszy sposób dotarcia do odbiorców na całym świecie. Prace zgodne ze standardami ustalonymi dla poszczególnych technologii internetowych będą dostępne dla każdego, kto potrafi obsłużyć przeglądarkę internetową, niezależnie od tego, pod jakim systemem operacyjnym (Windows, Mac OS czy Linux) zostanie ona uruchomiona, i bez względu na to, na jakim urządzeniu (komputerze przenośnym, komputerze stacjonarnym, smartfonie czy tablecie) do tego dojdzie. Najwspanialsze jednak jest to, że wszystkie przedstawione w tej książce efekty da się osiągnąć za pomocą dostępnych za darmo aplikacji, więc jedyną faktycznie ponoszoną inwestycją jest czas, jaki włożysz w pracę. Co więcej, w podanych przykładach będziemy wykorzystywać tylko otwarte technologie spełniające standardy internetowe. Unikając aplikacji i dodatków chronionych prawem autorskim, gwarantujesz sobie i odbiorcom, że prezentowane wyniki będą dostępne na większości wykorzystywanych dziś urządzeń — na zwykłych komputerach, tabletach, a nawet smartfonach. A bardziej powszechny dostęp oznacza szersze grono odbiorców.

Dlaczego w internecie?



15

O czym jest ta książka? Niniejsza książka to podręcznik, z którego się nauczysz, w jaki sposób łączyć trzy dziedziny wiedzy — wizualizowanie danych, projektowanie interaktywne oraz przygotowywanie aplikacji internetowych — by za pomocą potężnego środowiska, jakim jest D3, tworzyć dowolne wizualizacje internetowe. Treść zawarta w poszczególnych rozdziałach powstała w wyniku moich zmagań z biblioteką D3. Wiele osób (w tym także ja) zasiadających przed jej oknem po raz pierwszy ma za sobą pewne doświadczenia w projektowaniu, odwzorowywaniu danych i graficznym ich przedstawianiu, natomiast nie wie nic na temat programowania czy informatyki. Biblioteka D3 cieszy się niezasłużenie sławą trudnej do opanowania. O ile sama D3 nie jest nadmiernie skomplikowana, to należy pamiętać, że operuje w dziedzinie internetu, a internet jest jak najbardziej złożonym tworem. Aby swobodnie korzystać ze wszystkich dobrodziejstw D3, należy zdobyć pewną wiedzę na temat technologii, do których odwołuje się ta aplikacja, takich jak między innymi HTML, CSS, JavaScript i SVG. Wiele osób (i ja także) odkrywało świat technologii samodzielnie. Z jednej strony to wspaniała wiadomość, bo oznacza, że opanowanie technologii internetowych jest możliwe dla większości z nas, z drugiej może powodować pewne problemy, jako że samouki rzadko poznają cokolwiek od podstaw — najczęściej wprowadzamy losowe poprawki tak długo, aż uzyskamy pożądany efekt. Natomiast aby skutecznie korzystać z biblioteki D3, należy dogłębnie poznać współpracujące z nią narzędzia. Ponieważ D3 została napisana w JavaScripcie, jej poznanie wiąże się automatycznie z poznaniem samego języka JavaScript. Dla wielu osób zetknięcie się z biblioteką D3 stanowi pierwsze spotkanie z tym językiem (a czasem w ogóle z koncepcją programowania na potrzeby sieci). Opanowanie nieznanego języka programowania to nie lada wyzwanie samo w sobie, cóż więc dopiero mówić o zgłębieniu tajników narzędzia przygotowanego w tym języku. Biblioteka D3 pozwala przecież uzyskiwać efekty, których większość z nas nie zdołałaby wprowadzić do prezentacji za pomocą samego JavaScriptu. Czas poświęcony na poznanie ich obu — aplikacji i języka — zwróci Ci się wkrótce z nawiązką. Moja część zadania polega na tym, by skrócić Ci czas nauki i pozwolić jak najszybciej przystąpić do tworzenia nowych, wspaniałych prezentacji. Postaram się wyjaśnić Ci wszystko od podstaw, począwszy od najprostszych pojęć, do których z czasem będziemy dodawać kolejne rozwijające je przystawki. Nie mam zamiaru uczyć Cię, w jaki sposób przygotowywać konkretny rodzaj wizualizacji, postaram się za to wyjaśnić, jak działają funkcje biblioteki D3. Mam nadzieję, że po tym kursie zdołasz z otrzymanych klocków złożyć własny projekt.

Kim jesteś? Możesz być zupełnym laikiem, kimś, kto nie ma pojęcia o graficznym przedstawianiu danych bądź o projektowaniu aplikacji internetowych albo o żadnej z tych dziedzin. (Witaj!). Być może jesteś dziennikarzem pragnącym poznać nowe metody przedstawiania danych zebranych na potrzeby reportażu. A może jesteś projektantem nawykłym do tworzenia statycznych grafik, gotowym wykonać krok w kierunku opracowywania interaktywnych projektów internetowych. Nie wykluczam też, że w gronie Czytelników znajdą się artyści pragnący rozwinąć wachlarz dostępnych im narzędzi twórczych o metody przetwarzania danych. Jak sądzę

16



Rozdział 1. Wprowadzenie

wśród odbiorców znajdą się także programiści znający już język JavaScript i możliwości sieci, którzy chcą nauczyć się czegoś nowego, a przy okazji dowiedzieć się czegoś na temat projektowania graficznego. Niezależnie jednak od tego, kim rzeczywiście jesteś, mam nadzieję, że:  wiesz, czym jest niedawno odkryte zjawisko zwane „World Wide Web”;  znasz podstawy HTML, DOM i CSS;  wiesz co nieco na temat programowania (choć to akurat nie jest warunkiem koniecznym);  obiło Ci się o uszy coś na temat jQuery, ewentualnie masz za sobą kilka aplikacji napisa-

nych w JavaScripcie;  nie boisz się nieznanych skrótowców, takich jak CSV, SVG czy JSON;  chcesz tworzyć interaktywne prezentacje danych, które są komuś przydatne.

Nie martw się, jeśli któraś z wymienionych koncepcji czy też pewne pojęcia są Ci obce. W takim przypadku być może zechcesz poświęcić nieco więcej uwagi rozdziałowi 3., w którym omówiłem najważniejsze zagadnienia niezbędne do zgłębienia tajników biblioteki D3.

Czego nie znajdziesz w tej książce? Teraz, gdy już wiesz, czego możesz się spodziewać po tej książce, pora powiedzieć, czego zdecydowanie w niej nie znajdziesz. Z pewnością nie jest to podręcznik do informatyki, więc nie poznasz z niej niuansów żadnej z technologii internetowych (HTML, CSS, JavaScript czy SVG). Dlatego też nie dziw się, gdy będę się prześlizgiwał w tekście po pewnych zagadnieniach, znacznie je upraszczając, co u informatyków z prawdziwego zdarzenia z pewnością wywoła silną reakcję alergiczną. I słusznie, pamiętajmy jednak, kto ma być odbiorcą tej książki. Nie piszę jej dla inżynierów, lecz dla artystów i projektantów. Przedstawię oczywiście pewne podstawy, a każdy, kto się zainteresuje stroną techniczną omawianych tu tematów, będzie mógł się w nią zagłębić w dowolnie wybranym przez siebie momencie. Specjalnie nie będę opisywał tu wszystkich możliwych rozwiązań przedstawianych problemów, ograniczając się do tego, co w moim mniemaniu jest najprostszym rozwiązaniem albo chociaż rozwiązaniem najbardziej zrozumiałym. Chcę nauczyć Cię pojęć leżących u podstaw funkcjonowania biblioteki D3 i przedstawić Ci dostępne w niej narzędzia. Dlatego też w książce tej nie znajdziesz tematów poświęconych konkretnym projektom przykładowym. Pamiętajmy, że każdy zestaw danych jest inny i każdy wymaga indywidualnego podejścia. Do Ciebie należy wybór metody połączenia przedstawionych tu koncepcji w sposób najbardziej odpowiedni dla Twoich potrzeb.

Kod w przykładach Jeśli jesteś typowym szalonym naukowcem, to zapewne zdołasz opanować tajniki biblioteki D3 bez zaglądania do plików z przykładami kodu. W takim przypadku możesz z czystym sumieniem porzucić lekturę tego podrozdziału.

Kod w przykładach



17

Jeśli nadal tu jesteś, to mimo niewątpliwej sprawności intelektualnej daleko Ci jeszcze do szaleństwa. Oznacza to, że czytając, będziesz wspomagać się kodami omawianych w książce przykładów. Dlatego zanim przystąpisz do dalszej lektury, pobierz archiwum plików z serwera ftp://ftp.helion.pl/przyklady/inwida.zip. W archiwum znajdziesz katalogi opisane numerami rozdziałów, w których pojawia się kod: rozdzial_04 rozdzial_05 rozdzial_06 rozdzial_07 rozdzial_08 … Pliki zostały posegregowane według rozdziałów, zatem gdy w rozdziale 9. odwołam się do pliku o nazwie 01_bar_chart.html, kod przykładu znajdziesz w katalogu d3-tlumaczenia-kodow/rozdzial_09/ 01_bar_chart.html. Możesz kopiować podane przykłady, zmieniać je i dostosowywać do swoich potrzeb, o ile nie będą to zastosowania komercyjne.

Dziękuję! Wreszcie ostatnie słowa tego rozdziału. Książka ta została napisana, starannie dopieszczona i przygotowana pod kątem maksymalnie efektywnego uczenia. Dziękuję wszystkim, którzy zdecydowali się po nią sięgnąć. Mam nadzieję, że nauczycie się z niej wielu nowych, interesujących rzeczy i może nawet będziecie się przy tym dobrze bawić.

18



Rozdział 1. Wprowadzenie

ROZDZIAŁ 2.

Wprowadzenie do D3

Biblioteka D3, nazywana też D3 lub d3.js, jest biblioteką języka JavaScript przygotowaną z myślą o tworzeniu wizualizacji danych. Ale taki opis stanowi poważne niedomówienie. Skrót D3 jest nawiązaniem do anglojęzycznej nazwy biblioteki narzędzi — Data-Driven Documents — co można przełożyć jako „dokumenty działające w oparciu o dane”. Dane dostarczasz Ty, pod słowem dokument kryją się wszelkie dokumenty internetowe, czyli pliki rozpoznawane przez przeglądarki internetowe, na przykład HTML czy SVG. Biblioteka D3 zajmuje się przygotowaniem działania, czyli łączy dane z dokumentami. Oczywiście nazwa ta ma jednocześnie budzić skojarzenie z technologiami sieciowymi stanowiącymi podwaliny tego narzędzia — W3, czyli World Wide Web, to znana wszystkim „Sieć”. Głównym projektantem biblioteki D3 jest genialny Mike Bostock (http://bost.ocks.org/mike/), choć całość nie powstałaby bez wkładu innych osób. Biblioteka ta jest oprogramowaniem o otwartym charakterze. Można pobrać ją za darmo z serwisu GitHub (https://github.com/mbostock/d3/). Zbiór narzędzi D3 jest udostępniany na zasadach określonych w licencji BSD, co oznacza, że możesz wykorzystywać tworzący je kod, zmieniać go i dostosowywać dowolnie na potrzeby każdego projektu — czy to darmowego, czy to komercyjnego — bez uiszczania żadnych opłat. Oficjalną stronę biblioteki D3 znajdziesz pod adresem d3js.org.

Funkcje biblioteki Zasadniczo za biblioteką D3 kryje się bardzo elegancki kod pozwalający tworzyć i przekształcać dokumenty internetowe zawierające różnego rodzaju dane. Cele te realizowane są w następujących krokach:  wczytywanie danych do pamięci przeglądarki;  łączenie danych z elementami dokumentu, a w razie potrzeby tworzenie nowych elementów;  przekształcanie istniejących elementów po zinterpretowaniu połączonych z nim danych

i stosownym zdefiniowaniu właściwości wyświetlania;

 przeprowadzanie elementów między stanami w reakcji na wprowadzane przez użytkow-

nika wartości.

19

Praca z biblioteką D3 wymaga więc opanowania składni, która pozwoli wczytywać dane do pamięci przeglądarki, łączyć je z dokumentem i przekształcać oraz zmieniać stan elementów tego dokumentu. Najważniejszym krokiem opisanego tu procesu jest przekształcanie elementów, bo tam właśnie dochodzi do odwzorowywania. Biblioteka D3 odpowiada za przygotowanie struktury, która następnie podlega transformacji, ale jak się wkrótce przekonasz, to właśnie do Ciebie należy ustalenie reguł odwzorowywania. Czy większym wartościom należy przypisać wyższe słupki, czy raczej intensywniej zabarwione koła? Czy klastery danych powinny rozkładać się na osi OX podzielone ze względu na wiek czy kategorię? Jakimi kolorami mają być wypełnione kontury krajów na mapie świata? Wszystkie decyzje dotyczące ostatecznego wyglądu wizualizacji należą do Ciebie. To Ty dajesz pomysł, Ty określasz reguły, a D3 jedynie je wykonuje, nie wprowadzając Cię w tajniki działania. (Odwrotnie niż arogancki Kreator wykresów programu Excel).

Funkcje, których nie znajdziesz w bibliotece Biblioteka D3 nie dopuszcza pewnych działań. Oto lista funkcji, których w niej nie znajdziesz.  D3 nie przygotuje za Ciebie graficznej reprezentacji danych „z szablonu”. To celowy za-

bieg twórców kodu. Podstawowym zadaniem narzędzi z biblioteki D3 jest przygotowywanie wizualizacji objaśniających, a nie poznawczych. Narzędzia poznawcze pomagają odnaleźć wyraźne, istotne wzory, jakie pojawiają się w zestawach danych. Należą do nich programy takie jak Tableau (http://www.tableausoftware.com/) czy ggplot2 (http://ggplot2.org/), za pomocą których można szybko odwzorować ten sam zbiór wartości na różne sposoby. To zasadniczy krok badania zebranych danych, ale zupełnie zbędny podczas prezentowania wyników w sposób objaśniający, kiedy chcesz pokazać wszystko to, co już się odkryło na ich temat. Prezentacje objaśniające są zazwyczaj bardziej ograniczone, ale jednocześnie wyraźnie skoncentrowane na przekazaniu najważniejszych informacji. Narzędzia z biblioteki D3 służą właśnie temu celowi, natomiast kiepsko radzą sobie z prezentacjami poznawczymi. (Jeśli szukasz narzędzi do analizowania zależności między wynikami badań, zajrzyj do podrozdziału „Inne możliwości”).

 Narzędzia z biblioteki D3 nie będą działały w starszych przeglądarkach. Dzięki temu kod

funkcji D3 jest przejrzysty i wolny od sztuczek pozwalających na przykład uruchamiać skrypty w starych wersjach przeglądarki Internet Explorer. Twórcy wyszli z założenia, że opracowywanie bardziej wymagających narzędzi i brak współpracy ze starszym oprogramowaniem skłoni większą liczbę użytkowników do przejścia na aktualne wersje programów. (Hamowanie tego procesu zmusza programistów do ciągłej obsługi starych wersji przeglądarek, co oczywiście zniechęca ludzi do korzystania z wersji nowszych i w ten sposób koło się zamyka). Twórcy biblioteki D3 chcą, żebyśmy poszli naprzód.

 Biblioteka D3 nie potrafi korzystać z grafik zapisanych w postaci map bitowych czy z ich

fragmentów, czym charakteryzują się między innymi obrazy Google Maps czy Cloudmate. Narzędzia biblioteki doskonale radzą sobie z grafiką wektorową — plikami SVG czy danymi GeoJSON — natomiast nie zostały przewidziane do obróbki typowych fragmentów map. (Mapy bitowe to grafiki złożone z pikseli, więc skalowanie ich do innej rozdzielczości zazwyczaj kończy się dużym spadkiem jakości. Grafiki wektorowe to obrazy rysowane na podstawie definicji punktów, prostych i krzywych zadanych równaniami matematycznymi — naprawdę! — dzięki czemu możemy dowolnie zmieniać ich rozmiary, nie martwiąc się o utratę jakości grafiki). Opisany tu stan rzeczy uległ nieco zmianie wraz z pojawieniem się

20



Rozdział 2. Wprowadzenie do D3

dodatku d3.geo.tile plug-in (https://github.com/d3/d3-plugins/tree/master/geo/tile). Przed wprowadzeniem zawartych w nim funkcji przygotowywanie map za pomocą biblioteki D3 wiązało się albo z przerysowaniem całości do formatu SVG, albo z nałożeniem wektorowej nakładki na warstwę map bitowych (z tym zadaniem doskonale radziły sobie inne biblioteki, na przykład Leaflet czy Polymaps, opisane w podrozdziale „Inne możliwości”). Problem łączenia fragmentów map bitowych z grafiką wektorową powracał często w rozważaniach prowadzonych przez społeczność programistów pracujących nad biblioteką D3. Na razie nie udało się znaleźć ostatecznego, prostego i doskonałego rozwiązania, ale wydaje się, że możemy się spodziewać stopniowego rozwoju biblioteki na tym polu i wprowadzenia do niej nowych metod w najbliższej przyszłości.  Biblioteka D3 nie ukrywa danych źródłowych. Ponieważ jej kod jest wykonywany po

stronie klienta (w przeglądarce użytkownika, a nie na serwerze), najpierw trzeba wysłać mu dane do przetworzenia. Jeśli nie wolno Ci ich udostępniać osobom postronnym, nie korzystaj z biblioteki D3. Dane można wizualizować za pomocą programów płatnych (na przykład Flash) lub przygotować wcześniej odpowiednią animację złożoną ze statycznych obrazów i w takiej postaci wysłać ją do przeglądarki klienta. (Ale jeśli nie chcesz dzielić się wynikami badań, po co w ogóle przygotowujesz ich graficzną postać? Wizualizowanie ma służyć lepszemu przedstawianiu danych, więc może ujawnienie ich i zapewnienie łatwego do nich dostępu będzie w tym przypadku rozsądniejsze? Po co Ci koszmary związane z kradzieżą danych — zajrzyj tylko tu: http://www.datathief.org/ — skoro możesz spać spokojnie, udostępniwszy wszystko własnoręcznie?).

Początki i tło historyczne Pierwsze przeglądarki potrafiły wyświetlać tylko strony statyczne, a cała interaktywność ograniczała się do poruszania się po witrynie za pomocą odnośników do innych stron. W 1996 roku firma Netscape wprowadziła na rynek pierwszą przeglądarkę z obsługą JavaScriptu, nowego języka skryptowego, którego polecenia mogły być interpretowane przez przeglądarkę w czasie odwiedzania stron serwisu. Słowa nie oddają przełomowości wprowadzonej zmiany, ale wiedz, że dzięki niej przeglądarki przestały być tylko przeglądarkami — biernymi narzędziami — a zmieniły się w szkielet pozwalający generować interaktywne zachowania sieciowe. Metamorfoza ta umożliwiła ostatecznie zaistnienie wszystkich znanych nam dziś działań, jakie podejmujemy w Sieci. Bez JavaScriptu nie powstałaby biblioteka D3, a graficzne prezentowanie danych nadal ograniczałoby się do zupełnie nieinteraktywnych animacji GIF (Fuj. Dziękujemy Ci, Netscape!). Skoczmy teraz do roku 2005, kiedy to Jeffrey Heer, Stuart Card i James Landay zaprezentowali użytkownikom pakiet prefuse (http://prefuse.org/), czyli zestaw narzędzi pozwalających przedstawiać graficznie dane na stronach internetowych. Narzędzia prefuse (nazwa pakietu zapisywana jest małymi literami) zostały napisane w kompilowanym języku Java, czyli stanowiły w rzeczywistości zbiór programów uruchamianych w przeglądarkach z zainstalowanym dodatkiem Java. (Pamiętaj, że Java i JavaScript to, mimo łudząco podobnych nazw, dwa zupełnie niezwiązane ze sobą języki programowania). Pakiet prefuse stał się aplikacją przełomową — po raz pierwszy nie tylko biegli programiści mogli przystąpić do przygotowywania wizualizacji gotowych do umieszczania na stronach internetowych. Wcześniej tego rodzaju elementy pojawiały się na stronach WWW sporadycznie.

Początki i tło historyczne



21

Dwa lata później Jeff Heer opracował aplikację Flare (http://flare.prefuse.org/), podobny zestaw narzędzi napisany w języku ActionScript. Od tej pory graficzne prezentacje danych mogły być odtwarzane w programie Adobe Flash Player. Aplikacja Flare, podobnie jak wcześniej prefuse, korzystała z wtyczki zainstalowanej w przeglądarce. Pojawienie się Flare stanowiło ogromny krok naprzód, ale twórcy przeglądarek też nie spoczęli na laurach i wkrótce stało się jasne, że wprowadzanie animacji danych powinno być możliwe za pomocą własnych narzędzi przeglądarki, czyli bez potrzeby instalowania jakichkolwiek dodatków. W 2009 roku Jeff Heer przeniósł się do Stanfordu, gdzie rozpoczął współpracę z doktorantem o nazwisku Michael Bostock. Razem, tworząc zespół Stanford’s Vis Group, opracowali pakiet Protovis (http://mbostock.github.io/protovis/) — zestaw narzędzi pozwalających przygotowywać animacje danych. Aplikacja została napisana w języku JavaScript i zaprojektowana w taki sposób, by korzystać wyłącznie z mechanizmów wbudowanych w przeglądarki. (Jeśli znasz pakiet Protovis, zapoznaj się z treścią wprowadzenia do pracy z D3 przygotowaną przez Mike’a Bostocka i dostępną pod adresem http://mbostock.github.io/d3/tutorial/protovis.html). Dzięki pakietowi Protovis przygotowywanie wizualizacji stało się łatwe i możliwe nawet dla osób, które nie miały wcześniej do czynienia z programowaniem. Ale żeby osiągnąć ten cel, twórcy pakietu musieli wprowadzić abstrakcyjną warstwę reprezentacji. Projektant miał do niej dostęp z poziomu składni samego pakietu, natomiast nie była ona osiągalna klasycznymi metodami, co sprawiało, że wszelkie próby wyszukiwania błędów w kodzie stawały się nad wyraz żmudne. W 2011 roku Mike Bostock, Vadim Ogievetsky i Jeff Heer ogłosili oficjalnie zakończenie prac nad biblioteką D3 (http://vis.stanford.edu/papers/d3), czyli kolejnym etapem ewolucji narzędzi do graficznego przedstawiania danych. W przeciwieństwie do pakietu Protovis biblioteka D3 działa bezpośrednio w obrębie dokumentu internetowego. Oznacza to, że łatwiej jest wprowadzać zmiany w wizualizacji, wykrywać w niej błędy czy dodawać nowe opcje, natomiast problemem może być nieco bardziej złożony proces uczenia się pracy z biblioteką. Postaram się jednak, żeby tę niedogodność maksymalnie zminimalizować. Natomiast wszystko, czego się nauczysz przy okazji poznawania D3, przyda Ci się podczas pracy nad graficznym przedstawianiem danych. Jeśli znasz którekolwiek ze wspomnianych tu narzędzi, z pewnością docenisz prestiżowy rodowód biblioteki D3, a jeśli interesujesz się filozofią, jaką kierowali się twórcy tego oprogramowania, polecam Ci lekturę publikacji Mike’a, Vadima i Jeffa zatytułowanej InfoVis (http://vis.stanford.edu/files/2011-D3-InfoVis.pdf), w której przedstawili oni argumenty na poparcie potrzeby istnienia takiego narzędzia. Publikacja ta prezentuje wnioski wyciągnięte na podstawie wieloletnich badań prowadzonych podczas prac nad powstawaniem wspomnianych narzędzi graficznych.

Inne możliwości Biblioteka D3 z pewnością nie jest narzędziem uniwersalnym. Niekiedy wystarczy przygotowany naprędce wykres, wtedy też nie ma zazwyczaj czasu na tworzenie kodu od zera. Jej funkcje okażą się równie nieprzydatne wszystkim tym, którzy z jakichś przyczyn muszą dbać o wsteczną kompatybilność i nie mogą pozwolić sobie na wykorzystywanie wyłącznie najnowszych technologii, takich jak SVG.

22



Rozdział 2. Wprowadzenie do D3

W takich sytuacjach trzeba sięgnąć po inne rozwiązania, warto więc je znać. Oto krótka i bynajmniej nie wyczerpująca tematu lista zamienników dla biblioteki D3, darmowych jak ona i wykorzystujących technologie internetowe (przede wszystkim JavaScript) należące dziś do standardów.

Wykresy od ręki DataWrapper (http://datawrapper.de/) Piękna aplikacja internetowa sprawnie generująca wykresy na podstawie przesłanych na serwer danych. Przygotowaną grafikę można opublikować w dowolnym serwisie lub osadzić we własnej stronie internetowej. Aplikacja powstała z myślą o dziennikarzach, ale dziś korzystają z niej wszyscy. DataWrapper wykreśla interaktywne wykresy odczytywane przez współczesne przeglądarki, a starszym programom oferuje statyczne grafiki. (Genialne!). Poza tym kod aplikacji jest dostępny do pobrania, więc możesz uruchomić ją także na własnym serwerze. Flot (http://www.flotcharts.org/) Biblioteka jQuery służąca do rysowania wykresów. Aplikacja wykorzystuje znaczniki kanwy HTML i radzi sobie dobrze również w starszych przeglądarkach — nawet w Internet Explorerze 6. Nie oferuje bogatego wyboru obrazowania danych (wyłącznie wykresy liniowe, punktowe, słupkowe i powierzchniowe), ale jej obsługa nie nastręcza większych trudności. Google Chart Tools (https://developers.google.com/chart/) Google Chart Tools to następca Image Charts API (https://developers.google.com/chart/image/). Za pomocą tego pakietu bez trudu uzyskasz wykresy najprostszych typów wyświetlające się poprawnie także w starszych wersjach przeglądarki IE. gRaphaël (http://g.raphaeljs.com/) Biblioteka służąca do przygotowywania wykresów, działająca w oparciu o funkcje aplikacji Raphaël (opisanej dalej w tym rozdziale). Uzyskiwane za jej pomocą wykresy są kompatybilne ze starszymi przeglądarkami, w tym także z IE6. Biblioteka gRaphaël oferuje większą elastyczność niż Flot, a niektórzy użytkownicy utrzymują wręcz, że daje też ładniejsze wyniki. HighchartsJS (http://www.highcharts.com/) Biblioteka funkcji JavaScriptu służących do rysowania wykresów, oferująca kilka przygotowanych domyślnie tematów graficznych oraz gotowych rodzajów wykresów. W nowszych przeglądarkach biblioteka wyświetla dane w postaci plików SVG, a w starszych stosuje technologię VML (http://www.highcharts.com/documentation/compatibility). Przygotowane za jej pomocą wykresy wyświetlają się poprawnie nawet w starych wersjach IE (w tym także w wersji 6). Narzędzie to jest dostępne za darmo wyłącznie na potrzeby użytku niekomercyjnego. JavaScript InfoVis Toolkit (http://philogb.github.io/jit/) Pakiet narzędzi JIT oferuje kilka przygotowanych odgórnie typów wizualizacji. Znajdziesz w nim wiele przykładów, ale sama dokumentacja jest bardzo techniczna. Narzędzia te sprawdzą się doskonale, jeśli któryś z oferowanych przez nie szablonów odpowiada Twoim potrzebom. Należy natomiast uważać na zachowania wykresów w różnych przeglądarkach — ta kwestia nie została odpowiednio naświetlona w dokumentacji. jqPlot (http://www.jqplot.com/) Wtyczka do biblioteki jQuery pozwalająca przygotowywać za jej pomocą wykresy danych. Oferuje tylko najprostsze sposoby wizualizacji. Sprawdzi się doskonale wszędzie tam, gdzie wystarczą gotowe schematy. Funkcje jqPlot działają w wersji 7 i nowszych wersjach IE.

Inne możliwości



23

jQuery Sparklines (http://omnipotent.net/jquery.sparkline/#s-about) Dodatek do biblioteki jQuery pozwalający tworzyć tak zwane wykresy typu sparkline, czyli małe, zazwyczaj słupkowe lub powierzchniowe wykresy umieszczane bezpośrednio w tekście artykułu. Współpracuje sprawnie z większością przeglądarek, także z IE6. Peity (http://benpickles.github.io/peity/) Dodatek to biblioteki jQuery pozwalający tworzyć proste, tycie wykresy słupkowe, liniowe i kołowe. Działa jedynie w najnowszych przeglądarkach. Czy wspominałem, że jego funkcje generują tylko maciupkie wizualizacje? Plus 10 do współczynnika słodkości. Timeline.js (http://timeline.verite.co/) Biblioteka przygotowana z myślą o generowaniu interaktywnych osi czasu. Stosowanie jej nie wymaga programowania, wystarczy skorzystać z zamieszczonego na stronie generatora kodu. Timeline.js nie oferuje opcji dostosowywania wyglądu, ale pamiętajmy, że przygotowanie dobrze działającej osi czasu nie jest zadaniem prostym. Działa wyłącznie w wersji 8 i nowszych wersjach IE. YUI Charts (http://yuilibrary.com/yui/docs/charts/) Moduł kreślenia wykresów przygotowany z myślą o bibliotece Yahoo! User Interface Library pozwala przygotowywać najprostsze wykresy działające w większości przeglądarek.

Grafy Graf to sposób przedstawiania danych w postaci sieci (gdzie przykładowo element B łączy się z elementem A, a element A łączy się z elementem C). Arbor.js (http://arborjs.org/) Biblioteka pozwalająca tworzyć grafy w oparciu o funkcje zawarte w jQuery. Jeśli nigdy nie przyszło Ci korzystać z zawartych w niej funkcji, sprawdź jej dokumentację — przygotowaną właśnie w postaci grafu. (Jakie to meta!). Biblioteka korzysta ze znaczników canvas języka HTML, więc działa tylko w Internet Explorerze 9 oraz najnowszych wersjach innych przeglądarek, ale zdesperowany użytkownik może szukać dróg obejścia tego problemu. Sigma.js (http://sigmajs.org/) Ta niewielka biblioteka również pozwala przygotowywać grafy. Wystarczy odwiedzić stronę główną projektu, przesunąć kursor myszy po grafice nagłówka i zapoznać się z zamieszczonymi na stronie animacjami przykładowymi. Sigma.js to szybka i świetnie działająca biblioteka wykorzystująca znacznik HTML canvas.

Odwzorowania kartograficzne Chciałbym zwrócić uwagę na różnicę między odwzorowywaniem (każda prezentacja graficzna to rodzaj mapy) a przygotowywaniem odwzorowań kartograficznych (wizualizacje danych geograficznych, czyli zwykłe mapy). Biblioteka D3 oferuje funkcje pozwalające przygotowywać odwzorowania kartograficzne, ale warto też poznać inne narzędzia. Kartograph (http://kartograph.org/) To połączenie funkcji języka JavaScript z możliwościami skryptów języka Python pozwala przygotowywać wspaniałe, w pełni wektorowe mapy. Jego autorem jest Gregor Aisch. Koniecznie też zapoznaj się z zamieszczonymi na stronie przykładami, najlepiej od razu. Gwarantuję, że nigdy wcześniej nie zdarzyło Ci się widzieć czegoś tak wspaniałego. Kartograph działa w wersji 7 i nowszych wersjach IE. 24



Rozdział 2. Wprowadzenie do D3

Leaflet (http://leafletjs.com/) Biblioteka umożliwiająca przygotowywanie dzielonych na fragmenty map, działających płynnie zarówno na komputerach, jak i na urządzeniach mobilnych. Jedną z dostępnych opcji jest wyświetlanie warstwy grafiki SVG nad elementami mapy. (Więcej na ten temat w przygotowanym przez Mike’a przykładzie Using D3 with Leaflet [Łączenie D3 z biblioteką Leaflet] dostępnym pod adresem http://bost.ocks.org/mike/leaflet/). Biblioteka Leaflet działa (ledwo) w przeglądarce IE6 i (znacznie lepiej!) w przeglądarce IE7, a także w nowych wersjach pozostałych przeglądarek. Modest Maps (http://modestmaps.com/) Przodek wszystkich składanych z elementów map, którego następcą jest biblioteka Polymaps, do dziś cieszy się powodzeniem. Pliki biblioteki nie zajmują wiele miejsca i pozwalają się uruchamiać w starszych wersjach IE i innych przeglądarek. Biblioteka Modest Maps została przystosowana do działania ze skryptami ActionScript, processing, Python, PHP, Cinder, openFrameworks… w zasadzie ze wszystkimi nam znanymi. Stare, ale jare, należałoby powiedzieć. Polymaps (http://polymaps.org/) Biblioteka ta służy do wyświetlania dzielonych na fragmenty map uzupełnionych warstwami informacji. Ponieważ wykorzystuje grafiki SVG, najlepiej sprawdza się w nowych przeglądarkach.

Prawie od zera Pakiety takie jak biblioteka D3 dają użytkownikom narzędzia niezbędne do tworzenia dowolnych form wizualnych, niebazujących na przygotowanych wcześniej szablonach. Jeśli lubisz zaczynać pracę od zera, być może zainteresują Cię opisane poniżej aplikacje. Processing.js (http://processingjs.org/) Jest to wbudowana w JavaScript implementacja języka programowania Processing (http:// processing.org/) przygotowanego specjalnie z myślą o artystach i projektantach, którzy wcześniej nie mieli do czynienia z programowaniem. Język Processing powstał w Javie, więc eksportowanie przygotowanych w nim grafik do formatów zgodnych ze standardami internetowymi wymagało odwoływania się do pomocy mało poręcznych apletów Javy. Biblioteka Processing.js pozwala uruchamiać kod języka Processing bezpośrednio w przeglądarce. Grafiki powstają na kanwie, więc biblioteka działa jedynie z najnowszymi wersjami przeglądarek. Paper.js (http://paperjs.org/) Szkielet pozwalający tworzyć grafikę wektorową na kanwie. Projekt może poszczycić się jedną z najpiękniejszych stron w internecie, a umieszczone na niej przykłady są po prostu niewiarygodne. (Spróbuj koniecznie teraz). Raphaël (http://raphaeljs.com/) Kolejna biblioteka pozwalająca tworzyć grafikę wektorową. Popularność zawdzięcza przede wszystkim przyjaznej składni i możliwości uruchamiania kodu w starszych przeglądarkach.

W trzech wymiarach Biblioteka D3 nie sprawdza się najlepiej jako narzędzie przygotowywania grafiki trójwymiarowej przede wszystkim dlatego, że same przeglądarki zdecydowanie lepiej czują się w dwóch wymiarach. Ale jeśli do zestawu narzędzi dołączymy bibliotekę WebGL, zyskamy całe spektrum nowych możliwości. Inne możliwości



25

PhiloGL (http://www.senchalabs.org/philogl/) Szkielet WebGL przygotowany specjalnie z myślą o pracy nad grafiką trójwymiarową. Three.js (http://mrdoob.github.io/three.js/) Biblioteka umożliwiająca generowanie dowolnych scen trójwymiarowych. Za jej powstanie odpowiada zespół Google’s Data Arts. Samo poznawanie przykładów zamieszczonych na stronie zapewnia niebywałą rozrywkę.

Narzędzia przygotowane za pomocą biblioteki D3 Jeśli chcesz stosować bibliotekę D3, ale nie masz ochoty pisać kodu, możesz wybrać jedną z wielu nakładek ułatwiających pracę z tą biblioteką. Crossfilter (http://square.github.io/crossfilter/) Biblioteka przeznaczona do opracowywania wielkich zestawów wielu zmiennych. Jej powstanie zawdzięczamy przede wszystkim Mike’owi Bostockowi. To narzędzie przyda się każdemu, kto musi zmieścić wiele danych w małej przeglądarce. Cubism (http://square.github.io/cubism/) Dodatek do biblioteki D3 pozwalający tworzyć wizualizacje serii danych, napisany także przez Mike’a Bostocka. (Strona zawiera jeden z moich ulubionych przykładów). Dashku (https://dashku.com/) Sieciowe narzędzie pozwalające aktualizować zestawienia danych w czasie rzeczywistym. Jego autorem jest Paul Jensen. dc.js (http://nickqizhu.github.io/dc.js/) Skrót „dc” pochodzi od angielskiego określenia dimensional charting, czyli „kreślenie wymiarowe”. Biblioteka ta została przystosowana do pracy w wielkimi, wielowymiarowymi zestawami danych. NVD3 (http://nvd3.org/) Wykresy wielokrotnego użycia, które można dołączać do biblioteki D3. W NVD3 znajdziesz wiele pięknych przykładów dających się przystosowywać do potrzeb konkretnego projektu znacznie szybciej, niż trwa przygotowanie analogicznego kodu w D3. Polychart.js (https://www.polychart.com/) Kolejny zestaw szablonów wykresów, w którym znajdziesz mnóstwo ich rodzajów. Biblioteka ta jest darmowa wyłącznie do zastosowań niekomercyjnych. Rickshaw (http://code.shutterstock.com/rickshaw/) Zestaw narzędzi przydatnych podczas wyświetlania serii danych. Daje duże możliwości dostosowania wyglądu do potrzeb projektu. Tributary (http://tributary.io/) Doskonałe narzędzie do prowadzenia eksperymentów na „żywym” kodzie D3. Autorem jest Ian Johnson.

26



Rozdział 2. Wprowadzenie do D3

ROZDZIAŁ 3.

Podstawy wykorzystywanych technologii

Jeśli teraz poświęcisz trochę czasu na zapoznanie się z pewnymi zagadnieniami związanymi z biblioteką D3, oszczędzisz sobie większych frustracji w przyszłości. Pora na kurs z cyklu „Podstawy projektowania stron WWW”. Uważaj! To dość gęsty rozdział. Znajdziesz w nim wiedzę zbieraną przez lata tworzenia się internetu — żadna z opisanych tu funkcji nie jest właściwa wyłącznie bibliotece D3. Sugeruję szybkie przejrzenie jego zawartości i poświęcenie uwagi nieznanym Ci dotąd zagadnieniom, z jednoczesnym pominięciem wszystkiego, co znasz. Pamiętaj, że w razie jakichkolwiek wątpliwości możesz tu zajrzeć i przypomnieć sobie co trzeba.

Jeśli nigdy dotąd nie zdarzyło Ci się przygotowywać strony internetowej, staniesz po raz pierwszy przed kwestią radośnie ignorowaną przez większość ludzi na świecie. Otóż przyjdzie Ci odpowiedzieć sobie na pytanie, jak działa internet. Wyobrażając sobie sieć, widzimy najczęściej zbiór połączonych ze sobą stron, podczas gdy w rzeczywistości sieć to przede wszystkim wymiana informacji między serwerami a klientami (przeglądarkami). Gdyby chcieć sfabularyzować proces, jaki zachodzi zawsze po kliknięciu odnośnika czy wpisaniu domeny w pasku adresowym przeglądarki (czyli jakieś osiemdziesiąt osiem tryliardów razy dziennie), wyglądałoby to następująco: KLIENT: Ciekawe, co się dzieje na stronie jakasstrona.com. Chyba tam zajrzę i sprawdzę stan aktualny. Słychać cichy dźwięk nawiązywania połączenia internetowego. SERWER: Witaj, nieznany mi kliencie usług internetowych! To ja, serwer, na którym znajdują się pliki serwisu jakasstrona.com. Która z jego stron cię interesuje? KLIENT: Dzisiaj chciałbym zerknąć na zawartość strony jakasstrona.com/wiadomosci. SERWER: Oczywiście, sekundka. SERWER wysyła do KLIENTA odpowiedni kod. KLIENT: Odebrałem, dziękuję! SERWER: Ależ proszę! Z przyjemnością porozmawiałbym dłużej, ale nadeszły inne żądania. Żegnaj!

27

Klient wysyła na serwer żądanie, a w odpowiedzi otrzymuje z serwera odpowiednie dane. Ale czym są serwer i klient? Serwery internetowe to komputery połączone z internetem, na których uruchomiono odpowiednie oprogramowanie. Nazywamy je serwerami, ponieważ podają (serwują) na żądanie wskazane dokumenty. Serwery na ogół pracują przez cały czas i są stale podłączone do internetu. Jednocześnie projektanci stron często przygotowują tak zwane serwery lokalne, co sprowadza się do uruchomienia na własnym komputerze oprogramowania serwerowego. Serwer lokalny to serwer pracujący tutaj, na miejscu, natomiast serwer zdalny to serwer uruchamiany w innym miejscu, ewentualnie dowolny komputer z wyjątkiem tego, który stoi przed Tobą. Istnieje wiele różnych pakietów oprogramowania serwerowego, ale największą popularnością cieszy się z pewnością Apache. Oprogramowanie serwerowe nie prezentuje się zbyt atrakcyjnie, ale też nikt nie chce go podziwiać. Z kolei przeglądarki potrafią być bardzo estetyczne, wszak mamy je przed oczyma niemal cały czas. Przeciętny człowiek bez trudu kojarzy nazwy takie jak Firefox, Safari, Chrome czy Internet Explorer — wszystkie one to przeglądarki lub tak zwane klienty sieciowe. Teoretycznie każdą stronę internetową można zidentyfikować po tak zwanym adresie URL (Uniform Resource Locator — ujednolicony format adresowania zasobów) lub adresie URI (Uniform Resource Identifier — ujednolicony identyfikator zasobów). Większość ludzi nie zna skrótu URL, ale rozpozna przykład takiego adresu, gdy go zobaczy. Zgodnie z przestarzałą już konwencją adres URL powinien rozpoczynać się od liter WWW, jak na przykład w http://www.calmingmanatee.com/, ale odpowiednie skonfigurowanie serwera pozwala pominąć litery WWW. Pełny adres URL składa się z czterech części:  oznaczenie protokołu łączności, na przykład HTTP lub HTTPS;  nazwa domeny źródła, na przykład calmingmanatee.com;  numer portu określający, którym kanałem ma zostać nawiązane połączenie z serwerem;  wszelkie dodatkowe informacje, na przykład ścieżka dostępu do szukanego pliku lub pa-

rametry zapytania. Pełny adres URL może zatem wyglądać następująco: http://alignedleft.com:80/tutorials/d3/. Zazwyczaj pomija się numer portu, gdyż wszystkie przeglądarki i tak domyślnie próbują korzystać z portu 80. Zatem podany wcześniej adres URL działa identycznie jak adres http://alignedleft.com/tutorials/d3/. Zauważ, że nazwa protokołu jest oddzielona od nazwy domeny dwukropkiem i dwoma ukośnikami zwykłymi. Dlaczego akurat dwoma? Bez powodu. Twórca sieci World Wide Web żałuje dziś tej decyzji (http://bits.blogs.nytimes.com/2009/10/12/the-webs-inventor-regrets-one-small-thing/). Skrót HTTP rozwija się do nazwy Hypertext Transfer Protocol (protokół przesyłania dokumentów hipertekstowych). Obecnie jest to najpopularniejszy protokół, za pomocą którego klienty sieci łącza się z serwerami. Litera „S” na końcu skrótu oznacza Secure — bezpieczny. Protokół HTTPS służy do przesyłania danych, które muszą zostać zaszyfrowane, na przykład dane przelewów bankowych czy transakcji handlowych.

28



Rozdział 3. Podstawy wykorzystywanych technologii

Przeanalizujmy szybko, co dzieje się, gdy ktoś otwiera stronę internetową.

1. Użytkownik uruchamia wybraną przez siebie przeglądarkę, wpisuje adres URL w pasku adresowym, na przykład alignedleft.com/tutorials/d3/. Ponieważ użytkownik nie narzucił konkretnego protokołu, przeglądarka przyjmuje domyślnie, że chodzi o protokół HTTP, i wstawia na początku adresu wyrażenie „http://”.

2. Teraz przeglądarka podejmuje próbę połączenia z serwerem kryjącym się za nazwą domeny alignedleft.com przez domyślny port przypisany protokołowi HTTP, czyli 80.

3. Serwer powiązany z domeną alignedleft.com odbiera połączenie i przyjmuje żądania („Będę tu całą noc”).

4. Przeglądarka wysyła żądanie wyświetlenia strony kryjącej się pod adresem /tutorials/d3/. 5. Serwer odsyła kod HTML odpowiedniej strony. 6. Podczas analizowania kodu przeglądarka kliencka odkrywa odnośniki do innych plików niezbędnych do poprawnego wyświetlenia strony, choćby arkusza stylów CSS czy grafik. Dlatego ponownie łączy się z tym samym serwerem — raz po raz, dla każdego pliku osobno — i wysyła żądania przesłania dodatkowych informacji.

7. Serwer w odpowiedzi wysyła wszystkie niezbędne pliki. 8. W końcu wszystkie dokumenty składające się na stronę internetową zostają przesłane

i klient przystępuje do najbardziej uciążliwego etapu pracy, a mianowicie do wyświetlenia treści strony. Zaczyna od sparsowania znaczników HTML, by poznać strukturę dokumentu, następnie przegląda selektory CSS i ustala wygląd opisanych nimi elementów strony, a potem wreszcie otwiera wszystkie grafiki i wykonuje skrypty JavaScriptu.

Dasz wiarę, że wszystko to dzieje się za każdym razem, gdy klikniesz jakiś odnośnik? Poruszanie się po internecie jest procesem znacznie bardziej skomplikowanymi, niż się to wydaje większości ludzi, ale znajomość relacji klient – serwer jest niezbędna do skutecznego projektowania aplikacji internetowych.

Kod HTML Hipertekstowy język znaczników (HTML) pozwala zapisać strukturę treści strony internetowej. Kod HTML powstaje w zwykłym pliku tekstowym, zapisanym potem z rozszerzeniem .html. Tak prezentuje się kod prostej strony HTML:

Tytuł strony

Tytuł strony

To całkiem interesujący akapit.

HTML jest złożonym językiem znaczników o bogatej historii. W przedstawionym tu skrótowym przeglądzie omówiłem jedynie bieżącą jego wersje (znaną dotąd jako HTML5) wyłącznie w takim stopniu, jakiego potrzebować będzie użytkownik biblioteki D3.

Kod HTML



29

Treść i struktura Główną cechą języka HTML jest umożliwienie użytkownikowi „oznaczania” wybranych fragmentów treści, dzięki czemu zyskuje ona odpowiednią strukturę. Przyjrzyj się na przykład takiemu oto niesformatowanemu tekstowi: Wspaniałe narzędzie obrazujące leczy wszystkie choroby Nowy zestaw narzędzi o otwartym kodzie, zaprojektowany z myślą o przygotowywaniu graficznych prezentacji danych, objawił niespodziewanie drugie oblicze — zaskakująco pozytywny efekt uboczny: leczy wszystkie dolegliwości przeglądarki. Badania przeprowadzone w czołowych laboratoriach potwierdziły, że narzędzie to — D3000 — pozwala się pozbyć nawet takich objawów, jak: gorączka dreszcze apatia Proces leczenia przebiega w trzech etapach: Wprowadź dane. Wygeneruj ich graficzną reprezentację. Uruchom cudowną funkcję uzdrawiającą.

Wystarczy rzut oka, by stwierdzić, że to porywająca historia, ale zapisana w postaci niesformatowanej jest praktycznie nieczytelna. Definiując odpowiednią strukturę, będziemy w stanie wskazać w tekście na przykład nagłówek i treść artykułu. Wspaniałe narzędzie obrazujące leczy wszystkie choroby Nowy zestaw narzędzi o otwartym kodzie, zaprojektowany z myślą o przygotowywaniu graficznych prezentacji danych, objawił niespodziewanie drugie oblicze — zaskakująco pozytywny efekt uboczny: leczy wszystkie dolegliwości przeglądarki. Badania przeprowadzone w czołowych laboratoriach potwierdziły, że narzędzie to — D3000 — pozwala się pozbyć nawet takich objawów, jak:  gorączka,  dreszcze,  apatia.

Proces leczenia przebiega w trzech etapach.

1. Wprowadź dane. 2. Wygeneruj ich graficzną reprezentację. 3. Uruchom cudowną funkcję uzdrawiającą. To ten sam tekst, ale tym razem zdefiniowaliśmy jego strukturę wizualną, dzięki czemu treść stała się lepiej przyswajalna. HTML jest językiem pozwalającym określić strukturę semantyczną, czyli ustalić hierarchię elementów, łączące je zależności oraz znaczenie treści. (Język HTML nie ingeruje w wygląd dokumentu — to zadanie arkuszy stylów CSS). Nasze zadanie polega zatem na zastąpieniu każdego fragmentu tekstu jego opisem semantycznym. Nagłówek Treść akapitu  Pozycja listy nieuporządkowanej  Pozycja listy nieuporządkowanej  Pozycja listy nieuporządkowanej

30



Rozdział 3. Podstawy wykorzystywanych technologii

Treść akapitu

1. Pozycja listy uporządkowanej 2. Pozycja listy uporządkowanej 3. Pozycja listy uporządkowanej Taką właśnie strukturę definiuje się za pomocą języka znaczników HTML.

Budowanie struktury znacznikami „Oznaczanie” polega na wprowadzaniu do dokumentu odpowiednich znaczników, które tworzą elementy strony. Każdy znacznik rozpoczyna się znakiem , na przykład

będący otwarciem nowego akapitu. Większość znaczników występuje w parach. Para taka — znacznik otwierający i znacznik zamykający — definiuje nowy element struktury dokumentu. Znaczniki zamykające są oznaczane ukośnikiem domykającym element w następujący sposób:

. Ostatecznie zatem tekst akapitu zostanie zapisany jako:

To całkiem interesujący akapit.

Znaczniki można zagnieżdżać jedne w drugich. Oto przykład wykorzystania znacznika em wyróżniającego fragment tekstu (od angielskiego emphasis — podkreślenie, nacisk, akcent):

To całkiem interesujący akapit.

To właśnie zagnieżdżanie znaczników określa hierarchię dokumentu. W podanym przykładzie znacznik em jest potomkiem znacznika p, ponieważ w całości znajduje się w jego wnętrzu. (Można też powiedzieć odwrotnie: znacznik p jest rodzicem znacznika em). Zagnieżdżając znaczniki, należy zwracać baczną uwagę na ich kolejność — niedopuszczalne jest ich przeplatanie, bo zakłóca hierarchię dokumentu. Na przykład:

Taka praktyka może prowadzić do występowania nieprzewidzianych

rezultatów i dlatego należy jej unikać.

Niektóre znaczniki, na przykład img pozwalający wstawić do dokumentu grafikę, nigdy nie występują w parach. Choć specyfikacja języka HTML nie narzuca już obowiązku samodomykania ich, nadal widuje się zapisane w taki sposób — z ukośnikiem kończącym przed ostatnim nawiasem ostrym:

W HTML5 samodomykanie jest w pełni dowolne, więc podany wyżej przykład można zapisać równie dobrze jako:

Najczęściej stosowane znaczniki Język HTML składa się z setek różnych znaczników, tu przedstawię tylko najpopularniejsze. W dalszych rozdziałach znajdziesz omówienia jeszcze kilku. (Jeśli interesuje Cię ich pełna lista, polecam stronę Mozilla Developer Network, gdzie pod adresem https://developer.mozilla.org/ en-US/docs/Web/HTML/Element?redirectlocale=en-US&redirectslug=HTML%2FElement znajdziesz wszystkie informacje).

Kod HTML



31



To deklaracja rodzaju dokumentu. Musi znaleźć się na początku każdego pliku. html

W nim umieszcza się całą zawartość dokumentu. head

W nagłówku dokumentu znajdują się wszystkie opisujące plik metadane, między innymi jego tytuł (title), a także odwołania do zewnętrznych arkuszy stylów i skryptów. title

W tych znacznikach umieszcza się tytuł dokumentu. Większość przeglądarek wyświetla go na górze okna i umieszcza na liście stron dodanych do zakładek.

body

Wszystko, czego nie umieścimy w sekcji nagłówkowej, powinno trafić do sekcji body. Zasadniczo w niej właśnie zawiera się cała widoczna zawartość strony. h1, h2, h3, h4

Te znaczniki pozwalają definiować nagłówki różnych poziomów. Znacznik h1 formatuje najważniejsze w hierarchii nagłówki, znacznik h2 pozwala uzyskać podtytuł pierwszego poziomu i tak dalej. p

Znacznik akapitu! ul, ol, li

Elementy list nieuporządkowanych (najczęściej wyświetlanych w postaci wypunktowania) umieszcza się w znaczniku ul. Elementy list uporządkowanych (ol) bardzo często są po prostu numerowane. W obydwu rodzajach znaczników list zagnieżdża się znaczniki li otaczające treść kolejnych pozycji na liście. em

Znacznik wyróżnienia, najczęściej uzyskiwanego za pomocą kursywy. strong

Znacznik dodatkowego wyróżnienia. Najczęściej pogrubia krój pisma.

a

Znacznik odnośnika. Odnośniki są wyświetlane domyślnie w postaci niebieskiego tekstu z podkreśleniem. Wprowadzenie odpowiednich definicji stylu pozwala zmienić ich wygląd. span

Dowolne zaznaczenie fragmentu tekstu będącego zazwyczaj częścią treści umieszczonej w innym znaczniku, na przykład w osobnym akapicie. div

Dowolny podział wprowadzony w dokumencie. Znacznika tego używa się do łączenia i przechowywania powiązanych ze sobą elementów strony. Wróćmy do podanego poprzednio przykładu. Po wprowadzeniu struktury semantycznej treść strony znalazłaby się w następujących znacznikach: Wspaniałe narzędzie obrazujące leczy wszystkie choroby

Nowy zestaw narzędzi o otwartym kodzie, zaprojektowany z myślą o przygotowywaniu graficznych prezentacji danych, objawił niespodziewanie drugie oblicze — zaskakująco pozytywny efekt uboczny: leczy wszystkie dolegliwości przeglądarki. Badania

32



Rozdział 3. Podstawy wykorzystywanych technologii

przeprowadzone w czołowych laboratoriach potwierdziły, że narzędzie to — D3000 — pozwala się pozbyć nawet takich objawów, jak:

• gorączka,
• dreszcze,
• apatia.

Proces leczenia przebiega w trzech etapach:

Wprowadź dane.

Wygeneruj ich graficzną reprezentację.

Uruchom cudowną funkcję uzdrawiającą.

Po zinterpretowaniu znaczników przeglądarka wyświetli tekst w postaci przedstawionej na rysunku 3.1.

Rysunek 3.1. Domyślne formatowanie kodu HTML w przeglądarce

Zwróć uwagę, że wszelkie działania ograniczyłem do określenia semantycznej struktury zawartości pliku. Nie podałem żadnych definicji właściwości graficznych, pozostawiając domyślne wartości kolorów, rozmiaru czcionki, szerokości wcięć czy wysokości wierszy. Bez wytycznych ze strony użytkownika przeglądarka odwołuje się do stylów domyślnych, które, jaki widzisz, wyglądają nieszczególnie.

Atrybuty Każdemu znacznikowi HTML można przypisać szereg tak zwanych atrybutów, czyli par właściwość – wartość, które wprowadza się do znacznika otwierającego:

Za nazwą właściwości pojawia się znak równości oraz wartość właściwości ujęta w cudzysłowie. Różnym znacznikom przypisuje się różne atrybuty, na przykład dla znacznika odnośnika a definiujemy atrybut href, w którym podajemy adres URL odnośnika. (Nazwa właściwości href to skrót od angielskiego wyrażenia HTTP reference, czyli właśnie „odnośnik HTTP”). Strona internetowa biblioteki D3

Niektóre atrybuty można przypisać każdemu znacznikowi. Do grupy tej zaliczamy między innymi atrybuty class i id.

Kod HTML



33

Klasy i identyfikatory Atrybuty klasy i identyfikatora są niezwykle przydatne, ponieważ można się do nich odwoływać i w ten sposób wskazywać konkretne elementy treści strony. W kodzie arkusza stylów CSS czy skryptów JavaScriptu zawsze pojawiają się liczne odwołania do atrybutów klas i identyfikatorów. Oto przykład:

Doskonały akapit.

Wnikliwy akapit.

Budzący podziw akapit.

To trzy bardzo podnoszące na duchu akapity, ale tylko jeden z nich jest prawdziwie cudowny — jego też wyróżniłem atrybutem class="cudowny". Trzeci akapit dołącza tym samym do klasy elementów cudownych, dzięki czemu i jego, i pozostałych członków klasy można dowolnie wskazywać i wprowadzać zmiany w ich wyglądzie i zachowaniu. (O tym już za chwilę). Każdy znacznik może należeć do kilku różnych klas, a ich nazwy oddziela się od siebie spacjami:

Doskonały akapit.

Wnikliwy akapit.

Budzący podziw akapit.

Teraz każdy z trzech akapitów jest godny-podziwu, ale tylko jeden z nich jest godny-podziwu i cudowny jednocześnie. Identyfikatory działają podobnie, przy czym wybrany znacznik może być opisany tylko jednym identyfikatorem, a każdy identyfikator może pojawiać się na stronie tylko raz. Przykładowo:



Identyfikatory przydają się niezwykle, gdy któryś ze znaczników na stronie ma cechować się wyjątkowymi właściwościami, jak na przykład znacznik div funkcjonujący jako przycisk czy kontener dla fragmentu zawartości strony. Ogólnie jeśli na stronie ma się znaleźć tylko jeden taki znacznik, użyj atrybutu id. W przeciwnym przypadku posłuż się atrybutem class. Nazwy klas i identyfikatorów nie mogą zaczynać się od cyfr, jako pierwsza musi pojawić się litera. Oznacza to, że wyrażenie id="1" nie zostanie poprawnie zinterpretowane, ale już id="item1" zadziała zgodnie z oczekiwaniami. Przeglądarka nie wyświetli żadnych powiadomień informujących o wystąpieniu błędu, kod po prostu nie zadziała, a Ty będziesz szaleć, szukając tego przyczyn.

Komentarze Warto wyrobić sobie nawyk komentowania każdego większego i bardziej złożonego projektu. Komentarze to niewielkie wiadomości, które zostawiasz sobie, by wyjaśnić, dlaczego w danym miejscu pojawia się takie, a nie inne rozwiązanie. Jeśli choć trochę przypominasz mnie, to zaglądając po tygodniu do odłożonego na później projektu, nie będziesz już pamiętać niczego z poprzednio opracowanych rozwiązań. Komentowanie to pomocna dłoń, wsparcie i wskazówki dla swojej przyszłej (i mocno zagubionej) osoby.

34



Rozdział 3. Podstawy wykorzystywanych technologii

W kodzie HTML komentarze oznacza się następująco: .

DOM Pod pojęciem obiektowego modelu dokumentu, DOM (ang. Document Object Model) kryje się koncepcja hierarchicznej struktury dokumentu HTML. Każda para znaczników (lub w szczególnych przypadkach pojedynczy znacznik) tworzy element. Zależności łączące poszczególne elementy opisujemy pojęciami właściwymi dla relacji rodzinnych — rodzic, dziecko, bliźniak, przodek czy potomek. Przykładowo w takim kodzie HTML:

Wiadomość z ostatniej chwili

znacznik body jest rodzicem znaczników h1 i p (sobie bliźniaczych), natomiast wszystkie znaczniki są potomkami znacznika html. Przeglądarki internetowe parsują znaczniki DOM, by zorientować się w układzie poszczególnych elementów strony. Dla nas, projektantów wizualizacji, zachowanie poprawnej hierarchii DOM ma znaczenie priorytetowe, ponieważ to właśnie dzięki właściwej hierarchii funkcje skryptowe mogą nadawać odpowiednie style poszczególnym fragmentom strony i wywoływać odpowiednie ich działanie. Nie chcemy przecież, by wszystkie znaczniki div były niebieskie. Wolelibyśmy wiedzieć, w jaki sposób wybrać z nich te, które należą do klasy niebo i im nadać kolor niebieski.

Narzędzia programisty W dawnych czasach praca nad stroną internetową przebiegała zgodnie z następującym schematem:

1. Pisało się kod w edytorze tekstu. 2. Zapisywało się zawartość pliku. 3. Przechodziło się do okna przeglądarki. 4. Odświeżało się jego zawartość i sprawdzało, czy kod działa prawidłowo. 5. Jeśli nie, należało zgadnąć, w którym momencie przetwarzania kodu w magicznym czarnym pudełku przeglądarki pojawia się błąd, i wrócić do punktu 1.

Przeglądarki słynęły z niechęci do ujawniania tego, co działo się wewnątrz silnika programu, sprawiając, że próby odnalezienia błędu przeradzały się w prawdziwy koszmar. (Pod koniec lat dziewięćdziesiątych XX wieku i na początku wieku XXI rzeczywiście śniły mi się koszmary o szukaniu błędów w kodzie). Na szczęście doczekaliśmy się wreszcie ery oświecenia. Dziś każda szanująca się przeglądarka ma wbudowane narzędzia programisty pozwalające zajrzeć bestii w trzewia i pod maskę (żeby pomieszać niepasujące do siebie metafory). Narzędzia programisty



35

Piszę to wszytko, by podkreślić, jak ważne dla każdego projektanta są narzędzia programisty. Przydadzą Ci się nieraz podczas pisania kodu, a szczególnie w tych sytuacjach, gdy coś pójdzie niezgodnie z planem i trzeba będzie odnaleźć błąd. Zacznijmy od najprostszego z narzędzi — podglądu kodu źródłowego strony HTML (rysunek 3.2).

Rysunek 3.2. Podgląd kodu źródłowego w nowym oknie

Wszystkie dzisiejsze przeglądarki oferują taką możliwość, choć oczywiście w każdej należy szukać jej w innym miejscu. W Google Chrome 28 funkcję tę znajdziesz w Dostosowywanie i kontrolowanie Google Chrome/Narzędzia/Wyświetl źródło. Firefox 22.0 ma ją w Narzędzia/Dla twórców witryn/Źródło strony. W Safari 5.1.7 opcja ta znajduje się w menu Programowanie/Pokaż inspektora WWW (przy czym, żeby w ogóle zobaczyć pozycję menu Programowanie, trzeba najpierw zaznaczyć opcję Pokazuj menu Programowanie w pasku menu dostępną w Safari/Preferencje/Zaawansowane). Od tej pory będę zakładał, że korzystasz z najnowszej wersji tej przeglądarki, z którą jest Ci najwygodniej. Wymienione tu polecenia wyświetlają kod HTML strony, ale jeśli w czasie jej wczytywania do przeglądarki uruchomiono jakiś kod D3 lub JavaScript, ostateczna postać DOM może znacznie się różnić od tu przedstawionej. Na szczęście narzędzia dla programistów dostępne w przeglądarkach pozwalają podejrzeć bieżący stan hierarchii DOM, choć oczywiście w każdej przeglądarce wygląda to nieco inaczej. W Chrome odpowiednią funkcję znajdziesz w menu Dostosowywanie i kontrolowanie Google Chrome/Narzędzia/Narzędzia dla programistów, w Firefox musisz szukać w Narzędzia/Dla twórców witryn, a w Safari należy zacząć od wyświetlenia w pasku pozycji menu Programowanie (Safari/Preferencje/Zaawansowane). Potem, gdy menu Programowanie będzie już dostępne, należy wybrać w nim pozycję Pokaż inspektora WWW. Każda z przeglądarek oferuje też dostęp do tych funkcji za pomocą odpowiedniego skrótu klawiszowego (wyświetlanego obok polecenia menu) lub po kliknięciu w wybranym miejscu strony prawym przyciskiem myszy i zastosowaniu polecenia „zbadaj element” (lub podobnego). Do niedawna Safari i Chrome oferowały takie same narzędzia programowania, ale wraz z wprowadzeniem Safari 6.0 firma Apple zaprezentowała całkowicie nowy układ narzędzi, co zresztą wywołało niezadowolenie wielu osób przyzwy36



Rozdział 3. Podstawy wykorzystywanych technologii

czajonych do pracy ze starym zestawem1. (Poruszanie się po menu nowych narzędzi jest wyjątkowo niewygodne, jestem przekonany, że nie tylko dla mnie). Okno inspektora może różnić się od tego przedstawionego na zrzucie z ekranu, ale dostępne w nim funkcje z pewnością będą podobne. Rysunek 3.3 przedstawia zakładkę Elements (Elementy) inspektora kodu HTML. W głównym oknie wyświetlany jest bieżący stan DOM. To wygodne rozwiązanie, ponieważ generowany kod będzie dynamicznie zmieniał kształt elementów hierarchii DOM. Inspektor kodu pozwala obserwować te zmiany.

Rysunek 3.3. Inspektor kodu w przeglądarce Chrome

Przyjrzyj się uważnie, a zauważysz drobne różnice między strukturą DOM a czystym HTML — choćby wygenerowane automatycznie znaczniki html, head i body. (Jestem leniwy — nie chciało mi się wprowadzać ich w kodzie). Jeszcze jedna uwaga. Dlaczego skupiam się tu na omawianiu możliwości przeglądarek Chrome, Firefox i Safari? Dlaczego nie piszę o Internet Explorerze, Operze czy innych dostępnych na rynku? Przede wszystkim dlatego, że najlepiej jest pracować nad projektem w przeglądarce, która oferuje możliwie rozbudowaną obsługę standardów. Microsoft poczynił ogromny krok naprzód, wprowadzając do użytku przeglądarki Internet Explorer 9 i 10, ale to właśnie Chrome, Firefox i Safari oferują największą swobodę w pracy ze standardami i są często aktualizowane.

1

Safari 6.0 jest dostępna jedynie z systemem MacOS. W wersji dla Windows (5.x) narzędzia programowania Safari nie różnią się niczym od narzędzi programowania z Chrome — przyp. tłum.

Narzędzia programisty



37

Poza tym jeśli spędza się wiele czasu z narzędziami programisty, należy wybierać takie, których wykorzystywanie sprawia możliwie największą przyjemność — to samo dotyczy przeglądarki. Dotychczas byłem gorącym zwolennikiem Safari, ale mój zapał ostygł po zetknięciu się z Safari 6. Teraz używam na przemian narzędzi z przeglądarek Chrome i Firefox. Sugeruję, by każdy sprawdził własnoręcznie, które odpowiadają mu najbardziej.

Renderowanie i model pudełkowy Po sparsowaniu kodu HTML i wygenerowaniu struktury DOM przeglądarka przechodzi do zastosowania reguł zawartych w strukturze DOM i na tej podstawie rysuje piksel po pikselu zawartość strony. Proces ten nazywamy renderowaniem. Podczas projektowania stron WWW należy pamiętać o jednej zasadzie dotyczącej renderowania: dla przeglądarki wszystko jest „pudełkiem”. Akapity oraz znaczniki div i span — są one pudełkami, czyli dwuwymiarowymi prostokątami charakteryzującymi się właściwościami typowymi dla tych figur: wszystkie mają szerokość, wysokość i są położone w jakimś miejscu przestrzeni. Nawet te kształty, które dla nas są nieregularne czy mają zaokrąglone rogi, dla przeglądarki są tylko jeszcze jednym pudełkiem. Inspektor kodu źródłowego pozwala przyjrzeć się rozmieszczeniu klocków budujących stronę WWW. Aby je zobaczyć, ustaw kursor myszy nad dowolnie wybranym znacznikiem, a w podglądzie strony pojawi się niebieski prostokąt odpowiadający powierzchni danego pudełka (rysunek 3.4).

Rysunek 3.4. „Pudełko” znacznika podświetlone w inspektorze kodu źródłowego

38



Rozdział 3. Podstawy wykorzystywanych technologii

Inspektor oferuje całkiem sporo informacji na temat nieuporządkowanej listy ujętej w znaczniki ul. W żółtej ramce wyświetlanej w lewym dolnym rogu pudełka listy znajdziesz wymiary pola przypisanego zawartości znacznika, a w lewym dolnym rogu obszaru inspektora znajduje się wyciąg ze struktury DOM dokumentu: html>body>ul. Pole znacznika ul zajmuje całą szerokość oka, ponieważ jest tak zwanym elementem blokowym. (Rozwiń zakładkę Computed Style (Styl nadany) znajdującą się po prawej stronie okna inspektora, a przekonasz się, że znajduje się w nim reguła display: block). Taki sposób wyświetlania jest przeciwieństwem opcji wyświetlania sąsiadująco (ang. in line), kiedy to poszczególne pola są umieszczane obok siebie, a nie jak pozostałe — jeden nad drugim. Sąsiadująco wyświetla się zazwyczaj znaczniki strong, em, a i span. Domyślnie elementy blokowe rozszerzają się tak, by wypełnić sobą całą szerokość kontenera, w którym się znajdują, spychając tym samym wszelkie bliźniacze obiekty niżej. Elementy sąsiadujące nie zmieniają wymiarów — układają się spokojnie jeden obok drugiego. (Temat rozprawki: Do której grupy elementów się zaliczasz?).

Kaskadowe arkusze stylów CSS Kaskadowe arkusze stylów to narzędzie pozwalające zmieniać wygląd elementów struktury DOM. Najprostszy arkusz ma następującą postać: body { background-color: white; color: black; }

Każdy taki układ składa się z selektora i właściwości. Zebrane nawiasami klamrowymi właściwości pojawiają się zawsze po nazwie selektora. Wartość właściwości od jej nazwy oddziela się dwukropkiem, a każdy wiersz kończy się średnikiem. Ostatecznie wygląda to tak: selector { właściwość: wartość; właściwość: wartość; właściwość: wartość; }

Różne selektory mogą byś opisane tym samym zestawem właściwości. W takim przypadku podaje się definicję zbiorczą, w której nazwy selektorów oddzielone są od siebie przecinkami: selektorA, selektorB, selektorC { właściwość: wartość; właściwość: wartość; właściwość: wartość; }

Załóżmy, że chcesz podać identyczne definicje rozmiaru czcionki, wysokości wiersza i koloru dla znacznika akapitu p oraz elementów listy li. p, li { font-size: 12px; line-height: 14px; color: orange; }

Kaskadowe arkusze stylów CSS



39

Taki fragment kodu (selektory i podane w nawiasach klamrowych właściwości) określa się mianem reguły arkusza CSS.

Selektory Biblioteka D3 wykorzystuje selektory arkusza stylów, by określić, na których elementach struktury DOM ma działać. Dlatego właśnie musisz postarać się zrozumieć to zagadnienie. Selektory pozwalają określić dokładnie, które elementy struktury mają zostać zmienione zgodnie z wytycznymi reguły CSS. Istnieje kilka rodzajów selektorów, ale w tej książce znajdziesz wyłącznie te najprostsze. Rodzaje selektorów Oto najprostsze selektory. Ich nazwy odpowiadają nazwom znaczników hierarchii DOM: /* Wybiera wszystkie nagłówki poziomu 1. */ /* Wybiera wszystkie akapity. */ /* Wybiera wszystkie fragmenty tekstu oznaczone znacznikiem strong. */ /* Wybiera wszystkie fragmenty tekstu oznaczone znacznikiem em. */ /* Wybiera wszystkie fragmenty zawarte w znacznikach div */

h1 p strong em div

Selektory potomne Odpowiadają one wszystkim znacznikom zawartym w innych znacznikach (czy też „dziedziczonym” po nich). Będziemy bardzo często korzystać z tego rodzaju znaczników. h1 em div p

/* Wybiera wszystkie fragmenty tekstu oznaczone znacznikiem em i należące do nagłówków poziomu 1. */ /* Wybiera wszystkie akapity zawarte w znacznikach div. */

Selektory klasowe Opisują dowolne znaczniki przypisane konkretnej klasie. Nazwę klasy poprzedza kropka. .caption .label .axis

/* Wybiera wszystkie znaczniki klasy „caption”. */ /* Wybiera wszystkie znaczniki klasy „label”. */ /* Wybiera wszystkie znaczniki klasy „axis”. */

Ponieważ każdy znacznik może należeć do kilku różnych klas, można uwzględnić to podczas nadawania stylów. Klasy łączy się w następujący sposób: .bar.highlight .axis.x .axs.y

/* Oznacza na przykład wszystkie znaczniki wyróżnionych słupków. */ /* Oznacza na przykład oś x. */ /* Oznacza na przykład oś y. */

Klasa .axis mogłaby w takim przypadku opisywać znaczniki powiązane z obiema osiami wykresu, natomiast klasa .axis.x odnosiłaby się wyłącznie do znaczników osi OX. Selektory identyfikatorów Selektory te pozwalają odwoływać się do znaczników opisanych konkretnym identyfikatorem. (Pamiętaj, że każdy identyfikator może być wykorzystany tylko raz w całej strukturze DOM). Identyfikatory oznacza się krzyżykiem. #header #nav #export

/*Wybiera znacznik opisany identyfikatorem „header”. */ /*Wybiera znacznik opisany identyfikatorem „nav”. */ /*Wybiera znacznik opisany identyfikatorem „export”. */

Łączenie selektorów na różne sposoby daje możliwość odwołania się w zasadzie do każdego wybranego znacznika modelu DOM. W zależności od wybranego połączenia uzyskasz inne rezultaty. Przykładowo:

40



Rozdział 3. Podstawy wykorzystywanych technologii

div.sidebar #button.on

/* Wybiera wszystkie znaczniki div klasy „sidebar”, ale pozostałe znaczniki tej klasy pomija. */ /* Wybiera znacznik opisany identyfikatorem „button”, ale stosuje reguły stylu tylko wtedy, gdy znacznik należy jednocześnie do klasy „on”. */

Pamiętaj, że model DOM jest dynamiczny, więc klasy i identyfikatory znaczników można dodawać i usuwać w dowolnej chwili, co pozwala definiować reguły stylów CSS mające zastosowanie w różnych sytuacjach. Szczegóły znajdziesz na stronie Mozilla Developer Network (https://developer.mozilla.org/pl/docs/ CSS/CSS_Reference).

Właściwości i wartości Style definiowane są przez pary właściwość – wartość: margin: 10px; padding: 25px; background-color: yellow; color: pink; font-family: Helvetica, Arial, sans-serif;

Pozwolę sobie zwrócić uwagę na coś oczywistego. Otóż każda właściwość wymaga podania innego rodzaju wartości: we właściwości color należy podać kolor, margin potrzebuje pewnej miary (w tym przypadku podanej w pikselach, px) i tak dalej. Skoro już o tym mowa, warto dodać, że kolory można podawać w kilku różnych formatach:  za pomocą nazwy, na przykład orange;  za pomocą wartości heksadecymalnych, na przykład #3388aa lub #38a;  za pomocą wartości palety RGB, na przykład rgb(10, 150, 20);  za pomocą wartości palety RGB z kanałem przezroczystości alfa, na przykład rgba(10,

150, 20, 0.5).

Pełną listę właściwości można znaleźć w sieci, choćby pod adresem https://developer.mozilla.org/ pl/docs/CSS/CSS_Reference, dlatego nie wypisuję ich tutaj. Będę wprowadzał je stopniowo, rozwijając kolejne przykłady.

Komentarze /* A przy okazji: tak właśnie wygląda komentarz umieszczony w kodzie CSS. Zaczyna się parą ukośnik – gwiazdka, a kończy symbolem odwrotnym: gwiazdka – ukośnik. Wszystko, co znajdzie się między takimi oznaczeniami, zostanie zignorowane podczas renderowania strony. */

Wprowadzanie stylów na stronę Istnieją trzy metody dodawania reguł stylów do dokumentu HTML.

Osadzanie kodu CSS bezpośrednio w kodzie HTML Jeżeli zdecydujesz się osadzić reguły stylów w dokumencie HTML, cały projekt będzie mógł się zawrzeć w jednym pliku. Kod CSS wpisuje się wtedy w sekcji head dokumentu:

Kaskadowe arkusze stylów CSS



41

Jak sądzisz, czy taki niepozorny akapit jak ja ma styl?

Podany tu kod HTML ze stylami CSS jest wyświetlany w przeglądarce w sposób zaprezentowany na rysunku 3.5.

Rysunek 3.5. Renderowanie kodu z osadzonymi regułami stylów CSS

Osadzanie to najprostsze rozwiązanie, ale osobiście wolę segregować kod rodzajami — w osobnych plikach HTML, CSS i JavaScript.

Odwoływanie się do zewnętrznego arkusza stylu Jeśli chcesz odseparować kod CSS od kodu HTML, możesz zapisać ten pierwszy w osobnym pliku tekstowym o rozszerzeniu .css, jak choćby style.css. Odwołanie do zewnętrznego arkusza CSS umieszcza się w sekcji head dokumentu, w znaczniku link:

Jak sądzisz, czy taki niepozorny akapit jak ja ma styl?

Ten kod generuje dokładnie taką samą stronę jak podany poprzednio kod.

Reguły zdefiniowane dla znacznika Trzecia metoda, tak zwana inline, polega na definiowaniu reguł bezpośrednio w znaczniku HTML. Aby z niej skorzystać, należy dodać do wybranego znacznika atrybut style. Jego wartość to właśnie podana w cudzysłowie reguła CSS. Wynik działania podanego niżej kodu został przedstawiony na rysunku 3.6.

Podawanie stylów w znacznikach powoduje czasami kłopoty.

42



Rozdział 3. Podstawy wykorzystywanych technologii

Rysunek 3.6. Renderowanie kodu z regułą CSS podaną w znaczniku

Ponieważ w tym przypadku reguły stylów pojawiają się bezpośrednio w znaczniku, stosowanie selektorów staje się zbędne. Style w znacznikach zaciemniają kod, ale ułatwiają wprowadzanie modyfikacji na poziomie pojedynczych elementów, szczególnie jeśli dana definicja nie ma sensu w ujęciu globalnym. Już wkrótce dowiesz się, w jaki sposób wprowadzać ten rodzaj stylów programowo, za pomocą funkcji biblioteki D3 (co zasadniczo jest znacznie prostsze niż wpisywanie ich ręcznie po jednym).

Dziedziczenie, kaskadowość i szczegółowość Jeśli programista nie zadecyduje inaczej, wiele właściwości stylów jest przekazywanych potomkom znacznika na drodze dziedziczenia. Na przykład reguła stylu w tym dokumencie określa wygląd znacznika div:

Jestem bliźniakiem znacznika div.

Jestem potomkiem i dzieckiem znacznika div.

Ale po wyświetleniu strony okazuje się, że drugi akapit odziedziczył styl określony dla znacznika div (czerwone tło, wytłuszczona czcionka i tak dalej), co widać na rysunku 3.7. Wynika to z faktu, że znacznik p jest potomkiem znacznika div, któremu przypisaliśmy reguły stylu.

Rysunek 3.7. Styl odziedziczony

Kaskadowe arkusze stylów CSS



43

Dziedziczenie jest wspaniałą cechą arkuszy stylów CSS, bo dzięki niemu dzieci mogą przejmować styl rodziców. (W tym stwierdzeniu kryje się drugie dno). Pora odpowiedzieć na pytanie, z którym prędzej czy później muszą zmierzyć się wszyscy: dlaczego mówi się o kaskadowych arkuszach stylów? Otóż wynika to z faktu, że gdy styl danego znacznika został podany za pomocą większej liczby selektorów, to reguły pojawiające się później przeważnie zastępują te, które wystąpiły wcześniej. Można powiedzieć, że selektor opada kaskadowo. Spójrz na przykład. Zgodnie z nim wszystkie akapity dokumentu zostaną zapisane na niebiesko. Wyjątek stanowią te, które określono jako należące do klasy highlight — w ich przypadku tekst będzie czarny, za to pojawi się na żółtym tle. Wynik renderowania strony przedstawiłem na rysunku 3.8. Do wyróżnionego akapitu najpierw zostaje zastosowana zasada ogólna, ale potem jej ustawienia zostają zastąpione bardziej szczegółowymi regułami selektora p.highlight: p { color: blue; } p.highlight { color: black; background-color: yellow; }

Rysunek 3.8. Kaskadowość CSS i zdolność dziedziczenia w pełnej krasie

Wspomniałem, że reguły pojawiające się później zajmują zazwyczaj miejsce reguł wcześniejszych, lecz nie we wszystkich przypadkach jest to prawdą. O tym, czy dojdzie do zamiany, decyduje tak zwana szczegółowość poszczególnych selektorów. Reguły selektora p.highlight zostaną użyte zamiast reguł selektora p, nawet gdyby podano je w pierwszej kolejności, po prostu dlatego, że ten pierwszy jest bardziej szczegółowy. Kolejność podawania decyduje o wyborze selektora tylko wtedy, gdy selektory mają ten sam stopień szczegółowości. Ta właściwość kaskadowych arkuszy stylów wywołuje najwięcej zamieszania. Zasady wyznaczania wartości tego parametru są raczej enigmatyczne, nie będę się więc nimi tu zajmował. Aby oszczędzić sobie problemów, postaraj się raczej podawać czytelne i przejrzyste definicje selektorów. Najpierw podaj te najbardziej ogólne, a bardziej szczegółowe w drugiej kolejności. To powinno wystarczyć.

JavaScript JavaScript to język skryptowy, który pozwala zmieniać dynamicznie strukturę modelu DOM strony wysłanej już do przeglądarki. Jak wspominałem wcześniej, aby zrozumieć zasadę działania funkcji biblioteki D3, trzeba nieco poznać zasady pracy z JavaScriptem. Z czasem zajmiemy się tym tematem dokładniej, na razie zaś podam tylko podstawowe informacje.

44



Rozdział 3. Podstawy wykorzystywanych technologii

Witaj, konsolo! Zazwyczaj kod JavaScriptu (czy też skrypt) piszemy w pliku tekstowym, a następnie wczytujemy go do przeglądarki przez stronę internetową. Ale to nie jedyna metoda. Można też wprowadzić kod JavaScriptu bezpośrednio w oknie przeglądarki. W ten sposób łatwo i szybko złapiemy przedsmak programowania i bez większego wysiłku sprawdzimy konkretne pomysły. Konsola JavaScriptu przydaje się także bardzo mocno podczas wyszukiwania błędów i daje w każdej chwili wgląd w kod. W przeglądarce Chrome otwiera się ją następująco: Dostosowywanie i kontrolowanie Google Chrome/Narzędzia/Konsola JavaScript. W Firefoksie należy użyć menu Narzędzia/Dla twórców witryn/Konsola WWW, a w Safari wymaga to otwarcia menu Programowanie/Pokaż konsolę błędów (rysunek 3.9).

Rysunek 3.9. Świeżutka konsola JavaScriptu… Pyszności!

Konsola przyjmuje kod po jednym wierszu i zawsze zwraca wynik jego wykonania. Jeśli na przykład wpiszesz w niej liczbę 7, zwróci — zupełnie bez polotu — wartość 7. Genialne. Może się też zdarzyć, że zechcesz napisać skrypt automatycznie wypisujący w konsoli pewne wartości, żeby w ten sposób kontrolować kolejne stadia jego wykonania. Jak się przekonasz, gdy zobaczysz podane dalej przykłady, tego rodzaju zadanie realizuje się za pomocą polecenia console.log("cośtam");. Wpisz te przykłady w konsoli, żeby się przekonać, na czym polega praca z nią.

Zmienne Zmienne służą do przechowywania danych. Najprostszej zmiennej można przypisać jedną wartość: var liczba = 5;

Pojawiające się w tej instrukcji słowo kluczowe var wskazuje, że jest ona deklaracją nowej zmiennej — jej nazwa to liczba. Znak równości jest operatorem przypisania. Działa następująco: pobiera wartość stojącą po jego prawej stronie (5) i przypisuje ją zmiennej stojącej po lewej stronie (liczba). Dlatego jeśli spotkasz się kiedyś z zapisem w stylu: domyslnyKolor = "wcsieklyRoz";

JavaScript



45

postaraj się pamiętać, że znak równości oznacza nie „równa się”, lecz „przyjmuje wartość”. Gdyby chcieć przetłumaczyć tę instrukcję na język polski, brzmiałaby ona następująco „Zmienna domyslnyKolor przyjmuje wartość wściekły róż”. Jak widzisz, zmienne mogą przechowywać nie tylko wartości liczbowe — równie dobrze można przypisywać im łańcuchy tekstowe. Zmienne tego rodzaju nazywamy łańcuchowymi, ponieważ ich wartość powstaje przez połączenie w łańcuch pojedynczych znaków. Wartość zmiennej łańcuchowej podaje się w cudzysłowie. Poza tym zmienne mogą też przyjmować wartości logiczne (boolowskie), czyli prawda (true) lub fałsz (false): var naRazieMaToSens = true;

Zauważ też, że każda instrukcja języka JavaScript kończy się średnikiem. Spróbuj wprowadzić kilka deklaracji zmiennych w konsoli. Wpisz na przykład ilosc = 200 i naciśnij Enter, a następnie w nowym wierszu wpisz ilosc i znów naciśnij Enter. W kolejnym wierszu powinna się pojawić liczba 200 — dowód na to, że JavaScript pamięta wartość przypisaną zmiennej ilosc!

Inne typy zmiennych Zmienna to pojemnik na dane, najmniejszy element tworzący programy. Zmienne są podstawą innych struktur danych będących tak naprawdę tylko różnorakimi układami tych „cegiełek”. Przyjrzyjmy się teraz niektórym ze złożonych typów danych — tablicom, obiektom i tablicom obiektów. Jeśli chcesz, możesz pominąć teraz ten podrozdział i wrócić do niego, gdy przyjdzie pora na wprowadzanie własnych danych do kodu D3.

Tablice Tablice to zbiory wartości podawanych w konkretnej kolejności, dla wygody przechowywanych w jednej zmiennej. Kontrolowanie wartości zapisanych w osobnych zmiennych jest mało efektywne: var var var var var

liczbaA liczbaB liczbaC liczbaD liczbaE

= = = = =

5; 10; 15; 20; 25;

Gdy wartości te zadeklaruje się w postaci jednej tablicy, zachowanie nad nimi kontroli staje się od razu znacznie prostsze. Nawiasy kwadratowe [] oznaczają tablicę, a poszczególne jej wartości podaje się oddzielone przecinkami: var liczby = [ 5, 10, 15, 20, 25 ];

Obrazowanie danych praktycznie nie istnieje bez tablic, będzie więc mnóstwo okazji, by się do nich przyzwyczaić. Dostęp do poszczególnych wartości zapisanych w tablicy (pobieranie) jest realizowany za pomocą nawiasów kwadratowych: liczby[2] //Zwraca 15.

46



Rozdział 3. Podstawy wykorzystywanych technologii

Liczba podana w nawiasach określa konkretną pozycję w tablicy. Pamiętaj tylko, że indeksy zmiennych tablicowych są numerowane od zera, zatem pierwszej pozycji odpowiada 0, drugiej 1 i tak dalej: liczby[0] liczby[1] liczby[2] liczby[3] liczby[4]

//Zwraca //Zwraca //Zwraca //Zwraca //Zwraca

5. 10. 15. 20. 25.

Niektórzy wyobrażają sobie tablice przestrzennie, w postaci wierszy i kolumn, tak jakby mieli do czynienia z danymi zapisanymi w arkuszu kalkulacyjnym. Położenie

Wartość

0

5

1

10

2

15

3

20

4

25

W tablicach można przechowywać dowolne dane, niekoniecznie liczby całkowite: var odsetki = [0.55, 0.32, 0.91]; var imiona = ["Eryk", "Bartek", "Oskar"]; odsetki[1] //Zwraca 0.32. imiona[1] //Zwraca „Bartek”.

Można też — choć osobiście nie polecam takiego rozwiązania — łączyć w jednej tablicy różne typy danych: var mydlo_powidlo = [1, 2, 3, 4.5, 5.6, "ojej", "powiedz, że to nie", true];

Obiekty Tablice są doskonałe do przechowywania prostych list wartości, ale jeśli dane mają bardziej skomplikowany charakter, warto rozważyć umieszczenie ich w obiekcie. Na użytek dalszych rozważań przyjmijmy, że obiekty to niestandardowe struktury danych. Definicję obiektu ujmuje się w nawiasy klamrowe {}. Składa się ona z właściwości i wartości. Właściwość od jej wartości oddziela dwukropek:, natomiast kolejne pary właściwość – wartość są odseparowane od siebie przecinkami: var owoc = { rodzaj: "winogrono", kolor: "czerwone", ilosc: 12, smaczny: true };

Odwoływanie się do poszczególnych wartości pól obiektu odbywa się za pomocą operatora kropki i wymaga podania nazwy właściwości: fruit.kind fruit.color fruit.ilosc fruit.smaczny

//Zwraca „winogrono”. //Zwraca „czerwone”. //Zwraca 12. //Zwraca „true”.

JavaScript



47

Wartości właściwości to swego rodzaju „cechy” obiektu. O, popatrz, owoce. „Jakie owoce?” — zapytasz. Okazuje się, że owoc.rodzaj to "winogrono". „Smaczne?”. Oczywiście — przecież owoc.smaczny to warunek prawdziwy, czyli o wartości true.

Obiekty i tablice Opisane wyżej dwa rodzaje struktur danych można ze sobą łączyć, tworząc w ten sposób tablice obiektów, obiekty tablicowe, obiekty obiektów — w zasadzie w dowolny sposób, który pozwoli Ci wygodnie zapisać zestaw danych. Załóżmy, że kupiliśmy jeszcze trochę owoców, w związku z czym będziemy próbowali rozszerzyć odpowiednio nasz katalog. Całość zmiennej jest ujęta w nawiasy kwadratowe [], co wskazuje, że mamy do czynienia z tablicą, natomiast poszczególne jej elementy są zamknięte nawiasami klamrowymi {} i zawierają notację obiektową. Oczywiście poszczególne elementy tablicy są oddzielone od siebie przecinkami: var owoce = [ { rodzaj: "winogrono", kolor: "czerwone", ilosc: 12, smaczny: true }, { rodzaj: "kiwi", kolor: "brązowe", ilosc: 98, smaczny: true }, { rodzaj: "banan", kolor: "żółty", ilosc: 0, smaczny: true } ];

Aby uzyskać dostęp do tych danych, musimy przejść przez wszystkie etapy deklaracji, aż dotrzemy do punktu, w którym chcemy się znaleźć. Pamiętaj, że [] oznacza tablicę, a {} obiekt. Zmienna owoce to tablica, zatem najpierw musimy podać w nawiasach kwadratowych indeks interesującego nas elementu: owoce[1]

Z kolei każdy element tablicy jest obiektem, co oznacza, że stawiając kropkę po wskazaniu elementu tablicy, będziemy mogli dostać się do właściwości obiektu: owoce[1].ilosc //Zwraca 98.

Oto mapa wskazująca, jak dotrzeć do każdej właściwości obiektów tablicy owoce:

48

owoce[0].rodzaj owoce[0].kolor: owoce[0].ilosc: owoce[0].smaczny:

== == == ==

owoce[1].rodzaj: owoce[1].kolor:

== "kiwi" == "brązowe"



"winogrono" "czerwone" 1 true

Rozdział 3. Podstawy wykorzystywanych technologii

owoce[1].ilosc: owoce[1].smaczny:

== 98 == true

owoce[2].rodzaj: owoce[2].kolor: owoce[2].ilosc: owoce[2].smaczny:

== == == ==

"banan" "żółty" 0 true

Tak, mamy owoce[2].ilosc bananów.

JSON Jeśli będziesz pracować z biblioteką D3, w którymś momencie natkniesz się na tak zwaną notację obiektową JavaScriptu (ang. JavaScript Object Notation). Szczegółowy jej opis znajdziesz na stronie http://pl.wikipedia.org/wiki/JSON, teraz wystarczy, że zapamiętasz jedno: JSON to charakterystyczna składnia pozwalająca zapisywać dane obiektowe. Została ona zoptymalizowana pod kątem pracy z JavaScriptem (co nie powinno nikogo dziwić) i żądaniami AJAX. Dlatego właśnie tak wiele interfejsów aplikacji internetowych (tak zwanych API) zwraca dane zapisane w formacie JSON. JavaScript parsuje ją znacznie szybciej niż XML i naturalnie biblioteka D3 również doskonale z nią sobie radzi. Sporo zyskujemy, a sam kod nie odbiega znacząco od tego, który widzieliśmy poprzednio: { "rodzaj": "winogrono", "kolor": "czerwone", "ilosc": 12, "smaczny": true }

Jedyna różnica polega na tym, że nazwy właściwości są teraz ujęte w cudzysłowie, co oznacza, że stały się wartościami typu łańcuchowego. Tak jak wszystkie inne obiekty JavaScriptu, również obiekty JSON można przypisywać do konkretnych zmiennych, na przykład: var jsonOwoc { "rodzaj": "winogrono", "kolor": "czerwone", "ilosc": 12, "smaczny": true }

GeoJSON Notacja JSON formalizuje składnię obiektową języka JavaScript, natomiast GeoJSON przystosowuje dane zapisane w formacie JSON do przechowywania w nich danych geolokalizacyjnych. Wszystkie obiekty GeoJSON są obiektami JSON, a każdy obiekt JSON to obiekt JavaScriptu. Obiekty GeoJSON (specyfikacja dostępna pod adresem http://geojson.org/geojson-spec.html) pozwalają przechowywać punkty odpowiadające współrzędnym geograficznym (podawanym zazwyczaj jako długość i szerokość geograficzna), lecz można w nich zapisywać także dane dotyczące kształtów (linie i wielokąty) oraz innych wielkości przestrzennych. Jeśli planujesz przetwarzać duże ilości danych geolokalizacyjnych, rozważ, czy nie warto umieścić ich w obiektach GeoJSON i w ten sposób wprowadzać do funkcji biblioteki D3.

JavaScript



49

O GeoJSON napiszę bardziej szczegółowo przy okazji rozważań dotyczących przygotowywania map. Na razie chciałbym jedynie pokazać, jak wygląda prosty obiekt tego rodzaju: { "rodzaj": "PrzyszlaKolekcja", "cechy": [ { "rodzaj": "Cecha", "geometria": { "rodzaj": "Punkt", "wspolrzedne": [ 150.1282427, -24.471803 ] }, "wlasciwosci": { "rodzaj": "miasto" } } ] }

Problemy może powodować jedynie to, że długość geograficzna jest podawana zawsze przed szerokością, zatem nie pozostaje nic innego, jak przyzwyczaić się do myślenia w kategoriach długość – szerokość, a nie jak zazwyczaj szerokość – długość.

Operatory matematyczne JavaScript umożliwia wykonywanie prostych obliczeń matematycznych. Masz do dyspozycji następujące operatory: //Dodawanie //Odejmowanie //Mnożenie //Dzielenie

+ * /

Wpisz na przykład w konsoli wyrażenie 8*2 i naciśnij Enter — przekonasz się, że zwróci ona wartość 16. Oto kilka innych przykładów: 1+2 10-0.5 33*3 3/4

//Zwraca 3. //Zwraca 9.5. //Zwraca 99. //Zwraca 0.75.

Operatory porównania Aby porównać wartości zmiennych, należy posłużyć się którymś z podanych niżej operatorów: == != < > =

//Równe //Różne od //Mniejsze niż //Większe niż //Mniejsze lub równe //Większe lub równe

Wszystkie one porównują wartość stojącą po lewej stronie operatora z wartością stojącą po jego stronie prawej. Jeśli wynikiem zdania jest prawda logiczna, interpreter zwraca wartość true. W przeciwnym razie zwracana jest wartość false.

50



Rozdział 3. Podstawy wykorzystywanych technologii

Zobacz, jak to działa! Wpisz w konsoli następujące wyrażenia i przekonaj się, jakie otrzymasz wyniki: 3 == 3 3 == 5 3 >= 3 3 >= 2 100 < 2 298 != 298

(W JavaScripcie funkcjonują też operatory porównania === i !== niewymuszające konwersji typów, ale nie będę stosował ich w tej książce).

Instrukcje sterujące Aby program mógł podjąć jakąś decyzję albo powtórzyć pewne działania, musi pojawić się w nim tak zwana instrukcja sterującą. Istnieje ich naprawdę wiele, ale my ograniczymy się do dwóch: warunku if i pętli for.

Jeśli tylko Instrukcja if określa za pomocą operatora porównania wartość logiczną danego wyrażenia. if (warunek) {

//Kod uruchamiany w przypadku spełnienia warunku. }

Jeśli warunek podany w nawiasach zwykłych jest spełniony, przeglądarka wykona kod umieszczony w nawiasach klamrowych. Jeżeli sprawdzenie warunku zwróci wartość false, kod w nawiasach klamrowych zostanie zignorowany, a życie potoczy się dalej swoim torem. (Chociaż z technicznego punktu widzenia życie i tak potoczy się jakimś torem). if (3