Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00481 008030 10478274 na godz. na dobę w sumie
Interaktywna wizualizacja danych - książka
Interaktywna wizualizacja danych - książka
Autor: Liczba stron: 248
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-8172-3 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> web design
Porównaj ceny (książka, ebook, audiobook).

Uatrakcyjnij swoją WWW!

Skoro mawia się, że obraz jest wart więcej niż tysiąc słów, można też powiedzieć, że jeden wykres jest wart więcej niż tysiąc tabel z danymi. Dlatego właśnie użytkownicy uwielbiają wykresy! Już jeden rzut oka pozwala wyrobić sobie zdanie na temat każdego problemu. Jeżeli do tego dodać interaktywne rozwiązania, efekt może być tylko jeden - zachwyt Twoich klientów! Biblioteka D3 pozwala na budowanie interaktywnych wykresów, które pozwolą Ci na efektowną prezentację posiadanych informacji.

W trakcie lektury tej książki przekonasz się, jak szybko można przygotować atrakcyjny wykres, prezentujący nawet najbardziej skomplikowane dane. Najpierw gruntownie poznasz podstawy HTML-a, JavaScriptu oraz formatu SVG. Po tym wstępie będziesz gotowy, by rozpocząć przygodę z biblioteką D3! Określanie osi, skalowanie, efekty specjalne to tylko niektóre z poruszanych tematów. Gdy już opanujesz tworzenie wykresów, pora przejść do kolejnego rozdziału. Dowiesz się z niego, jak na posiadany wykres nanieść interaktywne dodatki. Na sam koniec zobaczysz, jak nakładać dane na mapy geograficzne oraz eksportować stworzone wykresy. Książkę tę doceni każdy programista, który kiedykolwiek stanął przed problemem wizualizacji danych.

Przekonaj się, jak łatwo można:

