D3.js w akcji

D3.js jest biblioteką przeznaczoną do tworzenia zaawansowanych wizualizacji danych w rozmaitych aplikacjach internetowych. Ta solidnie zaprojektowana biblioteka oczywiście umożliwia generowanie wykresów, ale pozwala również na tworzenie map, interaktywnych diagramów, paneli kontrolnych dla danych, raportów i wielu innych animowanych elementów. Zapewnia co najmniej tę samą wydajność co Flash czy aplety Javy, ale jest zintegrowana ze standardami internetowymi i modelem DOM dla HTML. To nie koniec zalet D3.js — to także świetne narzędzie do dynamicznego aktualizowania bardziej standardowych witryn internetowych.

Niniejsza książka pozwoli Ci na płynne rozpoczęcie pracy z tą biblioteką, dającą fantastyczne możliwości. Nauczysz się, jak tworzyć interaktywną grafikę i aplikacje sterowane danymi. Zaczniesz od zestawu praktycznych przykładów, dostosowanych do różnego rodzaju wykresów, sieci i map. Wykorzystasz przy tym gotowe układy z biblioteki D3. Zapoznasz się z praktycznymi technikami projektowania zawartości stron, tworzenia animacji i prezentowania zmieniających się danych. Zobaczysz między innymi, jak tworzyć interaktywną grafikę i wykorzystywać dane przesyłane strumieniowo.

Dzięki tej książce zrozumiesz:

• zasady wizualizacji danych,
• techniki wiązania i wczytywania danych oraz tworzenia elementów graficznych na ich podstawie,
• metody pracy z grafiką wektorową,
• tworzenie elementów służących do wizualizacji danych,
• rozbudowane aplikacje wykorzystujące mapy,
• sposoby tworzenia kompletnych aplikacji opartych na bibliotece D3, również dla urządzeń przenośnych.

Spis treści

Przedmowa (9)

Podziękowania (11)

O książce (13)

CZĘŚĆ I. PODSTAWY BIBLIOTEKI D3.JS (17)

Rozdział 1. Wprowadzenie do biblioteki D3.js (19)

• 1.1. Czym jest D3.js? (20)
• 1.2. Jak działa biblioteka D3? (21)
  • 1.2.1. W wizualizacji danych ważne są nie tylko aspekty wizualne (22)
  • 1.2.2. W bibliotece D3 istotne są selekcja i wiązanie danych (26)
  • 1.2.3. Biblioteka D3 umożliwia określanie wyglądu elementów stron internetowych na podstawie powiązanych danych (27)
  • 1.2.4. Elementami strony mogą być elementy div, państwa lub diagramy przepływu (27)
• 1.3. Stosowanie standardu HTML5 (28)
  • 1.3.1. Model DOM (29)
  • 1.3.2. Pisanie kodu w konsoli (34)
  • 1.3.3. SVG (34)
  • 1.3.4. Style CSS (39)
  • 1.3.5. JavaScript (44)
• 1.4. Standardy dotyczące danych (49)
  • 1.4.1. Dane tabelaryczne (50)
  • 1.4.2. Dane zagnieżdżone (50)
  • 1.4.3. Dane sieciowe (50)
  • 1.4.4. Dane geograficzne (51)
  • 1.4.5. Dane surowe (51)
  • 1.4.6. Obiekty (53)
• 1.5. Standardy z obszaru wizualizowania informacji stosowane w bibliotece D3 (54)
• 1.6. Twoja pierwsza aplikacja oparta na bibliotece D3 (55)
  • 1.6.1. "Witaj, świecie" z elementami
    (56)
  • 1.6.2. "Witaj, świecie" z kołami (56)
  • 1.6.3. Komunikowanie się z biblioteką D3 (58)
• 1.7. Podsumowanie (61)

Rozdział 2. Przepływ danych podczas wizualizowania informacji (63)

• 2.1. Praca z danymi (64)
  • 2.1.1. Wczytywanie danych (64)
  • 2.1.2. Formatowanie danych (67)
  • 2.1.3. Przekształcanie danych (69)
  • 2.1.4. Pomiar danych (73)
• 2.2. Wiązanie danych (74)
  • 2.2.1. Selekcje i wiązanie (74)
  • 2.2.2. Dostęp do danych za pomocą funkcji wewnątrzwierszowych (76)
  • 2.2.3. Uwzględnianie skal (79)
• 2.3. Styl, atrybuty i treść w prezentacji danych (81)
  • 2.3.1. Wizualizacja oparta na wczytanych danych (82)
  • 2.3.2. Ustawianie kanałów (84)
  • 2.3.3. Instrukcje enter, update i exit (87)
• 2.4. Podsumowanie (93)

Rozdział 3. Projektowanie sterowane danymi i interakcje (95)

• 3.1. Architektura projektu (96)
  • 3.1.1. Dane (96)
  • 3.1.2. Zasoby (97)
  • 3.1.3. Rysunki (97)
  • 3.1.4. Arkusze stylów (97)
  • 3.1.5. Biblioteki zewnętrzne (98)
• 3.2. Interaktywne style i model DOM (100)
  • 3.2.1. Zdarzenia (100)
  • 3.2.2. Przejścia graficzne (103)
  • 3.2.3. Manipulowanie modelem DOM (105)
  • 3.2.4. Sensowne korzystanie z kolorów (107)
• 3.3. Wstępnie generowane treści (113)
  • 3.3.1. Rysunki (113)
  • 3.3.2. Fragmenty kodu w HTML-u (115)
  • 3.3.3. Wstępnie wygenerowana grafika SVG (116)
• 3.4. Podsumowanie (122)

CZĘŚĆ II. PODSTAWY WIZUALIZOWANIA INFORMACJI (123)

Rozdział 4. Komponenty wykresów (125)

• 4.1. Ogólne zasady tworzenia wykresów (126)
  • 4.1.1. Generatory (127)
  • 4.1.2. Komponenty (127)
  • 4.1.3. Układy (127)
• 4.2. Tworzenie osi (128)
  • 4.2.1. Wyświetlanie danych (128)
  • 4.2.2. Określanie stylu osi (131)
• 4.3. Złożone obiekty graficzne (135)
• 4.4. Wykresy liniowe i interpolacja (143)
  • 4.4.1. Rysowanie linii od określonych punktów (145)
  • 4.4.2. Rysowanie wielu linii za pomocą kilku generatorów (147)
  • 4.4.3. Omówienie interpolacji linii (148)
• 4.5. Złożone akcesory (149)
• 4.6. Podsumowanie (158)

Rozdział 5. Układy (159)

• 5.1. Histogramy (160)
• 5.2. Wykresy kołowe (162)
  • 5.2.1. Rysowanie wykresu kołowego (163)
  • 5.2.2. Tworzenie wykresu pierścieniowego (165)
  • 5.2.3. Przejścia (166)
• 5.3. Układy dla grup kół (168)
• 5.4. Drzewa (172)
• 5.5. Układy skumulowane (177)
• 5.6. Wtyczki służące do dodawania układów (183)
  • 5.6.1. Diagram Sankeya (183)
  • 5.6.2. Chmury słów (190)
• 5.7. Podsumowanie (195)

Rozdział 6. Wizualizowanie sieci (197)

• 6.1. Statyczne diagramy sieci (198)
  • 6.1.1. Dane o sieci (199)
  • 6.1.2. Macierz sąsiedztwa (201)
  • 6.1.3. Diagram łukowy (205)
• 6.2. Układ oparty na siłach (208)
  • 6.2.1. Tworzenie dla sieci diagramu opartego na siłach (209)
  • 6.2.2. Znaczniki SVG (210)
  • 6.2.3. Miary sieci (214)
  • 6.2.4. Ustawienia układu opartego na siłach (216)
  • 6.2.5. Aktualizowanie sieci (218)
  • 6.2.6. Usuwanie i dodawanie węzłów oraz krawędzi (219)
  • 6.2.7. Ręczne określanie pozycji węzłów (223)
  • 6.2.8. Optymalizacja (226)
• 6.3. Podsumowanie (226)

Rozdział 7. Wizualizowanie informacji geoprzestrzennych (227)

• 7.1. Podstawy tworzenia map (229)
  • 7.1.1. Szukanie danych (230)
  • 7.1.2. Rysowanie punktów na mapie (234)
  • 7.1.3. Odwzorowania i obszary (236)
  • 7.1.4. Interaktywność (238)
• 7.2. Tworzenie lepszych map (239)
  • 7.2.1. Siatka kartograficzna (240)
  • 7.2.2. Operacja zoom (241)
• 7.3. Zaawansowane aspekty map (244)
  • 7.3.1. Tworzenie i obracanie globusa (244)
  • 7.3.2. Odwzorowanie satelitarne (250)
• 7.4. Dane i funkcje w bibliotece TopoJSON (251)
  • 7.4.1. Format plików TopoJSON (251)
  • 7.4.2. Wyświetlanie danych w formacie TopoJSON (252)
  • 7.4.3. Scalanie (253)
  • 7.4.4. Sąsiednie obiekty (255)
• 7.5. Tworzenie map z kafelkami za pomocą instrukcji d3.geo.tile (256)
• 7.6. Dalsza lektura związana z mapami (261)
  • 7.6.1. Zoom dla transformacji (262)
  • 7.6.2. Rysowanie na płótnie (262)
  • 7.6.3. Zmiana odwzorowania dla danych rastrowych (262)
  • 7.6.4. Technika hexbinning (262)
  • 7.6.5. Diagramy Woronoja (262)
  • 7.6.6. Mapy anamorficzne (262)
• 7.7. Podsumowanie (263)

Rozdział 8. Manipulowanie tradycyjnym modelem DOM za pomocą biblioteki D3 (265)

• 8.1. Przygotowania (267)
  • 8.1.1. Style CSS (267)
  • 8.1.2. Kod w HTML-u (268)
• 8.2. Arkusz kalkulacyjny (268)
  • 8.2.1. Tworzenie arkusza kalkulacyjnego za pomocą tabeli (268)
  • 8.2.2. Tworzenie arkusza kalkulacyjnego za pomocą elementów
    (270)
  • 8.2.3. Dodawanie animacji do arkusza kalkulacyjnego (272)
• 8.3. Płótno (273)
  • 8.3.1. Rysowanie na płótnie (275)
  • 8.3.2. Rysowanie i zapisywanie wielu obrazków (275)
• 8.4. Galeria rysunków (277)
  • 8.4.1. Interaktywne wyróżnianie elementów modelu DOM (279)
  • 8.4.2. Selekcja elementów (281)
• 8.5. Podsumowanie (283)

CZĘŚĆ III. TECHNIKI ZAAWANSOWANE (285)

Rozdział 9. Łączenie komponentów aplikacji interaktywnych (287)

• 9.1. Jedno źródło danych, wiele perspektyw (289)
  • 9.1.1. Podstawy tworzenia panelu kontrolnego dla danych (291)
  • 9.1.2. Arkusz kalkulacyjny (292)
  • 9.1.3. Wykres słupkowy (293)
  • 9.1.4. Grupy kół (293)
  • 9.1.5. Zmiana wielkości wykresów na podstawie rozmiaru ekranu (294)
• 9.2. Interaktywność - zdarzenia związane z kursorem myszy (296)
• 9.3. Kontrolka wyboru zakresu (299)
  • 9.3.1. Tworzenie kontrolki wyboru zakresu (300)
  • 9.3.2. Ułatwianie korzystania z kontrolki wyboru zakresu (303)
  • 9.3.3. Zdarzenia kontrolki wyboru zakresu (306)
  • 9.3.4. Ponowne rysowanie komponentów (307)
• 9.4. Podsumowanie (308)

Rozdział 10. Tworzenie układów i komponentów (311)

• 10.1. Tworzenie układu (312)
• 10.2. Pisanie własnych komponentów (319)
  • 10.2.1. Wczytywanie przykładowych danych (320)
  • 10.2.2. Wiązanie komponentów ze skalami (322)
  • 10.2.3. Dodawanie etykiet do komponentu (327)
• 10.3. Podsumowanie (330)

Rozdział 11. Wizualizowanie dużych zbiorów danych (331)

• 11.1. Duże zbiory danych geograficznych (332)
  • 11.1.1. Generowanie losowych danych geograficznych (334)
  • 11.1.2. Rysowanie danych geograficznych na płótnie (336)
  • 11.1.3. Techniki wyświetlania elementów w trybie mieszanym (338)
• 11.2. Duże zbiory danych o sieciach (344)
• 11.3. Optymalizowanie wybierania danych na podstawie współrzędnych x i y za pomocą drzew czwórkowych (349)
  • 11.3.1. Generowanie losowych danych o współrzędnych x i y (349)
  • 11.3.2. Wybór zakresu na podstawie współrzędnych x i y (349)
• 11.4. Inne techniki optymalizacji (354)
  • 11.4.1. Unikanie ustawiania ogólnego stylu opacity (354)
  • 11.4.2. Unikanie ogólnych selekcji (355)
  • 11.4.3. Wstępne wyznaczanie pozycji (355)
• 11.5. Podsumowanie (356)

Rozdział 12. Biblioteka D3 i urządzenia przenośne (357)

• 12.1. Zasady tworzenia projektów sterowanych danymi dla urządzeń przenośnych (359)
• 12.2. Wizualizacja i dotyk (359)
  • 12.2.1. Funkcja d3.touches (361)
  • 12.2.2. Rejestrowanie na liście zdarzeń związanych z dotykiem (361)
  • 12.2.3. Wizualizowanie zdarzeń związanych z dotykiem (362)
  • 12.2.4. Przesuwanie za pomocą jednego przeciągnięcia palcem (363)
  • 12.2.5. Wizualizowanie analizy dotknięć (365)
  • 12.2.6. Zoom oparty na szczypnięciach (367)
  • 12.2.7. Rotacja z użyciem trzech palców (370)
  • 12.2.8. Łączenie wszystkich elementów (371)
• 12.3. Dostosowujące się wizualizacje danych (374)
  • 12.3.1. Tworzenie dostosowujących się wizualizacji danych (375)
  • 12.3.2. Tworzenie podstawowej wersji aplikacji (376)
  • 12.3.3. Rozwiązanie na skalę tabletu (380)
  • 12.3.4. Rozwiązanie dostosowane do telefonu (384)
  • 12.3.5. Automatyczne wykrywanie ekranów o różnych rozmiarach (389)
  • 12.3.6. Ogólne zasady tworzenia dostosowujących się wizualizacji danych (389)
• 12.4. Geolokalizacja (389)
• 12.5. Podsumowanie (390)

Skorowidz (393)