Zachwyć użytkowników przydatnymi wykresami!



Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Interactive Data Visualization for the Web Tłumaczenie: Julia Szajkowska ISBN: 978-83-246-8172-3 © 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: helion@helion.pl 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 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. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:316)ci Przedmowa .............................................................................................................................9 1. Wprowadzenie ............................................................................................................ 13 13 14 14 15 16 16 17 17 18 Dlaczego warto przedstawia(cid:232) dane graficznie? Dlaczego programowa(cid:232)? Po co nam interaktywno(cid:264)(cid:232)? Dlaczego w internecie? O czym jest ta ksi(cid:241)(cid:276)ka? Kim jeste(cid:264)? Czego nie znajdziesz w tej ksi(cid:241)(cid:276)ce? Kod w przyk(cid:228)adach Dzi(cid:246)kuj(cid:246)! Funkcje biblioteki Funkcje, których nie znajdziesz w bibliotece Pocz(cid:241)tki i t(cid:228)o historyczne Inne mo(cid:276)liwo(cid:264)ci 2. Wprowadzenie do D3 .................................................................................................. 19 19 20 21 22 23 24 24 25 25 26 Wykresy od r(cid:246)ki Grafy Odwzorowania kartograficzne Prawie od zera W trzech wymiarach Narz(cid:246)dzia przygotowane za pomoc(cid:241) biblioteki D3 Kod HTML 3. Podstawy wykorzystywanych technologii .................................................................27 29 30 31 31 Tre(cid:264)(cid:232) i struktura Budowanie struktury znacznikami Najcz(cid:246)(cid:264)ciej stosowane znaczniki 3 Kup książkęPoleć książkę Atrybuty Klasy i identyfikatory Komentarze DOM Narz(cid:246)dzia programisty Renderowanie i model pude(cid:228)kowy Kaskadowe arkusze stylów CSS Selektory W(cid:228)a(cid:264)ciwo(cid:264)ci i warto(cid:264)ci Komentarze Wprowadzanie stylów na stron(cid:246) Dziedziczenie, kaskadowo(cid:264)(cid:232) i szczegó(cid:228)owo(cid:264)(cid:232) JavaScript Witaj, konsolo! Zmienne Inne typy zmiennych Tablice Obiekty Obiekty i tablice Operatory matematyczne Operatory porównania Instrukcje steruj(cid:241)ce Funkcje Komentarze Wprowadzanie skryptów na stron(cid:246) Sposoby na JavaScript SVG Znacznik SVG Proste kszta(cid:228)ty Nadawanie stylów znacznika SVG Warstwy i kolejno(cid:264)(cid:232) rysowania Przezroczysto(cid:264)(cid:232) O kompatybilno(cid:264)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 Pobieranie biblioteki D3 Odwo(cid:228)ywanie si(cid:246) do biblioteki D3 Przygotowanie serwera stron WWW 4. Przygotowania do pracy .............................................................................................67 67 68 69 69 70 70 Terminal z interpreterem j(cid:246)zyka Python MAMP, WAMP i LAMP W drog(cid:246) 4 (cid:95) Spis tre(cid:316)ci Kup książkęPoleć książkę Dowi(cid:241)zywanie danych Tworzenie znaczników (cid:227)(cid:241)czenie metod Po jednym odwo(cid:228)aniu Przekazywanie Bez (cid:228)(cid:241)czenia 5. Dane ..............................................................................................................................71 71 73 74 75 75 75 76 76 79 80 82 83 84 85 W wi(cid:246)zi Dane Prosz(cid:246) dokona(cid:232) wyboru Powi(cid:241)zany i okre(cid:264)lony U(cid:276)ywanie danych Funkcja — rzecz potrzebna Dane chc(cid:241) by(cid:232) gdzie(cid:264) zapisane Wi(cid:246)cej ni(cid:276) tekst Rysowanie za pomoc(cid:241) znaczników div Rysowanie za pomoc(cid:241) znaczników SVG Przygotowywanie wykresu s(cid:228)upkowego Tworzenie znaczników SVG Kszta(cid:228)ty definiowane danymi Jakie (cid:264)liczne kolorki! Okre(cid:264)lanie atrybutów Kilka s(cid:228)ów o klasach Wró(cid:232)my do s(cid:228)upków Nadawanie stylów Pot(cid:246)(cid:276)na metoda data() Dane losowe 6. Graficzne przedstawianie danych ..............................................................................87 87 88 89 89 90 91 92 94 95 96 97 98 98 99 104 106 108 108 108 110 111 112 Dane Wykres punktowy Rozmiar Etykiety Przygotowywanie wykresu punktowego Stary wykres Nowy wykres Kolory Etykiety Dalsze dzia(cid:228)ania 7. Skalowanie .................................................................................................................113 113 114 115 Jab(cid:228)ka i piksele Dziedziny i zbiory warto(cid:264)ci Normalizacja Spis tre(cid:316)ci (cid:95) 5 Kup książkęPoleć książkę Przygotowywanie funkcji skaluj(cid:241)cej Skalowanie wykresu punktowego Funkcje d3.min() i d3.max() Skalowanie dynamiczne Stosowanie warto(cid:264)ci przeskalowanych Poprawianie wykresu Inne rozwi(cid:241)zania Inne funkcje skaluj(cid:241)ce 115 116 116 118 118 119 122 123 8. Osie ............................................................................................................................. 125 125 126 127 130 131 132 133 Poznaj osie Metody przygotowywania osi Porz(cid:241)dki Pod kresk(cid:241) A dlaczego nie Y? Ostateczny szlif Formatowanie opisów osi Interakcja za pomoc(cid:241) funkcji nas(cid:228)uchuj(cid:241)cych zdarze(cid:254) Zmienianie danych Aktualizowanie elementów graficznych Przej(cid:264)cia Przeróbki w wykresie s(cid:228)upkowym Jak dzia(cid:228)aj(cid:241) skale porz(cid:241)dkowe? W zbiorze warto(cid:264)ci tylko grupy Referencja do skali porz(cid:241)dkowej Inne aktualizacje Aktualizowanie danych 9. Aktualizacje, przej(cid:316)cia i ruch ..................................................................................... 135 135 136 138 139 139 139 140 141 141 144 145 146 147 149 150 153 155 161 162 166 169 174 175 Funkcja duration(), czyli ile to wszystko potrwa? Ostro(cid:276)nie, osiadamy! Bez opó(cid:274)nie(cid:254), prosz(cid:246)! Dane losowe Aktualizowanie funkcji skaluj(cid:241)cych Aktualizowanie osi Ka(cid:276)de przej(cid:264)cie ma swój pocz(cid:241)tek i koniec Dodawanie warto(cid:264)ci (i znaczników) Usuwanie warto(cid:264)ci (i znaczników) (cid:227)(cid:241)czenie danych za pomoc(cid:241) kluczy Dodaj i usu(cid:254), czyli wszystko naraz Powtórzenie Inne rodzaje aktualizacji 6 (cid:95) Spis tre(cid:316)ci Kup książkęPoleć książkę 10. Grupowanie znaczników SVG Sortowanie klikni(cid:246)ciem Podpowiedzi Najed(cid:274) kursorem, (cid:276)eby wyró(cid:276)ni(cid:232) Interaktywno(cid:316)(cid:235) ...........................................................................................................177 Dowi(cid:241)zywanie funkcji nas(cid:228)uchuj(cid:241)cych zdarze(cid:254) 177 178 Poznajmy zachowania 179 182 184 187 188 189 191 193 193 Domy(cid:264)lne podpowiedzi przegl(cid:241)darki Podpowiedzi wy(cid:264)wietlane w znacznikach SVG Podpowiedzi wy(cid:264)wietlane w znacznikach div Urz(cid:241)dzenia dotykowe Pora rusza(cid:232) dalej 11. Uk(cid:293)ady wykresów ...................................................................................................... 195 196 200 203 Uk(cid:228)ad ko(cid:228)owy Uk(cid:228)ad skumulowany Uk(cid:228)ad si(cid:228)owy Poznaj GeoJSON (cid:263)cie(cid:276)ki Odwzorowania Kartogram Dodawanie punktów Pobieranie danych geograficznych i ich parsowanie 12. Mapy geograficzne ....................................................................................................209 209 211 212 214 217 221 221 221 223 223 Znajd(cid:274) pliki kszta(cid:228)tów Wybierz rozdzielczo(cid:264)(cid:232) Upraszczanie kszta(cid:228)tów Konwersja do GeoJSON 13. Eksportowanie ...........................................................................................................227 227 228 229 Mapy bitowe Plik PDF SVG A Dalsza nauka ..............................................................................................................233 Skorowidz .............................................................................................................................237 Spis tre(cid:316)ci (cid:95) 7 Kup książkęPoleć książkę 8 (cid:95) Spis tre(cid:316)ci Kup książkęPoleć książkę ROZDZIA(cid:292) 12. Mapy geograficzne Wykresy s(cid:228)upkowe, wykresy punktowe, wykresy ko(cid:228)owe, a nawet wykresy si(cid:228)owe… „Wszystko to bardzo pi(cid:246)knie — my(cid:264)lisz sobie — ale przejd(cid:274)my ju(cid:276) w ko(cid:254)cu do map!”. Poznaj GeoJSON Standard JSON ju(cid:276) znasz, pora zaznajomi(cid:232) si(cid:246) teraz z GeoJSON, czyli bazuj(cid:241)cym na formacie JSON standardzie zapisywania danych geograficznych na potrzeby aplikacji internetowych. GeoJSON nie jest niczym nowym, a jedynie wysoce wyspecjalizowan(cid:241) metod(cid:241) stosowania JSON. Zanim jednak przejdziemy do generowania map, musimy w jaki(cid:264) sposób zdoby(cid:232) dane znacz- nika path (czyli konturu) kszta(cid:228)tu, który b(cid:246)dziemy chcieli wy(cid:264)wietli(cid:232). Zaczniemy od najprost- szego przyk(cid:228)adu — odwzorowania granic Stanów Zjednoczonych. W katalogu z kodami przy- k(cid:228)adów znajdziesz plik us-states.json, który zosta(cid:228) pobrany bezpo(cid:264)rednio z jednego z licznych przyk(cid:228)adów na stronie D3, w zwi(cid:241)zku z czym jeste(cid:264)my winni Mike’owi Bostockowi gor(cid:241)ce podzi(cid:246)kowania za przygotowanie takich (cid:228)adnych i starannych granic Stanów. Po otwarciu pliku us-states.json zobaczysz co(cid:264), co przypomina nieco ten kod (cho(cid:232) tu pre- zentuj(cid:246) wersj(cid:246) sformatowan(cid:241) i bardzo skrócon(cid:241)). { type : FeatureCollection , features :[ { type : Feature , id : 01 , properties :{ name : Alabama }, geometry :{ type : Polygon , coordinates :[[[-87.359296,35.00118], [-85.606675,34.984749],[-85.431413,34.124869], [-85.184951,32.859696],[-85.184951,32.859696], [-84.960397,32.421541],[-85.004212,32.322956], [-84.889196,32.262709],[-85.058981,32.13674]... ]] } }, { type : Feature , id : 02 , properties : { name : Alaska }, 209 Kup książkęPoleć książkę geometry : { type : MultiPolygon , coordinates : [[[[-131.602021,55.117982], [-131.569159,55.28229],[-131.355558,55.183705], [-131.38842,55.01392],[-131.645836,55.035827], [-131.602021,55.117982]]],[[[-131.832052,55.42469], [-131.645836,55.304197],[-131.749898,55.128935], [-131.832052,55.189182],... ]]] } } ... Dane, jak to w stylu GeoJSON, s(cid:241) zapisane w jednym wielkim obiekcie. (Nawiasy klamrowe, pami(cid:246)tasz?). W obiekcie znajdziemy deklaracj(cid:246) typu type: FeatureCollecion. Po typie po- jawia si(cid:246) pole features, które przechowuje tablic(cid:246) pojedynczych obiektów typu Feature. Ka(cid:276)dy z nich odpowiada jednemu ze stanów. Nazwa stanu jest podana w polu properties. Jednak sedno ka(cid:276)dego pliku GeoJSON le(cid:276)y w polu geometry. Tam w(cid:228)a(cid:264)nie pojawiaj(cid:241) si(cid:246) de- finicja typu (type) oraz wspó(cid:228)rz(cid:246)dne (coordinates) okre(cid:264)laj(cid:241)ce kontur danego elementu. Pole coordinates przechowuje szeroko(cid:264)ci i d(cid:228)ugo(cid:264)ci geograficzne zapisane parami w ma(cid:228)ych, dwu- warto(cid:264)ciowych tablicach. Przetwarzanie i udoskonalanie tych warto(cid:264)ci stanowi sens (cid:276)ycia ka(cid:276)- dego kartografa. Pokolenia badaczy i podró(cid:276)ników po(cid:264)wi(cid:246)ca(cid:228)y swój czas, by zgromadzi(cid:232) ten zbiór, i za to powinni(cid:264)my by(cid:232) im wdzi(cid:246)czni. Liczby te, cho(cid:232) mo(cid:276)e niepozorne, kryj(cid:241) w sobie prawdziw(cid:241) moc. Warto te(cid:276) zaznaczy(cid:232), (cid:276)e w danych GeoJSON jako pierwsz(cid:241) podaje si(cid:246) zawsze d(cid:228)ugo(cid:264)(cid:232) geogra- ficzn(cid:241). Mimo (cid:276)e jeste(cid:264)my przyzwyczajeni do zapisu, w którym najpierw wymienia si(cid:246) szero- ko(cid:264)(cid:232), a potem d(cid:228)ugo(cid:264)(cid:232), w (cid:264)wiecie GeoJSON obowi(cid:241)zuje odwrotny porz(cid:241)dek. I jeszcze ma(cid:228)a (cid:264)ci(cid:241)ga na wypadek, gdyby odró(cid:276)nianie d(cid:228)ugo(cid:264)ci od szeroko(cid:264)ci geograficznej stanowi(cid:228)o dla Ciebie problem: (cid:120) D(cid:228)ugo(cid:264)(cid:232) geograficzna, jak nazwa wskazuje, jest d(cid:228)uga. Jej linie (po(cid:228)udniki) biegn(cid:241) pionowo (z pó(cid:228)nocy na po(cid:228)udnie), jakby zwiesza(cid:228)y si(cid:246) z góry na dó(cid:228). (cid:120) Szeroko(cid:264)(cid:232) geograficzna jest szeroka. Jej linie (równole(cid:276)niki) rozci(cid:241)gaj(cid:241) si(cid:246) poziomo, jakby stara(cid:228)y si(cid:246) obj(cid:241)(cid:232) Ziemi(cid:246) w pasie. Równole(cid:276)niki i po(cid:228)udniki tworz(cid:241) razem ogromn(cid:241) sie(cid:232) obejmuj(cid:241)c(cid:241) ca(cid:228)(cid:241) kul(cid:246) ziemsk(cid:241). Na nasze szcz(cid:246)(cid:264)cie wspó(cid:228)rz(cid:246)dne mo(cid:276)na (cid:228)atwo przeliczy(cid:232) na pary x i y, które z kolei pozwalaj(cid:241) wy- (cid:264)wietla(cid:232) wszystko bez wi(cid:246)kszych problemów na ekranie komputera. Gdy rysowali(cid:264)my wy- kres s(cid:228)upkowy, warto(cid:264)ci danych odwzorowywali(cid:264)my na warto(cid:264)ci na ekranie — przeliczali(cid:264)my liczby na wysoko(cid:264)(cid:232) prostok(cid:241)tów. W przypadku tworzenia map geograficznych te(cid:276) generu- jemy odwzorowania — pary d(cid:228)ugo(cid:264)(cid:232) i szeroko(cid:264)(cid:232) przechodz(cid:241) w pary x i y. Jednocze(cid:264)nie ope- rowanie zmiennymi x i y pozwala w (cid:228)atwy sposób omin(cid:241)(cid:232) niewygodny problem kolejno(cid:264)ci d(cid:228)ugo(cid:264)ci i szeroko(cid:264)ci podanych odwrotnie. Get Lat+Lon (http://teczno.com/squares/#12/37.8043/-122.2712) to doskona(cid:228)e narz(cid:246)dzie autorstwa Micha(cid:228)a Migurskiego, dzi(cid:246)ki któremu z (cid:228)atwo(cid:264)ci(cid:241) sprawdzisz, czy podane wspó(cid:228)rz(cid:246)dne geograficzne s(cid:241) na pewno poprawne. Trzymaj t(cid:246) stron(cid:246) otwart(cid:241) w oknie przegl(cid:241)darki przez ca(cid:228)y czas, gdy pracujesz nad mapami, zagl(cid:241)da si(cid:246) do niej bowiem bardzo cz(cid:246)sto. 210 (cid:95) Rozdzia(cid:293) 12. Mapy geograficzne Kup książkęPoleć książkę (cid:315)cie(cid:348)ki Mamy ju(cid:276) dane geograficzne. Pora co(cid:264) z nimi zrobi(cid:232). Przede wszystkim nale(cid:276)y zdefiniowa(cid:232) generator (cid:264)cie(cid:276)ek: var path = d3.geo.path(); Mog(cid:246) z czystym sumieniem powiedzie(cid:232), (cid:276)e d3.geo.path() to funkcja ratuj(cid:241)ca (cid:276)ycie. To ona przek(cid:228)ada ba(cid:228)agan z pliku GeoJSON na jeszcze bardziej nieporz(cid:241)dny zapis ze znaczników path. Oddajmy cze(cid:264)(cid:232) d3.geo.path()! Mogliby(cid:264)my oczywi(cid:264)cie wklei(cid:232) kod GeoJSON bezpo(cid:264)rednio do pliku HTML, ale fuj, tyle wspó(cid:228)rz(cid:246)dnych i nawiasów klamrowych? Co za ba(cid:228)agan! Znacznie porz(cid:241)dniej b(cid:246)dzie, gdy zastosujemy bardziej tradycyjne podej(cid:264)cie, czyli pozostawimy dane geograficzne w osobnym pliku i wczytamy jego zawarto(cid:264)(cid:232) za pomoc(cid:241) funkcji d3.json(): d3.json( us-states.json , function(json) { svg.selectAll( path ) .data(json.features) .enter() .append( path ) .attr( d , path); }); Funkcja d3.json() przyjmuje dwa argumenty. Pierwszy to zmienna (cid:228)a(cid:254)cuchowa okre(cid:264)laj(cid:241)ca (cid:264)cie(cid:276)k(cid:246) dost(cid:246)pu do pliku, którego zawarto(cid:264)(cid:232) nale(cid:276)y wczyta(cid:232), drugi za(cid:264) to funkcja zwrotna uruchamiana dopiero po wczytaniu i sparsowaniu zawarto(cid:264)ci pliku JSON. (Wi(cid:246)cej na temat funkcji zwrotnych znajdziesz w ramce „Obs(cid:228)uga b(cid:228)(cid:246)dów wczytywania danych” z rozdzia(cid:228)u 5.). Funkcja d3.json(), podobnie jak d3.csv(), jest asynchroniczna, a zatem nie wstrzymuje wy- konywania pozosta(cid:228)ej cz(cid:246)(cid:264)ci kodu na czas wczytywania danych z pliku. Oznacza to, (cid:276)e kod umieszczony po wywo(cid:228)aniu funkcji zwrotnej b(cid:246)dzie w rzeczywisto(cid:264)ci wykonany przed jej cia(cid:228)em: d3.json( someFile.json , function(json) { // Tu umie(cid:286)(cid:252) kod zale(cid:298)ny od danych z pliku JSON. }); // Tu umie(cid:286)(cid:252) tylko te instrukcje, które nie potrzebuj(cid:261) do pracy zawarto(cid:286)ci pliku JSON. console.log( Lubi(cid:258) koty. ); Dlatego zapami(cid:246)taj: podczas korzystania z zewn(cid:246)trznych (cid:274)róde(cid:228) danych kod, którego wyko- nanie zale(cid:276)y od zawarto(cid:264)ci tych (cid:274)róde(cid:228), musi si(cid:246) zawsze znale(cid:274)(cid:232) wewn(cid:241)trz funkcji zwrotnej. (Mo(cid:276)esz te(cid:276) rozbi(cid:232) go na mniejsze porcje, które zapiszesz we w(cid:228)asnych funkcjach i dopiero je wywo(cid:228)asz w ciele funkcji zwrotnej). Wró(cid:232)my jednak do przyk(cid:228)adu. Pora powi(cid:241)za(cid:232) w(cid:228)a(cid:264)ciwo(cid:264)ci pobrane z pliku GeoJSON z no- wymi znacznikami path. Podany kod tworzy osobn(cid:241) (cid:264)cie(cid:276)k(cid:246) dla ka(cid:276)dej z cech: svg.selectAll( path ) .data(json.features) .enter() .append( path ) .attr( d , path); Zauwa(cid:276), (cid:276)e ostatni wiersz — ten, w którym zmienna d (atrybut przechowuj(cid:241)cy dane znacznika path) jest przekazywana do generatora (cid:264)cie(cid:276)ek — po prostu pobiera wszystkie dane z pliku i przelicza je na kod SVG. Wynik jest widoczny na rysunku 12.1. (cid:315)cie(cid:348)ki (cid:95) 211 Kup książkęPoleć książkę Rysunek 12.1. Pierwsze zetkni(cid:246)cie z danymi GeoJSON Mapa! To zbyt proste, by by(cid:228)o mo(cid:276)liwe! Aby sprawdzi(cid:232), czy uzyskasz ten sam efekt, otwórz plik 01_paths.html. Dalsze dzia(cid:228)ania b(cid:246)d(cid:241) mia(cid:228)y na celu wy(cid:228)(cid:241)cznie dostosowanie mapy do na- szych potrzeb. Je(cid:264)li interesuj(cid:241) Ci(cid:246) zagadnienia zwi(cid:241)zane z prac(cid:241) ze (cid:264)cie(cid:276)kami i ich generatorami, polecam Ci zapoznanie si(cid:246) z dokumentacj(cid:241) (https://github.com/mbostock/d3/wiki/Geo-Paths). Odwzorowania Niew(cid:241)tpliwie rzuci(cid:228)o Ci si(cid:246) w oczy, (cid:276)e mapa nie przedstawia ca(cid:228)ych Stanów Zjednoczonych. Aby naprawi(cid:232) to niedoci(cid:241)gni(cid:246)cie, musimy zmieni(cid:232) u(cid:276)ywane odwzorowanie. Czym jest odwzorowanie? Z pewno(cid:264)ci(cid:241) nie usz(cid:228)o Twojej uwadze tak(cid:276)e to, (cid:276)e Ziemia jest kuli- sta, a nie p(cid:228)aska. Wszystkie kuliste obiekty s(cid:241) trójwymiarowe, co znacznie utrudnia przed- stawianie ich na powierzchniach dwuwymiarowych. Odwzorowanie jest algorytmem kom- promisu; to metoda pozwalaj(cid:241)ca rzutowa(cid:232) trójwymiarow(cid:241) przestrze(cid:254) na dwuwymiarow(cid:241) p(cid:228)aszczyzn(cid:246). Biblioteka D3 pozwala definiowa(cid:232) mechanizmy rzutowania za pomoc(cid:241) wygl(cid:241)daj(cid:241)cej znajomo konstrukcji: var projection = d3.geo.albersUsa() .translate([w/2, h/2]); Biblioteka pozwala korzysta(cid:232) z kilku dost(cid:246)pnych w niej algorytmów rzutowania. Odwzoro- wanie Albersa jest rzutem z(cid:228)o(cid:276)onym, przygotowanym tak, by na mapie zmie(cid:264)ci(cid:228)y si(cid:246) tak(cid:276)e Alaska i Hawaje, które umieszcza si(cid:246) pod po(cid:228)udniowo-zachodnim wybrze(cid:276)em Stanów Zjed- noczonych (zaraz zobaczysz, jak to wygl(cid:241)da). To w(cid:228)a(cid:264)nie albersUsa jest domy(cid:264)lnym odwzo- rowaniem u(cid:276)ywanym przez funkcj(cid:246) d3.path.geo(). Teraz, gdy okre(cid:264)lili(cid:264)my je ju(cid:276) jawnie, mo(cid:276)emy dodatkowo poda(cid:232) kilka opcji, z jakimi mia(cid:228)oby by(cid:232) wykorzystywane, jak cho(cid:232)by war- to(cid:264)(cid:232) przesuni(cid:246)cia. Z przytoczonej instrukcji wynika, (cid:276)e przesuwamy odwzorowanie w kie- runku (cid:264)rodka obrazu (o po(cid:228)ow(cid:246) szeroko(cid:264)ci i o po(cid:228)ow(cid:246) wysoko(cid:264)ci). 212 (cid:95) Rozdzia(cid:293) 12. Mapy geograficzne Kup książkęPoleć książkę Drug(cid:241) zmian(cid:241), jak(cid:241) zrobimy, b(cid:246)dzie jawne za(cid:276)(cid:241)danie od generatora (cid:264)cie(cid:276)ek, by wszystkie (cid:264)cie(cid:276)ki wyznacza(cid:228) w odniesieniu do wskazanego wcze(cid:264)niej w(cid:228)asnego odwzorowania: var path = d3.geo.path() .projection(projection); W ten sposób otrzymali(cid:264)my map(cid:246) przedstawion(cid:241) na rysunku 12.2. Powoli zbli(cid:276)amy si(cid:246) do celu. Kod znajdziesz w pliku 02_projection.html. Rysunek 12.2. Te same dane GeoJSON, ale przy wy(cid:264)rodkowaniu rzutu Mo(cid:276)emy te(cid:276) doda(cid:232) do odwzorowania metod(cid:246) scale(), (cid:276)eby zmniejszy(cid:232) nieco map(cid:246) i osi(cid:241)gn(cid:241)(cid:232) tym samym wynik przedstawiony na rysunku 12.3. var projection = d3.geo.albersUsa() .translate([w/2, h/2]) .scale([500]); Rysunek 12.3. Mapa Stanów Zjednoczonych — przeskalowana i wy(cid:264)rodkowana tak, by mie(cid:264)ci(cid:228)a si(cid:246) w obszarze obrazu Domy(cid:264)ln(cid:241) warto(cid:264)ci(cid:241) skalowania jest 1000. Mniejsze liczby zmniejszaj(cid:241) map(cid:246), a wi(cid:246)ksze po- wi(cid:246)kszaj(cid:241). Odwzorowania (cid:95) 213 Kup książkęPoleć książkę Doskonale! Je(cid:264)li otworzysz w przegl(cid:241)darce plik 03_scaled.html, przekonasz si(cid:246), (cid:276)e wszystko dzia(cid:228)a. Wystarczy doda(cid:232) jedn(cid:241) instrukcj(cid:246) style(), (cid:276)eby zmieni(cid:232) kolor wype(cid:228)nienia (cid:264)cie(cid:276)ek na jaki(cid:264) mniej przygn(cid:246)biaj(cid:241)cy. S(cid:241)dz(cid:246), (cid:276)e niebieski widoczny na rysunku 12.4 nie jest brzydki. Rysunek 12.4. Niebieski jest zdecydowanie lepszy Ca(cid:228)y kod znajdziesz w pliku 04_fill.html. W ten sam sposób mo(cid:276)na zdefiniowa(cid:232) kolor i szero- ko(cid:264)(cid:232) p(cid:246)dzla obramowania. Funkcje rzutuj(cid:241)ce, które pozwalaj(cid:241) uzyskiwa(cid:232) ró(cid:276)nego rodzaju odwzorowania kartograficz- ne, to niezwykle pot(cid:246)(cid:276)ne algorytmy. Warto wiedzie(cid:232), (cid:276)e nie ma odwzorowa(cid:254) uniwersalnych — zmienia si(cid:246) je w zale(cid:276)no(cid:264)ci od tego, jakich informacji potrzebujemy i o któr(cid:241) cz(cid:246)(cid:264)(cid:232) (cid:264)wiata chodzi (inaczej odwzorowuje si(cid:246) bieguny, a inaczej okolice równika). Zas(cid:228)ug(cid:241) g(cid:228)ównie Jasona Daviesa (http://www.jasondavies.com/) jest to, (cid:276)e dodatki do biblioteki D3 odpowiedzialne za przygotowanie odwzorowa(cid:254) kartograficznych oferuj(cid:241) dzi(cid:264) u(cid:276)ytkownikom niemal wszystkie znane nam rodzaje rzutów. Szczegó(cid:228)owy opis pracy z rzutami znajdziesz w do- kumentacji (https://github.com/mbostock/d3/wiki/Geo-Projections). Warto te(cid:276) zapozna(cid:232) si(cid:246) z porówna- niem przedstawiaj(cid:241)cym w(cid:228)a(cid:264)ciwo(cid:264)ci poszczególnych rzutów (http://bl.ocks.org/mbostock/3711652). Kartogram Karto co? To s(cid:228)owo, którego nie s(cid:228)yszy si(cid:246) na co dzie(cid:254), okre(cid:264)la map(cid:246), na której ca(cid:228)e obszary zosta(cid:228)y wype(cid:228)nione ró(cid:276)nymi odcieniami (jasnymi lub ciemnymi) czy te(cid:276) ró(cid:276)nymi kolorami tak, by odda(cid:232) rozk(cid:228)ad powi(cid:241)zanych z oznaczeniami warto(cid:264)ci. W Stanach Zjednoczonych, szcze- gólnie w okresie wyborów, cz(cid:246)sto spotyka si(cid:246) kartogramy okre(cid:264)lane mianem „czerwonych i niebieskich stanów”. Na mapach tych zaznacza si(cid:246) odpowiednim kolorem przewag(cid:246) popar- cia dla kandydatów Partii Demokratycznej b(cid:241)d(cid:274) Partii Republika(cid:254)skiej. Ale kartogramy wy- konuje si(cid:246) z ró(cid:276)nych przyczyn, niekoniecznie politycznych. Takie odwzorowania ciesz(cid:241) si(cid:246) chyba najwi(cid:246)ksz(cid:241) popularno(cid:264)ci(cid:241) w(cid:264)ród u(cid:276)ytkowników D3. Pami(cid:246)taj jednak, (cid:276)e cho(cid:232) kartogramy potrafi(cid:241) by(cid:232) niezwykle pomocne, to maj(cid:241) jednak po- wa(cid:276)ne ograniczenia. Poniewa(cid:276) na tego rodzaju mapach warto(cid:264)ci odwzorowuje si(cid:246) na pewnej powierzchni, (cid:228)atwo mo(cid:276)e doj(cid:264)(cid:232) do niezamierzonego przek(cid:228)amania: du(cid:276)e powierzchnie o niskiej 214 (cid:95) Rozdzia(cid:293) 12. Mapy geograficzne Kup książkęPoleć książkę g(cid:246)sto(cid:264)ci danej wielko(cid:264)ci (na przyk(cid:228)ad stan Nevada) mog(cid:241) sprawia(cid:232) wra(cid:276)enie bardziej istot- nych ni(cid:276) s(cid:241) w rzeczywisto(cid:264)ci. Typowy kartogram nie oddaje dobrze warto(cid:264)ci liczonych „na g(cid:228)ow(cid:246)”, bo na przyk(cid:228)ad Nevada jest zbyt du(cid:276)a, a Delaware zbyt ma(cid:228)y. Jednocze(cid:264)nie karto- gram zachowuje geografi(cid:246) miejsca oraz — jak na map(cid:246) — wygl(cid:241)da naprawd(cid:246) imponuj(cid:241)co. Zobaczmy zatem, co da si(cid:246) z tym zrobi(cid:232). (Kod znajdziesz w pliku 05_choropleth.html). Po pierwsze zdefiniuj(cid:246) funkcj(cid:246) skaluj(cid:241)c(cid:241), która pobierze warto(cid:264)ci liczbowe, a zwróci kolory. Na tym w(cid:228)a(cid:264)nie polega w du(cid:276)ej mierze praca nad kartogramem. var color = d3.scale.quantize() .range([ rgb(237,248,233) , rgb(186,228,179) , rgb(116,196,118) , rgb(49,163,84) , rgb(0,109,44) ]); Funkcja quantize jest zaliczana do grupy skal liniowych, ale wynikiem jej dzia(cid:228)ania jest zbiór warto(cid:264)ci dyskretnych. Warto(cid:264)ciami wyj(cid:264)ciowymi mog(cid:241) by(cid:232) liczby, kolory (jak w tym przy- padku) czy cokolwiek innego, co uznasz za odpowiednie. Funkcja ta przydaje si(cid:246) bardzo, je(cid:264)li chcesz podzieli(cid:232) zbiór warto(cid:264)ci na grupy. W omawianym przypadku zdecydowa(cid:228)em si(cid:246) utwo- rzy(cid:232) pi(cid:246)(cid:232) grup docelowych, ale ich liczba nie jest w (cid:276)aden sposób formalnie ograniczona. Zauwa(cid:276), (cid:276)e okre(cid:264)li(cid:228)em tu zbiór warto(cid:264)ci wyj(cid:264)ciowych, natomiast nie napisa(cid:228)em nic na temat dziedziny. (Czekam, a(cid:276) wczytaj(cid:241) si(cid:246) dane). Kolory, którymi si(cid:246) pos(cid:228)u(cid:276)y(cid:228)em, pochodz(cid:241) z pliku colorbrewer.js dost(cid:246)pnego pod adresem https://github.com/mbostock/d3/tree/master/lib/colorbrewer. Repozytorium to zawiera sporych rozmiarów zbiór barw dobranych przez Cynthi(cid:246) Brewer na podstawie prowadzonych przez ni(cid:241) bada(cid:254). Pora wczyta(cid:232) jakie(cid:264) dane. Zawczasu przygotowa(cid:228)em plik us-ag-productivity-2004.csv, w którym znajdziesz dane u(cid:228)o(cid:276)one w nast(cid:246)puj(cid:241)cy sposób: state,value Alabama,1.1791 Arkansas,1.3705 Arizona,1.3847 California,1.7979 Colorado,1.0325 Connecticut,1.3209 Delaware,1.4345 ... Dane te, udost(cid:246)pnione przez Departament Rolnictwa Stanów Zjednoczonych, zawieraj(cid:241) in- formacje na temat produkcji rolnej w poszczególnych stanach w 2004 roku. Dane liczbowe przedstawiaj(cid:241) wyniki wzgl(cid:246)dne wyznaczane dla linii bazowej, jak(cid:241) by(cid:228)a produkcja rolna w Alabamie w 1996 roku (1,0). Wi(cid:246)ksze od jedynki warto(cid:264)ci nale(cid:276)y zatem rozumie(cid:232) jako wy(cid:276)szy poziom produkcji p(cid:228)odów rolnych, a mniejsze jako ni(cid:276)szy. (Na stronie http://data.gov mo(cid:276)na znale(cid:274)(cid:232) wiele oficjalnych zestawie(cid:254) statystycznych). Wydaje si(cid:246), (cid:276)e te warto(cid:264)ci po- winny (cid:228)adnie si(cid:246) prze(cid:228)o(cid:276)y(cid:232) na kartogram produkcji rolnej. Dane z pliku wczytamy za pomoc(cid:241) funkcji d3.csv(): d3.csv( us-ag-productivity-2004.csv , function(data) { ... Teraz (zanim zapomn(cid:246)!), w funkcji zwrotnej, zdefiniuj(cid:246) parametr color dziedziny warto(cid:264)ci wej(cid:264)ciowych skali kwantuj(cid:241)cej: color.domain([ d3.min(data, function(d) { return d.value; }), d3.max(data, function(d) { return d.value; }) ]); Kartogram (cid:95) 215 Kup książkęPoleć książkę W kodzie tym pojawiaj(cid:241) si(cid:246) funkcje d3.min() i d3.max() pozwalaj(cid:241)ce wyznaczy(cid:232) i zwróci(cid:232) najmniejsz(cid:241) i najwi(cid:246)ksz(cid:241) warto(cid:264)(cid:232), dzi(cid:246)ki czemu dziedzina b(cid:246)dzie wyznaczana dynamicznie. Nast(cid:246)pnie wczytamy dane JSON — t(cid:246) cz(cid:246)(cid:264)(cid:232) operacji przeprowadzimy tak jak poprzednio. G(cid:228)ówna ró(cid:276)nica i nowo(cid:264)(cid:232) polega na tym, (cid:276)e tym razem chc(cid:246) w(cid:228)(cid:241)czy(cid:232) dane dotycz(cid:241)ce rolnictwa do danych GeoJSON. Dlaczego? Poniewa(cid:276) do znacznika mo(cid:276)na do(cid:228)(cid:241)cza(cid:232) tylko jeden zestaw danych naraz. Zdecydowanie potrzebujemy danych GeoJSON, bo na ich podstawie tworzone s(cid:241) (cid:264)cie(cid:276)ki, ale jednocze(cid:264)nie potrzebujemy te(cid:276) danych dotycz(cid:241)cych upraw. Gdyby zatem uda(cid:228)o si(cid:246) po(cid:228)(cid:241)czy(cid:232) je w jedn(cid:241) monstrualn(cid:241) tablic(cid:246), wtedy mogliby(cid:264)my podpi(cid:241)(cid:232) ca(cid:228)o(cid:264)(cid:232) pod znaczniki path. (Istnieje kilka sposobów rozwi(cid:241)zania tego problemu — jak zawsze prezentuj(cid:246) swoj(cid:241) ulubion(cid:241) metod(cid:246)). d3.json( us-states.json , function(json) { // (cid:224)(cid:261)czy dane rolnicze z danymi GeoJSON. // Sprawdza w p(cid:266)tli raz ca(cid:225)y zestaw danych rolniczych. for (var i = 0; i data.length; i++) { // Pobiera nazw(cid:266) stanu. var dataState = data[i].state; // Pobiera warto(cid:286)(cid:252) danych i przekszta(cid:225)ca j(cid:261) na liczb(cid:266) zmiennoprzecinkow(cid:261). var dataValue = parseFloat(data[i].value); // Odnajduje odpowiedni stan w danych GeoJSON. for (var j = 0; j json.features.length; j++) { var jsonState = json.features[j].properties.name; if (dataState == jsonState) { // Kopiuje dane do zmiennej JSON. json.features[j].properties.value = dataValue; // Przestaje przeszukiwa(cid:252) JSON. break; } } } } Przyjrzyj si(cid:246) uwa(cid:276)nie przytoczonemu fragmentowi kodu. Zasadniczo zaproponowane roz- wi(cid:241)zanie polega na tym, by dla ka(cid:276)dego stanu odnale(cid:274)(cid:232) dane GeoJSON opatrzone t(cid:241) sam(cid:241) nazw(cid:241) (na przyk(cid:228)ad Colorado). Gdy to si(cid:246) uda, pobierzemy warto(cid:264)ci danych zapisanych dla ka(cid:276)dego stanu i dodamy je do json.features[j].properties.value. W ten sposób b(cid:246)d(cid:241) one po(cid:228)(cid:241)czone ze znacznikiem i dost(cid:246)pne pó(cid:274)niej, gdy b(cid:246)dziemy ich potrzebowa(cid:232). Wreszcie w ten sam sposób co ostatnio przygotujemy (cid:264)cie(cid:276)ki, przy czym tym razem warto(cid:264)(cid:232) funkcji style() b(cid:246)dziemy przypisywa(cid:232) dynamicznie: svg.selectAll( path ) .data(json.features) .enter() .append( path ) .attr( d , path) .style( fill , function(d) { // Pobiera warto(cid:286)ci danych. var value = d.properties.value; if (value) { // Je(cid:286)li warto(cid:286)(cid:252) istnieje... return color(value); } else { // Je(cid:286)li warto(cid:286)(cid:252) jest niezdefiniowana... return #ccc ; } }); 216 (cid:95) Rozdzia(cid:293) 12. Mapy geograficzne Kup książkęPoleć książkę Teraz ka(cid:276)da ze (cid:264)cie(cid:276)ek zostanie wype(cid:228)niona innym kolorem, a nie jak mia(cid:228)o to miejsce po- przednio, gdy wszystkie wype(cid:228)nili(cid:264)my barw(cid:241) steelblue . Problem polega na tym, (cid:276)e nie dysponujemy danymi ze wszystkich stanów. Zestawienie, którym si(cid:246) pos(cid:228)u(cid:276)y(cid:228)em, nie obej- mowa(cid:228)o Alaski, Dystryktu Kolumbii, Hawajów i Portoryko (które wprawdzie nie jest stanem, ale jest uwzgl(cid:246)dnione w danych GeoJSON i pojawia si(cid:246) w odwzorowaniu). Aby poradzi(cid:232) sobie jako(cid:264) z tymi wyj(cid:241)tkami, doda(cid:228)em do kodu warunek logiczny — instrukcj(cid:246) if(), która sprawdza, czy dla danego stanu warto(cid:264)(cid:232) danych zosta(cid:228)a zdefiniowana. Je(cid:264)li dane istniej(cid:241), zwracana jest funkcja color(value), co oznacza, (cid:276)e mog(cid:246) przekaza(cid:232) dane do skali kwantuj(cid:241)cej i otrzyma(cid:232) w wyniku tego kod koloru. Dla warto(cid:264)ci niezdefiniowanych ustali(cid:228)em domy(cid:264)ln(cid:241) warto(cid:264)(cid:232) koloru #ccc, co odpowiada delikatnej szaro(cid:264)ci. Pi(cid:246)knie! Spójrz tylko na wyniki widoczne na rysunku 12.5. Sprawd(cid:274), jak prezentuje si(cid:246) kod, i spróbuj z nim swoich si(cid:228). Znajdziesz go w pliku 05_choropleth.html. Rysunek 12.5. Kartogram przedstawiaj(cid:241)cy poziom produkcji rolnej w poszczególnych stanach Dodawanie punktów Mi(cid:228)o by(cid:228)oby zaznaczy(cid:232) na mapie cho(cid:232) kilka miast, by nada(cid:232) grafice dok(cid:228)adniejszy kontekst, prawda? Warto by(cid:228)oby te(cid:276) znaczy(cid:232), ile jest du(cid:276)ych obszarów g(cid:246)sto zaludnionych w stanach o najwy(cid:276)szym (i najni(cid:276)szym) poziomie produktywno(cid:264)ci rolnej. Zaczniemy znów od znale- zienia odpowiednich danych. Na szcz(cid:246)(cid:264)cie niedawno mieli(cid:264)my znów spis powszechny. (Na to id(cid:241) nasze podatki!). Oto pocz(cid:241)tek nieobrobionego pliku CSV zawieraj(cid:241)cego roczne szacunkowe zestawienie liczby ludno(cid:264)ci miast powy(cid:276)ej 50 000 mieszka(cid:254)ców (plik dost(cid:246)pny pod adresem http://www.census.gov/ popest/data/cities/totals/2011/tables/SUB-EST2011-01.csv): table with row headers in column A and column headers in rows 3 through 4,,,,,,, ,,, Table 1. Annual Estimates of the Resident Population for Incorporated Places Over 50,000, Ranked by July 1, 2011 Population: April 1, 2010 to July 1, 2011 ,,,,,,,,,, Rank,Geographic Area,, April 1, 2010 ,,Population Estimate (as of July 1),, ,,,,Place,State,Census,Estimates Base,2010,2011,,,, 1,New York city,New York, 8,175,133 , 8,175,133 , 8,186,443 , 8,244,910 ,,,, 2,Los Angeles city,California, 3,792,621 , 3,792,625 , 3,795,761 , 3,819,702 ,,,, 3,Chicago city,Illinois, 2,695,598 , 2,695,598 , 2,698,283 , 2,707,120 ,,,, Dodawanie punktów (cid:95) 217 Kup książkęPoleć książkę 4,Houston city,Texas, 2,099,451 , 2,099,430 , 2,108,278 , 2,145,146 ,,,, 5,Philadelphia city,Pennsylvania, 1,526,006 , 1,526,006 , 1,528,074 , 1,536,471 ,,,, 6,Phoenix city,Arizona, 1,445,632 , 1,445,656 , 1,448,531 , 1,469,471 ,,,, 7,San Antonio city,Texas, 1,327,407 , 1,327,606 , 1,334,431 , 1,359,758 ,,,, 8,San Diego city,California, 1,307,402 , 1,307,406 , 1,311,516 , 1,326,179 ,,,, 9,Dallas city,Texas, 1,197,816 , 1,197,816 , 1,201,715 , 1,223,229 ,,,, 10,San Jose city,California, 945,942 , 952,612 , 955,091 , 967,487 ,,,, ... Niez(cid:228)y w tym ba(cid:228)agan i nie wszystkie dane s(cid:241) mi potrzebne. Otwieram wi(cid:246)c plik w ukochanym arkuszu kalkulacyjnym, porz(cid:241)dkuj(cid:246) nieco dane i usuwam zb(cid:246)dne kolumny. (Ty mo(cid:276)esz zrobi(cid:232) to samo w programach LibreOffice Calc, Apple Numbers b(cid:241)d(cid:274) Microsoft Excel). Jednocze(cid:264)nie stwierdzam, (cid:276)e interesuje mnie tylko pi(cid:246)(cid:232)dziesi(cid:241)t najwi(cid:246)kszych miast, wi(cid:246)c spokojnie mog(cid:246) po- min(cid:241)(cid:232) niektóre dane. Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta(cid:228)o mi to: rank,place,population 1,New York city,8175133 2,Los Angeles city,3792621 3,Chicago city,2695598 4,Houston city,2099451 5,Philadelphia city,1526006 6,Phoenix city,1445632 7,San Antonio city,1327407 8,San Diego city,1307402 9,Dallas city,1197816 10,San Jose city,945942 ... To przydatne informacje, ale (cid:276)eby móc umie(cid:264)ci(cid:232) je na mapie, b(cid:246)d(cid:246) potrzebowa(cid:228) ich wspó(cid:228)- rz(cid:246)dnych geograficznych — szeroko(cid:264)ci i d(cid:228)ugo(cid:264)ci. R(cid:246)czne sprawdzenie tego zaj(cid:246)(cid:228)oby ca(cid:228)e wieki. Na szcz(cid:246)(cid:264)cie mo(cid:276)emy wykorzysta(cid:232) us(cid:228)ug(cid:246) geokodowania. Pozwala ona sprawdzi(cid:232) wspó(cid:228)rz(cid:246)dne geograficzne miejsc na podstawie ich nazw. Nazwy te s(cid:241) sprawdzane na mapie (a w zasadzie w bazie danych), a nast(cid:246)pnie us(cid:228)uga zwraca dok(cid:228)adne dane dotycz(cid:241)ce szeroko(cid:264)ci i d(cid:228)ugo(cid:264)ci geograficznej. No, mo(cid:276)e przesadzi(cid:228)em nieco z t(cid:241) dok(cid:228)adno(cid:264)ci(cid:241). Geokoder stara si(cid:246) jak mo(cid:276)e, ale czasami musi przyjmowa(cid:232) pewne za(cid:228)o(cid:276)enia, szczególnie je(cid:264)li dostanie nieprecyzyjne dane wej- (cid:264)ciowe. Gdy na przyk(cid:228)ad podasz mu nazw(cid:246) „Pary(cid:276)”, koder za(cid:228)o(cid:276)y, (cid:276)e chodzi o Pary(cid:276) we Francji, a nie Pary(cid:276) w Teksasie. Dlatego zawsze warto sprawdzi(cid:232) dane wyj(cid:264)ciowe na mapie i r(cid:246)cznie poprawi(cid:232) ewentualne pomy(cid:228)ki (maj(cid:241)c na podor(cid:246)dziu stron(cid:246) http://www.teczno.com/squares/). Ruszam zatem do swojego ulubionego geokodera wsadowego (http://www.gpsvisualizer.com/geocoder/), wklejam nazwy miejscowo(cid:264)ci i klikam Start. Po kilku minutach otrzymuj(cid:246) kolejn(cid:241) list(cid:246) — warto(cid:264)ci oddzielonych przecinkami — na której wyra(cid:274)nie rzucaj(cid:241) si(cid:246) w oczy pary liczb oznaczaj(cid:241)cych szeroko(cid:264)(cid:232) i d(cid:228)ugo(cid:264)(cid:232) geograficzn(cid:241). Przenosz(cid:246) wyniki do arkusza kalkulacyjnego i zapisuj(cid:246) nowy, ujednolicony plik CSV ze wspó(cid:228)rz(cid:246)dnymi interesuj(cid:241)cych mnie miejsc: rank,place,population,lat,lon 1,New York city,8175133,40.71455,-74.007124 2,Los Angeles city,3792621,34.05349,-118.245323 3,Chicago city,2695598,45.37399,-92.888759 4,Houston city,2099451,41.337462,-75.733627 5,Philadelphia city,1526006,37.15477,-94.486114 6,Phoenix city,1445632,32.46764,-85.000823 7,San Antonio city,1327407,37.706576,-122.440612 8,San Diego city,1307402,37.707815,-122.466624 9,Dallas city,1197816,40.636,-91.168309 10,San Jose city,945942,41.209716,-112.003047 ... 218 (cid:95) Rozdzia(cid:293) 12. Mapy geograficzne Kup książkęPoleć książkę To by(cid:228)o banalnie proste. Dziesi(cid:246)(cid:232) lat temu przeprowadzenie takiej operacji wymaga(cid:228)oby go- dzin bada(cid:254) i (cid:276)mudnego zbierania danych, a dzi(cid:264) w ci(cid:241)gu u(cid:228)amka sekundy, kopiuj(cid:241)c i wkle- jaj(cid:241)c bezmy(cid:264)lnie dane, mamy ca(cid:228)(cid:241) prac(cid:246) za sob(cid:241). Rozumiesz ju(cid:276) chyba, dlaczego do(cid:264)wiad- czamy prawdziwego wysypu przeró(cid:276)nych map internetowych. Dane s(cid:241) gotowe, a my wiemy, w jaki sposób wprowadzi(cid:232) je do aplikacji: d3.csv( us-cities.csv , function(data) { // Robi co(cid:286)... }); Mo(cid:276)emy teraz doda(cid:232) do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowych znaczników circle, którymi oznaczymy ka(cid:276)de miasto. Potem wystarczy ustawi(cid:232) ka(cid:276)de ko(cid:228)o na mapie zgodnie ze sprawdzonymi wcze(cid:264)niej wspó(cid:228)rz(cid:246)dnymi: svg.selectAll( circle ) .data(data) .enter() .append( circle ) .attr( cx , function(d) { return projection([d.lon, d.lat])[0]; }) .attr( cy , function(d) { return projection([d.lon, d.lat])[1]; }) .attr( r , 5) .style( fill , yellow ) .style( opacity , 0.75); W podanym kodzie najistotniejsze s(cid:241) wyra(cid:276)enia attr(), w których okre(cid:264)lamy warto(cid:264)ci zmiennych cx i cy. Jak widzisz, dostanie si(cid:246) do warto(cid:264)ci szeroko(cid:264)ci i d(cid:228)ugo(cid:264)ci geograficz- nych, które uzyska(cid:228)em przed chwil(cid:241), nie sprawia (cid:276)adnych problemów — wystarczy odwo(cid:228)a(cid:232) si(cid:246) do odpowiedniego pola obiektu d.lat lub d.lon. Prawdziwa trudno(cid:264)(cid:232) polega na tym, (cid:276)e potrzebujemy nie tyle wspó(cid:228)rz(cid:246)dnych geograficznych, co wspó(cid:228)rz(cid:246)dnych na ekranie, czyli warto(cid:264)ci x i y. Dlatego te(cid:276) znów odwo(cid:228)amy si(cid:246) do pomocy przewspania(cid:228)ej metody projection(), która w zasadzie jest odmian(cid:241) dwuwymiarowej funkcji skaluj(cid:241)cej. Funkcje skaluj(cid:241)ce przyjmowa(cid:228)y jako argument jedn(cid:241) liczb(cid:246) i zwraca(cid:228)y inn(cid:241) w charakterze wyniku. Funkcje rzutuj(cid:241)ce pobie- raj(cid:241) dwie liczby i zwracaj(cid:241) dwie. (Oczywi(cid:264)cie mi(cid:246)dzy tymi funkcjami istnieje zasadnicza ró(cid:276)- nica, bo obliczenia prowadzone wewn(cid:241)trz funkcji rzutowania s(cid:241) znacznie bardziej z(cid:228)o(cid:276)one ni(cid:276) te, których dokonuje funkcja skaluj(cid:241)ce). Argumentem funkcji rzutowania jest dwuwarto(cid:264)ciowa tablica, w której jako pierwsza poja- wia si(cid:246) d(cid:228)ugo(cid:264)(cid:232) geograficzna (pami(cid:246)taj: d(cid:228)ugo(cid:264)(cid:232) i szeroko(cid:264)(cid:232), a nie szeroko(cid:264)(cid:232) i d(cid:228)ugo(cid:264)(cid:232), jeste(cid:264)my bowiem w GeoJSON-landii), a wynikiem jej dzia(cid:228)ania — dwuwarto(cid:264)ciowa tablica ze wspó(cid:228)- rz(cid:246)dnymi ekranu x i y. Dlatego atrybutowi cx przypiszemy [0], bo chcemy, (cid:276)eby przyj(cid:241)(cid:228) warto(cid:264)(cid:232) pierwszej z tych liczb, czyli x. Z kolei dla atrybutu cy przypiszemy [1], gdy(cid:276) chcemy przekaza(cid:232) do niego drug(cid:241) warto(cid:264)(cid:232), czyli y. Czy to ma sens? Mapa, któr(cid:241) otrzymali(cid:264)my w efekcie tych dzia(cid:228)a(cid:254) (rysunek 12.6), jest prze(cid:264)liczna! Sprawd(cid:274) te(cid:276) kod w pliku 06_points.html. Dodawanie punktów (cid:95) 219 Kup książkęPoleć książkę Rysunek 12.6. Pi(cid:246)(cid:232)dziesi(cid:241)t najwi(cid:246)kszych miast USA przedstawionych w postaci (cid:264)licznych (cid:276)ó(cid:228)tych kropeczek No dobrze, ale wszystkie kropki maj(cid:241) taki sam rozmiar. Spróbujmy po(cid:228)(cid:241)czy(cid:232) teraz liczebno(cid:264)(cid:232) mieszka(cid:254)ców z rozmiarem reprezentuj(cid:241)cej miasto kropki. Zatem zamiast statycznego pola powierzchni przeka(cid:276)emy do funkcji warto(cid:264)(cid:232) population: .attr( r , function(d) { return Math.sqrt(parseInt(d.population) * 0.00004); }) W tym miejscu przechwytujemy warto(cid:264)(cid:232) parametru d.population, umieszczamy j(cid:241) w funkcji parseInt(), by przekszta(cid:228)ci(cid:232) zmienn(cid:241) (cid:228)a(cid:254)cuchow(cid:241) w liczb(cid:246) ca(cid:228)kowit(cid:241), skalujemy w dó(cid:228), mno(cid:276)(cid:241)c przez ustalon(cid:241) z góry liczb(cid:246), i wreszcie wyci(cid:241)gamy z wyniku pierwiastek ((cid:276)eby z jednostek pola powierzchni przej(cid:264)(cid:232) do jednostek promienia). Kod aplikacji znajdziesz w pliku 07_points_sized.html. Jak wida(cid:232) na rysunku 12.7, teraz najwi(cid:246)ksze miasta naprawd(cid:246) rzucaj(cid:241) si(cid:246) w oczy. Nie sposób pomin(cid:241)(cid:232) ró(cid:276)nic w rozmiarze. Tego rodzaju zale(cid:276)no(cid:264)ci by(cid:228)yby zapewne lepiej widoczne na skali logarytmicznej, szczególnie je(cid:264)li uwzgl(cid:246)dnialiby(cid:264)my tak(cid:276)e ma(cid:228)e miasta. Poza tym za- miast mno(cid:276)y(cid:232) wynik przez 0,00004, mo(cid:276)na by u(cid:276)y(cid:232) funkcji skaluj(cid:241)cej. (Ten problem pozo- stawi(cid:246) Tobie). Rysunek 12.7. Miasta jako kropki, których wielko(cid:264)(cid:232) odpowiada wielko(cid:264)ci populacji 220 (cid:95) Rozdzia(cid:293) 12. Mapy geograficzne Kup książkęPoleć książkę Chcia(cid:228)bym w tym momencie podkre(cid:264)li(cid:232), (cid:276)e uda(cid:228)o si(cid:246) nam wczyta(cid:232) i przedstawi(cid:232) graficznie na mapie dwa rodzaje danych. (A w zasadzie trzy, je(cid:264)li uwzgl(cid:246)dni(cid:232) wspó(cid:228)rz(cid:246)dne miast z geo- kodera, które w(cid:228)(cid:241)czyli(cid:264)my do zestawu!). Pobieranie danych geograficznych i ich parsowanie Gdyby zale(cid:276)a(cid:228)o nam wy(cid:228)(cid:241)cznie na przygotowywaniu map Stanów Zjednoczonych, mieliby(cid:264)my ju(cid:276) gotowe wszystkie potrzebne dane GeoJSON. Ale przecie(cid:276) (cid:264)wiat jest znacznie wi(cid:246)kszy i pe- (cid:228)en miejsc, które warto nanie(cid:264)(cid:232) na mapy. Pozwól mi zatem na niewielk(cid:241) dygresj(cid:246), chcia(cid:228)bym bowiem odnie(cid:264)(cid:232) si(cid:246) do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicy i parsowania ich na potrzeby dalszego u(cid:276)ycia. Naszym celem b(cid:246)dzie uzyskanie pliku GeoJSON, takiego jak us-states.json, który by(cid:228)by zrozumia(cid:228)y dla biblioteki D3. Znajd(cid:346) pliki kszta(cid:293)tów Tak zwane pliki kszta(cid:228)tów (ang. shapefiles) pochodz(cid:241) z czasów znacznie poprzedzaj(cid:241)cych boom na tworzenie map internetowych i interaktywnych wizualizacji. Zawiera(cid:228)y zasadniczo te sa- me informacje, które dzi(cid:264) przechowuje si(cid:246) w plikach GeoJSON (granice krain geograficznych oraz le(cid:276)(cid:241)ce w ich obr(cid:246)bie punkty), ale zawarty w nich by(cid:228) nie tylko tekst, wi(cid:246)c odczytywanie ich by(cid:228)o mocno utrudnione. Format plików kszta(cid:228)tów wyrós(cid:228) w kr(cid:246)gu geografów, kartogra- fów i naukowców korzystaj(cid:241)cych z oprogramowania GIS (Geographic Information Systems). Je(cid:264)li masz dost(cid:246)p do drogiego oprogramowania GIS, to pliki kszta(cid:228)tów zostan(cid:241) pewnie Twoimi najlepszymi przyjació(cid:228)mi. W(cid:241)tpi(cid:246) jednak, (cid:276)eby wielu moich Czytelników zalicza(cid:228)o si(cid:246) do tego w(cid:241)skiego grona, z kolei przegl(cid:241)darki internetowe i tak nie mog(cid:241) przetworzy(cid:232) za- warto(cid:264)ci plików kszta(cid:228)tów. Je(cid:264)li nie uda Ci si(cid:246) znale(cid:274)(cid:232) pliku GeoJSON, który opisywa(cid:228)by interesuj(cid:241)cy Ci(cid:246) teren, wtedy faktycznie nie pozostanie Ci nic innego jak znale(cid:274)(cid:232) odpowiedni plik kszta(cid:228)tów. Dobrym punktem wyj(cid:264)cia dla dalszych poszukiwa(cid:254) s(cid:241) strony rz(cid:241)dowe, szczególnie je(cid:264)li interesuj(cid:241) Ci(cid:246) konkretne rejony. Ja lubi(cid:246) najbardziej dwie strony: Natural Earth (http://www.naturalearthdata.com/) Witryna ta to dost(cid:246)pna w domenie publicznej szeroka gama danych geograficznych przy- gotowanych z my(cid:264)l(cid:241) o przedstawianiu kulturowego i politycznego dorobku ludzko(cid:264)ci. Odwzorowywanie granic pa(cid:254)stwowych ma charakter wybitnie polityczny i Natural Earth cz(cid:246)sto publikuje wyja(cid:264)nienia swoich decyzji. Strona spisu powszechnego w Stanach Zjednoczonych (http://www.census.gov/#) Znajdziesz tu opracowania graficzne wszystkich stanów i hrabstw, sieci dróg, szlaków wodnych — co tylko chcesz. Wybierz rozdzielczo(cid:316)(cid:235) Zanim zaczniesz cokolwiek pobiera(cid:232), sprawd(cid:274) rozdzielczo(cid:264)(cid:232) danych. Wszystkie pliki kszta(cid:228)tów s(cid:241) zapisywane w postaci wektorowej (a nie bitmapy), wi(cid:246)c pisz(cid:241)c o rozdzielczo(cid:264)ci, nie mam na my(cid:264)li pikseli, lecz poziom szczegó(cid:228)owo(cid:264)ci kartograficznej, czyli tak zwan(cid:241) ziarnisto(cid:264)(cid:232). Pobieranie danych geograficznych i ich parsowanie (cid:95) 221 Kup książkęPoleć książkę Zestawy danych przygotowywane przez Natural Earth wyst(cid:246)puj(cid:241) w jednej z trzech skal: (cid:120) 1:10 000 000, (cid:120) 1:50 000 000, (cid:120) 1:110 000 000. Oznacza to, (cid:276)e w przypadku danych o najwi(cid:246)kszej rozdzielczo(cid:264)ci jednej jednostce wyznaczo- nej na mapie odpowiada dziesi(cid:246)(cid:232) milionów takich jednostek w prawdziwym (cid:264)wiecie. Mo(cid:276)na te(cid:276) podej(cid:264)(cid:232) do tego zagadnienia odwrotnie i powiedzie(cid:232), (cid:276)e dziesi(cid:246)(cid:232) milionów jednostek uproszczono do jednej. Znaczy(cid:228)oby to, (cid:276)e 10 000 000 centymetrów po prze(cid:228)o(cid:276)eniu do skali mapy odpowiada 1 centymetrowi. Wspó(cid:228)czynniki skali mo(cid:276)na zapisa(cid:232) w prostszej postaci: (cid:120) 1:10m, (cid:120) 1:50m, (cid:120) 1:110m. W przypadku mniej szczegó(cid:228)owych (oddalonych) map (cid:264)wiata w zupe(cid:228)no(cid:264)ci wystarczy roz- dzielczo(cid:264)(cid:232) rz(cid:246)du 1:110m, ale ju(cid:276) (cid:276)eby pokaza(cid:232) wyra(cid:274)nie kszta(cid:228)t granicy konkretnego stanu, potrzeba mapy o skali co najmniej 1:10m. Je(cid:264)li za(cid:264) przygotowujesz map(cid:246) naprawd(cid:246) niewiel- kiego obszaru (mocno przybli(cid:276)onego) — miasta czy dzielnicy — nawet taka skala by(cid:228)aby niewystarczaj(cid:241)ca. (W takim przypadku sugeruj(cid:246) poszuka(cid:232) informacji na stronach WWW sta- nów, województw czy miast). Ró(cid:276)ne (cid:274)ród(cid:228)a oferuj(cid:241) mapy o ró(cid:276)nych skalach. Wiele z oferowanych na stronie ameryka(cid:254)- skiego spisu powszechnego plików kszta(cid:228)tu jest wykonanych w jednej z nast(cid:246)puj(cid:241)cych skal: (cid:120) 1:500 000 (1:500k), (cid:120) 1:5 000 000 (1:5m), (cid:120) 1:20 000 000 (1:20m). Wybierz skal(cid:246) i pobierz plik. Najcz(cid:246)(cid:264)ciej b(cid:246)dzie mia(cid:228) on posta(cid:232) archiwum ZIP, w którym za- pisano kilka innych plików. Dam Ci przyk(cid:228)ad. Pobior(cid:246) teraz plik przedstawiaj(cid:241)cy ocean od- wzorowany w skali 1:110m (ma(cid:228)o szczegó(cid:228)owej). Jest on dost(cid:246)pny na stronie Natural Earth pod adresem http://www.naturalearthdata.com/downloads/110m-physical-vectors/110m-ocean/. W archiwum znajduj(cid:241) si(cid:246) nast(cid:246)puj(cid:241)ce pliki: ne_110m_ocean.dbf ne_110m_ocean.prj ne_110m_ocean.README.html ne_110m_ocean.shp ne_110m_ocean.shx ne_110m_ocean.VERSION.txt Có(cid:276), to si(cid:246) nazywa kolekcja dziwacznych rozszerze(cid:254). Nas interesuj(cid:241) pliki o rozszerzeniu .shp, ale nie pozbywajmy si(cid:246) jeszcze pozosta(cid:228)ych. 222 (cid:95) Rozdzia(cid:293) 12. Mapy geograficzne Kup książkęPoleć książkę Upraszczanie kszta(cid:293)tów W idealnym (cid:264)wiecie bez trudu znale(cid:274)liby(cid:264)my pliki kszta(cid:228)tów o takiej rozdzielczo(cid:264)ci, jaka by- (cid:228)aby nam potrzebna. Ale co zrobi(cid:232), je(cid:264)li jedynym dost(cid:246)pnym b(cid:246)dzie plik o superwysokiej rozdzielczo(cid:264)ci, na przyk(cid:228)ad, 1:100k? Jego rozmiary by(cid:228)yby olbrzymie. A skoro zajmujesz si(cid:246) ju(cid:276) programowaniem w JavaScripcie, wydajno(cid:264)(cid:232) kodu powinna mie(cid:232) dla Ciebie pierwszo- rz(cid:246)dne znaczenie. Dlatego wysy(cid:228)anie miliarda bajtów danych geograficznych do przegl(cid:241)darki zdecydowanie odpada. Na szcz(cid:246)(cid:264)cie plik kszta(cid:228)tu mo(cid:276)na upro(cid:264)ci(cid:232), uzyskuj(cid:241)c jego mniej szczegó(cid:228)ow(cid:241) wersj(cid:246). Proces ten pi(cid:246)knie ilustruje interaktywna aplikacja Mike’a Bostocka dost(cid:246)pna pod adresem http:// bost.ocks.org/mike/simplify/. MapShaper (http://mapshaper.org/) autorstwa Matta Blocha jest doskona(cid:228)ym, (cid:228)atwym w obs(cid:228)u- dze interaktywnym narz(cid:246)dziem s(cid:228)u(cid:276)(cid:241)cym w(cid:228)a(cid:264)nie do upraszczania map. Aplikacja pozwala wczyta(cid:232) w(cid:228)asne pliki kszta(cid:228)tów i wyregulowa(cid:232) zwyk(cid:228)ym suwakiem poziom ich skompliko- wania. Jak zawsze w takich przypadkach chodzi o osi(cid:241)gni(cid:246)cie dobrego kompromisu mi(cid:246)dzy odpowiedni(cid:241) szczegó(cid:228)owo(cid:264)ci(cid:241) a rozmiarem pliku. Je(cid:264)li zdecydujesz si(cid:246) u(cid:276)ywa(cid:232) MapShapera, przed wyeksportowaniem mapy wybierz opcj(cid:246) Shapefile-polygons (plik kszta(cid:228)tu — wielok(cid:241)ty). W ten sposób otrzymasz od razu pliki .shp i .shx. Pobierz obydwa na dysk, zmie(cid:254) ich nazwy na identyczne z oryginalnymi plikami o tych rozszerzeniach. Potem, przed przeprowadzeniem konwersji do formatu GeoJSON, wykonaj kopi(cid:246) oryginalnego pliku .dbf i umie(cid:264)(cid:232) j(cid:241) w tym samym katalogu co uproszczone pliki .shp i .shx. To wa(cid:276)ny krok, dzi(cid:246)ki któremu na pewno nie stracisz istotnych metadanych zapisanych w pliku .dbf, na przyk(cid:228)ad identyfikatora kraju czy identyfikatorów (cid:264)cie(cid:276)ek. Mo(cid:276)esz te(cid:276) skorzysta(cid:232) z napisanego przez Micha(cid:228)a Migurskiego w j(cid:246)zyku Python skryptu Bloch (https://github.com/migurski/Bloch), wykorzystuj(cid:241)cego algorytmy upraszczaj(cid:241)ce Matta Blocha i b(cid:246)d(cid:241)cego dodatkiem do biblioteki d3.simplify (u(cid:276)ytego zreszt(cid:241) do przygotowania wspo- mnianego wcze(cid:264)niej demo Mike’a Bostocka). Programistom przy(cid:264)wieca jeden cel: by pewnego dnia móc przeprowadzi(cid:232) uproszczenie liniowe bezpo(cid:264)rednio z poziomu samego JavaScriptu i wyeksportowa(cid:232) wyniki do uproszczonej wersji formatu JSON, (cid:276)eby móc potem korzysta(cid:232) z nich w innych projektach. Wachlarz dost(cid:246)pnych narz(cid:246)dzi rozszerza si(cid:246) z ka(cid:276)d(cid:241) chwil(cid:241), wiec miej oczy otwarte! (Dok(cid:228)adnie wtedy, gdy opracowywa(cid:228)em ten akapit, Mike Bostock udost(cid:246)pni(cid:228) spo(cid:228)eczno(cid:264)ci wersj(cid:246) próbn(cid:241) (http://bl.ocks.org/mbostock/4090870) nowej aplikacji s(cid:228)u(cid:276)(cid:241)cej do prze- prowadzania geometrycznych uproszcze(cid:254) — TopoJSON (https://github.com/mbostock/topojson). Stan rzeczy zmienia si(cid:246) dos(cid:228)ownie z dnia na dzie(cid:254)! Z kolei teraz, gdy czytasz te s(cid:228)owa, narz(cid:246)dzie wiersza polece(cid:254) TopoJSON jest prawdopodobnie nasz(cid:241) najwi(cid:246)ksz(cid:241) nadziej(cid:241). Obecnie potrafi ono wczytywa(cid:232) pliki kszta(cid:228)tu, upraszcza(cid:232) je i przekszta(cid:228)ca(cid:232) dane do formatu JSON. Oczywi(cid:264)cie To- poJSON jest zaprojektowany tak, by wspó(cid:228)pracowa(cid:232) z bibliotek(cid:241) D3, mimo (cid:276)e zapisuje wyniki oblicze(cid:254) w nowym formacie — TopoJSON — podobnym do GeoJSON, lecz bardziej wydajnym). Konwersja do GeoJSON Je(cid:264)li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania, prawdopodobnie zbli(cid:276)asz si(cid:246) w(cid:228)a(cid:264)nie do najbardziej ryzykownego etapu ca(cid:228)ego procesu. Ostatecznie chcieliby- (cid:264)my uzyska(cid:232) dost(cid:246)p do narz(cid:246)dzia wiersza polece(cid:254) ogr2ogr niezale(cid:276)nie od tego, czy u(cid:276)ywasz systemu Mac, Unix czy Windows. Problem polega na tym, (cid:276)e ogr2ogr nie zadzia(cid:228)a bez asy- sty kilku innych szkieletów aplikacji, bibliotek i innych im podobnych. Pobieranie danych geograficznych i ich parsowanie (cid:95) 223 Kup książkęPoleć książkę Nie b(cid:246)d(cid:246) tu wnika(cid:228) w niuanse instalacji, ale spróbuj(cid:246) u(cid:228)atwi(cid:232) Ci nieco zadanie. Przede wszystkim b(cid:246)dziesz potrzebowa(cid:232) biblioteki Geospatial Data Abstraction Library, czyli tak zwanej GDAL (http://www.gdal.org/). Narz(cid:246)dzie ogr2ogr jest jej cz(cid:246)(cid:264)ci(cid:241). Poza tym musisz pobra(cid:232) tak(cid:276)e GEOS, czyli Geometry Engine, Open Source (trac.osgeo.org/geos/). Je(cid:264)li na Twoim komputerze dzia(cid:228)a system Windows lub Unix/Linux, mo(cid:276)esz teraz przyst(cid:241)pi(cid:232) do najlepszej cz(cid:246)(cid:264)ci, a mianowicie rozpocz(cid:241)(cid:232) pobieranie plików (cid:274)ród(cid:228)owych i instalowanie ich za pomoc(cid:241) zabawnie wygl(cid:241)daj(cid:241)cych polece(cid:254) typu build, make czy dlaczego to nie idzie omg prosze prosze zainstaluj sie teraz bo mam juz dosc. Nie pami(cid:246)tam dok(cid:228)adnie nazw polece(cid:254), ale tak mniej wi(cid:246)cej brzmia(cid:228)y. (A mówi(cid:241)c powa(cid:276)nie: musisz mie(cid:232) (cid:264)wiadomo(cid:264)(cid:232), (cid:276)e problemy na tym etapie nie powinny Ci(cid:246) dziwi(cid:232). Kwestii pobie- rania i instalowania pakietów oprogramowania po(cid:264)wi(cid:246)cono w ca(cid:228)o(cid:264)ci niejedn(cid:241) ksi(cid:241)(cid:276)k(cid:246) i je(cid:264)li przejrzysz ofert(cid:246) wydawnictwa Helion, z pewno(cid:264)ci(cid:241) trafisz na kilka z nich). Je(cid:264)li pracujesz na macu, na którym jakim(cid:264) przypadkiem s(cid:241) zainstalowane Xcode i Homebrew naraz, wpisz po prostu w wierszu polece(cid:254) brew install gdal. I to ju(cid:276) wszystko! (Je(cid:264)li nie masz (cid:276)adnego z tych wspania(cid:228)ych narz(cid:246)dzi, poszukaj ich. Obydwa s(cid:241) dost(cid:246)pne za darmo, ale zainstalowanie ich b(cid:246)dzie wymaga(cid:228)o od Ciebie nak(cid:228)adu czasu i energii. Xcode mo(cid:276)na pobra(cid:232) ze strony AppStore (https://itunes.apple.com/us/app/xcode/id497799835?mt=12). Gdy Xcode znaj- dzie si(cid:246) ju(cid:276) na dysku Twojego komputera, instalacja Homebrew powinna teoretycznie spro- wadzi(cid:232) si(cid:246) do wpisania w oknie terminalu prostego polecenia http://brew.sh/. Z do(cid:264)wiadczenia wiem jednak, (cid:276)e nale(cid:276)y spodziewa(cid:232) si(cid:246) b(cid:228)(cid:246)dów podczas tego etapu pracy). Do wszystkich u(cid:276)ytkowników komputerów marki Mac, którzy nie korzystaj(cid:241) z Xcode ani Homebrew: macie szcz(cid:246)(cid:264)cie, (cid:276)e jaki(cid:264) dobry cz(cid:228)owiek przygotowa(cid:228) przyjazny instalator GUI umieszczaj(cid:241)cy w komputerze GDAL, GEOS oraz kilka innych narz(cid:246)dzi o nazwach, których naprawd(cid:246) nie musisz zna(cid:232). Poszukaj najnowszej wersji pakietu GDAL Complete (http://www. kyngchaos.com/software/frameworks), ale zanim cokolwiek zrobisz, zapoznaj si(cid:246) z zawarto(cid:264)ci(cid:241) pliku GDAL Read Me. Uko(cid:254)czenie instalowania nie oznacza, (cid:276)e mo(cid:276)esz od razu wpisa(cid:232) w kon- soli ogr2ogr. Najpierw nale(cid:276)y doda(cid:232) programy z rodziny GDAL do (cid:264)cie(cid:276)ki prowadz(cid:241)cej do pow(cid:228)oki. Najprostszym na to sposobem jest otworzy(cid:232) nowe okno terminala, wpisa(cid:232) w nim nano. bash_profile, wklei(cid:232) do okna polece(cid:254) export PATH=/Library/Frame,works/GDAL.framework/ Programs:$PATH, a nast(cid:246)pnie nacisn(cid:241)(cid:232) Control+X i Control+y, by zachowa(cid:232) zmiany. Zako(cid:254)cz potem sesj(cid:246), wpisuj(cid:241)c w oknie exit, i otwórz nowe okno konsoli. W nim mo(cid:276)esz wpisa(cid:232) ogr2ogr i mie(cid:232) nadziej(cid:246), (cid:276)e zadzia(cid:228)a. Niezale(cid:276)nie jednak od rodzaju systemu operacyjnego, z jakiego korzystasz, gdy sko(cid:254)czysz ju(cid:276) instalowa(cid:232) niezb(cid:246)dne oprogramowanie, otwórz okno konsoli i udaj si(cid:246) do katalogu, w którym trzymasz pliki kszta(cid:228)tów (na przyk(cid:228)ad cd ~/ocean_shapes/). Nast(cid:246)pnie przepisz polecenie: ogr2ogr -f GeoJSON output.json filename.shp Nakazuje ono skryptowi ogr2ogr pobra(cid:232) plik filename, który powinien mie(cid:232) rozszerzenie typu .shp, przekonwertowa(cid:232) jego zawarto(cid:264)(cid:232) do formatu GeoJSON i zapisa(cid:232) wynik w pliku output.json. W przypadku przyk(cid:228)adowego pliku z map(cid:241) oceanów uruchomienie narz(cid:246)dzia ogr2ogr po- winno wygl(cid:241)da(cid:232) nast(cid:246)puj(cid:241)co: ogr2ogr -f GeoJSON output.json ne_110m_ocean.shp Wpisz to w konsoli i trzymaj kciuki, (cid:276)eby nic si(cid:246) nigdzie nie wy(cid:264)wietli(cid:228)o. 224 (cid:95) Rozdzia(cid:293) 12. Mapy geograficzne Kup książkęPoleć książkę Jakie(cid:276) to pozbawione klimatu! Wiem, wiem… Po godzinach sp(cid:246)dzonych nad (cid:228)amaniem kodu niezb(cid:246)dnego do zainstalowania starego, dobrego ogr cz(cid:228)owiek chcia(cid:228)by jakiego(cid:264) spektakular- nego fina(cid:228)u, uczucia, które Ci towarzyszy(cid:228)o, gdy po przej(cid:264)ciu ca(cid:228)ego Super Mario 3 znów ra- towa(cid:228)o si(cid:246) ksi(cid:246)(cid:276)niczk(cid:246). (Prawd(cid:246) mówi(cid:241)c, nigdy mi si(cid:246) to nie uda(cid:228)o, ale podejrzewam, (cid:276)e wra- (cid:276)enia musz(cid:241) by(cid:232) niezapomniane). Nic z tego. Tym razem trzeba mie(cid:232) nadziej(cid:246), (cid:276)e nie sta(cid:228)o si(cid:246) nic. Za ca(cid:228)y spektakularny efekt musi wystarczy(cid:232) pojawienie si(cid:246) w tym samym katalogu nowego pliku o nazwie output.json. Oto, jak wygl(cid:241)da pocz(cid:241)tek mojego pliku: { type : FeatureCollection , features : [ { type : Feature , properties : { scalerank : 0, featurecla : Ocean }, geometry : { type : Polygon , coordinates : [ [ [ 49.110290527343778, 41.28228759765625 ], [ 48.584472656250085, 41.80889892578125 ], [ 47.492492675781335, 42.9866943359375 ], [ 47.590881347656278, 43.660278320312528 ], [ 46.682128906250028, 44.609313964843807 ], [ 47.675903320312585, 45.641479492187557 ], [ 48.645507812500085, 45.806274414062557 ] ... Zaczyna wygl(cid:241)da(cid:232) podobnie! Pe(cid:228)ni nadziei i podekscytowani wizj(cid:241) zbli(cid:276)aj(cid:241)cego si(cid:246) sukcesu kopiujemy nowy plik Geo- JSON do katalogu biblioteki D3. Swojemu zmieni(cid:228)em nazw(cid:246) na oceans.json. Skopiowa(cid:228)em te(cid:276) omawiany wcze(cid:264)niej plik HTML i w kodzie D3 zmieni(cid:228)em tylko nazw(cid:246) z us-states.json na oceans.json. Po otwarciu pliku w oknie przegl(cid:241)darki otrzyma(cid:228)em wynik jak na rysunku 12.8. Rysunek 12.8. GeoJSON utrzymuje, (cid:276)e to oceany (cid:264)wiata… Fuj! Co to ma by(cid:232)?! Nie wiem, ale je(cid:264)li chcesz zobaczy(cid:232) to na w(cid:228)asnym ekranie, zajrzyj do pliku 08_oceans.html. Pobieranie danych geograficznych i ich parsowanie (cid:95) 225 Kup książkęPoleć książkę Tak si(cid:246) (cid:264)pieszy(cid:228)em, (cid:276)e zapomnia(cid:228)em zaktua
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Interaktywna wizualizacja danych
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: