Tytuł oryginału Interactive Data Visualization for the Web
Tłumaczenie Julia Szajkowska
ISBN 978-83-246-8172-3
copy 2014 Helion SA
Authorized Polish translation of the English edition of Interactive Data Visualization for the Web ISBN 9781449339739 copy 2013 Scott Murray
This translation is published and sold by permission of OrsquoReilly 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ą roacutewnież żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce
Wydawnictwo HELIONul Kościuszki 1c 44-100 GLIWICEtel 32 231 22 19 32 230 98 63e-mail helionhelionplWWW httphelionpl (księgarnia internetowa katalog książek)
Drogi CzytelnikuJeżeli chcesz ocenić tę książkę zajrzyj pod adres httphelionpluseropinieinwidaMożesz tam wpisać swoje uwagi spostrzeżenia recenzję
Pliki z przykładami omawianymi w książce można znaleźć pod adresem ftpftphelionplprzykladyinwidazip
Printed in Poland
bull Kup książkębull Poleć książkę bull Oceń książkę
bull Księgarnia internetowabull Lubię to raquo Nasza społeczność
3
Spis tre ci
Przedmowa 9
1 Wprowadzenie 13Dlaczego warto przedstawia dane graficznie 13Dlaczego programowa 14Po co nam interaktywno 14Dlaczego w internecie 15O czym jest ta ksi ka 16Kim jeste 16Czego nie znajdziesz w tej ksi ce 17Kod w przyk adach 17Dzi kuj 18
2 Wprowadzenie do D3 19Funkcje biblioteki 19Funkcje ktoacuterych nie znajdziesz w bibliotece 20Pocz tki i t o historyczne 21Inne mo liwo ci 22
Wykresy od r ki 23Grafy 24Odwzorowania kartograficzne 24Prawie od zera 25W trzech wymiarach 25Narz dzia przygotowane za pomoc biblioteki D3 26
3 Podstawy wykorzystywanych technologii 27Kod HTML 29
Tre i struktura 30Budowanie struktury znacznikami 31Najcz ciej stosowane znaczniki 31
Kup książkę Poleć książkę
4 Spis tre ci
Atrybuty 33Klasy i identyfikatory 34Komentarze 34
DOM 35Narz dzia programisty 35Renderowanie i model pude kowy 38Kaskadowe arkusze styloacutew CSS 39
Selektory 40W a ciwo ci i warto ci 41Komentarze 41Wprowadzanie styloacutew na stron 41Dziedziczenie kaskadowo i szczegoacute owo 43
JavaScript 44Witaj konsolo 45Zmienne 45Inne typy zmiennych 46Tablice 46Obiekty 47Obiekty i tablice 48Operatory matematyczne 50Operatory poroacutewnania 50Instrukcje steruj ce 51Funkcje 53Komentarze 54Wprowadzanie skryptoacutew na stron 54Sposoby na JavaScript 54
SVG 58Znacznik SVG 59Proste kszta ty 59Nadawanie styloacutew znacznika SVG 61Warstwy i kolejno rysowania 63Przezroczysto 63
O kompatybilno ci 65
4 Przygotowania do pracy 67Pobieranie biblioteki D3 67Odwo ywanie si do biblioteki D3 68Przygotowanie serwera stron WWW 69
Terminal z interpreterem j zyka Python 69MAMP WAMP i LAMP 70W drog 70
Kup książkę Poleć książkę
Spis tre ci 5
5 Dane 71Tworzenie znacznikoacutew 71
czenie metod 73Po jednym odwo aniu 74Przekazywanie 75Bez czenia 75
Dowi zywanie danych 75W wi zi 76Dane 76Prosz dokona wyboru 79Powi zany i okre lony 80U ywanie danych 82Funkcja mdash rzecz potrzebna 83Dane chc by gdzie zapisane 84Wi cej ni tekst 85
6 Graficzne przedstawianie danych 87Rysowanie za pomoc znacznikoacutew div 87
Okre lanie atrybutoacutew 88Kilka s oacutew o klasach 89Wroacute my do s upkoacutew 89Nadawanie styloacutew 90Pot na metoda data() 91Dane losowe 92
Rysowanie za pomoc znacznikoacutew SVG 94Tworzenie znacznikoacutew SVG 95Kszta ty definiowane danymi 96Jakie liczne kolorki 97
Przygotowywanie wykresu s upkowego 98Stary wykres 98Nowy wykres 99Kolory 104Etykiety 106
Przygotowywanie wykresu punktowego 108Dane 108Wykres punktowy 108Rozmiar 110Etykiety 111
Dalsze dzia ania 112
7 Skalowanie 113Jab ka i piksele 113Dziedziny i zbiory warto ci 114Normalizacja 115
Kup książkę Poleć książkę
6 Spis tre ci
Przygotowywanie funkcji skaluj cej 115Skalowanie wykresu punktowego 116
Funkcje d3min() i d3max() 116Skalowanie dynamiczne 118Stosowanie warto ci przeskalowanych 118
Poprawianie wykresu 119Inne rozwi zania 122Inne funkcje skaluj ce 123
8 Osie 125Poznaj osie 125Metody przygotowywania osi 126Porz dki 127Pod kresk 130A dlaczego nie Y 131Ostateczny szlif 132Formatowanie opisoacutew osi 133
9 Aktualizacje przej cia i ruch 135Przeroacutebki w wykresie s upkowym 135
Jak dzia aj skale porz dkowe 136W zbiorze warto ci tylko grupy 138Referencja do skali porz dkowej 139Inne aktualizacje 139
Aktualizowanie danych 139Interakcja za pomoc funkcji nas uchuj cych zdarze 140Zmienianie danych 141Aktualizowanie elementoacutew graficznych 141
Przej cia 144Funkcja duration() czyli ile to wszystko potrwa 145Ostro nie osiadamy 146Bez opoacute nie prosz 147Dane losowe 149Aktualizowanie funkcji skaluj cych 150Aktualizowanie osi 153Ka de przej cie ma swoacutej pocz tek i koniec 155
Inne rodzaje aktualizacji 161Dodawanie warto ci (i znacznikoacutew) 162Usuwanie warto ci (i znacznikoacutew) 166
czenie danych za pomoc kluczy 169Dodaj i usu czyli wszystko naraz 174Powtoacuterzenie 175
Kup książkę Poleć książkę
Spis tre ci 7
10 Interaktywno 177Dowi zywanie funkcji nas uchuj cych zdarze 177Poznajmy zachowania 178
Najed kursorem eby wyroacute ni 179Grupowanie znacznikoacutew SVG 182
Sortowanie klikni ciem 184Podpowiedzi 187
Domy lne podpowiedzi przegl darki 188Podpowiedzi wy wietlane w znacznikach SVG 189Podpowiedzi wy wietlane w znacznikach div 191
Urz dzenia dotykowe 193Pora rusza dalej 193
11 Uk ady wykresoacutew 195Uk ad ko owy 196Uk ad skumulowany 200Uk ad si owy 203
12 Mapy geograficzne 209Poznaj GeoJSON 209cie ki 211
Odwzorowania 212Kartogram 214Dodawanie punktoacutew 217Pobieranie danych geograficznych i ich parsowanie 221
Znajd pliki kszta toacutew 221Wybierz rozdzielczo 221Upraszczanie kszta toacutew 223Konwersja do GeoJSON 223
13 Eksportowanie 227Mapy bitowe 227Plik PDF 228SVG 229
A Dalsza nauka 233
Skorowidz 237
Kup książkę Poleć książkę
8 Spis tre ci
Kup książkę Poleć książkę
209
ROZDZIA 12
Mapy geograficzne
Wykresy s upkowe wykresy punktowe wykresy ko owe a nawet wykresy si owehellip bdquoWszystkoto bardzo pi knie mdash my lisz sobie mdash ale przejd my ju w ko cu do maprdquo
Poznaj GeoJSONStandard JSON ju znasz pora zaznajomi si teraz z GeoJSON czyli bazuj cym na formacieJSON standardzie zapisywania danych geograficznych na potrzeby aplikacji internetowychGeoJSON nie jest niczym nowym a jedynie wysoce wyspecjalizowan metod stosowania JSON
Zanim jednak przejdziemy do generowania map musimy w jaki sposoacuteb zdoby dane znacz-nika path (czyli konturu) kszta tu ktoacutery b dziemy chcieli wy wietli Zaczniemy od najprost-szego przyk adu mdash odwzorowania granic Stanoacutew Zjednoczonych W katalogu z kodami przy-k adoacutew znajdziesz plik us-statesjson ktoacutery zosta pobrany bezpo rednio z jednego z licznychprzyk adoacutew na stronie D3 w zwi zku z czym jeste my winni Mikersquoowi Bostockowi gor cepodzi kowania za przygotowanie takich adnych i starannych granic Stanoacutew
Po otwarciu pliku us-statesjson zobaczysz co co przypomina nieco ten kod (cho tu pre-zentuj wersj sformatowan i bardzo skroacutecon )
typeFeatureCollection features[ typeFeature id01 propertiesnameAlabama geometry typePolygon coordinates[[[-873592963500118] [-8560667534984749][-8543141334124869] [-8518495132859696][-8518495132859696] [-8496039732421541][-8500421232322956] [-8488919632262709][-850589813213674] ]] type Feature id 02 properties name Alaska
Kup książkę Poleć książkę
210 Rozdzia 12 Mapy geograficzne
geometry type MultiPolygon coordinates [[[[-13160202155117982] [-1315691595528229][-13135555855183705] [-131388425501392][-13164583655035827] [-13160202155117982]]][[[-1318320525542469] [-13164583655304197][-13174989855128935] [-13183205255189182] ]]]
Dane jak to w stylu GeoJSON s zapisane w jednym wielkim obiekcie (Nawiasy klamrowepami tasz) W obiekcie znajdziemy deklaracj typu type FeatureCollecion Po typie po-jawia si pole features ktoacutere przechowuje tablic pojedynczych obiektoacutew typu FeatureKa dy z nich odpowiada jednemu ze stanoacutew Nazwa stanu jest podana w polu properties
Jednak sedno ka dego pliku GeoJSON le y w polu geometry Tam w a nie pojawiaj si de-finicja typu (type) oraz wspoacute rz dne (coordinates) okre laj ce kontur danego elementu Polecoordinates przechowuje szeroko ci i d ugo ci geograficzne zapisane parami w ma ych dwu-warto ciowych tablicach Przetwarzanie i udoskonalanie tych warto ci stanowi sens ycia ka -dego kartografa Pokolenia badaczy i podroacute nikoacutew po wi ca y swoacutej czas by zgromadzi tenzbioacuter i za to powinni my by im wdzi czni Liczby te cho mo e niepozorne kryj w sobieprawdziw moc
Warto te zaznaczy e w danych GeoJSON jako pierwsz podaje si zawsze d ugo geogra-ficzn Mimo e jeste my przyzwyczajeni do zapisu w ktoacuterym najpierw wymienia si szero-ko a potem d ugo w wiecie GeoJSON obowi zuje odwrotny porz dek
I jeszcze ma a ci ga na wypadek gdyby odroacute nianie d ugo ci od szeroko ci geograficznejstanowi o dla Ciebie problem
D ugo geograficzna jak nazwa wskazuje jest d uga Jej linie (po udniki) biegn pionowo(z poacute nocy na po udnie) jakby zwiesza y si z goacutery na doacute
Szeroko geograficzna jest szeroka Jej linie (roacutewnole niki) rozci gaj si poziomo jakbystara y si obj Ziemi w pasie
Roacutewnole niki i po udniki tworz razem ogromn sie obejmuj c ca kul ziemsk Na naszeszcz cie wspoacute rz dne mo na atwo przeliczy na pary x i y ktoacutere z kolei pozwalaj wy-wietla wszystko bez wi kszych problemoacutew na ekranie komputera Gdy rysowali my wy-
kres s upkowy warto ci danych odwzorowywali my na warto ci na ekranie mdash przeliczali myliczby na wysoko prostok toacutew W przypadku tworzenia map geograficznych te generu-jemy odwzorowania mdash pary d ugo i szeroko przechodz w pary x i y Jednocze nie ope-rowanie zmiennymi x i y pozwala w atwy sposoacuteb omin niewygodny problem kolejno cid ugo ci i szeroko ci podanych odwrotnie
Get Lat+Lon (httptecznocomsquares12378043-1222712) to doskona e narz dzieautorstwa Micha a Migurskiego dzi ki ktoacuteremu z atwo ci sprawdzisz czy podanewspoacute rz dne geograficzne s na pewno poprawne Trzymaj t stron otwart w oknieprzegl darki przez ca y czas gdy pracujesz nad mapami zagl da si do niej bowiembardzo cz sto
Kup książkę Poleć książkę
cie ki 211
cie kiMamy ju dane geograficzne Pora co z nimi zrobi
Przede wszystkim nale y zdefiniowa generator cie ek
var path = d3geopath()
Mog z czystym sumieniem powiedzie e d3geopath() to funkcja ratuj ca ycie To onaprzek ada ba agan z pliku GeoJSON na jeszcze bardziej nieporz dny zapis ze znacznikoacutewpath Oddajmy cze d3geopath()
Mogliby my oczywi cie wklei kod GeoJSON bezpo rednio do pliku HTML ale fuj tylewspoacute rz dnych i nawiasoacutew klamrowych Co za ba agan Znacznie porz dniej b dzie gdyzastosujemy bardziej tradycyjne podej cie czyli pozostawimy dane geograficzne w osobnympliku i wczytamy jego zawarto za pomoc funkcji d3json()
d3json(us-statesjson function(json) svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path))
Funkcja d3json() przyjmuje dwa argumenty Pierwszy to zmienna a cuchowa okre laj cacie k dost pu do pliku ktoacuterego zawarto nale y wczyta drugi za to funkcja zwrotna
uruchamiana dopiero po wczytaniu i sparsowaniu zawarto ci pliku JSON (Wi cej na tematfunkcji zwrotnych znajdziesz w ramce bdquoObs uga b doacutew wczytywania danychrdquo z rozdzia u 5)Funkcja d3json() podobnie jak d3csv() jest asynchroniczna a zatem nie wstrzymuje wy-konywania pozosta ej cz ci kodu na czas wczytywania danych z pliku Oznacza to e kodumieszczony po wywo aniu funkcji zwrotnej b dzie w rzeczywisto ci wykonany przed jej cia em
d3json(someFilejson function(json) Tu umie kod zale ny od danych z pliku JSON)
Tu umie tylko te instrukcje ktoacutere nie potrzebuj do pracy zawarto ci pliku JSONconsolelog(Lubi koty)
Dlatego zapami taj podczas korzystania z zewn trznych roacutede danych kod ktoacuterego wyko-nanie zale y od zawarto ci tych roacutede musi si zawsze znale wewn trz funkcji zwrotnej(Mo esz te rozbi go na mniejsze porcje ktoacutere zapiszesz we w asnych funkcjach i dopiero jewywo asz w ciele funkcji zwrotnej)
Wroacute my jednak do przyk adu Pora powi za w a ciwo ci pobrane z pliku GeoJSON z no-wymi znacznikami path Podany kod tworzy osobn cie k dla ka dej z cech
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path)
Zauwa e ostatni wiersz mdash ten w ktoacuterym zmienna d (atrybut przechowuj cy dane znacznikapath) jest przekazywana do generatora cie ek mdash po prostu pobiera wszystkie dane z plikui przelicza je na kod SVG Wynik jest widoczny na rysunku 121
Kup książkę Poleć książkę
212 Rozdzia 12 Mapy geograficzne
Rysunek 121 Pierwsze zetkni cie z danymi GeoJSON
Mapa To zbyt proste by by o mo liwe Aby sprawdzi czy uzyskasz ten sam efekt otwoacuterzplik 01_pathshtml Dalsze dzia ania b d mia y na celu wy cznie dostosowanie mapy do na-szych potrzeb
Je li interesuj Ci zagadnienia zwi zane z prac ze cie kami i ich generatoramipolecam Ci zapoznanie si z dokumentacj (httpsgithubcommbostockd3wikiGeo-Paths)
OdwzorowaniaNiew tpliwie rzuci o Ci si w oczy e mapa nie przedstawia ca ych Stanoacutew ZjednoczonychAby naprawi to niedoci gni cie musimy zmieni u ywane odwzorowanie
Czym jest odwzorowanie Z pewno ci nie usz o Twojej uwadze tak e to e Ziemia jest kuli-sta a nie p aska Wszystkie kuliste obiekty s troacutejwymiarowe co znacznie utrudnia przed-stawianie ich na powierzchniach dwuwymiarowych Odwzorowanie jest algorytmem kom-promisu to metoda pozwalaj ca rzutowa troacutejwymiarow przestrze na dwuwymiarowp aszczyzn
Biblioteka D3 pozwala definiowa mechanizmy rzutowania za pomoc wygl daj cej znajomokonstrukcji
var projection = d3geoalbersUsa() translate([w2 h2])
Biblioteka pozwala korzysta z kilku dost pnych w niej algorytmoacutew rzutowania Odwzoro-wanie Albersa jest rzutem z o onym przygotowanym tak by na mapie zmie ci y si tak eAlaska i Hawaje ktoacutere umieszcza si pod po udniowo-zachodnim wybrze em Stanoacutew Zjed-noczonych (zaraz zobaczysz jak to wygl da) To w a nie albersUsa jest domy lnym odwzo-rowaniem u ywanym przez funkcj d3pathgeo() Teraz gdy okre lili my je ju jawniemo emy dodatkowo poda kilka opcji z jakimi mia oby by wykorzystywane jak cho by war-to przesuni cia Z przytoczonej instrukcji wynika e przesuwamy odwzorowanie w kie-runku rodka obrazu (o po ow szeroko ci i o po ow wysoko ci)
Kup książkę Poleć książkę
Odwzorowania 213
Drug zmian jak zrobimy b dzie jawne za danie od generatora cie ek by wszystkiecie ki wyznacza w odniesieniu do wskazanego wcze niej w asnego odwzorowania
var path = d3geopath() projection(projection)
W ten sposoacuteb otrzymali my map przedstawion na rysunku 122 Powoli zbli amy si do celuKod znajdziesz w pliku 02_projectionhtml
Rysunek 122 Te same dane GeoJSON ale przy wy rodkowaniu rzutu
Mo emy te doda do odwzorowania metod scale() eby zmniejszy nieco map i osi gntym samym wynik przedstawiony na rysunku 123
var projection = d3geoalbersUsa() translate([w2 h2]) scale([500])
Rysunek 123 Mapa Stanoacutew Zjednoczonych mdash przeskalowana i wy rodkowana tak by mie ci a siw obszarze obrazu
Domy ln warto ci skalowania jest 1000 Mniejsze liczby zmniejszaj map a wi ksze po-wi kszaj
Kup książkę Poleć książkę
214 Rozdzia 12 Mapy geograficzne
Doskonale Je li otworzysz w przegl darce plik 03_scaledhtml przekonasz si e wszystkodzia a
Wystarczy doda jedn instrukcj style() eby zmieni kolor wype nienia cie ek na jakimniej przygn biaj cy S dz e niebieski widoczny na rysunku 124 nie jest brzydki
Rysunek 124 Niebieski jest zdecydowanie lepszy
Ca y kod znajdziesz w pliku 04_fillhtml W ten sam sposoacuteb mo na zdefiniowa kolor i szero-ko p dzla obramowania
Funkcje rzutuj ce ktoacutere pozwalaj uzyskiwa roacute nego rodzaju odwzorowania kartograficz-ne to niezwykle pot ne algorytmy Warto wiedzie e nie ma odwzorowa uniwersalnychmdash zmienia si je w zale no ci od tego jakich informacji potrzebujemy i o ktoacuter cz wiatachodzi (inaczej odwzorowuje si bieguny a inaczej okolice roacutewnika)
Zas ug g oacutewnie Jasona Daviesa (httpwwwjasondaviescom) jest to e dodatki do biblioteki D3odpowiedzialne za przygotowanie odwzorowa kartograficznych oferuj dzi u ytkownikomniemal wszystkie znane nam rodzaje rzutoacutew Szczegoacute owy opis pracy z rzutami znajdziesz w do-kumentacji (httpsgithubcommbostockd3wikiGeo-Projections) Warto te zapozna si z poroacutewna-niem przedstawiaj cym w a ciwo ci poszczegoacutelnych rzutoacutew (httpblocksorgmbostock3711652)
KartogramKarto co To s owo ktoacuterego nie s yszy si na co dzie okre la map na ktoacuterej ca e obszaryzosta y wype nione roacute nymi odcieniami (jasnymi lub ciemnymi) czy te roacute nymi kolorami takby odda rozk ad powi zanych z oznaczeniami warto ci W Stanach Zjednoczonych szcze-goacutelnie w okresie wyboroacutew cz sto spotyka si kartogramy okre lane mianem bdquoczerwonychi niebieskich stanoacutewrdquo Na mapach tych zaznacza si odpowiednim kolorem przewag popar-cia dla kandydatoacutew Partii Demokratycznej b d Partii Republika skiej Ale kartogramy wy-konuje si z roacute nych przyczyn niekoniecznie politycznych
Takie odwzorowania ciesz si chyba najwi ksz popularno ci w roacuted u ytkownikoacutew D3Pami taj jednak e cho kartogramy potrafi by niezwykle pomocne to maj jednak po-wa ne ograniczenia Poniewa na tego rodzaju mapach warto ci odwzorowuje si na pewnejpowierzchni atwo mo e doj do niezamierzonego przek amania du e powierzchnie o niskiej
Kup książkę Poleć książkę
Kartogram 215
g sto ci danej wielko ci (na przyk ad stan Nevada) mog sprawia wra enie bardziej istot-nych ni s w rzeczywisto ci Typowy kartogram nie oddaje dobrze warto ci liczonych bdquonag ow rdquo bo na przyk ad Nevada jest zbyt du a a Delaware zbyt ma y Jednocze nie karto-gram zachowuje geografi miejsca oraz mdash jak na map mdash wygl da naprawd imponuj coZobaczmy zatem co da si z tym zrobi (Kod znajdziesz w pliku 05_choroplethhtml)
Po pierwsze zdefiniuj funkcj skaluj c ktoacutera pobierze warto ci liczbowe a zwroacuteci koloryNa tym w a nie polega w du ej mierze praca nad kartogramem
var color = d3scalequantize() range([rgb(237248233) rgb(186228179)rgb(116196118)rgb(4916384)rgb(010944)])
Funkcja quantize jest zaliczana do grupy skal liniowych ale wynikiem jej dzia ania jest zbioacuterwarto ci dyskretnych Warto ciami wyj ciowymi mog by liczby kolory (jak w tym przy-padku) czy cokolwiek innego co uznasz za odpowiednie Funkcja ta przydaje si bardzo je lichcesz podzieli zbioacuter warto ci na grupy W omawianym przypadku zdecydowa em si utwo-rzy pi grup docelowych ale ich liczba nie jest w aden sposoacuteb formalnie ograniczona
Zauwa e okre li em tu zbioacuter warto ci wyj ciowych natomiast nie napisa em nic na tematdziedziny (Czekam a wczytaj si dane) Kolory ktoacuterymi si pos u y em pochodz z plikucolorbrewerjs dost pnego pod adresem httpsgithubcommbostockd3treemasterlibcolorbrewerRepozytorium to zawiera sporych rozmiaroacutew zbioacuter barw dobranych przez Cynthi Brewerna podstawie prowadzonych przez ni bada
Pora wczyta jakie dane Zawczasu przygotowa em plik us-ag-productivity-2004csv w ktoacuterymznajdziesz dane u o one w nast puj cy sposoacuteb
statevalueAlabama11791Arkansas13705Arizona13847California17979Colorado10325Connecticut13209Delaware14345
Dane te udost pnione przez Departament Rolnictwa Stanoacutew Zjednoczonych zawieraj in-formacje na temat produkcji rolnej w poszczegoacutelnych stanach w 2004 roku Dane liczboweprzedstawiaj wyniki wzgl dne wyznaczane dla linii bazowej jak by a produkcja rolnaw Alabamie w 1996 roku (10) Wi ksze od jedynki warto ci nale y zatem rozumie jakowy szy poziom produkcji p odoacutew rolnych a mniejsze jako ni szy (Na stronie httpdatagovmo na znale wiele oficjalnych zestawie statystycznych) Wydaje si e te warto ci po-winny adnie si prze o y na kartogram produkcji rolnej
Dane z pliku wczytamy za pomoc funkcji d3csv()
d3csv(us-ag-productivity-2004csv function(data)
Teraz (zanim zapomn ) w funkcji zwrotnej zdefiniuj parametr color dziedziny warto ciwej ciowych skali kwantuj cej
colordomain([ d3min(data function(d) return dvalue ) d3max(data function(d) return dvalue )])
Kup książkę Poleć książkę
216 Rozdzia 12 Mapy geograficzne
W kodzie tym pojawiaj si funkcje d3min() i d3max() pozwalaj ce wyznaczy i zwroacutecinajmniejsz i najwi ksz warto dzi ki czemu dziedzina b dzie wyznaczana dynamicznie
Nast pnie wczytamy dane JSON mdash t cz operacji przeprowadzimy tak jak poprzednioG oacutewna roacute nica i nowo polega na tym e tym razem chc w czy dane dotycz ce rolnictwado danych GeoJSON Dlaczego Poniewa do znacznika mo na do cza tylko jeden zestawdanych naraz Zdecydowanie potrzebujemy danych GeoJSON bo na ich podstawie tworzones cie ki ale jednocze nie potrzebujemy te danych dotycz cych upraw Gdyby zatemuda o si po czy je w jedn monstrualn tablic wtedy mogliby my podpi ca o podznaczniki path (Istnieje kilka sposoboacutew rozwi zania tego problemu mdash jak zawsze prezentujswoj ulubion metod )
d3json(us-statesjson function(json) czy dane rolnicze z danymi GeoJSON Sprawdza w p tli raz ca y zestaw danych rolniczych for (var i = 0 i lt datalength i++) Pobiera nazw stanu var dataState = data[i]state Pobiera warto danych i przekszta ca j na liczb zmiennoprzecinkow var dataValue = parseFloat(data[i]value) Odnajduje odpowiedni stan w danych GeoJSON for (var j = 0 j lt jsonfeatureslength j++) var jsonState = jsonfeatures[j]propertiesname if (dataState == jsonState) Kopiuje dane do zmiennej JSON jsonfeatures[j]propertiesvalue = dataValue Przestaje przeszukiwa JSON break
Przyjrzyj si uwa nie przytoczonemu fragmentowi kodu Zasadniczo zaproponowane roz-wi zanie polega na tym by dla ka dego stanu odnale dane GeoJSON opatrzone t samnazw (na przyk ad Colorado) Gdy to si uda pobierzemy warto ci danych zapisanych dlaka dego stanu i dodamy je do jsonfeatures[j]propertiesvalue W ten sposoacuteb b done po czone ze znacznikiem i dost pne poacute niej gdy b dziemy ich potrzebowa
Wreszcie w ten sam sposoacuteb co ostatnio przygotujemy cie ki przy czym tym razem wartofunkcji style() b dziemy przypisywa dynamicznie
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path) style(fill function(d) Pobiera warto ci danych var value = dpropertiesvalue if (value) Je li warto istnieje return color(value) else Je li warto jest niezdefiniowana return ccc )
Kup książkę Poleć książkę
Dodawanie punktoacutew 217
Teraz ka da ze cie ek zostanie wype niona innym kolorem a nie jak mia o to miejsce po-przednio gdy wszystkie wype nili my barw steelblue Problem polega na tym e niedysponujemy danymi ze wszystkich stanoacutew Zestawienie ktoacuterym si pos u y em nie obej-mowa o Alaski Dystryktu Kolumbii Hawajoacutew i Portoryko (ktoacutere wprawdzie nie jest stanemale jest uwzgl dnione w danych GeoJSON i pojawia si w odwzorowaniu)
Aby poradzi sobie jako z tymi wyj tkami doda em do kodu warunek logiczny mdash instrukcjif() ktoacutera sprawdza czy dla danego stanu warto danych zosta a zdefiniowana Je li daneistniej zwracana jest funkcja color(value) co oznacza e mog przekaza dane do skalikwantuj cej i otrzyma w wyniku tego kod koloru Dla warto ci niezdefiniowanych ustali emdomy ln warto koloru ccc co odpowiada delikatnej szaro ci
Pi knie Spoacutejrz tylko na wyniki widoczne na rysunku 125 Sprawd jak prezentuje si kodi sproacutebuj z nim swoich si Znajdziesz go w pliku 05_choroplethhtml
Rysunek 125 Kartogram przedstawiaj cy poziom produkcji rolnej w poszczegoacutelnych stanach
Dodawanie punktoacutewMi o by oby zaznaczy na mapie cho kilka miast by nada grafice dok adniejszy kontekstprawda Warto by oby te znaczy ile jest du ych obszaroacutew g sto zaludnionych w stanacho najwy szym (i najni szym) poziomie produktywno ci rolnej Zaczniemy znoacutew od znale-zienia odpowiednich danych
Na szcz cie niedawno mieli my znoacutew spis powszechny (Na to id nasze podatki) Otopocz tek nieobrobionego pliku CSV zawieraj cego roczne szacunkowe zestawienie liczbyludno ci miast powy ej 50 000 mieszka coacutew (plik dost pny pod adresem httpwwwcensusgovpopestdatacitiestotals2011tablesSUB-EST2011-01csv)
table with row headers in column A and column headers in rows 3 through 4Table 1 Annual Estimates of the Resident Population for Incorporated PlacesOver 50000 Ranked by July 1 2011 Population April 1 2010 to July 1 2011RankGeographic AreaApril 1 2010Population Estimate (as of July 1)PlaceStateCensusEstimates Base201020111New York cityNew York81751338175133818644382449102Los Angeles cityCalifornia37926213792625379576138197023Chicago cityIllinois2695598269559826982832707120
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
3
Spis tre ci
Przedmowa 9
1 Wprowadzenie 13Dlaczego warto przedstawia dane graficznie 13Dlaczego programowa 14Po co nam interaktywno 14Dlaczego w internecie 15O czym jest ta ksi ka 16Kim jeste 16Czego nie znajdziesz w tej ksi ce 17Kod w przyk adach 17Dzi kuj 18
2 Wprowadzenie do D3 19Funkcje biblioteki 19Funkcje ktoacuterych nie znajdziesz w bibliotece 20Pocz tki i t o historyczne 21Inne mo liwo ci 22
Wykresy od r ki 23Grafy 24Odwzorowania kartograficzne 24Prawie od zera 25W trzech wymiarach 25Narz dzia przygotowane za pomoc biblioteki D3 26
3 Podstawy wykorzystywanych technologii 27Kod HTML 29
Tre i struktura 30Budowanie struktury znacznikami 31Najcz ciej stosowane znaczniki 31
Kup książkę Poleć książkę
4 Spis tre ci
Atrybuty 33Klasy i identyfikatory 34Komentarze 34
DOM 35Narz dzia programisty 35Renderowanie i model pude kowy 38Kaskadowe arkusze styloacutew CSS 39
Selektory 40W a ciwo ci i warto ci 41Komentarze 41Wprowadzanie styloacutew na stron 41Dziedziczenie kaskadowo i szczegoacute owo 43
JavaScript 44Witaj konsolo 45Zmienne 45Inne typy zmiennych 46Tablice 46Obiekty 47Obiekty i tablice 48Operatory matematyczne 50Operatory poroacutewnania 50Instrukcje steruj ce 51Funkcje 53Komentarze 54Wprowadzanie skryptoacutew na stron 54Sposoby na JavaScript 54
SVG 58Znacznik SVG 59Proste kszta ty 59Nadawanie styloacutew znacznika SVG 61Warstwy i kolejno rysowania 63Przezroczysto 63
O kompatybilno ci 65
4 Przygotowania do pracy 67Pobieranie biblioteki D3 67Odwo ywanie si do biblioteki D3 68Przygotowanie serwera stron WWW 69
Terminal z interpreterem j zyka Python 69MAMP WAMP i LAMP 70W drog 70
Kup książkę Poleć książkę
Spis tre ci 5
5 Dane 71Tworzenie znacznikoacutew 71
czenie metod 73Po jednym odwo aniu 74Przekazywanie 75Bez czenia 75
Dowi zywanie danych 75W wi zi 76Dane 76Prosz dokona wyboru 79Powi zany i okre lony 80U ywanie danych 82Funkcja mdash rzecz potrzebna 83Dane chc by gdzie zapisane 84Wi cej ni tekst 85
6 Graficzne przedstawianie danych 87Rysowanie za pomoc znacznikoacutew div 87
Okre lanie atrybutoacutew 88Kilka s oacutew o klasach 89Wroacute my do s upkoacutew 89Nadawanie styloacutew 90Pot na metoda data() 91Dane losowe 92
Rysowanie za pomoc znacznikoacutew SVG 94Tworzenie znacznikoacutew SVG 95Kszta ty definiowane danymi 96Jakie liczne kolorki 97
Przygotowywanie wykresu s upkowego 98Stary wykres 98Nowy wykres 99Kolory 104Etykiety 106
Przygotowywanie wykresu punktowego 108Dane 108Wykres punktowy 108Rozmiar 110Etykiety 111
Dalsze dzia ania 112
7 Skalowanie 113Jab ka i piksele 113Dziedziny i zbiory warto ci 114Normalizacja 115
Kup książkę Poleć książkę
6 Spis tre ci
Przygotowywanie funkcji skaluj cej 115Skalowanie wykresu punktowego 116
Funkcje d3min() i d3max() 116Skalowanie dynamiczne 118Stosowanie warto ci przeskalowanych 118
Poprawianie wykresu 119Inne rozwi zania 122Inne funkcje skaluj ce 123
8 Osie 125Poznaj osie 125Metody przygotowywania osi 126Porz dki 127Pod kresk 130A dlaczego nie Y 131Ostateczny szlif 132Formatowanie opisoacutew osi 133
9 Aktualizacje przej cia i ruch 135Przeroacutebki w wykresie s upkowym 135
Jak dzia aj skale porz dkowe 136W zbiorze warto ci tylko grupy 138Referencja do skali porz dkowej 139Inne aktualizacje 139
Aktualizowanie danych 139Interakcja za pomoc funkcji nas uchuj cych zdarze 140Zmienianie danych 141Aktualizowanie elementoacutew graficznych 141
Przej cia 144Funkcja duration() czyli ile to wszystko potrwa 145Ostro nie osiadamy 146Bez opoacute nie prosz 147Dane losowe 149Aktualizowanie funkcji skaluj cych 150Aktualizowanie osi 153Ka de przej cie ma swoacutej pocz tek i koniec 155
Inne rodzaje aktualizacji 161Dodawanie warto ci (i znacznikoacutew) 162Usuwanie warto ci (i znacznikoacutew) 166
czenie danych za pomoc kluczy 169Dodaj i usu czyli wszystko naraz 174Powtoacuterzenie 175
Kup książkę Poleć książkę
Spis tre ci 7
10 Interaktywno 177Dowi zywanie funkcji nas uchuj cych zdarze 177Poznajmy zachowania 178
Najed kursorem eby wyroacute ni 179Grupowanie znacznikoacutew SVG 182
Sortowanie klikni ciem 184Podpowiedzi 187
Domy lne podpowiedzi przegl darki 188Podpowiedzi wy wietlane w znacznikach SVG 189Podpowiedzi wy wietlane w znacznikach div 191
Urz dzenia dotykowe 193Pora rusza dalej 193
11 Uk ady wykresoacutew 195Uk ad ko owy 196Uk ad skumulowany 200Uk ad si owy 203
12 Mapy geograficzne 209Poznaj GeoJSON 209cie ki 211
Odwzorowania 212Kartogram 214Dodawanie punktoacutew 217Pobieranie danych geograficznych i ich parsowanie 221
Znajd pliki kszta toacutew 221Wybierz rozdzielczo 221Upraszczanie kszta toacutew 223Konwersja do GeoJSON 223
13 Eksportowanie 227Mapy bitowe 227Plik PDF 228SVG 229
A Dalsza nauka 233
Skorowidz 237
Kup książkę Poleć książkę
8 Spis tre ci
Kup książkę Poleć książkę
209
ROZDZIA 12
Mapy geograficzne
Wykresy s upkowe wykresy punktowe wykresy ko owe a nawet wykresy si owehellip bdquoWszystkoto bardzo pi knie mdash my lisz sobie mdash ale przejd my ju w ko cu do maprdquo
Poznaj GeoJSONStandard JSON ju znasz pora zaznajomi si teraz z GeoJSON czyli bazuj cym na formacieJSON standardzie zapisywania danych geograficznych na potrzeby aplikacji internetowychGeoJSON nie jest niczym nowym a jedynie wysoce wyspecjalizowan metod stosowania JSON
Zanim jednak przejdziemy do generowania map musimy w jaki sposoacuteb zdoby dane znacz-nika path (czyli konturu) kszta tu ktoacutery b dziemy chcieli wy wietli Zaczniemy od najprost-szego przyk adu mdash odwzorowania granic Stanoacutew Zjednoczonych W katalogu z kodami przy-k adoacutew znajdziesz plik us-statesjson ktoacutery zosta pobrany bezpo rednio z jednego z licznychprzyk adoacutew na stronie D3 w zwi zku z czym jeste my winni Mikersquoowi Bostockowi gor cepodzi kowania za przygotowanie takich adnych i starannych granic Stanoacutew
Po otwarciu pliku us-statesjson zobaczysz co co przypomina nieco ten kod (cho tu pre-zentuj wersj sformatowan i bardzo skroacutecon )
typeFeatureCollection features[ typeFeature id01 propertiesnameAlabama geometry typePolygon coordinates[[[-873592963500118] [-8560667534984749][-8543141334124869] [-8518495132859696][-8518495132859696] [-8496039732421541][-8500421232322956] [-8488919632262709][-850589813213674] ]] type Feature id 02 properties name Alaska
Kup książkę Poleć książkę
210 Rozdzia 12 Mapy geograficzne
geometry type MultiPolygon coordinates [[[[-13160202155117982] [-1315691595528229][-13135555855183705] [-131388425501392][-13164583655035827] [-13160202155117982]]][[[-1318320525542469] [-13164583655304197][-13174989855128935] [-13183205255189182] ]]]
Dane jak to w stylu GeoJSON s zapisane w jednym wielkim obiekcie (Nawiasy klamrowepami tasz) W obiekcie znajdziemy deklaracj typu type FeatureCollecion Po typie po-jawia si pole features ktoacutere przechowuje tablic pojedynczych obiektoacutew typu FeatureKa dy z nich odpowiada jednemu ze stanoacutew Nazwa stanu jest podana w polu properties
Jednak sedno ka dego pliku GeoJSON le y w polu geometry Tam w a nie pojawiaj si de-finicja typu (type) oraz wspoacute rz dne (coordinates) okre laj ce kontur danego elementu Polecoordinates przechowuje szeroko ci i d ugo ci geograficzne zapisane parami w ma ych dwu-warto ciowych tablicach Przetwarzanie i udoskonalanie tych warto ci stanowi sens ycia ka -dego kartografa Pokolenia badaczy i podroacute nikoacutew po wi ca y swoacutej czas by zgromadzi tenzbioacuter i za to powinni my by im wdzi czni Liczby te cho mo e niepozorne kryj w sobieprawdziw moc
Warto te zaznaczy e w danych GeoJSON jako pierwsz podaje si zawsze d ugo geogra-ficzn Mimo e jeste my przyzwyczajeni do zapisu w ktoacuterym najpierw wymienia si szero-ko a potem d ugo w wiecie GeoJSON obowi zuje odwrotny porz dek
I jeszcze ma a ci ga na wypadek gdyby odroacute nianie d ugo ci od szeroko ci geograficznejstanowi o dla Ciebie problem
D ugo geograficzna jak nazwa wskazuje jest d uga Jej linie (po udniki) biegn pionowo(z poacute nocy na po udnie) jakby zwiesza y si z goacutery na doacute
Szeroko geograficzna jest szeroka Jej linie (roacutewnole niki) rozci gaj si poziomo jakbystara y si obj Ziemi w pasie
Roacutewnole niki i po udniki tworz razem ogromn sie obejmuj c ca kul ziemsk Na naszeszcz cie wspoacute rz dne mo na atwo przeliczy na pary x i y ktoacutere z kolei pozwalaj wy-wietla wszystko bez wi kszych problemoacutew na ekranie komputera Gdy rysowali my wy-
kres s upkowy warto ci danych odwzorowywali my na warto ci na ekranie mdash przeliczali myliczby na wysoko prostok toacutew W przypadku tworzenia map geograficznych te generu-jemy odwzorowania mdash pary d ugo i szeroko przechodz w pary x i y Jednocze nie ope-rowanie zmiennymi x i y pozwala w atwy sposoacuteb omin niewygodny problem kolejno cid ugo ci i szeroko ci podanych odwrotnie
Get Lat+Lon (httptecznocomsquares12378043-1222712) to doskona e narz dzieautorstwa Micha a Migurskiego dzi ki ktoacuteremu z atwo ci sprawdzisz czy podanewspoacute rz dne geograficzne s na pewno poprawne Trzymaj t stron otwart w oknieprzegl darki przez ca y czas gdy pracujesz nad mapami zagl da si do niej bowiembardzo cz sto
Kup książkę Poleć książkę
cie ki 211
cie kiMamy ju dane geograficzne Pora co z nimi zrobi
Przede wszystkim nale y zdefiniowa generator cie ek
var path = d3geopath()
Mog z czystym sumieniem powiedzie e d3geopath() to funkcja ratuj ca ycie To onaprzek ada ba agan z pliku GeoJSON na jeszcze bardziej nieporz dny zapis ze znacznikoacutewpath Oddajmy cze d3geopath()
Mogliby my oczywi cie wklei kod GeoJSON bezpo rednio do pliku HTML ale fuj tylewspoacute rz dnych i nawiasoacutew klamrowych Co za ba agan Znacznie porz dniej b dzie gdyzastosujemy bardziej tradycyjne podej cie czyli pozostawimy dane geograficzne w osobnympliku i wczytamy jego zawarto za pomoc funkcji d3json()
d3json(us-statesjson function(json) svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path))
Funkcja d3json() przyjmuje dwa argumenty Pierwszy to zmienna a cuchowa okre laj cacie k dost pu do pliku ktoacuterego zawarto nale y wczyta drugi za to funkcja zwrotna
uruchamiana dopiero po wczytaniu i sparsowaniu zawarto ci pliku JSON (Wi cej na tematfunkcji zwrotnych znajdziesz w ramce bdquoObs uga b doacutew wczytywania danychrdquo z rozdzia u 5)Funkcja d3json() podobnie jak d3csv() jest asynchroniczna a zatem nie wstrzymuje wy-konywania pozosta ej cz ci kodu na czas wczytywania danych z pliku Oznacza to e kodumieszczony po wywo aniu funkcji zwrotnej b dzie w rzeczywisto ci wykonany przed jej cia em
d3json(someFilejson function(json) Tu umie kod zale ny od danych z pliku JSON)
Tu umie tylko te instrukcje ktoacutere nie potrzebuj do pracy zawarto ci pliku JSONconsolelog(Lubi koty)
Dlatego zapami taj podczas korzystania z zewn trznych roacutede danych kod ktoacuterego wyko-nanie zale y od zawarto ci tych roacutede musi si zawsze znale wewn trz funkcji zwrotnej(Mo esz te rozbi go na mniejsze porcje ktoacutere zapiszesz we w asnych funkcjach i dopiero jewywo asz w ciele funkcji zwrotnej)
Wroacute my jednak do przyk adu Pora powi za w a ciwo ci pobrane z pliku GeoJSON z no-wymi znacznikami path Podany kod tworzy osobn cie k dla ka dej z cech
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path)
Zauwa e ostatni wiersz mdash ten w ktoacuterym zmienna d (atrybut przechowuj cy dane znacznikapath) jest przekazywana do generatora cie ek mdash po prostu pobiera wszystkie dane z plikui przelicza je na kod SVG Wynik jest widoczny na rysunku 121
Kup książkę Poleć książkę
212 Rozdzia 12 Mapy geograficzne
Rysunek 121 Pierwsze zetkni cie z danymi GeoJSON
Mapa To zbyt proste by by o mo liwe Aby sprawdzi czy uzyskasz ten sam efekt otwoacuterzplik 01_pathshtml Dalsze dzia ania b d mia y na celu wy cznie dostosowanie mapy do na-szych potrzeb
Je li interesuj Ci zagadnienia zwi zane z prac ze cie kami i ich generatoramipolecam Ci zapoznanie si z dokumentacj (httpsgithubcommbostockd3wikiGeo-Paths)
OdwzorowaniaNiew tpliwie rzuci o Ci si w oczy e mapa nie przedstawia ca ych Stanoacutew ZjednoczonychAby naprawi to niedoci gni cie musimy zmieni u ywane odwzorowanie
Czym jest odwzorowanie Z pewno ci nie usz o Twojej uwadze tak e to e Ziemia jest kuli-sta a nie p aska Wszystkie kuliste obiekty s troacutejwymiarowe co znacznie utrudnia przed-stawianie ich na powierzchniach dwuwymiarowych Odwzorowanie jest algorytmem kom-promisu to metoda pozwalaj ca rzutowa troacutejwymiarow przestrze na dwuwymiarowp aszczyzn
Biblioteka D3 pozwala definiowa mechanizmy rzutowania za pomoc wygl daj cej znajomokonstrukcji
var projection = d3geoalbersUsa() translate([w2 h2])
Biblioteka pozwala korzysta z kilku dost pnych w niej algorytmoacutew rzutowania Odwzoro-wanie Albersa jest rzutem z o onym przygotowanym tak by na mapie zmie ci y si tak eAlaska i Hawaje ktoacutere umieszcza si pod po udniowo-zachodnim wybrze em Stanoacutew Zjed-noczonych (zaraz zobaczysz jak to wygl da) To w a nie albersUsa jest domy lnym odwzo-rowaniem u ywanym przez funkcj d3pathgeo() Teraz gdy okre lili my je ju jawniemo emy dodatkowo poda kilka opcji z jakimi mia oby by wykorzystywane jak cho by war-to przesuni cia Z przytoczonej instrukcji wynika e przesuwamy odwzorowanie w kie-runku rodka obrazu (o po ow szeroko ci i o po ow wysoko ci)
Kup książkę Poleć książkę
Odwzorowania 213
Drug zmian jak zrobimy b dzie jawne za danie od generatora cie ek by wszystkiecie ki wyznacza w odniesieniu do wskazanego wcze niej w asnego odwzorowania
var path = d3geopath() projection(projection)
W ten sposoacuteb otrzymali my map przedstawion na rysunku 122 Powoli zbli amy si do celuKod znajdziesz w pliku 02_projectionhtml
Rysunek 122 Te same dane GeoJSON ale przy wy rodkowaniu rzutu
Mo emy te doda do odwzorowania metod scale() eby zmniejszy nieco map i osi gntym samym wynik przedstawiony na rysunku 123
var projection = d3geoalbersUsa() translate([w2 h2]) scale([500])
Rysunek 123 Mapa Stanoacutew Zjednoczonych mdash przeskalowana i wy rodkowana tak by mie ci a siw obszarze obrazu
Domy ln warto ci skalowania jest 1000 Mniejsze liczby zmniejszaj map a wi ksze po-wi kszaj
Kup książkę Poleć książkę
214 Rozdzia 12 Mapy geograficzne
Doskonale Je li otworzysz w przegl darce plik 03_scaledhtml przekonasz si e wszystkodzia a
Wystarczy doda jedn instrukcj style() eby zmieni kolor wype nienia cie ek na jakimniej przygn biaj cy S dz e niebieski widoczny na rysunku 124 nie jest brzydki
Rysunek 124 Niebieski jest zdecydowanie lepszy
Ca y kod znajdziesz w pliku 04_fillhtml W ten sam sposoacuteb mo na zdefiniowa kolor i szero-ko p dzla obramowania
Funkcje rzutuj ce ktoacutere pozwalaj uzyskiwa roacute nego rodzaju odwzorowania kartograficz-ne to niezwykle pot ne algorytmy Warto wiedzie e nie ma odwzorowa uniwersalnychmdash zmienia si je w zale no ci od tego jakich informacji potrzebujemy i o ktoacuter cz wiatachodzi (inaczej odwzorowuje si bieguny a inaczej okolice roacutewnika)
Zas ug g oacutewnie Jasona Daviesa (httpwwwjasondaviescom) jest to e dodatki do biblioteki D3odpowiedzialne za przygotowanie odwzorowa kartograficznych oferuj dzi u ytkownikomniemal wszystkie znane nam rodzaje rzutoacutew Szczegoacute owy opis pracy z rzutami znajdziesz w do-kumentacji (httpsgithubcommbostockd3wikiGeo-Projections) Warto te zapozna si z poroacutewna-niem przedstawiaj cym w a ciwo ci poszczegoacutelnych rzutoacutew (httpblocksorgmbostock3711652)
KartogramKarto co To s owo ktoacuterego nie s yszy si na co dzie okre la map na ktoacuterej ca e obszaryzosta y wype nione roacute nymi odcieniami (jasnymi lub ciemnymi) czy te roacute nymi kolorami takby odda rozk ad powi zanych z oznaczeniami warto ci W Stanach Zjednoczonych szcze-goacutelnie w okresie wyboroacutew cz sto spotyka si kartogramy okre lane mianem bdquoczerwonychi niebieskich stanoacutewrdquo Na mapach tych zaznacza si odpowiednim kolorem przewag popar-cia dla kandydatoacutew Partii Demokratycznej b d Partii Republika skiej Ale kartogramy wy-konuje si z roacute nych przyczyn niekoniecznie politycznych
Takie odwzorowania ciesz si chyba najwi ksz popularno ci w roacuted u ytkownikoacutew D3Pami taj jednak e cho kartogramy potrafi by niezwykle pomocne to maj jednak po-wa ne ograniczenia Poniewa na tego rodzaju mapach warto ci odwzorowuje si na pewnejpowierzchni atwo mo e doj do niezamierzonego przek amania du e powierzchnie o niskiej
Kup książkę Poleć książkę
Kartogram 215
g sto ci danej wielko ci (na przyk ad stan Nevada) mog sprawia wra enie bardziej istot-nych ni s w rzeczywisto ci Typowy kartogram nie oddaje dobrze warto ci liczonych bdquonag ow rdquo bo na przyk ad Nevada jest zbyt du a a Delaware zbyt ma y Jednocze nie karto-gram zachowuje geografi miejsca oraz mdash jak na map mdash wygl da naprawd imponuj coZobaczmy zatem co da si z tym zrobi (Kod znajdziesz w pliku 05_choroplethhtml)
Po pierwsze zdefiniuj funkcj skaluj c ktoacutera pobierze warto ci liczbowe a zwroacuteci koloryNa tym w a nie polega w du ej mierze praca nad kartogramem
var color = d3scalequantize() range([rgb(237248233) rgb(186228179)rgb(116196118)rgb(4916384)rgb(010944)])
Funkcja quantize jest zaliczana do grupy skal liniowych ale wynikiem jej dzia ania jest zbioacuterwarto ci dyskretnych Warto ciami wyj ciowymi mog by liczby kolory (jak w tym przy-padku) czy cokolwiek innego co uznasz za odpowiednie Funkcja ta przydaje si bardzo je lichcesz podzieli zbioacuter warto ci na grupy W omawianym przypadku zdecydowa em si utwo-rzy pi grup docelowych ale ich liczba nie jest w aden sposoacuteb formalnie ograniczona
Zauwa e okre li em tu zbioacuter warto ci wyj ciowych natomiast nie napisa em nic na tematdziedziny (Czekam a wczytaj si dane) Kolory ktoacuterymi si pos u y em pochodz z plikucolorbrewerjs dost pnego pod adresem httpsgithubcommbostockd3treemasterlibcolorbrewerRepozytorium to zawiera sporych rozmiaroacutew zbioacuter barw dobranych przez Cynthi Brewerna podstawie prowadzonych przez ni bada
Pora wczyta jakie dane Zawczasu przygotowa em plik us-ag-productivity-2004csv w ktoacuterymznajdziesz dane u o one w nast puj cy sposoacuteb
statevalueAlabama11791Arkansas13705Arizona13847California17979Colorado10325Connecticut13209Delaware14345
Dane te udost pnione przez Departament Rolnictwa Stanoacutew Zjednoczonych zawieraj in-formacje na temat produkcji rolnej w poszczegoacutelnych stanach w 2004 roku Dane liczboweprzedstawiaj wyniki wzgl dne wyznaczane dla linii bazowej jak by a produkcja rolnaw Alabamie w 1996 roku (10) Wi ksze od jedynki warto ci nale y zatem rozumie jakowy szy poziom produkcji p odoacutew rolnych a mniejsze jako ni szy (Na stronie httpdatagovmo na znale wiele oficjalnych zestawie statystycznych) Wydaje si e te warto ci po-winny adnie si prze o y na kartogram produkcji rolnej
Dane z pliku wczytamy za pomoc funkcji d3csv()
d3csv(us-ag-productivity-2004csv function(data)
Teraz (zanim zapomn ) w funkcji zwrotnej zdefiniuj parametr color dziedziny warto ciwej ciowych skali kwantuj cej
colordomain([ d3min(data function(d) return dvalue ) d3max(data function(d) return dvalue )])
Kup książkę Poleć książkę
216 Rozdzia 12 Mapy geograficzne
W kodzie tym pojawiaj si funkcje d3min() i d3max() pozwalaj ce wyznaczy i zwroacutecinajmniejsz i najwi ksz warto dzi ki czemu dziedzina b dzie wyznaczana dynamicznie
Nast pnie wczytamy dane JSON mdash t cz operacji przeprowadzimy tak jak poprzednioG oacutewna roacute nica i nowo polega na tym e tym razem chc w czy dane dotycz ce rolnictwado danych GeoJSON Dlaczego Poniewa do znacznika mo na do cza tylko jeden zestawdanych naraz Zdecydowanie potrzebujemy danych GeoJSON bo na ich podstawie tworzones cie ki ale jednocze nie potrzebujemy te danych dotycz cych upraw Gdyby zatemuda o si po czy je w jedn monstrualn tablic wtedy mogliby my podpi ca o podznaczniki path (Istnieje kilka sposoboacutew rozwi zania tego problemu mdash jak zawsze prezentujswoj ulubion metod )
d3json(us-statesjson function(json) czy dane rolnicze z danymi GeoJSON Sprawdza w p tli raz ca y zestaw danych rolniczych for (var i = 0 i lt datalength i++) Pobiera nazw stanu var dataState = data[i]state Pobiera warto danych i przekszta ca j na liczb zmiennoprzecinkow var dataValue = parseFloat(data[i]value) Odnajduje odpowiedni stan w danych GeoJSON for (var j = 0 j lt jsonfeatureslength j++) var jsonState = jsonfeatures[j]propertiesname if (dataState == jsonState) Kopiuje dane do zmiennej JSON jsonfeatures[j]propertiesvalue = dataValue Przestaje przeszukiwa JSON break
Przyjrzyj si uwa nie przytoczonemu fragmentowi kodu Zasadniczo zaproponowane roz-wi zanie polega na tym by dla ka dego stanu odnale dane GeoJSON opatrzone t samnazw (na przyk ad Colorado) Gdy to si uda pobierzemy warto ci danych zapisanych dlaka dego stanu i dodamy je do jsonfeatures[j]propertiesvalue W ten sposoacuteb b done po czone ze znacznikiem i dost pne poacute niej gdy b dziemy ich potrzebowa
Wreszcie w ten sam sposoacuteb co ostatnio przygotujemy cie ki przy czym tym razem wartofunkcji style() b dziemy przypisywa dynamicznie
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path) style(fill function(d) Pobiera warto ci danych var value = dpropertiesvalue if (value) Je li warto istnieje return color(value) else Je li warto jest niezdefiniowana return ccc )
Kup książkę Poleć książkę
Dodawanie punktoacutew 217
Teraz ka da ze cie ek zostanie wype niona innym kolorem a nie jak mia o to miejsce po-przednio gdy wszystkie wype nili my barw steelblue Problem polega na tym e niedysponujemy danymi ze wszystkich stanoacutew Zestawienie ktoacuterym si pos u y em nie obej-mowa o Alaski Dystryktu Kolumbii Hawajoacutew i Portoryko (ktoacutere wprawdzie nie jest stanemale jest uwzgl dnione w danych GeoJSON i pojawia si w odwzorowaniu)
Aby poradzi sobie jako z tymi wyj tkami doda em do kodu warunek logiczny mdash instrukcjif() ktoacutera sprawdza czy dla danego stanu warto danych zosta a zdefiniowana Je li daneistniej zwracana jest funkcja color(value) co oznacza e mog przekaza dane do skalikwantuj cej i otrzyma w wyniku tego kod koloru Dla warto ci niezdefiniowanych ustali emdomy ln warto koloru ccc co odpowiada delikatnej szaro ci
Pi knie Spoacutejrz tylko na wyniki widoczne na rysunku 125 Sprawd jak prezentuje si kodi sproacutebuj z nim swoich si Znajdziesz go w pliku 05_choroplethhtml
Rysunek 125 Kartogram przedstawiaj cy poziom produkcji rolnej w poszczegoacutelnych stanach
Dodawanie punktoacutewMi o by oby zaznaczy na mapie cho kilka miast by nada grafice dok adniejszy kontekstprawda Warto by oby te znaczy ile jest du ych obszaroacutew g sto zaludnionych w stanacho najwy szym (i najni szym) poziomie produktywno ci rolnej Zaczniemy znoacutew od znale-zienia odpowiednich danych
Na szcz cie niedawno mieli my znoacutew spis powszechny (Na to id nasze podatki) Otopocz tek nieobrobionego pliku CSV zawieraj cego roczne szacunkowe zestawienie liczbyludno ci miast powy ej 50 000 mieszka coacutew (plik dost pny pod adresem httpwwwcensusgovpopestdatacitiestotals2011tablesSUB-EST2011-01csv)
table with row headers in column A and column headers in rows 3 through 4Table 1 Annual Estimates of the Resident Population for Incorporated PlacesOver 50000 Ranked by July 1 2011 Population April 1 2010 to July 1 2011RankGeographic AreaApril 1 2010Population Estimate (as of July 1)PlaceStateCensusEstimates Base201020111New York cityNew York81751338175133818644382449102Los Angeles cityCalifornia37926213792625379576138197023Chicago cityIllinois2695598269559826982832707120
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
4 Spis tre ci
Atrybuty 33Klasy i identyfikatory 34Komentarze 34
DOM 35Narz dzia programisty 35Renderowanie i model pude kowy 38Kaskadowe arkusze styloacutew CSS 39
Selektory 40W a ciwo ci i warto ci 41Komentarze 41Wprowadzanie styloacutew na stron 41Dziedziczenie kaskadowo i szczegoacute owo 43
JavaScript 44Witaj konsolo 45Zmienne 45Inne typy zmiennych 46Tablice 46Obiekty 47Obiekty i tablice 48Operatory matematyczne 50Operatory poroacutewnania 50Instrukcje steruj ce 51Funkcje 53Komentarze 54Wprowadzanie skryptoacutew na stron 54Sposoby na JavaScript 54
SVG 58Znacznik SVG 59Proste kszta ty 59Nadawanie styloacutew znacznika SVG 61Warstwy i kolejno rysowania 63Przezroczysto 63
O kompatybilno ci 65
4 Przygotowania do pracy 67Pobieranie biblioteki D3 67Odwo ywanie si do biblioteki D3 68Przygotowanie serwera stron WWW 69
Terminal z interpreterem j zyka Python 69MAMP WAMP i LAMP 70W drog 70
Kup książkę Poleć książkę
Spis tre ci 5
5 Dane 71Tworzenie znacznikoacutew 71
czenie metod 73Po jednym odwo aniu 74Przekazywanie 75Bez czenia 75
Dowi zywanie danych 75W wi zi 76Dane 76Prosz dokona wyboru 79Powi zany i okre lony 80U ywanie danych 82Funkcja mdash rzecz potrzebna 83Dane chc by gdzie zapisane 84Wi cej ni tekst 85
6 Graficzne przedstawianie danych 87Rysowanie za pomoc znacznikoacutew div 87
Okre lanie atrybutoacutew 88Kilka s oacutew o klasach 89Wroacute my do s upkoacutew 89Nadawanie styloacutew 90Pot na metoda data() 91Dane losowe 92
Rysowanie za pomoc znacznikoacutew SVG 94Tworzenie znacznikoacutew SVG 95Kszta ty definiowane danymi 96Jakie liczne kolorki 97
Przygotowywanie wykresu s upkowego 98Stary wykres 98Nowy wykres 99Kolory 104Etykiety 106
Przygotowywanie wykresu punktowego 108Dane 108Wykres punktowy 108Rozmiar 110Etykiety 111
Dalsze dzia ania 112
7 Skalowanie 113Jab ka i piksele 113Dziedziny i zbiory warto ci 114Normalizacja 115
Kup książkę Poleć książkę
6 Spis tre ci
Przygotowywanie funkcji skaluj cej 115Skalowanie wykresu punktowego 116
Funkcje d3min() i d3max() 116Skalowanie dynamiczne 118Stosowanie warto ci przeskalowanych 118
Poprawianie wykresu 119Inne rozwi zania 122Inne funkcje skaluj ce 123
8 Osie 125Poznaj osie 125Metody przygotowywania osi 126Porz dki 127Pod kresk 130A dlaczego nie Y 131Ostateczny szlif 132Formatowanie opisoacutew osi 133
9 Aktualizacje przej cia i ruch 135Przeroacutebki w wykresie s upkowym 135
Jak dzia aj skale porz dkowe 136W zbiorze warto ci tylko grupy 138Referencja do skali porz dkowej 139Inne aktualizacje 139
Aktualizowanie danych 139Interakcja za pomoc funkcji nas uchuj cych zdarze 140Zmienianie danych 141Aktualizowanie elementoacutew graficznych 141
Przej cia 144Funkcja duration() czyli ile to wszystko potrwa 145Ostro nie osiadamy 146Bez opoacute nie prosz 147Dane losowe 149Aktualizowanie funkcji skaluj cych 150Aktualizowanie osi 153Ka de przej cie ma swoacutej pocz tek i koniec 155
Inne rodzaje aktualizacji 161Dodawanie warto ci (i znacznikoacutew) 162Usuwanie warto ci (i znacznikoacutew) 166
czenie danych za pomoc kluczy 169Dodaj i usu czyli wszystko naraz 174Powtoacuterzenie 175
Kup książkę Poleć książkę
Spis tre ci 7
10 Interaktywno 177Dowi zywanie funkcji nas uchuj cych zdarze 177Poznajmy zachowania 178
Najed kursorem eby wyroacute ni 179Grupowanie znacznikoacutew SVG 182
Sortowanie klikni ciem 184Podpowiedzi 187
Domy lne podpowiedzi przegl darki 188Podpowiedzi wy wietlane w znacznikach SVG 189Podpowiedzi wy wietlane w znacznikach div 191
Urz dzenia dotykowe 193Pora rusza dalej 193
11 Uk ady wykresoacutew 195Uk ad ko owy 196Uk ad skumulowany 200Uk ad si owy 203
12 Mapy geograficzne 209Poznaj GeoJSON 209cie ki 211
Odwzorowania 212Kartogram 214Dodawanie punktoacutew 217Pobieranie danych geograficznych i ich parsowanie 221
Znajd pliki kszta toacutew 221Wybierz rozdzielczo 221Upraszczanie kszta toacutew 223Konwersja do GeoJSON 223
13 Eksportowanie 227Mapy bitowe 227Plik PDF 228SVG 229
A Dalsza nauka 233
Skorowidz 237
Kup książkę Poleć książkę
8 Spis tre ci
Kup książkę Poleć książkę
209
ROZDZIA 12
Mapy geograficzne
Wykresy s upkowe wykresy punktowe wykresy ko owe a nawet wykresy si owehellip bdquoWszystkoto bardzo pi knie mdash my lisz sobie mdash ale przejd my ju w ko cu do maprdquo
Poznaj GeoJSONStandard JSON ju znasz pora zaznajomi si teraz z GeoJSON czyli bazuj cym na formacieJSON standardzie zapisywania danych geograficznych na potrzeby aplikacji internetowychGeoJSON nie jest niczym nowym a jedynie wysoce wyspecjalizowan metod stosowania JSON
Zanim jednak przejdziemy do generowania map musimy w jaki sposoacuteb zdoby dane znacz-nika path (czyli konturu) kszta tu ktoacutery b dziemy chcieli wy wietli Zaczniemy od najprost-szego przyk adu mdash odwzorowania granic Stanoacutew Zjednoczonych W katalogu z kodami przy-k adoacutew znajdziesz plik us-statesjson ktoacutery zosta pobrany bezpo rednio z jednego z licznychprzyk adoacutew na stronie D3 w zwi zku z czym jeste my winni Mikersquoowi Bostockowi gor cepodzi kowania za przygotowanie takich adnych i starannych granic Stanoacutew
Po otwarciu pliku us-statesjson zobaczysz co co przypomina nieco ten kod (cho tu pre-zentuj wersj sformatowan i bardzo skroacutecon )
typeFeatureCollection features[ typeFeature id01 propertiesnameAlabama geometry typePolygon coordinates[[[-873592963500118] [-8560667534984749][-8543141334124869] [-8518495132859696][-8518495132859696] [-8496039732421541][-8500421232322956] [-8488919632262709][-850589813213674] ]] type Feature id 02 properties name Alaska
Kup książkę Poleć książkę
210 Rozdzia 12 Mapy geograficzne
geometry type MultiPolygon coordinates [[[[-13160202155117982] [-1315691595528229][-13135555855183705] [-131388425501392][-13164583655035827] [-13160202155117982]]][[[-1318320525542469] [-13164583655304197][-13174989855128935] [-13183205255189182] ]]]
Dane jak to w stylu GeoJSON s zapisane w jednym wielkim obiekcie (Nawiasy klamrowepami tasz) W obiekcie znajdziemy deklaracj typu type FeatureCollecion Po typie po-jawia si pole features ktoacutere przechowuje tablic pojedynczych obiektoacutew typu FeatureKa dy z nich odpowiada jednemu ze stanoacutew Nazwa stanu jest podana w polu properties
Jednak sedno ka dego pliku GeoJSON le y w polu geometry Tam w a nie pojawiaj si de-finicja typu (type) oraz wspoacute rz dne (coordinates) okre laj ce kontur danego elementu Polecoordinates przechowuje szeroko ci i d ugo ci geograficzne zapisane parami w ma ych dwu-warto ciowych tablicach Przetwarzanie i udoskonalanie tych warto ci stanowi sens ycia ka -dego kartografa Pokolenia badaczy i podroacute nikoacutew po wi ca y swoacutej czas by zgromadzi tenzbioacuter i za to powinni my by im wdzi czni Liczby te cho mo e niepozorne kryj w sobieprawdziw moc
Warto te zaznaczy e w danych GeoJSON jako pierwsz podaje si zawsze d ugo geogra-ficzn Mimo e jeste my przyzwyczajeni do zapisu w ktoacuterym najpierw wymienia si szero-ko a potem d ugo w wiecie GeoJSON obowi zuje odwrotny porz dek
I jeszcze ma a ci ga na wypadek gdyby odroacute nianie d ugo ci od szeroko ci geograficznejstanowi o dla Ciebie problem
D ugo geograficzna jak nazwa wskazuje jest d uga Jej linie (po udniki) biegn pionowo(z poacute nocy na po udnie) jakby zwiesza y si z goacutery na doacute
Szeroko geograficzna jest szeroka Jej linie (roacutewnole niki) rozci gaj si poziomo jakbystara y si obj Ziemi w pasie
Roacutewnole niki i po udniki tworz razem ogromn sie obejmuj c ca kul ziemsk Na naszeszcz cie wspoacute rz dne mo na atwo przeliczy na pary x i y ktoacutere z kolei pozwalaj wy-wietla wszystko bez wi kszych problemoacutew na ekranie komputera Gdy rysowali my wy-
kres s upkowy warto ci danych odwzorowywali my na warto ci na ekranie mdash przeliczali myliczby na wysoko prostok toacutew W przypadku tworzenia map geograficznych te generu-jemy odwzorowania mdash pary d ugo i szeroko przechodz w pary x i y Jednocze nie ope-rowanie zmiennymi x i y pozwala w atwy sposoacuteb omin niewygodny problem kolejno cid ugo ci i szeroko ci podanych odwrotnie
Get Lat+Lon (httptecznocomsquares12378043-1222712) to doskona e narz dzieautorstwa Micha a Migurskiego dzi ki ktoacuteremu z atwo ci sprawdzisz czy podanewspoacute rz dne geograficzne s na pewno poprawne Trzymaj t stron otwart w oknieprzegl darki przez ca y czas gdy pracujesz nad mapami zagl da si do niej bowiembardzo cz sto
Kup książkę Poleć książkę
cie ki 211
cie kiMamy ju dane geograficzne Pora co z nimi zrobi
Przede wszystkim nale y zdefiniowa generator cie ek
var path = d3geopath()
Mog z czystym sumieniem powiedzie e d3geopath() to funkcja ratuj ca ycie To onaprzek ada ba agan z pliku GeoJSON na jeszcze bardziej nieporz dny zapis ze znacznikoacutewpath Oddajmy cze d3geopath()
Mogliby my oczywi cie wklei kod GeoJSON bezpo rednio do pliku HTML ale fuj tylewspoacute rz dnych i nawiasoacutew klamrowych Co za ba agan Znacznie porz dniej b dzie gdyzastosujemy bardziej tradycyjne podej cie czyli pozostawimy dane geograficzne w osobnympliku i wczytamy jego zawarto za pomoc funkcji d3json()
d3json(us-statesjson function(json) svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path))
Funkcja d3json() przyjmuje dwa argumenty Pierwszy to zmienna a cuchowa okre laj cacie k dost pu do pliku ktoacuterego zawarto nale y wczyta drugi za to funkcja zwrotna
uruchamiana dopiero po wczytaniu i sparsowaniu zawarto ci pliku JSON (Wi cej na tematfunkcji zwrotnych znajdziesz w ramce bdquoObs uga b doacutew wczytywania danychrdquo z rozdzia u 5)Funkcja d3json() podobnie jak d3csv() jest asynchroniczna a zatem nie wstrzymuje wy-konywania pozosta ej cz ci kodu na czas wczytywania danych z pliku Oznacza to e kodumieszczony po wywo aniu funkcji zwrotnej b dzie w rzeczywisto ci wykonany przed jej cia em
d3json(someFilejson function(json) Tu umie kod zale ny od danych z pliku JSON)
Tu umie tylko te instrukcje ktoacutere nie potrzebuj do pracy zawarto ci pliku JSONconsolelog(Lubi koty)
Dlatego zapami taj podczas korzystania z zewn trznych roacutede danych kod ktoacuterego wyko-nanie zale y od zawarto ci tych roacutede musi si zawsze znale wewn trz funkcji zwrotnej(Mo esz te rozbi go na mniejsze porcje ktoacutere zapiszesz we w asnych funkcjach i dopiero jewywo asz w ciele funkcji zwrotnej)
Wroacute my jednak do przyk adu Pora powi za w a ciwo ci pobrane z pliku GeoJSON z no-wymi znacznikami path Podany kod tworzy osobn cie k dla ka dej z cech
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path)
Zauwa e ostatni wiersz mdash ten w ktoacuterym zmienna d (atrybut przechowuj cy dane znacznikapath) jest przekazywana do generatora cie ek mdash po prostu pobiera wszystkie dane z plikui przelicza je na kod SVG Wynik jest widoczny na rysunku 121
Kup książkę Poleć książkę
212 Rozdzia 12 Mapy geograficzne
Rysunek 121 Pierwsze zetkni cie z danymi GeoJSON
Mapa To zbyt proste by by o mo liwe Aby sprawdzi czy uzyskasz ten sam efekt otwoacuterzplik 01_pathshtml Dalsze dzia ania b d mia y na celu wy cznie dostosowanie mapy do na-szych potrzeb
Je li interesuj Ci zagadnienia zwi zane z prac ze cie kami i ich generatoramipolecam Ci zapoznanie si z dokumentacj (httpsgithubcommbostockd3wikiGeo-Paths)
OdwzorowaniaNiew tpliwie rzuci o Ci si w oczy e mapa nie przedstawia ca ych Stanoacutew ZjednoczonychAby naprawi to niedoci gni cie musimy zmieni u ywane odwzorowanie
Czym jest odwzorowanie Z pewno ci nie usz o Twojej uwadze tak e to e Ziemia jest kuli-sta a nie p aska Wszystkie kuliste obiekty s troacutejwymiarowe co znacznie utrudnia przed-stawianie ich na powierzchniach dwuwymiarowych Odwzorowanie jest algorytmem kom-promisu to metoda pozwalaj ca rzutowa troacutejwymiarow przestrze na dwuwymiarowp aszczyzn
Biblioteka D3 pozwala definiowa mechanizmy rzutowania za pomoc wygl daj cej znajomokonstrukcji
var projection = d3geoalbersUsa() translate([w2 h2])
Biblioteka pozwala korzysta z kilku dost pnych w niej algorytmoacutew rzutowania Odwzoro-wanie Albersa jest rzutem z o onym przygotowanym tak by na mapie zmie ci y si tak eAlaska i Hawaje ktoacutere umieszcza si pod po udniowo-zachodnim wybrze em Stanoacutew Zjed-noczonych (zaraz zobaczysz jak to wygl da) To w a nie albersUsa jest domy lnym odwzo-rowaniem u ywanym przez funkcj d3pathgeo() Teraz gdy okre lili my je ju jawniemo emy dodatkowo poda kilka opcji z jakimi mia oby by wykorzystywane jak cho by war-to przesuni cia Z przytoczonej instrukcji wynika e przesuwamy odwzorowanie w kie-runku rodka obrazu (o po ow szeroko ci i o po ow wysoko ci)
Kup książkę Poleć książkę
Odwzorowania 213
Drug zmian jak zrobimy b dzie jawne za danie od generatora cie ek by wszystkiecie ki wyznacza w odniesieniu do wskazanego wcze niej w asnego odwzorowania
var path = d3geopath() projection(projection)
W ten sposoacuteb otrzymali my map przedstawion na rysunku 122 Powoli zbli amy si do celuKod znajdziesz w pliku 02_projectionhtml
Rysunek 122 Te same dane GeoJSON ale przy wy rodkowaniu rzutu
Mo emy te doda do odwzorowania metod scale() eby zmniejszy nieco map i osi gntym samym wynik przedstawiony na rysunku 123
var projection = d3geoalbersUsa() translate([w2 h2]) scale([500])
Rysunek 123 Mapa Stanoacutew Zjednoczonych mdash przeskalowana i wy rodkowana tak by mie ci a siw obszarze obrazu
Domy ln warto ci skalowania jest 1000 Mniejsze liczby zmniejszaj map a wi ksze po-wi kszaj
Kup książkę Poleć książkę
214 Rozdzia 12 Mapy geograficzne
Doskonale Je li otworzysz w przegl darce plik 03_scaledhtml przekonasz si e wszystkodzia a
Wystarczy doda jedn instrukcj style() eby zmieni kolor wype nienia cie ek na jakimniej przygn biaj cy S dz e niebieski widoczny na rysunku 124 nie jest brzydki
Rysunek 124 Niebieski jest zdecydowanie lepszy
Ca y kod znajdziesz w pliku 04_fillhtml W ten sam sposoacuteb mo na zdefiniowa kolor i szero-ko p dzla obramowania
Funkcje rzutuj ce ktoacutere pozwalaj uzyskiwa roacute nego rodzaju odwzorowania kartograficz-ne to niezwykle pot ne algorytmy Warto wiedzie e nie ma odwzorowa uniwersalnychmdash zmienia si je w zale no ci od tego jakich informacji potrzebujemy i o ktoacuter cz wiatachodzi (inaczej odwzorowuje si bieguny a inaczej okolice roacutewnika)
Zas ug g oacutewnie Jasona Daviesa (httpwwwjasondaviescom) jest to e dodatki do biblioteki D3odpowiedzialne za przygotowanie odwzorowa kartograficznych oferuj dzi u ytkownikomniemal wszystkie znane nam rodzaje rzutoacutew Szczegoacute owy opis pracy z rzutami znajdziesz w do-kumentacji (httpsgithubcommbostockd3wikiGeo-Projections) Warto te zapozna si z poroacutewna-niem przedstawiaj cym w a ciwo ci poszczegoacutelnych rzutoacutew (httpblocksorgmbostock3711652)
KartogramKarto co To s owo ktoacuterego nie s yszy si na co dzie okre la map na ktoacuterej ca e obszaryzosta y wype nione roacute nymi odcieniami (jasnymi lub ciemnymi) czy te roacute nymi kolorami takby odda rozk ad powi zanych z oznaczeniami warto ci W Stanach Zjednoczonych szcze-goacutelnie w okresie wyboroacutew cz sto spotyka si kartogramy okre lane mianem bdquoczerwonychi niebieskich stanoacutewrdquo Na mapach tych zaznacza si odpowiednim kolorem przewag popar-cia dla kandydatoacutew Partii Demokratycznej b d Partii Republika skiej Ale kartogramy wy-konuje si z roacute nych przyczyn niekoniecznie politycznych
Takie odwzorowania ciesz si chyba najwi ksz popularno ci w roacuted u ytkownikoacutew D3Pami taj jednak e cho kartogramy potrafi by niezwykle pomocne to maj jednak po-wa ne ograniczenia Poniewa na tego rodzaju mapach warto ci odwzorowuje si na pewnejpowierzchni atwo mo e doj do niezamierzonego przek amania du e powierzchnie o niskiej
Kup książkę Poleć książkę
Kartogram 215
g sto ci danej wielko ci (na przyk ad stan Nevada) mog sprawia wra enie bardziej istot-nych ni s w rzeczywisto ci Typowy kartogram nie oddaje dobrze warto ci liczonych bdquonag ow rdquo bo na przyk ad Nevada jest zbyt du a a Delaware zbyt ma y Jednocze nie karto-gram zachowuje geografi miejsca oraz mdash jak na map mdash wygl da naprawd imponuj coZobaczmy zatem co da si z tym zrobi (Kod znajdziesz w pliku 05_choroplethhtml)
Po pierwsze zdefiniuj funkcj skaluj c ktoacutera pobierze warto ci liczbowe a zwroacuteci koloryNa tym w a nie polega w du ej mierze praca nad kartogramem
var color = d3scalequantize() range([rgb(237248233) rgb(186228179)rgb(116196118)rgb(4916384)rgb(010944)])
Funkcja quantize jest zaliczana do grupy skal liniowych ale wynikiem jej dzia ania jest zbioacuterwarto ci dyskretnych Warto ciami wyj ciowymi mog by liczby kolory (jak w tym przy-padku) czy cokolwiek innego co uznasz za odpowiednie Funkcja ta przydaje si bardzo je lichcesz podzieli zbioacuter warto ci na grupy W omawianym przypadku zdecydowa em si utwo-rzy pi grup docelowych ale ich liczba nie jest w aden sposoacuteb formalnie ograniczona
Zauwa e okre li em tu zbioacuter warto ci wyj ciowych natomiast nie napisa em nic na tematdziedziny (Czekam a wczytaj si dane) Kolory ktoacuterymi si pos u y em pochodz z plikucolorbrewerjs dost pnego pod adresem httpsgithubcommbostockd3treemasterlibcolorbrewerRepozytorium to zawiera sporych rozmiaroacutew zbioacuter barw dobranych przez Cynthi Brewerna podstawie prowadzonych przez ni bada
Pora wczyta jakie dane Zawczasu przygotowa em plik us-ag-productivity-2004csv w ktoacuterymznajdziesz dane u o one w nast puj cy sposoacuteb
statevalueAlabama11791Arkansas13705Arizona13847California17979Colorado10325Connecticut13209Delaware14345
Dane te udost pnione przez Departament Rolnictwa Stanoacutew Zjednoczonych zawieraj in-formacje na temat produkcji rolnej w poszczegoacutelnych stanach w 2004 roku Dane liczboweprzedstawiaj wyniki wzgl dne wyznaczane dla linii bazowej jak by a produkcja rolnaw Alabamie w 1996 roku (10) Wi ksze od jedynki warto ci nale y zatem rozumie jakowy szy poziom produkcji p odoacutew rolnych a mniejsze jako ni szy (Na stronie httpdatagovmo na znale wiele oficjalnych zestawie statystycznych) Wydaje si e te warto ci po-winny adnie si prze o y na kartogram produkcji rolnej
Dane z pliku wczytamy za pomoc funkcji d3csv()
d3csv(us-ag-productivity-2004csv function(data)
Teraz (zanim zapomn ) w funkcji zwrotnej zdefiniuj parametr color dziedziny warto ciwej ciowych skali kwantuj cej
colordomain([ d3min(data function(d) return dvalue ) d3max(data function(d) return dvalue )])
Kup książkę Poleć książkę
216 Rozdzia 12 Mapy geograficzne
W kodzie tym pojawiaj si funkcje d3min() i d3max() pozwalaj ce wyznaczy i zwroacutecinajmniejsz i najwi ksz warto dzi ki czemu dziedzina b dzie wyznaczana dynamicznie
Nast pnie wczytamy dane JSON mdash t cz operacji przeprowadzimy tak jak poprzednioG oacutewna roacute nica i nowo polega na tym e tym razem chc w czy dane dotycz ce rolnictwado danych GeoJSON Dlaczego Poniewa do znacznika mo na do cza tylko jeden zestawdanych naraz Zdecydowanie potrzebujemy danych GeoJSON bo na ich podstawie tworzones cie ki ale jednocze nie potrzebujemy te danych dotycz cych upraw Gdyby zatemuda o si po czy je w jedn monstrualn tablic wtedy mogliby my podpi ca o podznaczniki path (Istnieje kilka sposoboacutew rozwi zania tego problemu mdash jak zawsze prezentujswoj ulubion metod )
d3json(us-statesjson function(json) czy dane rolnicze z danymi GeoJSON Sprawdza w p tli raz ca y zestaw danych rolniczych for (var i = 0 i lt datalength i++) Pobiera nazw stanu var dataState = data[i]state Pobiera warto danych i przekszta ca j na liczb zmiennoprzecinkow var dataValue = parseFloat(data[i]value) Odnajduje odpowiedni stan w danych GeoJSON for (var j = 0 j lt jsonfeatureslength j++) var jsonState = jsonfeatures[j]propertiesname if (dataState == jsonState) Kopiuje dane do zmiennej JSON jsonfeatures[j]propertiesvalue = dataValue Przestaje przeszukiwa JSON break
Przyjrzyj si uwa nie przytoczonemu fragmentowi kodu Zasadniczo zaproponowane roz-wi zanie polega na tym by dla ka dego stanu odnale dane GeoJSON opatrzone t samnazw (na przyk ad Colorado) Gdy to si uda pobierzemy warto ci danych zapisanych dlaka dego stanu i dodamy je do jsonfeatures[j]propertiesvalue W ten sposoacuteb b done po czone ze znacznikiem i dost pne poacute niej gdy b dziemy ich potrzebowa
Wreszcie w ten sam sposoacuteb co ostatnio przygotujemy cie ki przy czym tym razem wartofunkcji style() b dziemy przypisywa dynamicznie
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path) style(fill function(d) Pobiera warto ci danych var value = dpropertiesvalue if (value) Je li warto istnieje return color(value) else Je li warto jest niezdefiniowana return ccc )
Kup książkę Poleć książkę
Dodawanie punktoacutew 217
Teraz ka da ze cie ek zostanie wype niona innym kolorem a nie jak mia o to miejsce po-przednio gdy wszystkie wype nili my barw steelblue Problem polega na tym e niedysponujemy danymi ze wszystkich stanoacutew Zestawienie ktoacuterym si pos u y em nie obej-mowa o Alaski Dystryktu Kolumbii Hawajoacutew i Portoryko (ktoacutere wprawdzie nie jest stanemale jest uwzgl dnione w danych GeoJSON i pojawia si w odwzorowaniu)
Aby poradzi sobie jako z tymi wyj tkami doda em do kodu warunek logiczny mdash instrukcjif() ktoacutera sprawdza czy dla danego stanu warto danych zosta a zdefiniowana Je li daneistniej zwracana jest funkcja color(value) co oznacza e mog przekaza dane do skalikwantuj cej i otrzyma w wyniku tego kod koloru Dla warto ci niezdefiniowanych ustali emdomy ln warto koloru ccc co odpowiada delikatnej szaro ci
Pi knie Spoacutejrz tylko na wyniki widoczne na rysunku 125 Sprawd jak prezentuje si kodi sproacutebuj z nim swoich si Znajdziesz go w pliku 05_choroplethhtml
Rysunek 125 Kartogram przedstawiaj cy poziom produkcji rolnej w poszczegoacutelnych stanach
Dodawanie punktoacutewMi o by oby zaznaczy na mapie cho kilka miast by nada grafice dok adniejszy kontekstprawda Warto by oby te znaczy ile jest du ych obszaroacutew g sto zaludnionych w stanacho najwy szym (i najni szym) poziomie produktywno ci rolnej Zaczniemy znoacutew od znale-zienia odpowiednich danych
Na szcz cie niedawno mieli my znoacutew spis powszechny (Na to id nasze podatki) Otopocz tek nieobrobionego pliku CSV zawieraj cego roczne szacunkowe zestawienie liczbyludno ci miast powy ej 50 000 mieszka coacutew (plik dost pny pod adresem httpwwwcensusgovpopestdatacitiestotals2011tablesSUB-EST2011-01csv)
table with row headers in column A and column headers in rows 3 through 4Table 1 Annual Estimates of the Resident Population for Incorporated PlacesOver 50000 Ranked by July 1 2011 Population April 1 2010 to July 1 2011RankGeographic AreaApril 1 2010Population Estimate (as of July 1)PlaceStateCensusEstimates Base201020111New York cityNew York81751338175133818644382449102Los Angeles cityCalifornia37926213792625379576138197023Chicago cityIllinois2695598269559826982832707120
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
Spis tre ci 5
5 Dane 71Tworzenie znacznikoacutew 71
czenie metod 73Po jednym odwo aniu 74Przekazywanie 75Bez czenia 75
Dowi zywanie danych 75W wi zi 76Dane 76Prosz dokona wyboru 79Powi zany i okre lony 80U ywanie danych 82Funkcja mdash rzecz potrzebna 83Dane chc by gdzie zapisane 84Wi cej ni tekst 85
6 Graficzne przedstawianie danych 87Rysowanie za pomoc znacznikoacutew div 87
Okre lanie atrybutoacutew 88Kilka s oacutew o klasach 89Wroacute my do s upkoacutew 89Nadawanie styloacutew 90Pot na metoda data() 91Dane losowe 92
Rysowanie za pomoc znacznikoacutew SVG 94Tworzenie znacznikoacutew SVG 95Kszta ty definiowane danymi 96Jakie liczne kolorki 97
Przygotowywanie wykresu s upkowego 98Stary wykres 98Nowy wykres 99Kolory 104Etykiety 106
Przygotowywanie wykresu punktowego 108Dane 108Wykres punktowy 108Rozmiar 110Etykiety 111
Dalsze dzia ania 112
7 Skalowanie 113Jab ka i piksele 113Dziedziny i zbiory warto ci 114Normalizacja 115
Kup książkę Poleć książkę
6 Spis tre ci
Przygotowywanie funkcji skaluj cej 115Skalowanie wykresu punktowego 116
Funkcje d3min() i d3max() 116Skalowanie dynamiczne 118Stosowanie warto ci przeskalowanych 118
Poprawianie wykresu 119Inne rozwi zania 122Inne funkcje skaluj ce 123
8 Osie 125Poznaj osie 125Metody przygotowywania osi 126Porz dki 127Pod kresk 130A dlaczego nie Y 131Ostateczny szlif 132Formatowanie opisoacutew osi 133
9 Aktualizacje przej cia i ruch 135Przeroacutebki w wykresie s upkowym 135
Jak dzia aj skale porz dkowe 136W zbiorze warto ci tylko grupy 138Referencja do skali porz dkowej 139Inne aktualizacje 139
Aktualizowanie danych 139Interakcja za pomoc funkcji nas uchuj cych zdarze 140Zmienianie danych 141Aktualizowanie elementoacutew graficznych 141
Przej cia 144Funkcja duration() czyli ile to wszystko potrwa 145Ostro nie osiadamy 146Bez opoacute nie prosz 147Dane losowe 149Aktualizowanie funkcji skaluj cych 150Aktualizowanie osi 153Ka de przej cie ma swoacutej pocz tek i koniec 155
Inne rodzaje aktualizacji 161Dodawanie warto ci (i znacznikoacutew) 162Usuwanie warto ci (i znacznikoacutew) 166
czenie danych za pomoc kluczy 169Dodaj i usu czyli wszystko naraz 174Powtoacuterzenie 175
Kup książkę Poleć książkę
Spis tre ci 7
10 Interaktywno 177Dowi zywanie funkcji nas uchuj cych zdarze 177Poznajmy zachowania 178
Najed kursorem eby wyroacute ni 179Grupowanie znacznikoacutew SVG 182
Sortowanie klikni ciem 184Podpowiedzi 187
Domy lne podpowiedzi przegl darki 188Podpowiedzi wy wietlane w znacznikach SVG 189Podpowiedzi wy wietlane w znacznikach div 191
Urz dzenia dotykowe 193Pora rusza dalej 193
11 Uk ady wykresoacutew 195Uk ad ko owy 196Uk ad skumulowany 200Uk ad si owy 203
12 Mapy geograficzne 209Poznaj GeoJSON 209cie ki 211
Odwzorowania 212Kartogram 214Dodawanie punktoacutew 217Pobieranie danych geograficznych i ich parsowanie 221
Znajd pliki kszta toacutew 221Wybierz rozdzielczo 221Upraszczanie kszta toacutew 223Konwersja do GeoJSON 223
13 Eksportowanie 227Mapy bitowe 227Plik PDF 228SVG 229
A Dalsza nauka 233
Skorowidz 237
Kup książkę Poleć książkę
8 Spis tre ci
Kup książkę Poleć książkę
209
ROZDZIA 12
Mapy geograficzne
Wykresy s upkowe wykresy punktowe wykresy ko owe a nawet wykresy si owehellip bdquoWszystkoto bardzo pi knie mdash my lisz sobie mdash ale przejd my ju w ko cu do maprdquo
Poznaj GeoJSONStandard JSON ju znasz pora zaznajomi si teraz z GeoJSON czyli bazuj cym na formacieJSON standardzie zapisywania danych geograficznych na potrzeby aplikacji internetowychGeoJSON nie jest niczym nowym a jedynie wysoce wyspecjalizowan metod stosowania JSON
Zanim jednak przejdziemy do generowania map musimy w jaki sposoacuteb zdoby dane znacz-nika path (czyli konturu) kszta tu ktoacutery b dziemy chcieli wy wietli Zaczniemy od najprost-szego przyk adu mdash odwzorowania granic Stanoacutew Zjednoczonych W katalogu z kodami przy-k adoacutew znajdziesz plik us-statesjson ktoacutery zosta pobrany bezpo rednio z jednego z licznychprzyk adoacutew na stronie D3 w zwi zku z czym jeste my winni Mikersquoowi Bostockowi gor cepodzi kowania za przygotowanie takich adnych i starannych granic Stanoacutew
Po otwarciu pliku us-statesjson zobaczysz co co przypomina nieco ten kod (cho tu pre-zentuj wersj sformatowan i bardzo skroacutecon )
typeFeatureCollection features[ typeFeature id01 propertiesnameAlabama geometry typePolygon coordinates[[[-873592963500118] [-8560667534984749][-8543141334124869] [-8518495132859696][-8518495132859696] [-8496039732421541][-8500421232322956] [-8488919632262709][-850589813213674] ]] type Feature id 02 properties name Alaska
Kup książkę Poleć książkę
210 Rozdzia 12 Mapy geograficzne
geometry type MultiPolygon coordinates [[[[-13160202155117982] [-1315691595528229][-13135555855183705] [-131388425501392][-13164583655035827] [-13160202155117982]]][[[-1318320525542469] [-13164583655304197][-13174989855128935] [-13183205255189182] ]]]
Dane jak to w stylu GeoJSON s zapisane w jednym wielkim obiekcie (Nawiasy klamrowepami tasz) W obiekcie znajdziemy deklaracj typu type FeatureCollecion Po typie po-jawia si pole features ktoacutere przechowuje tablic pojedynczych obiektoacutew typu FeatureKa dy z nich odpowiada jednemu ze stanoacutew Nazwa stanu jest podana w polu properties
Jednak sedno ka dego pliku GeoJSON le y w polu geometry Tam w a nie pojawiaj si de-finicja typu (type) oraz wspoacute rz dne (coordinates) okre laj ce kontur danego elementu Polecoordinates przechowuje szeroko ci i d ugo ci geograficzne zapisane parami w ma ych dwu-warto ciowych tablicach Przetwarzanie i udoskonalanie tych warto ci stanowi sens ycia ka -dego kartografa Pokolenia badaczy i podroacute nikoacutew po wi ca y swoacutej czas by zgromadzi tenzbioacuter i za to powinni my by im wdzi czni Liczby te cho mo e niepozorne kryj w sobieprawdziw moc
Warto te zaznaczy e w danych GeoJSON jako pierwsz podaje si zawsze d ugo geogra-ficzn Mimo e jeste my przyzwyczajeni do zapisu w ktoacuterym najpierw wymienia si szero-ko a potem d ugo w wiecie GeoJSON obowi zuje odwrotny porz dek
I jeszcze ma a ci ga na wypadek gdyby odroacute nianie d ugo ci od szeroko ci geograficznejstanowi o dla Ciebie problem
D ugo geograficzna jak nazwa wskazuje jest d uga Jej linie (po udniki) biegn pionowo(z poacute nocy na po udnie) jakby zwiesza y si z goacutery na doacute
Szeroko geograficzna jest szeroka Jej linie (roacutewnole niki) rozci gaj si poziomo jakbystara y si obj Ziemi w pasie
Roacutewnole niki i po udniki tworz razem ogromn sie obejmuj c ca kul ziemsk Na naszeszcz cie wspoacute rz dne mo na atwo przeliczy na pary x i y ktoacutere z kolei pozwalaj wy-wietla wszystko bez wi kszych problemoacutew na ekranie komputera Gdy rysowali my wy-
kres s upkowy warto ci danych odwzorowywali my na warto ci na ekranie mdash przeliczali myliczby na wysoko prostok toacutew W przypadku tworzenia map geograficznych te generu-jemy odwzorowania mdash pary d ugo i szeroko przechodz w pary x i y Jednocze nie ope-rowanie zmiennymi x i y pozwala w atwy sposoacuteb omin niewygodny problem kolejno cid ugo ci i szeroko ci podanych odwrotnie
Get Lat+Lon (httptecznocomsquares12378043-1222712) to doskona e narz dzieautorstwa Micha a Migurskiego dzi ki ktoacuteremu z atwo ci sprawdzisz czy podanewspoacute rz dne geograficzne s na pewno poprawne Trzymaj t stron otwart w oknieprzegl darki przez ca y czas gdy pracujesz nad mapami zagl da si do niej bowiembardzo cz sto
Kup książkę Poleć książkę
cie ki 211
cie kiMamy ju dane geograficzne Pora co z nimi zrobi
Przede wszystkim nale y zdefiniowa generator cie ek
var path = d3geopath()
Mog z czystym sumieniem powiedzie e d3geopath() to funkcja ratuj ca ycie To onaprzek ada ba agan z pliku GeoJSON na jeszcze bardziej nieporz dny zapis ze znacznikoacutewpath Oddajmy cze d3geopath()
Mogliby my oczywi cie wklei kod GeoJSON bezpo rednio do pliku HTML ale fuj tylewspoacute rz dnych i nawiasoacutew klamrowych Co za ba agan Znacznie porz dniej b dzie gdyzastosujemy bardziej tradycyjne podej cie czyli pozostawimy dane geograficzne w osobnympliku i wczytamy jego zawarto za pomoc funkcji d3json()
d3json(us-statesjson function(json) svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path))
Funkcja d3json() przyjmuje dwa argumenty Pierwszy to zmienna a cuchowa okre laj cacie k dost pu do pliku ktoacuterego zawarto nale y wczyta drugi za to funkcja zwrotna
uruchamiana dopiero po wczytaniu i sparsowaniu zawarto ci pliku JSON (Wi cej na tematfunkcji zwrotnych znajdziesz w ramce bdquoObs uga b doacutew wczytywania danychrdquo z rozdzia u 5)Funkcja d3json() podobnie jak d3csv() jest asynchroniczna a zatem nie wstrzymuje wy-konywania pozosta ej cz ci kodu na czas wczytywania danych z pliku Oznacza to e kodumieszczony po wywo aniu funkcji zwrotnej b dzie w rzeczywisto ci wykonany przed jej cia em
d3json(someFilejson function(json) Tu umie kod zale ny od danych z pliku JSON)
Tu umie tylko te instrukcje ktoacutere nie potrzebuj do pracy zawarto ci pliku JSONconsolelog(Lubi koty)
Dlatego zapami taj podczas korzystania z zewn trznych roacutede danych kod ktoacuterego wyko-nanie zale y od zawarto ci tych roacutede musi si zawsze znale wewn trz funkcji zwrotnej(Mo esz te rozbi go na mniejsze porcje ktoacutere zapiszesz we w asnych funkcjach i dopiero jewywo asz w ciele funkcji zwrotnej)
Wroacute my jednak do przyk adu Pora powi za w a ciwo ci pobrane z pliku GeoJSON z no-wymi znacznikami path Podany kod tworzy osobn cie k dla ka dej z cech
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path)
Zauwa e ostatni wiersz mdash ten w ktoacuterym zmienna d (atrybut przechowuj cy dane znacznikapath) jest przekazywana do generatora cie ek mdash po prostu pobiera wszystkie dane z plikui przelicza je na kod SVG Wynik jest widoczny na rysunku 121
Kup książkę Poleć książkę
212 Rozdzia 12 Mapy geograficzne
Rysunek 121 Pierwsze zetkni cie z danymi GeoJSON
Mapa To zbyt proste by by o mo liwe Aby sprawdzi czy uzyskasz ten sam efekt otwoacuterzplik 01_pathshtml Dalsze dzia ania b d mia y na celu wy cznie dostosowanie mapy do na-szych potrzeb
Je li interesuj Ci zagadnienia zwi zane z prac ze cie kami i ich generatoramipolecam Ci zapoznanie si z dokumentacj (httpsgithubcommbostockd3wikiGeo-Paths)
OdwzorowaniaNiew tpliwie rzuci o Ci si w oczy e mapa nie przedstawia ca ych Stanoacutew ZjednoczonychAby naprawi to niedoci gni cie musimy zmieni u ywane odwzorowanie
Czym jest odwzorowanie Z pewno ci nie usz o Twojej uwadze tak e to e Ziemia jest kuli-sta a nie p aska Wszystkie kuliste obiekty s troacutejwymiarowe co znacznie utrudnia przed-stawianie ich na powierzchniach dwuwymiarowych Odwzorowanie jest algorytmem kom-promisu to metoda pozwalaj ca rzutowa troacutejwymiarow przestrze na dwuwymiarowp aszczyzn
Biblioteka D3 pozwala definiowa mechanizmy rzutowania za pomoc wygl daj cej znajomokonstrukcji
var projection = d3geoalbersUsa() translate([w2 h2])
Biblioteka pozwala korzysta z kilku dost pnych w niej algorytmoacutew rzutowania Odwzoro-wanie Albersa jest rzutem z o onym przygotowanym tak by na mapie zmie ci y si tak eAlaska i Hawaje ktoacutere umieszcza si pod po udniowo-zachodnim wybrze em Stanoacutew Zjed-noczonych (zaraz zobaczysz jak to wygl da) To w a nie albersUsa jest domy lnym odwzo-rowaniem u ywanym przez funkcj d3pathgeo() Teraz gdy okre lili my je ju jawniemo emy dodatkowo poda kilka opcji z jakimi mia oby by wykorzystywane jak cho by war-to przesuni cia Z przytoczonej instrukcji wynika e przesuwamy odwzorowanie w kie-runku rodka obrazu (o po ow szeroko ci i o po ow wysoko ci)
Kup książkę Poleć książkę
Odwzorowania 213
Drug zmian jak zrobimy b dzie jawne za danie od generatora cie ek by wszystkiecie ki wyznacza w odniesieniu do wskazanego wcze niej w asnego odwzorowania
var path = d3geopath() projection(projection)
W ten sposoacuteb otrzymali my map przedstawion na rysunku 122 Powoli zbli amy si do celuKod znajdziesz w pliku 02_projectionhtml
Rysunek 122 Te same dane GeoJSON ale przy wy rodkowaniu rzutu
Mo emy te doda do odwzorowania metod scale() eby zmniejszy nieco map i osi gntym samym wynik przedstawiony na rysunku 123
var projection = d3geoalbersUsa() translate([w2 h2]) scale([500])
Rysunek 123 Mapa Stanoacutew Zjednoczonych mdash przeskalowana i wy rodkowana tak by mie ci a siw obszarze obrazu
Domy ln warto ci skalowania jest 1000 Mniejsze liczby zmniejszaj map a wi ksze po-wi kszaj
Kup książkę Poleć książkę
214 Rozdzia 12 Mapy geograficzne
Doskonale Je li otworzysz w przegl darce plik 03_scaledhtml przekonasz si e wszystkodzia a
Wystarczy doda jedn instrukcj style() eby zmieni kolor wype nienia cie ek na jakimniej przygn biaj cy S dz e niebieski widoczny na rysunku 124 nie jest brzydki
Rysunek 124 Niebieski jest zdecydowanie lepszy
Ca y kod znajdziesz w pliku 04_fillhtml W ten sam sposoacuteb mo na zdefiniowa kolor i szero-ko p dzla obramowania
Funkcje rzutuj ce ktoacutere pozwalaj uzyskiwa roacute nego rodzaju odwzorowania kartograficz-ne to niezwykle pot ne algorytmy Warto wiedzie e nie ma odwzorowa uniwersalnychmdash zmienia si je w zale no ci od tego jakich informacji potrzebujemy i o ktoacuter cz wiatachodzi (inaczej odwzorowuje si bieguny a inaczej okolice roacutewnika)
Zas ug g oacutewnie Jasona Daviesa (httpwwwjasondaviescom) jest to e dodatki do biblioteki D3odpowiedzialne za przygotowanie odwzorowa kartograficznych oferuj dzi u ytkownikomniemal wszystkie znane nam rodzaje rzutoacutew Szczegoacute owy opis pracy z rzutami znajdziesz w do-kumentacji (httpsgithubcommbostockd3wikiGeo-Projections) Warto te zapozna si z poroacutewna-niem przedstawiaj cym w a ciwo ci poszczegoacutelnych rzutoacutew (httpblocksorgmbostock3711652)
KartogramKarto co To s owo ktoacuterego nie s yszy si na co dzie okre la map na ktoacuterej ca e obszaryzosta y wype nione roacute nymi odcieniami (jasnymi lub ciemnymi) czy te roacute nymi kolorami takby odda rozk ad powi zanych z oznaczeniami warto ci W Stanach Zjednoczonych szcze-goacutelnie w okresie wyboroacutew cz sto spotyka si kartogramy okre lane mianem bdquoczerwonychi niebieskich stanoacutewrdquo Na mapach tych zaznacza si odpowiednim kolorem przewag popar-cia dla kandydatoacutew Partii Demokratycznej b d Partii Republika skiej Ale kartogramy wy-konuje si z roacute nych przyczyn niekoniecznie politycznych
Takie odwzorowania ciesz si chyba najwi ksz popularno ci w roacuted u ytkownikoacutew D3Pami taj jednak e cho kartogramy potrafi by niezwykle pomocne to maj jednak po-wa ne ograniczenia Poniewa na tego rodzaju mapach warto ci odwzorowuje si na pewnejpowierzchni atwo mo e doj do niezamierzonego przek amania du e powierzchnie o niskiej
Kup książkę Poleć książkę
Kartogram 215
g sto ci danej wielko ci (na przyk ad stan Nevada) mog sprawia wra enie bardziej istot-nych ni s w rzeczywisto ci Typowy kartogram nie oddaje dobrze warto ci liczonych bdquonag ow rdquo bo na przyk ad Nevada jest zbyt du a a Delaware zbyt ma y Jednocze nie karto-gram zachowuje geografi miejsca oraz mdash jak na map mdash wygl da naprawd imponuj coZobaczmy zatem co da si z tym zrobi (Kod znajdziesz w pliku 05_choroplethhtml)
Po pierwsze zdefiniuj funkcj skaluj c ktoacutera pobierze warto ci liczbowe a zwroacuteci koloryNa tym w a nie polega w du ej mierze praca nad kartogramem
var color = d3scalequantize() range([rgb(237248233) rgb(186228179)rgb(116196118)rgb(4916384)rgb(010944)])
Funkcja quantize jest zaliczana do grupy skal liniowych ale wynikiem jej dzia ania jest zbioacuterwarto ci dyskretnych Warto ciami wyj ciowymi mog by liczby kolory (jak w tym przy-padku) czy cokolwiek innego co uznasz za odpowiednie Funkcja ta przydaje si bardzo je lichcesz podzieli zbioacuter warto ci na grupy W omawianym przypadku zdecydowa em si utwo-rzy pi grup docelowych ale ich liczba nie jest w aden sposoacuteb formalnie ograniczona
Zauwa e okre li em tu zbioacuter warto ci wyj ciowych natomiast nie napisa em nic na tematdziedziny (Czekam a wczytaj si dane) Kolory ktoacuterymi si pos u y em pochodz z plikucolorbrewerjs dost pnego pod adresem httpsgithubcommbostockd3treemasterlibcolorbrewerRepozytorium to zawiera sporych rozmiaroacutew zbioacuter barw dobranych przez Cynthi Brewerna podstawie prowadzonych przez ni bada
Pora wczyta jakie dane Zawczasu przygotowa em plik us-ag-productivity-2004csv w ktoacuterymznajdziesz dane u o one w nast puj cy sposoacuteb
statevalueAlabama11791Arkansas13705Arizona13847California17979Colorado10325Connecticut13209Delaware14345
Dane te udost pnione przez Departament Rolnictwa Stanoacutew Zjednoczonych zawieraj in-formacje na temat produkcji rolnej w poszczegoacutelnych stanach w 2004 roku Dane liczboweprzedstawiaj wyniki wzgl dne wyznaczane dla linii bazowej jak by a produkcja rolnaw Alabamie w 1996 roku (10) Wi ksze od jedynki warto ci nale y zatem rozumie jakowy szy poziom produkcji p odoacutew rolnych a mniejsze jako ni szy (Na stronie httpdatagovmo na znale wiele oficjalnych zestawie statystycznych) Wydaje si e te warto ci po-winny adnie si prze o y na kartogram produkcji rolnej
Dane z pliku wczytamy za pomoc funkcji d3csv()
d3csv(us-ag-productivity-2004csv function(data)
Teraz (zanim zapomn ) w funkcji zwrotnej zdefiniuj parametr color dziedziny warto ciwej ciowych skali kwantuj cej
colordomain([ d3min(data function(d) return dvalue ) d3max(data function(d) return dvalue )])
Kup książkę Poleć książkę
216 Rozdzia 12 Mapy geograficzne
W kodzie tym pojawiaj si funkcje d3min() i d3max() pozwalaj ce wyznaczy i zwroacutecinajmniejsz i najwi ksz warto dzi ki czemu dziedzina b dzie wyznaczana dynamicznie
Nast pnie wczytamy dane JSON mdash t cz operacji przeprowadzimy tak jak poprzednioG oacutewna roacute nica i nowo polega na tym e tym razem chc w czy dane dotycz ce rolnictwado danych GeoJSON Dlaczego Poniewa do znacznika mo na do cza tylko jeden zestawdanych naraz Zdecydowanie potrzebujemy danych GeoJSON bo na ich podstawie tworzones cie ki ale jednocze nie potrzebujemy te danych dotycz cych upraw Gdyby zatemuda o si po czy je w jedn monstrualn tablic wtedy mogliby my podpi ca o podznaczniki path (Istnieje kilka sposoboacutew rozwi zania tego problemu mdash jak zawsze prezentujswoj ulubion metod )
d3json(us-statesjson function(json) czy dane rolnicze z danymi GeoJSON Sprawdza w p tli raz ca y zestaw danych rolniczych for (var i = 0 i lt datalength i++) Pobiera nazw stanu var dataState = data[i]state Pobiera warto danych i przekszta ca j na liczb zmiennoprzecinkow var dataValue = parseFloat(data[i]value) Odnajduje odpowiedni stan w danych GeoJSON for (var j = 0 j lt jsonfeatureslength j++) var jsonState = jsonfeatures[j]propertiesname if (dataState == jsonState) Kopiuje dane do zmiennej JSON jsonfeatures[j]propertiesvalue = dataValue Przestaje przeszukiwa JSON break
Przyjrzyj si uwa nie przytoczonemu fragmentowi kodu Zasadniczo zaproponowane roz-wi zanie polega na tym by dla ka dego stanu odnale dane GeoJSON opatrzone t samnazw (na przyk ad Colorado) Gdy to si uda pobierzemy warto ci danych zapisanych dlaka dego stanu i dodamy je do jsonfeatures[j]propertiesvalue W ten sposoacuteb b done po czone ze znacznikiem i dost pne poacute niej gdy b dziemy ich potrzebowa
Wreszcie w ten sam sposoacuteb co ostatnio przygotujemy cie ki przy czym tym razem wartofunkcji style() b dziemy przypisywa dynamicznie
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path) style(fill function(d) Pobiera warto ci danych var value = dpropertiesvalue if (value) Je li warto istnieje return color(value) else Je li warto jest niezdefiniowana return ccc )
Kup książkę Poleć książkę
Dodawanie punktoacutew 217
Teraz ka da ze cie ek zostanie wype niona innym kolorem a nie jak mia o to miejsce po-przednio gdy wszystkie wype nili my barw steelblue Problem polega na tym e niedysponujemy danymi ze wszystkich stanoacutew Zestawienie ktoacuterym si pos u y em nie obej-mowa o Alaski Dystryktu Kolumbii Hawajoacutew i Portoryko (ktoacutere wprawdzie nie jest stanemale jest uwzgl dnione w danych GeoJSON i pojawia si w odwzorowaniu)
Aby poradzi sobie jako z tymi wyj tkami doda em do kodu warunek logiczny mdash instrukcjif() ktoacutera sprawdza czy dla danego stanu warto danych zosta a zdefiniowana Je li daneistniej zwracana jest funkcja color(value) co oznacza e mog przekaza dane do skalikwantuj cej i otrzyma w wyniku tego kod koloru Dla warto ci niezdefiniowanych ustali emdomy ln warto koloru ccc co odpowiada delikatnej szaro ci
Pi knie Spoacutejrz tylko na wyniki widoczne na rysunku 125 Sprawd jak prezentuje si kodi sproacutebuj z nim swoich si Znajdziesz go w pliku 05_choroplethhtml
Rysunek 125 Kartogram przedstawiaj cy poziom produkcji rolnej w poszczegoacutelnych stanach
Dodawanie punktoacutewMi o by oby zaznaczy na mapie cho kilka miast by nada grafice dok adniejszy kontekstprawda Warto by oby te znaczy ile jest du ych obszaroacutew g sto zaludnionych w stanacho najwy szym (i najni szym) poziomie produktywno ci rolnej Zaczniemy znoacutew od znale-zienia odpowiednich danych
Na szcz cie niedawno mieli my znoacutew spis powszechny (Na to id nasze podatki) Otopocz tek nieobrobionego pliku CSV zawieraj cego roczne szacunkowe zestawienie liczbyludno ci miast powy ej 50 000 mieszka coacutew (plik dost pny pod adresem httpwwwcensusgovpopestdatacitiestotals2011tablesSUB-EST2011-01csv)
table with row headers in column A and column headers in rows 3 through 4Table 1 Annual Estimates of the Resident Population for Incorporated PlacesOver 50000 Ranked by July 1 2011 Population April 1 2010 to July 1 2011RankGeographic AreaApril 1 2010Population Estimate (as of July 1)PlaceStateCensusEstimates Base201020111New York cityNew York81751338175133818644382449102Los Angeles cityCalifornia37926213792625379576138197023Chicago cityIllinois2695598269559826982832707120
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
6 Spis tre ci
Przygotowywanie funkcji skaluj cej 115Skalowanie wykresu punktowego 116
Funkcje d3min() i d3max() 116Skalowanie dynamiczne 118Stosowanie warto ci przeskalowanych 118
Poprawianie wykresu 119Inne rozwi zania 122Inne funkcje skaluj ce 123
8 Osie 125Poznaj osie 125Metody przygotowywania osi 126Porz dki 127Pod kresk 130A dlaczego nie Y 131Ostateczny szlif 132Formatowanie opisoacutew osi 133
9 Aktualizacje przej cia i ruch 135Przeroacutebki w wykresie s upkowym 135
Jak dzia aj skale porz dkowe 136W zbiorze warto ci tylko grupy 138Referencja do skali porz dkowej 139Inne aktualizacje 139
Aktualizowanie danych 139Interakcja za pomoc funkcji nas uchuj cych zdarze 140Zmienianie danych 141Aktualizowanie elementoacutew graficznych 141
Przej cia 144Funkcja duration() czyli ile to wszystko potrwa 145Ostro nie osiadamy 146Bez opoacute nie prosz 147Dane losowe 149Aktualizowanie funkcji skaluj cych 150Aktualizowanie osi 153Ka de przej cie ma swoacutej pocz tek i koniec 155
Inne rodzaje aktualizacji 161Dodawanie warto ci (i znacznikoacutew) 162Usuwanie warto ci (i znacznikoacutew) 166
czenie danych za pomoc kluczy 169Dodaj i usu czyli wszystko naraz 174Powtoacuterzenie 175
Kup książkę Poleć książkę
Spis tre ci 7
10 Interaktywno 177Dowi zywanie funkcji nas uchuj cych zdarze 177Poznajmy zachowania 178
Najed kursorem eby wyroacute ni 179Grupowanie znacznikoacutew SVG 182
Sortowanie klikni ciem 184Podpowiedzi 187
Domy lne podpowiedzi przegl darki 188Podpowiedzi wy wietlane w znacznikach SVG 189Podpowiedzi wy wietlane w znacznikach div 191
Urz dzenia dotykowe 193Pora rusza dalej 193
11 Uk ady wykresoacutew 195Uk ad ko owy 196Uk ad skumulowany 200Uk ad si owy 203
12 Mapy geograficzne 209Poznaj GeoJSON 209cie ki 211
Odwzorowania 212Kartogram 214Dodawanie punktoacutew 217Pobieranie danych geograficznych i ich parsowanie 221
Znajd pliki kszta toacutew 221Wybierz rozdzielczo 221Upraszczanie kszta toacutew 223Konwersja do GeoJSON 223
13 Eksportowanie 227Mapy bitowe 227Plik PDF 228SVG 229
A Dalsza nauka 233
Skorowidz 237
Kup książkę Poleć książkę
8 Spis tre ci
Kup książkę Poleć książkę
209
ROZDZIA 12
Mapy geograficzne
Wykresy s upkowe wykresy punktowe wykresy ko owe a nawet wykresy si owehellip bdquoWszystkoto bardzo pi knie mdash my lisz sobie mdash ale przejd my ju w ko cu do maprdquo
Poznaj GeoJSONStandard JSON ju znasz pora zaznajomi si teraz z GeoJSON czyli bazuj cym na formacieJSON standardzie zapisywania danych geograficznych na potrzeby aplikacji internetowychGeoJSON nie jest niczym nowym a jedynie wysoce wyspecjalizowan metod stosowania JSON
Zanim jednak przejdziemy do generowania map musimy w jaki sposoacuteb zdoby dane znacz-nika path (czyli konturu) kszta tu ktoacutery b dziemy chcieli wy wietli Zaczniemy od najprost-szego przyk adu mdash odwzorowania granic Stanoacutew Zjednoczonych W katalogu z kodami przy-k adoacutew znajdziesz plik us-statesjson ktoacutery zosta pobrany bezpo rednio z jednego z licznychprzyk adoacutew na stronie D3 w zwi zku z czym jeste my winni Mikersquoowi Bostockowi gor cepodzi kowania za przygotowanie takich adnych i starannych granic Stanoacutew
Po otwarciu pliku us-statesjson zobaczysz co co przypomina nieco ten kod (cho tu pre-zentuj wersj sformatowan i bardzo skroacutecon )
typeFeatureCollection features[ typeFeature id01 propertiesnameAlabama geometry typePolygon coordinates[[[-873592963500118] [-8560667534984749][-8543141334124869] [-8518495132859696][-8518495132859696] [-8496039732421541][-8500421232322956] [-8488919632262709][-850589813213674] ]] type Feature id 02 properties name Alaska
Kup książkę Poleć książkę
210 Rozdzia 12 Mapy geograficzne
geometry type MultiPolygon coordinates [[[[-13160202155117982] [-1315691595528229][-13135555855183705] [-131388425501392][-13164583655035827] [-13160202155117982]]][[[-1318320525542469] [-13164583655304197][-13174989855128935] [-13183205255189182] ]]]
Dane jak to w stylu GeoJSON s zapisane w jednym wielkim obiekcie (Nawiasy klamrowepami tasz) W obiekcie znajdziemy deklaracj typu type FeatureCollecion Po typie po-jawia si pole features ktoacutere przechowuje tablic pojedynczych obiektoacutew typu FeatureKa dy z nich odpowiada jednemu ze stanoacutew Nazwa stanu jest podana w polu properties
Jednak sedno ka dego pliku GeoJSON le y w polu geometry Tam w a nie pojawiaj si de-finicja typu (type) oraz wspoacute rz dne (coordinates) okre laj ce kontur danego elementu Polecoordinates przechowuje szeroko ci i d ugo ci geograficzne zapisane parami w ma ych dwu-warto ciowych tablicach Przetwarzanie i udoskonalanie tych warto ci stanowi sens ycia ka -dego kartografa Pokolenia badaczy i podroacute nikoacutew po wi ca y swoacutej czas by zgromadzi tenzbioacuter i za to powinni my by im wdzi czni Liczby te cho mo e niepozorne kryj w sobieprawdziw moc
Warto te zaznaczy e w danych GeoJSON jako pierwsz podaje si zawsze d ugo geogra-ficzn Mimo e jeste my przyzwyczajeni do zapisu w ktoacuterym najpierw wymienia si szero-ko a potem d ugo w wiecie GeoJSON obowi zuje odwrotny porz dek
I jeszcze ma a ci ga na wypadek gdyby odroacute nianie d ugo ci od szeroko ci geograficznejstanowi o dla Ciebie problem
D ugo geograficzna jak nazwa wskazuje jest d uga Jej linie (po udniki) biegn pionowo(z poacute nocy na po udnie) jakby zwiesza y si z goacutery na doacute
Szeroko geograficzna jest szeroka Jej linie (roacutewnole niki) rozci gaj si poziomo jakbystara y si obj Ziemi w pasie
Roacutewnole niki i po udniki tworz razem ogromn sie obejmuj c ca kul ziemsk Na naszeszcz cie wspoacute rz dne mo na atwo przeliczy na pary x i y ktoacutere z kolei pozwalaj wy-wietla wszystko bez wi kszych problemoacutew na ekranie komputera Gdy rysowali my wy-
kres s upkowy warto ci danych odwzorowywali my na warto ci na ekranie mdash przeliczali myliczby na wysoko prostok toacutew W przypadku tworzenia map geograficznych te generu-jemy odwzorowania mdash pary d ugo i szeroko przechodz w pary x i y Jednocze nie ope-rowanie zmiennymi x i y pozwala w atwy sposoacuteb omin niewygodny problem kolejno cid ugo ci i szeroko ci podanych odwrotnie
Get Lat+Lon (httptecznocomsquares12378043-1222712) to doskona e narz dzieautorstwa Micha a Migurskiego dzi ki ktoacuteremu z atwo ci sprawdzisz czy podanewspoacute rz dne geograficzne s na pewno poprawne Trzymaj t stron otwart w oknieprzegl darki przez ca y czas gdy pracujesz nad mapami zagl da si do niej bowiembardzo cz sto
Kup książkę Poleć książkę
cie ki 211
cie kiMamy ju dane geograficzne Pora co z nimi zrobi
Przede wszystkim nale y zdefiniowa generator cie ek
var path = d3geopath()
Mog z czystym sumieniem powiedzie e d3geopath() to funkcja ratuj ca ycie To onaprzek ada ba agan z pliku GeoJSON na jeszcze bardziej nieporz dny zapis ze znacznikoacutewpath Oddajmy cze d3geopath()
Mogliby my oczywi cie wklei kod GeoJSON bezpo rednio do pliku HTML ale fuj tylewspoacute rz dnych i nawiasoacutew klamrowych Co za ba agan Znacznie porz dniej b dzie gdyzastosujemy bardziej tradycyjne podej cie czyli pozostawimy dane geograficzne w osobnympliku i wczytamy jego zawarto za pomoc funkcji d3json()
d3json(us-statesjson function(json) svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path))
Funkcja d3json() przyjmuje dwa argumenty Pierwszy to zmienna a cuchowa okre laj cacie k dost pu do pliku ktoacuterego zawarto nale y wczyta drugi za to funkcja zwrotna
uruchamiana dopiero po wczytaniu i sparsowaniu zawarto ci pliku JSON (Wi cej na tematfunkcji zwrotnych znajdziesz w ramce bdquoObs uga b doacutew wczytywania danychrdquo z rozdzia u 5)Funkcja d3json() podobnie jak d3csv() jest asynchroniczna a zatem nie wstrzymuje wy-konywania pozosta ej cz ci kodu na czas wczytywania danych z pliku Oznacza to e kodumieszczony po wywo aniu funkcji zwrotnej b dzie w rzeczywisto ci wykonany przed jej cia em
d3json(someFilejson function(json) Tu umie kod zale ny od danych z pliku JSON)
Tu umie tylko te instrukcje ktoacutere nie potrzebuj do pracy zawarto ci pliku JSONconsolelog(Lubi koty)
Dlatego zapami taj podczas korzystania z zewn trznych roacutede danych kod ktoacuterego wyko-nanie zale y od zawarto ci tych roacutede musi si zawsze znale wewn trz funkcji zwrotnej(Mo esz te rozbi go na mniejsze porcje ktoacutere zapiszesz we w asnych funkcjach i dopiero jewywo asz w ciele funkcji zwrotnej)
Wroacute my jednak do przyk adu Pora powi za w a ciwo ci pobrane z pliku GeoJSON z no-wymi znacznikami path Podany kod tworzy osobn cie k dla ka dej z cech
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path)
Zauwa e ostatni wiersz mdash ten w ktoacuterym zmienna d (atrybut przechowuj cy dane znacznikapath) jest przekazywana do generatora cie ek mdash po prostu pobiera wszystkie dane z plikui przelicza je na kod SVG Wynik jest widoczny na rysunku 121
Kup książkę Poleć książkę
212 Rozdzia 12 Mapy geograficzne
Rysunek 121 Pierwsze zetkni cie z danymi GeoJSON
Mapa To zbyt proste by by o mo liwe Aby sprawdzi czy uzyskasz ten sam efekt otwoacuterzplik 01_pathshtml Dalsze dzia ania b d mia y na celu wy cznie dostosowanie mapy do na-szych potrzeb
Je li interesuj Ci zagadnienia zwi zane z prac ze cie kami i ich generatoramipolecam Ci zapoznanie si z dokumentacj (httpsgithubcommbostockd3wikiGeo-Paths)
OdwzorowaniaNiew tpliwie rzuci o Ci si w oczy e mapa nie przedstawia ca ych Stanoacutew ZjednoczonychAby naprawi to niedoci gni cie musimy zmieni u ywane odwzorowanie
Czym jest odwzorowanie Z pewno ci nie usz o Twojej uwadze tak e to e Ziemia jest kuli-sta a nie p aska Wszystkie kuliste obiekty s troacutejwymiarowe co znacznie utrudnia przed-stawianie ich na powierzchniach dwuwymiarowych Odwzorowanie jest algorytmem kom-promisu to metoda pozwalaj ca rzutowa troacutejwymiarow przestrze na dwuwymiarowp aszczyzn
Biblioteka D3 pozwala definiowa mechanizmy rzutowania za pomoc wygl daj cej znajomokonstrukcji
var projection = d3geoalbersUsa() translate([w2 h2])
Biblioteka pozwala korzysta z kilku dost pnych w niej algorytmoacutew rzutowania Odwzoro-wanie Albersa jest rzutem z o onym przygotowanym tak by na mapie zmie ci y si tak eAlaska i Hawaje ktoacutere umieszcza si pod po udniowo-zachodnim wybrze em Stanoacutew Zjed-noczonych (zaraz zobaczysz jak to wygl da) To w a nie albersUsa jest domy lnym odwzo-rowaniem u ywanym przez funkcj d3pathgeo() Teraz gdy okre lili my je ju jawniemo emy dodatkowo poda kilka opcji z jakimi mia oby by wykorzystywane jak cho by war-to przesuni cia Z przytoczonej instrukcji wynika e przesuwamy odwzorowanie w kie-runku rodka obrazu (o po ow szeroko ci i o po ow wysoko ci)
Kup książkę Poleć książkę
Odwzorowania 213
Drug zmian jak zrobimy b dzie jawne za danie od generatora cie ek by wszystkiecie ki wyznacza w odniesieniu do wskazanego wcze niej w asnego odwzorowania
var path = d3geopath() projection(projection)
W ten sposoacuteb otrzymali my map przedstawion na rysunku 122 Powoli zbli amy si do celuKod znajdziesz w pliku 02_projectionhtml
Rysunek 122 Te same dane GeoJSON ale przy wy rodkowaniu rzutu
Mo emy te doda do odwzorowania metod scale() eby zmniejszy nieco map i osi gntym samym wynik przedstawiony na rysunku 123
var projection = d3geoalbersUsa() translate([w2 h2]) scale([500])
Rysunek 123 Mapa Stanoacutew Zjednoczonych mdash przeskalowana i wy rodkowana tak by mie ci a siw obszarze obrazu
Domy ln warto ci skalowania jest 1000 Mniejsze liczby zmniejszaj map a wi ksze po-wi kszaj
Kup książkę Poleć książkę
214 Rozdzia 12 Mapy geograficzne
Doskonale Je li otworzysz w przegl darce plik 03_scaledhtml przekonasz si e wszystkodzia a
Wystarczy doda jedn instrukcj style() eby zmieni kolor wype nienia cie ek na jakimniej przygn biaj cy S dz e niebieski widoczny na rysunku 124 nie jest brzydki
Rysunek 124 Niebieski jest zdecydowanie lepszy
Ca y kod znajdziesz w pliku 04_fillhtml W ten sam sposoacuteb mo na zdefiniowa kolor i szero-ko p dzla obramowania
Funkcje rzutuj ce ktoacutere pozwalaj uzyskiwa roacute nego rodzaju odwzorowania kartograficz-ne to niezwykle pot ne algorytmy Warto wiedzie e nie ma odwzorowa uniwersalnychmdash zmienia si je w zale no ci od tego jakich informacji potrzebujemy i o ktoacuter cz wiatachodzi (inaczej odwzorowuje si bieguny a inaczej okolice roacutewnika)
Zas ug g oacutewnie Jasona Daviesa (httpwwwjasondaviescom) jest to e dodatki do biblioteki D3odpowiedzialne za przygotowanie odwzorowa kartograficznych oferuj dzi u ytkownikomniemal wszystkie znane nam rodzaje rzutoacutew Szczegoacute owy opis pracy z rzutami znajdziesz w do-kumentacji (httpsgithubcommbostockd3wikiGeo-Projections) Warto te zapozna si z poroacutewna-niem przedstawiaj cym w a ciwo ci poszczegoacutelnych rzutoacutew (httpblocksorgmbostock3711652)
KartogramKarto co To s owo ktoacuterego nie s yszy si na co dzie okre la map na ktoacuterej ca e obszaryzosta y wype nione roacute nymi odcieniami (jasnymi lub ciemnymi) czy te roacute nymi kolorami takby odda rozk ad powi zanych z oznaczeniami warto ci W Stanach Zjednoczonych szcze-goacutelnie w okresie wyboroacutew cz sto spotyka si kartogramy okre lane mianem bdquoczerwonychi niebieskich stanoacutewrdquo Na mapach tych zaznacza si odpowiednim kolorem przewag popar-cia dla kandydatoacutew Partii Demokratycznej b d Partii Republika skiej Ale kartogramy wy-konuje si z roacute nych przyczyn niekoniecznie politycznych
Takie odwzorowania ciesz si chyba najwi ksz popularno ci w roacuted u ytkownikoacutew D3Pami taj jednak e cho kartogramy potrafi by niezwykle pomocne to maj jednak po-wa ne ograniczenia Poniewa na tego rodzaju mapach warto ci odwzorowuje si na pewnejpowierzchni atwo mo e doj do niezamierzonego przek amania du e powierzchnie o niskiej
Kup książkę Poleć książkę
Kartogram 215
g sto ci danej wielko ci (na przyk ad stan Nevada) mog sprawia wra enie bardziej istot-nych ni s w rzeczywisto ci Typowy kartogram nie oddaje dobrze warto ci liczonych bdquonag ow rdquo bo na przyk ad Nevada jest zbyt du a a Delaware zbyt ma y Jednocze nie karto-gram zachowuje geografi miejsca oraz mdash jak na map mdash wygl da naprawd imponuj coZobaczmy zatem co da si z tym zrobi (Kod znajdziesz w pliku 05_choroplethhtml)
Po pierwsze zdefiniuj funkcj skaluj c ktoacutera pobierze warto ci liczbowe a zwroacuteci koloryNa tym w a nie polega w du ej mierze praca nad kartogramem
var color = d3scalequantize() range([rgb(237248233) rgb(186228179)rgb(116196118)rgb(4916384)rgb(010944)])
Funkcja quantize jest zaliczana do grupy skal liniowych ale wynikiem jej dzia ania jest zbioacuterwarto ci dyskretnych Warto ciami wyj ciowymi mog by liczby kolory (jak w tym przy-padku) czy cokolwiek innego co uznasz za odpowiednie Funkcja ta przydaje si bardzo je lichcesz podzieli zbioacuter warto ci na grupy W omawianym przypadku zdecydowa em si utwo-rzy pi grup docelowych ale ich liczba nie jest w aden sposoacuteb formalnie ograniczona
Zauwa e okre li em tu zbioacuter warto ci wyj ciowych natomiast nie napisa em nic na tematdziedziny (Czekam a wczytaj si dane) Kolory ktoacuterymi si pos u y em pochodz z plikucolorbrewerjs dost pnego pod adresem httpsgithubcommbostockd3treemasterlibcolorbrewerRepozytorium to zawiera sporych rozmiaroacutew zbioacuter barw dobranych przez Cynthi Brewerna podstawie prowadzonych przez ni bada
Pora wczyta jakie dane Zawczasu przygotowa em plik us-ag-productivity-2004csv w ktoacuterymznajdziesz dane u o one w nast puj cy sposoacuteb
statevalueAlabama11791Arkansas13705Arizona13847California17979Colorado10325Connecticut13209Delaware14345
Dane te udost pnione przez Departament Rolnictwa Stanoacutew Zjednoczonych zawieraj in-formacje na temat produkcji rolnej w poszczegoacutelnych stanach w 2004 roku Dane liczboweprzedstawiaj wyniki wzgl dne wyznaczane dla linii bazowej jak by a produkcja rolnaw Alabamie w 1996 roku (10) Wi ksze od jedynki warto ci nale y zatem rozumie jakowy szy poziom produkcji p odoacutew rolnych a mniejsze jako ni szy (Na stronie httpdatagovmo na znale wiele oficjalnych zestawie statystycznych) Wydaje si e te warto ci po-winny adnie si prze o y na kartogram produkcji rolnej
Dane z pliku wczytamy za pomoc funkcji d3csv()
d3csv(us-ag-productivity-2004csv function(data)
Teraz (zanim zapomn ) w funkcji zwrotnej zdefiniuj parametr color dziedziny warto ciwej ciowych skali kwantuj cej
colordomain([ d3min(data function(d) return dvalue ) d3max(data function(d) return dvalue )])
Kup książkę Poleć książkę
216 Rozdzia 12 Mapy geograficzne
W kodzie tym pojawiaj si funkcje d3min() i d3max() pozwalaj ce wyznaczy i zwroacutecinajmniejsz i najwi ksz warto dzi ki czemu dziedzina b dzie wyznaczana dynamicznie
Nast pnie wczytamy dane JSON mdash t cz operacji przeprowadzimy tak jak poprzednioG oacutewna roacute nica i nowo polega na tym e tym razem chc w czy dane dotycz ce rolnictwado danych GeoJSON Dlaczego Poniewa do znacznika mo na do cza tylko jeden zestawdanych naraz Zdecydowanie potrzebujemy danych GeoJSON bo na ich podstawie tworzones cie ki ale jednocze nie potrzebujemy te danych dotycz cych upraw Gdyby zatemuda o si po czy je w jedn monstrualn tablic wtedy mogliby my podpi ca o podznaczniki path (Istnieje kilka sposoboacutew rozwi zania tego problemu mdash jak zawsze prezentujswoj ulubion metod )
d3json(us-statesjson function(json) czy dane rolnicze z danymi GeoJSON Sprawdza w p tli raz ca y zestaw danych rolniczych for (var i = 0 i lt datalength i++) Pobiera nazw stanu var dataState = data[i]state Pobiera warto danych i przekszta ca j na liczb zmiennoprzecinkow var dataValue = parseFloat(data[i]value) Odnajduje odpowiedni stan w danych GeoJSON for (var j = 0 j lt jsonfeatureslength j++) var jsonState = jsonfeatures[j]propertiesname if (dataState == jsonState) Kopiuje dane do zmiennej JSON jsonfeatures[j]propertiesvalue = dataValue Przestaje przeszukiwa JSON break
Przyjrzyj si uwa nie przytoczonemu fragmentowi kodu Zasadniczo zaproponowane roz-wi zanie polega na tym by dla ka dego stanu odnale dane GeoJSON opatrzone t samnazw (na przyk ad Colorado) Gdy to si uda pobierzemy warto ci danych zapisanych dlaka dego stanu i dodamy je do jsonfeatures[j]propertiesvalue W ten sposoacuteb b done po czone ze znacznikiem i dost pne poacute niej gdy b dziemy ich potrzebowa
Wreszcie w ten sam sposoacuteb co ostatnio przygotujemy cie ki przy czym tym razem wartofunkcji style() b dziemy przypisywa dynamicznie
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path) style(fill function(d) Pobiera warto ci danych var value = dpropertiesvalue if (value) Je li warto istnieje return color(value) else Je li warto jest niezdefiniowana return ccc )
Kup książkę Poleć książkę
Dodawanie punktoacutew 217
Teraz ka da ze cie ek zostanie wype niona innym kolorem a nie jak mia o to miejsce po-przednio gdy wszystkie wype nili my barw steelblue Problem polega na tym e niedysponujemy danymi ze wszystkich stanoacutew Zestawienie ktoacuterym si pos u y em nie obej-mowa o Alaski Dystryktu Kolumbii Hawajoacutew i Portoryko (ktoacutere wprawdzie nie jest stanemale jest uwzgl dnione w danych GeoJSON i pojawia si w odwzorowaniu)
Aby poradzi sobie jako z tymi wyj tkami doda em do kodu warunek logiczny mdash instrukcjif() ktoacutera sprawdza czy dla danego stanu warto danych zosta a zdefiniowana Je li daneistniej zwracana jest funkcja color(value) co oznacza e mog przekaza dane do skalikwantuj cej i otrzyma w wyniku tego kod koloru Dla warto ci niezdefiniowanych ustali emdomy ln warto koloru ccc co odpowiada delikatnej szaro ci
Pi knie Spoacutejrz tylko na wyniki widoczne na rysunku 125 Sprawd jak prezentuje si kodi sproacutebuj z nim swoich si Znajdziesz go w pliku 05_choroplethhtml
Rysunek 125 Kartogram przedstawiaj cy poziom produkcji rolnej w poszczegoacutelnych stanach
Dodawanie punktoacutewMi o by oby zaznaczy na mapie cho kilka miast by nada grafice dok adniejszy kontekstprawda Warto by oby te znaczy ile jest du ych obszaroacutew g sto zaludnionych w stanacho najwy szym (i najni szym) poziomie produktywno ci rolnej Zaczniemy znoacutew od znale-zienia odpowiednich danych
Na szcz cie niedawno mieli my znoacutew spis powszechny (Na to id nasze podatki) Otopocz tek nieobrobionego pliku CSV zawieraj cego roczne szacunkowe zestawienie liczbyludno ci miast powy ej 50 000 mieszka coacutew (plik dost pny pod adresem httpwwwcensusgovpopestdatacitiestotals2011tablesSUB-EST2011-01csv)
table with row headers in column A and column headers in rows 3 through 4Table 1 Annual Estimates of the Resident Population for Incorporated PlacesOver 50000 Ranked by July 1 2011 Population April 1 2010 to July 1 2011RankGeographic AreaApril 1 2010Population Estimate (as of July 1)PlaceStateCensusEstimates Base201020111New York cityNew York81751338175133818644382449102Los Angeles cityCalifornia37926213792625379576138197023Chicago cityIllinois2695598269559826982832707120
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
Spis tre ci 7
10 Interaktywno 177Dowi zywanie funkcji nas uchuj cych zdarze 177Poznajmy zachowania 178
Najed kursorem eby wyroacute ni 179Grupowanie znacznikoacutew SVG 182
Sortowanie klikni ciem 184Podpowiedzi 187
Domy lne podpowiedzi przegl darki 188Podpowiedzi wy wietlane w znacznikach SVG 189Podpowiedzi wy wietlane w znacznikach div 191
Urz dzenia dotykowe 193Pora rusza dalej 193
11 Uk ady wykresoacutew 195Uk ad ko owy 196Uk ad skumulowany 200Uk ad si owy 203
12 Mapy geograficzne 209Poznaj GeoJSON 209cie ki 211
Odwzorowania 212Kartogram 214Dodawanie punktoacutew 217Pobieranie danych geograficznych i ich parsowanie 221
Znajd pliki kszta toacutew 221Wybierz rozdzielczo 221Upraszczanie kszta toacutew 223Konwersja do GeoJSON 223
13 Eksportowanie 227Mapy bitowe 227Plik PDF 228SVG 229
A Dalsza nauka 233
Skorowidz 237
Kup książkę Poleć książkę
8 Spis tre ci
Kup książkę Poleć książkę
209
ROZDZIA 12
Mapy geograficzne
Wykresy s upkowe wykresy punktowe wykresy ko owe a nawet wykresy si owehellip bdquoWszystkoto bardzo pi knie mdash my lisz sobie mdash ale przejd my ju w ko cu do maprdquo
Poznaj GeoJSONStandard JSON ju znasz pora zaznajomi si teraz z GeoJSON czyli bazuj cym na formacieJSON standardzie zapisywania danych geograficznych na potrzeby aplikacji internetowychGeoJSON nie jest niczym nowym a jedynie wysoce wyspecjalizowan metod stosowania JSON
Zanim jednak przejdziemy do generowania map musimy w jaki sposoacuteb zdoby dane znacz-nika path (czyli konturu) kszta tu ktoacutery b dziemy chcieli wy wietli Zaczniemy od najprost-szego przyk adu mdash odwzorowania granic Stanoacutew Zjednoczonych W katalogu z kodami przy-k adoacutew znajdziesz plik us-statesjson ktoacutery zosta pobrany bezpo rednio z jednego z licznychprzyk adoacutew na stronie D3 w zwi zku z czym jeste my winni Mikersquoowi Bostockowi gor cepodzi kowania za przygotowanie takich adnych i starannych granic Stanoacutew
Po otwarciu pliku us-statesjson zobaczysz co co przypomina nieco ten kod (cho tu pre-zentuj wersj sformatowan i bardzo skroacutecon )
typeFeatureCollection features[ typeFeature id01 propertiesnameAlabama geometry typePolygon coordinates[[[-873592963500118] [-8560667534984749][-8543141334124869] [-8518495132859696][-8518495132859696] [-8496039732421541][-8500421232322956] [-8488919632262709][-850589813213674] ]] type Feature id 02 properties name Alaska
Kup książkę Poleć książkę
210 Rozdzia 12 Mapy geograficzne
geometry type MultiPolygon coordinates [[[[-13160202155117982] [-1315691595528229][-13135555855183705] [-131388425501392][-13164583655035827] [-13160202155117982]]][[[-1318320525542469] [-13164583655304197][-13174989855128935] [-13183205255189182] ]]]
Dane jak to w stylu GeoJSON s zapisane w jednym wielkim obiekcie (Nawiasy klamrowepami tasz) W obiekcie znajdziemy deklaracj typu type FeatureCollecion Po typie po-jawia si pole features ktoacutere przechowuje tablic pojedynczych obiektoacutew typu FeatureKa dy z nich odpowiada jednemu ze stanoacutew Nazwa stanu jest podana w polu properties
Jednak sedno ka dego pliku GeoJSON le y w polu geometry Tam w a nie pojawiaj si de-finicja typu (type) oraz wspoacute rz dne (coordinates) okre laj ce kontur danego elementu Polecoordinates przechowuje szeroko ci i d ugo ci geograficzne zapisane parami w ma ych dwu-warto ciowych tablicach Przetwarzanie i udoskonalanie tych warto ci stanowi sens ycia ka -dego kartografa Pokolenia badaczy i podroacute nikoacutew po wi ca y swoacutej czas by zgromadzi tenzbioacuter i za to powinni my by im wdzi czni Liczby te cho mo e niepozorne kryj w sobieprawdziw moc
Warto te zaznaczy e w danych GeoJSON jako pierwsz podaje si zawsze d ugo geogra-ficzn Mimo e jeste my przyzwyczajeni do zapisu w ktoacuterym najpierw wymienia si szero-ko a potem d ugo w wiecie GeoJSON obowi zuje odwrotny porz dek
I jeszcze ma a ci ga na wypadek gdyby odroacute nianie d ugo ci od szeroko ci geograficznejstanowi o dla Ciebie problem
D ugo geograficzna jak nazwa wskazuje jest d uga Jej linie (po udniki) biegn pionowo(z poacute nocy na po udnie) jakby zwiesza y si z goacutery na doacute
Szeroko geograficzna jest szeroka Jej linie (roacutewnole niki) rozci gaj si poziomo jakbystara y si obj Ziemi w pasie
Roacutewnole niki i po udniki tworz razem ogromn sie obejmuj c ca kul ziemsk Na naszeszcz cie wspoacute rz dne mo na atwo przeliczy na pary x i y ktoacutere z kolei pozwalaj wy-wietla wszystko bez wi kszych problemoacutew na ekranie komputera Gdy rysowali my wy-
kres s upkowy warto ci danych odwzorowywali my na warto ci na ekranie mdash przeliczali myliczby na wysoko prostok toacutew W przypadku tworzenia map geograficznych te generu-jemy odwzorowania mdash pary d ugo i szeroko przechodz w pary x i y Jednocze nie ope-rowanie zmiennymi x i y pozwala w atwy sposoacuteb omin niewygodny problem kolejno cid ugo ci i szeroko ci podanych odwrotnie
Get Lat+Lon (httptecznocomsquares12378043-1222712) to doskona e narz dzieautorstwa Micha a Migurskiego dzi ki ktoacuteremu z atwo ci sprawdzisz czy podanewspoacute rz dne geograficzne s na pewno poprawne Trzymaj t stron otwart w oknieprzegl darki przez ca y czas gdy pracujesz nad mapami zagl da si do niej bowiembardzo cz sto
Kup książkę Poleć książkę
cie ki 211
cie kiMamy ju dane geograficzne Pora co z nimi zrobi
Przede wszystkim nale y zdefiniowa generator cie ek
var path = d3geopath()
Mog z czystym sumieniem powiedzie e d3geopath() to funkcja ratuj ca ycie To onaprzek ada ba agan z pliku GeoJSON na jeszcze bardziej nieporz dny zapis ze znacznikoacutewpath Oddajmy cze d3geopath()
Mogliby my oczywi cie wklei kod GeoJSON bezpo rednio do pliku HTML ale fuj tylewspoacute rz dnych i nawiasoacutew klamrowych Co za ba agan Znacznie porz dniej b dzie gdyzastosujemy bardziej tradycyjne podej cie czyli pozostawimy dane geograficzne w osobnympliku i wczytamy jego zawarto za pomoc funkcji d3json()
d3json(us-statesjson function(json) svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path))
Funkcja d3json() przyjmuje dwa argumenty Pierwszy to zmienna a cuchowa okre laj cacie k dost pu do pliku ktoacuterego zawarto nale y wczyta drugi za to funkcja zwrotna
uruchamiana dopiero po wczytaniu i sparsowaniu zawarto ci pliku JSON (Wi cej na tematfunkcji zwrotnych znajdziesz w ramce bdquoObs uga b doacutew wczytywania danychrdquo z rozdzia u 5)Funkcja d3json() podobnie jak d3csv() jest asynchroniczna a zatem nie wstrzymuje wy-konywania pozosta ej cz ci kodu na czas wczytywania danych z pliku Oznacza to e kodumieszczony po wywo aniu funkcji zwrotnej b dzie w rzeczywisto ci wykonany przed jej cia em
d3json(someFilejson function(json) Tu umie kod zale ny od danych z pliku JSON)
Tu umie tylko te instrukcje ktoacutere nie potrzebuj do pracy zawarto ci pliku JSONconsolelog(Lubi koty)
Dlatego zapami taj podczas korzystania z zewn trznych roacutede danych kod ktoacuterego wyko-nanie zale y od zawarto ci tych roacutede musi si zawsze znale wewn trz funkcji zwrotnej(Mo esz te rozbi go na mniejsze porcje ktoacutere zapiszesz we w asnych funkcjach i dopiero jewywo asz w ciele funkcji zwrotnej)
Wroacute my jednak do przyk adu Pora powi za w a ciwo ci pobrane z pliku GeoJSON z no-wymi znacznikami path Podany kod tworzy osobn cie k dla ka dej z cech
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path)
Zauwa e ostatni wiersz mdash ten w ktoacuterym zmienna d (atrybut przechowuj cy dane znacznikapath) jest przekazywana do generatora cie ek mdash po prostu pobiera wszystkie dane z plikui przelicza je na kod SVG Wynik jest widoczny na rysunku 121
Kup książkę Poleć książkę
212 Rozdzia 12 Mapy geograficzne
Rysunek 121 Pierwsze zetkni cie z danymi GeoJSON
Mapa To zbyt proste by by o mo liwe Aby sprawdzi czy uzyskasz ten sam efekt otwoacuterzplik 01_pathshtml Dalsze dzia ania b d mia y na celu wy cznie dostosowanie mapy do na-szych potrzeb
Je li interesuj Ci zagadnienia zwi zane z prac ze cie kami i ich generatoramipolecam Ci zapoznanie si z dokumentacj (httpsgithubcommbostockd3wikiGeo-Paths)
OdwzorowaniaNiew tpliwie rzuci o Ci si w oczy e mapa nie przedstawia ca ych Stanoacutew ZjednoczonychAby naprawi to niedoci gni cie musimy zmieni u ywane odwzorowanie
Czym jest odwzorowanie Z pewno ci nie usz o Twojej uwadze tak e to e Ziemia jest kuli-sta a nie p aska Wszystkie kuliste obiekty s troacutejwymiarowe co znacznie utrudnia przed-stawianie ich na powierzchniach dwuwymiarowych Odwzorowanie jest algorytmem kom-promisu to metoda pozwalaj ca rzutowa troacutejwymiarow przestrze na dwuwymiarowp aszczyzn
Biblioteka D3 pozwala definiowa mechanizmy rzutowania za pomoc wygl daj cej znajomokonstrukcji
var projection = d3geoalbersUsa() translate([w2 h2])
Biblioteka pozwala korzysta z kilku dost pnych w niej algorytmoacutew rzutowania Odwzoro-wanie Albersa jest rzutem z o onym przygotowanym tak by na mapie zmie ci y si tak eAlaska i Hawaje ktoacutere umieszcza si pod po udniowo-zachodnim wybrze em Stanoacutew Zjed-noczonych (zaraz zobaczysz jak to wygl da) To w a nie albersUsa jest domy lnym odwzo-rowaniem u ywanym przez funkcj d3pathgeo() Teraz gdy okre lili my je ju jawniemo emy dodatkowo poda kilka opcji z jakimi mia oby by wykorzystywane jak cho by war-to przesuni cia Z przytoczonej instrukcji wynika e przesuwamy odwzorowanie w kie-runku rodka obrazu (o po ow szeroko ci i o po ow wysoko ci)
Kup książkę Poleć książkę
Odwzorowania 213
Drug zmian jak zrobimy b dzie jawne za danie od generatora cie ek by wszystkiecie ki wyznacza w odniesieniu do wskazanego wcze niej w asnego odwzorowania
var path = d3geopath() projection(projection)
W ten sposoacuteb otrzymali my map przedstawion na rysunku 122 Powoli zbli amy si do celuKod znajdziesz w pliku 02_projectionhtml
Rysunek 122 Te same dane GeoJSON ale przy wy rodkowaniu rzutu
Mo emy te doda do odwzorowania metod scale() eby zmniejszy nieco map i osi gntym samym wynik przedstawiony na rysunku 123
var projection = d3geoalbersUsa() translate([w2 h2]) scale([500])
Rysunek 123 Mapa Stanoacutew Zjednoczonych mdash przeskalowana i wy rodkowana tak by mie ci a siw obszarze obrazu
Domy ln warto ci skalowania jest 1000 Mniejsze liczby zmniejszaj map a wi ksze po-wi kszaj
Kup książkę Poleć książkę
214 Rozdzia 12 Mapy geograficzne
Doskonale Je li otworzysz w przegl darce plik 03_scaledhtml przekonasz si e wszystkodzia a
Wystarczy doda jedn instrukcj style() eby zmieni kolor wype nienia cie ek na jakimniej przygn biaj cy S dz e niebieski widoczny na rysunku 124 nie jest brzydki
Rysunek 124 Niebieski jest zdecydowanie lepszy
Ca y kod znajdziesz w pliku 04_fillhtml W ten sam sposoacuteb mo na zdefiniowa kolor i szero-ko p dzla obramowania
Funkcje rzutuj ce ktoacutere pozwalaj uzyskiwa roacute nego rodzaju odwzorowania kartograficz-ne to niezwykle pot ne algorytmy Warto wiedzie e nie ma odwzorowa uniwersalnychmdash zmienia si je w zale no ci od tego jakich informacji potrzebujemy i o ktoacuter cz wiatachodzi (inaczej odwzorowuje si bieguny a inaczej okolice roacutewnika)
Zas ug g oacutewnie Jasona Daviesa (httpwwwjasondaviescom) jest to e dodatki do biblioteki D3odpowiedzialne za przygotowanie odwzorowa kartograficznych oferuj dzi u ytkownikomniemal wszystkie znane nam rodzaje rzutoacutew Szczegoacute owy opis pracy z rzutami znajdziesz w do-kumentacji (httpsgithubcommbostockd3wikiGeo-Projections) Warto te zapozna si z poroacutewna-niem przedstawiaj cym w a ciwo ci poszczegoacutelnych rzutoacutew (httpblocksorgmbostock3711652)
KartogramKarto co To s owo ktoacuterego nie s yszy si na co dzie okre la map na ktoacuterej ca e obszaryzosta y wype nione roacute nymi odcieniami (jasnymi lub ciemnymi) czy te roacute nymi kolorami takby odda rozk ad powi zanych z oznaczeniami warto ci W Stanach Zjednoczonych szcze-goacutelnie w okresie wyboroacutew cz sto spotyka si kartogramy okre lane mianem bdquoczerwonychi niebieskich stanoacutewrdquo Na mapach tych zaznacza si odpowiednim kolorem przewag popar-cia dla kandydatoacutew Partii Demokratycznej b d Partii Republika skiej Ale kartogramy wy-konuje si z roacute nych przyczyn niekoniecznie politycznych
Takie odwzorowania ciesz si chyba najwi ksz popularno ci w roacuted u ytkownikoacutew D3Pami taj jednak e cho kartogramy potrafi by niezwykle pomocne to maj jednak po-wa ne ograniczenia Poniewa na tego rodzaju mapach warto ci odwzorowuje si na pewnejpowierzchni atwo mo e doj do niezamierzonego przek amania du e powierzchnie o niskiej
Kup książkę Poleć książkę
Kartogram 215
g sto ci danej wielko ci (na przyk ad stan Nevada) mog sprawia wra enie bardziej istot-nych ni s w rzeczywisto ci Typowy kartogram nie oddaje dobrze warto ci liczonych bdquonag ow rdquo bo na przyk ad Nevada jest zbyt du a a Delaware zbyt ma y Jednocze nie karto-gram zachowuje geografi miejsca oraz mdash jak na map mdash wygl da naprawd imponuj coZobaczmy zatem co da si z tym zrobi (Kod znajdziesz w pliku 05_choroplethhtml)
Po pierwsze zdefiniuj funkcj skaluj c ktoacutera pobierze warto ci liczbowe a zwroacuteci koloryNa tym w a nie polega w du ej mierze praca nad kartogramem
var color = d3scalequantize() range([rgb(237248233) rgb(186228179)rgb(116196118)rgb(4916384)rgb(010944)])
Funkcja quantize jest zaliczana do grupy skal liniowych ale wynikiem jej dzia ania jest zbioacuterwarto ci dyskretnych Warto ciami wyj ciowymi mog by liczby kolory (jak w tym przy-padku) czy cokolwiek innego co uznasz za odpowiednie Funkcja ta przydaje si bardzo je lichcesz podzieli zbioacuter warto ci na grupy W omawianym przypadku zdecydowa em si utwo-rzy pi grup docelowych ale ich liczba nie jest w aden sposoacuteb formalnie ograniczona
Zauwa e okre li em tu zbioacuter warto ci wyj ciowych natomiast nie napisa em nic na tematdziedziny (Czekam a wczytaj si dane) Kolory ktoacuterymi si pos u y em pochodz z plikucolorbrewerjs dost pnego pod adresem httpsgithubcommbostockd3treemasterlibcolorbrewerRepozytorium to zawiera sporych rozmiaroacutew zbioacuter barw dobranych przez Cynthi Brewerna podstawie prowadzonych przez ni bada
Pora wczyta jakie dane Zawczasu przygotowa em plik us-ag-productivity-2004csv w ktoacuterymznajdziesz dane u o one w nast puj cy sposoacuteb
statevalueAlabama11791Arkansas13705Arizona13847California17979Colorado10325Connecticut13209Delaware14345
Dane te udost pnione przez Departament Rolnictwa Stanoacutew Zjednoczonych zawieraj in-formacje na temat produkcji rolnej w poszczegoacutelnych stanach w 2004 roku Dane liczboweprzedstawiaj wyniki wzgl dne wyznaczane dla linii bazowej jak by a produkcja rolnaw Alabamie w 1996 roku (10) Wi ksze od jedynki warto ci nale y zatem rozumie jakowy szy poziom produkcji p odoacutew rolnych a mniejsze jako ni szy (Na stronie httpdatagovmo na znale wiele oficjalnych zestawie statystycznych) Wydaje si e te warto ci po-winny adnie si prze o y na kartogram produkcji rolnej
Dane z pliku wczytamy za pomoc funkcji d3csv()
d3csv(us-ag-productivity-2004csv function(data)
Teraz (zanim zapomn ) w funkcji zwrotnej zdefiniuj parametr color dziedziny warto ciwej ciowych skali kwantuj cej
colordomain([ d3min(data function(d) return dvalue ) d3max(data function(d) return dvalue )])
Kup książkę Poleć książkę
216 Rozdzia 12 Mapy geograficzne
W kodzie tym pojawiaj si funkcje d3min() i d3max() pozwalaj ce wyznaczy i zwroacutecinajmniejsz i najwi ksz warto dzi ki czemu dziedzina b dzie wyznaczana dynamicznie
Nast pnie wczytamy dane JSON mdash t cz operacji przeprowadzimy tak jak poprzednioG oacutewna roacute nica i nowo polega na tym e tym razem chc w czy dane dotycz ce rolnictwado danych GeoJSON Dlaczego Poniewa do znacznika mo na do cza tylko jeden zestawdanych naraz Zdecydowanie potrzebujemy danych GeoJSON bo na ich podstawie tworzones cie ki ale jednocze nie potrzebujemy te danych dotycz cych upraw Gdyby zatemuda o si po czy je w jedn monstrualn tablic wtedy mogliby my podpi ca o podznaczniki path (Istnieje kilka sposoboacutew rozwi zania tego problemu mdash jak zawsze prezentujswoj ulubion metod )
d3json(us-statesjson function(json) czy dane rolnicze z danymi GeoJSON Sprawdza w p tli raz ca y zestaw danych rolniczych for (var i = 0 i lt datalength i++) Pobiera nazw stanu var dataState = data[i]state Pobiera warto danych i przekszta ca j na liczb zmiennoprzecinkow var dataValue = parseFloat(data[i]value) Odnajduje odpowiedni stan w danych GeoJSON for (var j = 0 j lt jsonfeatureslength j++) var jsonState = jsonfeatures[j]propertiesname if (dataState == jsonState) Kopiuje dane do zmiennej JSON jsonfeatures[j]propertiesvalue = dataValue Przestaje przeszukiwa JSON break
Przyjrzyj si uwa nie przytoczonemu fragmentowi kodu Zasadniczo zaproponowane roz-wi zanie polega na tym by dla ka dego stanu odnale dane GeoJSON opatrzone t samnazw (na przyk ad Colorado) Gdy to si uda pobierzemy warto ci danych zapisanych dlaka dego stanu i dodamy je do jsonfeatures[j]propertiesvalue W ten sposoacuteb b done po czone ze znacznikiem i dost pne poacute niej gdy b dziemy ich potrzebowa
Wreszcie w ten sam sposoacuteb co ostatnio przygotujemy cie ki przy czym tym razem wartofunkcji style() b dziemy przypisywa dynamicznie
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path) style(fill function(d) Pobiera warto ci danych var value = dpropertiesvalue if (value) Je li warto istnieje return color(value) else Je li warto jest niezdefiniowana return ccc )
Kup książkę Poleć książkę
Dodawanie punktoacutew 217
Teraz ka da ze cie ek zostanie wype niona innym kolorem a nie jak mia o to miejsce po-przednio gdy wszystkie wype nili my barw steelblue Problem polega na tym e niedysponujemy danymi ze wszystkich stanoacutew Zestawienie ktoacuterym si pos u y em nie obej-mowa o Alaski Dystryktu Kolumbii Hawajoacutew i Portoryko (ktoacutere wprawdzie nie jest stanemale jest uwzgl dnione w danych GeoJSON i pojawia si w odwzorowaniu)
Aby poradzi sobie jako z tymi wyj tkami doda em do kodu warunek logiczny mdash instrukcjif() ktoacutera sprawdza czy dla danego stanu warto danych zosta a zdefiniowana Je li daneistniej zwracana jest funkcja color(value) co oznacza e mog przekaza dane do skalikwantuj cej i otrzyma w wyniku tego kod koloru Dla warto ci niezdefiniowanych ustali emdomy ln warto koloru ccc co odpowiada delikatnej szaro ci
Pi knie Spoacutejrz tylko na wyniki widoczne na rysunku 125 Sprawd jak prezentuje si kodi sproacutebuj z nim swoich si Znajdziesz go w pliku 05_choroplethhtml
Rysunek 125 Kartogram przedstawiaj cy poziom produkcji rolnej w poszczegoacutelnych stanach
Dodawanie punktoacutewMi o by oby zaznaczy na mapie cho kilka miast by nada grafice dok adniejszy kontekstprawda Warto by oby te znaczy ile jest du ych obszaroacutew g sto zaludnionych w stanacho najwy szym (i najni szym) poziomie produktywno ci rolnej Zaczniemy znoacutew od znale-zienia odpowiednich danych
Na szcz cie niedawno mieli my znoacutew spis powszechny (Na to id nasze podatki) Otopocz tek nieobrobionego pliku CSV zawieraj cego roczne szacunkowe zestawienie liczbyludno ci miast powy ej 50 000 mieszka coacutew (plik dost pny pod adresem httpwwwcensusgovpopestdatacitiestotals2011tablesSUB-EST2011-01csv)
table with row headers in column A and column headers in rows 3 through 4Table 1 Annual Estimates of the Resident Population for Incorporated PlacesOver 50000 Ranked by July 1 2011 Population April 1 2010 to July 1 2011RankGeographic AreaApril 1 2010Population Estimate (as of July 1)PlaceStateCensusEstimates Base201020111New York cityNew York81751338175133818644382449102Los Angeles cityCalifornia37926213792625379576138197023Chicago cityIllinois2695598269559826982832707120
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
8 Spis tre ci
Kup książkę Poleć książkę
209
ROZDZIA 12
Mapy geograficzne
Wykresy s upkowe wykresy punktowe wykresy ko owe a nawet wykresy si owehellip bdquoWszystkoto bardzo pi knie mdash my lisz sobie mdash ale przejd my ju w ko cu do maprdquo
Poznaj GeoJSONStandard JSON ju znasz pora zaznajomi si teraz z GeoJSON czyli bazuj cym na formacieJSON standardzie zapisywania danych geograficznych na potrzeby aplikacji internetowychGeoJSON nie jest niczym nowym a jedynie wysoce wyspecjalizowan metod stosowania JSON
Zanim jednak przejdziemy do generowania map musimy w jaki sposoacuteb zdoby dane znacz-nika path (czyli konturu) kszta tu ktoacutery b dziemy chcieli wy wietli Zaczniemy od najprost-szego przyk adu mdash odwzorowania granic Stanoacutew Zjednoczonych W katalogu z kodami przy-k adoacutew znajdziesz plik us-statesjson ktoacutery zosta pobrany bezpo rednio z jednego z licznychprzyk adoacutew na stronie D3 w zwi zku z czym jeste my winni Mikersquoowi Bostockowi gor cepodzi kowania za przygotowanie takich adnych i starannych granic Stanoacutew
Po otwarciu pliku us-statesjson zobaczysz co co przypomina nieco ten kod (cho tu pre-zentuj wersj sformatowan i bardzo skroacutecon )
typeFeatureCollection features[ typeFeature id01 propertiesnameAlabama geometry typePolygon coordinates[[[-873592963500118] [-8560667534984749][-8543141334124869] [-8518495132859696][-8518495132859696] [-8496039732421541][-8500421232322956] [-8488919632262709][-850589813213674] ]] type Feature id 02 properties name Alaska
Kup książkę Poleć książkę
210 Rozdzia 12 Mapy geograficzne
geometry type MultiPolygon coordinates [[[[-13160202155117982] [-1315691595528229][-13135555855183705] [-131388425501392][-13164583655035827] [-13160202155117982]]][[[-1318320525542469] [-13164583655304197][-13174989855128935] [-13183205255189182] ]]]
Dane jak to w stylu GeoJSON s zapisane w jednym wielkim obiekcie (Nawiasy klamrowepami tasz) W obiekcie znajdziemy deklaracj typu type FeatureCollecion Po typie po-jawia si pole features ktoacutere przechowuje tablic pojedynczych obiektoacutew typu FeatureKa dy z nich odpowiada jednemu ze stanoacutew Nazwa stanu jest podana w polu properties
Jednak sedno ka dego pliku GeoJSON le y w polu geometry Tam w a nie pojawiaj si de-finicja typu (type) oraz wspoacute rz dne (coordinates) okre laj ce kontur danego elementu Polecoordinates przechowuje szeroko ci i d ugo ci geograficzne zapisane parami w ma ych dwu-warto ciowych tablicach Przetwarzanie i udoskonalanie tych warto ci stanowi sens ycia ka -dego kartografa Pokolenia badaczy i podroacute nikoacutew po wi ca y swoacutej czas by zgromadzi tenzbioacuter i za to powinni my by im wdzi czni Liczby te cho mo e niepozorne kryj w sobieprawdziw moc
Warto te zaznaczy e w danych GeoJSON jako pierwsz podaje si zawsze d ugo geogra-ficzn Mimo e jeste my przyzwyczajeni do zapisu w ktoacuterym najpierw wymienia si szero-ko a potem d ugo w wiecie GeoJSON obowi zuje odwrotny porz dek
I jeszcze ma a ci ga na wypadek gdyby odroacute nianie d ugo ci od szeroko ci geograficznejstanowi o dla Ciebie problem
D ugo geograficzna jak nazwa wskazuje jest d uga Jej linie (po udniki) biegn pionowo(z poacute nocy na po udnie) jakby zwiesza y si z goacutery na doacute
Szeroko geograficzna jest szeroka Jej linie (roacutewnole niki) rozci gaj si poziomo jakbystara y si obj Ziemi w pasie
Roacutewnole niki i po udniki tworz razem ogromn sie obejmuj c ca kul ziemsk Na naszeszcz cie wspoacute rz dne mo na atwo przeliczy na pary x i y ktoacutere z kolei pozwalaj wy-wietla wszystko bez wi kszych problemoacutew na ekranie komputera Gdy rysowali my wy-
kres s upkowy warto ci danych odwzorowywali my na warto ci na ekranie mdash przeliczali myliczby na wysoko prostok toacutew W przypadku tworzenia map geograficznych te generu-jemy odwzorowania mdash pary d ugo i szeroko przechodz w pary x i y Jednocze nie ope-rowanie zmiennymi x i y pozwala w atwy sposoacuteb omin niewygodny problem kolejno cid ugo ci i szeroko ci podanych odwrotnie
Get Lat+Lon (httptecznocomsquares12378043-1222712) to doskona e narz dzieautorstwa Micha a Migurskiego dzi ki ktoacuteremu z atwo ci sprawdzisz czy podanewspoacute rz dne geograficzne s na pewno poprawne Trzymaj t stron otwart w oknieprzegl darki przez ca y czas gdy pracujesz nad mapami zagl da si do niej bowiembardzo cz sto
Kup książkę Poleć książkę
cie ki 211
cie kiMamy ju dane geograficzne Pora co z nimi zrobi
Przede wszystkim nale y zdefiniowa generator cie ek
var path = d3geopath()
Mog z czystym sumieniem powiedzie e d3geopath() to funkcja ratuj ca ycie To onaprzek ada ba agan z pliku GeoJSON na jeszcze bardziej nieporz dny zapis ze znacznikoacutewpath Oddajmy cze d3geopath()
Mogliby my oczywi cie wklei kod GeoJSON bezpo rednio do pliku HTML ale fuj tylewspoacute rz dnych i nawiasoacutew klamrowych Co za ba agan Znacznie porz dniej b dzie gdyzastosujemy bardziej tradycyjne podej cie czyli pozostawimy dane geograficzne w osobnympliku i wczytamy jego zawarto za pomoc funkcji d3json()
d3json(us-statesjson function(json) svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path))
Funkcja d3json() przyjmuje dwa argumenty Pierwszy to zmienna a cuchowa okre laj cacie k dost pu do pliku ktoacuterego zawarto nale y wczyta drugi za to funkcja zwrotna
uruchamiana dopiero po wczytaniu i sparsowaniu zawarto ci pliku JSON (Wi cej na tematfunkcji zwrotnych znajdziesz w ramce bdquoObs uga b doacutew wczytywania danychrdquo z rozdzia u 5)Funkcja d3json() podobnie jak d3csv() jest asynchroniczna a zatem nie wstrzymuje wy-konywania pozosta ej cz ci kodu na czas wczytywania danych z pliku Oznacza to e kodumieszczony po wywo aniu funkcji zwrotnej b dzie w rzeczywisto ci wykonany przed jej cia em
d3json(someFilejson function(json) Tu umie kod zale ny od danych z pliku JSON)
Tu umie tylko te instrukcje ktoacutere nie potrzebuj do pracy zawarto ci pliku JSONconsolelog(Lubi koty)
Dlatego zapami taj podczas korzystania z zewn trznych roacutede danych kod ktoacuterego wyko-nanie zale y od zawarto ci tych roacutede musi si zawsze znale wewn trz funkcji zwrotnej(Mo esz te rozbi go na mniejsze porcje ktoacutere zapiszesz we w asnych funkcjach i dopiero jewywo asz w ciele funkcji zwrotnej)
Wroacute my jednak do przyk adu Pora powi za w a ciwo ci pobrane z pliku GeoJSON z no-wymi znacznikami path Podany kod tworzy osobn cie k dla ka dej z cech
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path)
Zauwa e ostatni wiersz mdash ten w ktoacuterym zmienna d (atrybut przechowuj cy dane znacznikapath) jest przekazywana do generatora cie ek mdash po prostu pobiera wszystkie dane z plikui przelicza je na kod SVG Wynik jest widoczny na rysunku 121
Kup książkę Poleć książkę
212 Rozdzia 12 Mapy geograficzne
Rysunek 121 Pierwsze zetkni cie z danymi GeoJSON
Mapa To zbyt proste by by o mo liwe Aby sprawdzi czy uzyskasz ten sam efekt otwoacuterzplik 01_pathshtml Dalsze dzia ania b d mia y na celu wy cznie dostosowanie mapy do na-szych potrzeb
Je li interesuj Ci zagadnienia zwi zane z prac ze cie kami i ich generatoramipolecam Ci zapoznanie si z dokumentacj (httpsgithubcommbostockd3wikiGeo-Paths)
OdwzorowaniaNiew tpliwie rzuci o Ci si w oczy e mapa nie przedstawia ca ych Stanoacutew ZjednoczonychAby naprawi to niedoci gni cie musimy zmieni u ywane odwzorowanie
Czym jest odwzorowanie Z pewno ci nie usz o Twojej uwadze tak e to e Ziemia jest kuli-sta a nie p aska Wszystkie kuliste obiekty s troacutejwymiarowe co znacznie utrudnia przed-stawianie ich na powierzchniach dwuwymiarowych Odwzorowanie jest algorytmem kom-promisu to metoda pozwalaj ca rzutowa troacutejwymiarow przestrze na dwuwymiarowp aszczyzn
Biblioteka D3 pozwala definiowa mechanizmy rzutowania za pomoc wygl daj cej znajomokonstrukcji
var projection = d3geoalbersUsa() translate([w2 h2])
Biblioteka pozwala korzysta z kilku dost pnych w niej algorytmoacutew rzutowania Odwzoro-wanie Albersa jest rzutem z o onym przygotowanym tak by na mapie zmie ci y si tak eAlaska i Hawaje ktoacutere umieszcza si pod po udniowo-zachodnim wybrze em Stanoacutew Zjed-noczonych (zaraz zobaczysz jak to wygl da) To w a nie albersUsa jest domy lnym odwzo-rowaniem u ywanym przez funkcj d3pathgeo() Teraz gdy okre lili my je ju jawniemo emy dodatkowo poda kilka opcji z jakimi mia oby by wykorzystywane jak cho by war-to przesuni cia Z przytoczonej instrukcji wynika e przesuwamy odwzorowanie w kie-runku rodka obrazu (o po ow szeroko ci i o po ow wysoko ci)
Kup książkę Poleć książkę
Odwzorowania 213
Drug zmian jak zrobimy b dzie jawne za danie od generatora cie ek by wszystkiecie ki wyznacza w odniesieniu do wskazanego wcze niej w asnego odwzorowania
var path = d3geopath() projection(projection)
W ten sposoacuteb otrzymali my map przedstawion na rysunku 122 Powoli zbli amy si do celuKod znajdziesz w pliku 02_projectionhtml
Rysunek 122 Te same dane GeoJSON ale przy wy rodkowaniu rzutu
Mo emy te doda do odwzorowania metod scale() eby zmniejszy nieco map i osi gntym samym wynik przedstawiony na rysunku 123
var projection = d3geoalbersUsa() translate([w2 h2]) scale([500])
Rysunek 123 Mapa Stanoacutew Zjednoczonych mdash przeskalowana i wy rodkowana tak by mie ci a siw obszarze obrazu
Domy ln warto ci skalowania jest 1000 Mniejsze liczby zmniejszaj map a wi ksze po-wi kszaj
Kup książkę Poleć książkę
214 Rozdzia 12 Mapy geograficzne
Doskonale Je li otworzysz w przegl darce plik 03_scaledhtml przekonasz si e wszystkodzia a
Wystarczy doda jedn instrukcj style() eby zmieni kolor wype nienia cie ek na jakimniej przygn biaj cy S dz e niebieski widoczny na rysunku 124 nie jest brzydki
Rysunek 124 Niebieski jest zdecydowanie lepszy
Ca y kod znajdziesz w pliku 04_fillhtml W ten sam sposoacuteb mo na zdefiniowa kolor i szero-ko p dzla obramowania
Funkcje rzutuj ce ktoacutere pozwalaj uzyskiwa roacute nego rodzaju odwzorowania kartograficz-ne to niezwykle pot ne algorytmy Warto wiedzie e nie ma odwzorowa uniwersalnychmdash zmienia si je w zale no ci od tego jakich informacji potrzebujemy i o ktoacuter cz wiatachodzi (inaczej odwzorowuje si bieguny a inaczej okolice roacutewnika)
Zas ug g oacutewnie Jasona Daviesa (httpwwwjasondaviescom) jest to e dodatki do biblioteki D3odpowiedzialne za przygotowanie odwzorowa kartograficznych oferuj dzi u ytkownikomniemal wszystkie znane nam rodzaje rzutoacutew Szczegoacute owy opis pracy z rzutami znajdziesz w do-kumentacji (httpsgithubcommbostockd3wikiGeo-Projections) Warto te zapozna si z poroacutewna-niem przedstawiaj cym w a ciwo ci poszczegoacutelnych rzutoacutew (httpblocksorgmbostock3711652)
KartogramKarto co To s owo ktoacuterego nie s yszy si na co dzie okre la map na ktoacuterej ca e obszaryzosta y wype nione roacute nymi odcieniami (jasnymi lub ciemnymi) czy te roacute nymi kolorami takby odda rozk ad powi zanych z oznaczeniami warto ci W Stanach Zjednoczonych szcze-goacutelnie w okresie wyboroacutew cz sto spotyka si kartogramy okre lane mianem bdquoczerwonychi niebieskich stanoacutewrdquo Na mapach tych zaznacza si odpowiednim kolorem przewag popar-cia dla kandydatoacutew Partii Demokratycznej b d Partii Republika skiej Ale kartogramy wy-konuje si z roacute nych przyczyn niekoniecznie politycznych
Takie odwzorowania ciesz si chyba najwi ksz popularno ci w roacuted u ytkownikoacutew D3Pami taj jednak e cho kartogramy potrafi by niezwykle pomocne to maj jednak po-wa ne ograniczenia Poniewa na tego rodzaju mapach warto ci odwzorowuje si na pewnejpowierzchni atwo mo e doj do niezamierzonego przek amania du e powierzchnie o niskiej
Kup książkę Poleć książkę
Kartogram 215
g sto ci danej wielko ci (na przyk ad stan Nevada) mog sprawia wra enie bardziej istot-nych ni s w rzeczywisto ci Typowy kartogram nie oddaje dobrze warto ci liczonych bdquonag ow rdquo bo na przyk ad Nevada jest zbyt du a a Delaware zbyt ma y Jednocze nie karto-gram zachowuje geografi miejsca oraz mdash jak na map mdash wygl da naprawd imponuj coZobaczmy zatem co da si z tym zrobi (Kod znajdziesz w pliku 05_choroplethhtml)
Po pierwsze zdefiniuj funkcj skaluj c ktoacutera pobierze warto ci liczbowe a zwroacuteci koloryNa tym w a nie polega w du ej mierze praca nad kartogramem
var color = d3scalequantize() range([rgb(237248233) rgb(186228179)rgb(116196118)rgb(4916384)rgb(010944)])
Funkcja quantize jest zaliczana do grupy skal liniowych ale wynikiem jej dzia ania jest zbioacuterwarto ci dyskretnych Warto ciami wyj ciowymi mog by liczby kolory (jak w tym przy-padku) czy cokolwiek innego co uznasz za odpowiednie Funkcja ta przydaje si bardzo je lichcesz podzieli zbioacuter warto ci na grupy W omawianym przypadku zdecydowa em si utwo-rzy pi grup docelowych ale ich liczba nie jest w aden sposoacuteb formalnie ograniczona
Zauwa e okre li em tu zbioacuter warto ci wyj ciowych natomiast nie napisa em nic na tematdziedziny (Czekam a wczytaj si dane) Kolory ktoacuterymi si pos u y em pochodz z plikucolorbrewerjs dost pnego pod adresem httpsgithubcommbostockd3treemasterlibcolorbrewerRepozytorium to zawiera sporych rozmiaroacutew zbioacuter barw dobranych przez Cynthi Brewerna podstawie prowadzonych przez ni bada
Pora wczyta jakie dane Zawczasu przygotowa em plik us-ag-productivity-2004csv w ktoacuterymznajdziesz dane u o one w nast puj cy sposoacuteb
statevalueAlabama11791Arkansas13705Arizona13847California17979Colorado10325Connecticut13209Delaware14345
Dane te udost pnione przez Departament Rolnictwa Stanoacutew Zjednoczonych zawieraj in-formacje na temat produkcji rolnej w poszczegoacutelnych stanach w 2004 roku Dane liczboweprzedstawiaj wyniki wzgl dne wyznaczane dla linii bazowej jak by a produkcja rolnaw Alabamie w 1996 roku (10) Wi ksze od jedynki warto ci nale y zatem rozumie jakowy szy poziom produkcji p odoacutew rolnych a mniejsze jako ni szy (Na stronie httpdatagovmo na znale wiele oficjalnych zestawie statystycznych) Wydaje si e te warto ci po-winny adnie si prze o y na kartogram produkcji rolnej
Dane z pliku wczytamy za pomoc funkcji d3csv()
d3csv(us-ag-productivity-2004csv function(data)
Teraz (zanim zapomn ) w funkcji zwrotnej zdefiniuj parametr color dziedziny warto ciwej ciowych skali kwantuj cej
colordomain([ d3min(data function(d) return dvalue ) d3max(data function(d) return dvalue )])
Kup książkę Poleć książkę
216 Rozdzia 12 Mapy geograficzne
W kodzie tym pojawiaj si funkcje d3min() i d3max() pozwalaj ce wyznaczy i zwroacutecinajmniejsz i najwi ksz warto dzi ki czemu dziedzina b dzie wyznaczana dynamicznie
Nast pnie wczytamy dane JSON mdash t cz operacji przeprowadzimy tak jak poprzednioG oacutewna roacute nica i nowo polega na tym e tym razem chc w czy dane dotycz ce rolnictwado danych GeoJSON Dlaczego Poniewa do znacznika mo na do cza tylko jeden zestawdanych naraz Zdecydowanie potrzebujemy danych GeoJSON bo na ich podstawie tworzones cie ki ale jednocze nie potrzebujemy te danych dotycz cych upraw Gdyby zatemuda o si po czy je w jedn monstrualn tablic wtedy mogliby my podpi ca o podznaczniki path (Istnieje kilka sposoboacutew rozwi zania tego problemu mdash jak zawsze prezentujswoj ulubion metod )
d3json(us-statesjson function(json) czy dane rolnicze z danymi GeoJSON Sprawdza w p tli raz ca y zestaw danych rolniczych for (var i = 0 i lt datalength i++) Pobiera nazw stanu var dataState = data[i]state Pobiera warto danych i przekszta ca j na liczb zmiennoprzecinkow var dataValue = parseFloat(data[i]value) Odnajduje odpowiedni stan w danych GeoJSON for (var j = 0 j lt jsonfeatureslength j++) var jsonState = jsonfeatures[j]propertiesname if (dataState == jsonState) Kopiuje dane do zmiennej JSON jsonfeatures[j]propertiesvalue = dataValue Przestaje przeszukiwa JSON break
Przyjrzyj si uwa nie przytoczonemu fragmentowi kodu Zasadniczo zaproponowane roz-wi zanie polega na tym by dla ka dego stanu odnale dane GeoJSON opatrzone t samnazw (na przyk ad Colorado) Gdy to si uda pobierzemy warto ci danych zapisanych dlaka dego stanu i dodamy je do jsonfeatures[j]propertiesvalue W ten sposoacuteb b done po czone ze znacznikiem i dost pne poacute niej gdy b dziemy ich potrzebowa
Wreszcie w ten sam sposoacuteb co ostatnio przygotujemy cie ki przy czym tym razem wartofunkcji style() b dziemy przypisywa dynamicznie
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path) style(fill function(d) Pobiera warto ci danych var value = dpropertiesvalue if (value) Je li warto istnieje return color(value) else Je li warto jest niezdefiniowana return ccc )
Kup książkę Poleć książkę
Dodawanie punktoacutew 217
Teraz ka da ze cie ek zostanie wype niona innym kolorem a nie jak mia o to miejsce po-przednio gdy wszystkie wype nili my barw steelblue Problem polega na tym e niedysponujemy danymi ze wszystkich stanoacutew Zestawienie ktoacuterym si pos u y em nie obej-mowa o Alaski Dystryktu Kolumbii Hawajoacutew i Portoryko (ktoacutere wprawdzie nie jest stanemale jest uwzgl dnione w danych GeoJSON i pojawia si w odwzorowaniu)
Aby poradzi sobie jako z tymi wyj tkami doda em do kodu warunek logiczny mdash instrukcjif() ktoacutera sprawdza czy dla danego stanu warto danych zosta a zdefiniowana Je li daneistniej zwracana jest funkcja color(value) co oznacza e mog przekaza dane do skalikwantuj cej i otrzyma w wyniku tego kod koloru Dla warto ci niezdefiniowanych ustali emdomy ln warto koloru ccc co odpowiada delikatnej szaro ci
Pi knie Spoacutejrz tylko na wyniki widoczne na rysunku 125 Sprawd jak prezentuje si kodi sproacutebuj z nim swoich si Znajdziesz go w pliku 05_choroplethhtml
Rysunek 125 Kartogram przedstawiaj cy poziom produkcji rolnej w poszczegoacutelnych stanach
Dodawanie punktoacutewMi o by oby zaznaczy na mapie cho kilka miast by nada grafice dok adniejszy kontekstprawda Warto by oby te znaczy ile jest du ych obszaroacutew g sto zaludnionych w stanacho najwy szym (i najni szym) poziomie produktywno ci rolnej Zaczniemy znoacutew od znale-zienia odpowiednich danych
Na szcz cie niedawno mieli my znoacutew spis powszechny (Na to id nasze podatki) Otopocz tek nieobrobionego pliku CSV zawieraj cego roczne szacunkowe zestawienie liczbyludno ci miast powy ej 50 000 mieszka coacutew (plik dost pny pod adresem httpwwwcensusgovpopestdatacitiestotals2011tablesSUB-EST2011-01csv)
table with row headers in column A and column headers in rows 3 through 4Table 1 Annual Estimates of the Resident Population for Incorporated PlacesOver 50000 Ranked by July 1 2011 Population April 1 2010 to July 1 2011RankGeographic AreaApril 1 2010Population Estimate (as of July 1)PlaceStateCensusEstimates Base201020111New York cityNew York81751338175133818644382449102Los Angeles cityCalifornia37926213792625379576138197023Chicago cityIllinois2695598269559826982832707120
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
209
ROZDZIA 12
Mapy geograficzne
Wykresy s upkowe wykresy punktowe wykresy ko owe a nawet wykresy si owehellip bdquoWszystkoto bardzo pi knie mdash my lisz sobie mdash ale przejd my ju w ko cu do maprdquo
Poznaj GeoJSONStandard JSON ju znasz pora zaznajomi si teraz z GeoJSON czyli bazuj cym na formacieJSON standardzie zapisywania danych geograficznych na potrzeby aplikacji internetowychGeoJSON nie jest niczym nowym a jedynie wysoce wyspecjalizowan metod stosowania JSON
Zanim jednak przejdziemy do generowania map musimy w jaki sposoacuteb zdoby dane znacz-nika path (czyli konturu) kszta tu ktoacutery b dziemy chcieli wy wietli Zaczniemy od najprost-szego przyk adu mdash odwzorowania granic Stanoacutew Zjednoczonych W katalogu z kodami przy-k adoacutew znajdziesz plik us-statesjson ktoacutery zosta pobrany bezpo rednio z jednego z licznychprzyk adoacutew na stronie D3 w zwi zku z czym jeste my winni Mikersquoowi Bostockowi gor cepodzi kowania za przygotowanie takich adnych i starannych granic Stanoacutew
Po otwarciu pliku us-statesjson zobaczysz co co przypomina nieco ten kod (cho tu pre-zentuj wersj sformatowan i bardzo skroacutecon )
typeFeatureCollection features[ typeFeature id01 propertiesnameAlabama geometry typePolygon coordinates[[[-873592963500118] [-8560667534984749][-8543141334124869] [-8518495132859696][-8518495132859696] [-8496039732421541][-8500421232322956] [-8488919632262709][-850589813213674] ]] type Feature id 02 properties name Alaska
Kup książkę Poleć książkę
210 Rozdzia 12 Mapy geograficzne
geometry type MultiPolygon coordinates [[[[-13160202155117982] [-1315691595528229][-13135555855183705] [-131388425501392][-13164583655035827] [-13160202155117982]]][[[-1318320525542469] [-13164583655304197][-13174989855128935] [-13183205255189182] ]]]
Dane jak to w stylu GeoJSON s zapisane w jednym wielkim obiekcie (Nawiasy klamrowepami tasz) W obiekcie znajdziemy deklaracj typu type FeatureCollecion Po typie po-jawia si pole features ktoacutere przechowuje tablic pojedynczych obiektoacutew typu FeatureKa dy z nich odpowiada jednemu ze stanoacutew Nazwa stanu jest podana w polu properties
Jednak sedno ka dego pliku GeoJSON le y w polu geometry Tam w a nie pojawiaj si de-finicja typu (type) oraz wspoacute rz dne (coordinates) okre laj ce kontur danego elementu Polecoordinates przechowuje szeroko ci i d ugo ci geograficzne zapisane parami w ma ych dwu-warto ciowych tablicach Przetwarzanie i udoskonalanie tych warto ci stanowi sens ycia ka -dego kartografa Pokolenia badaczy i podroacute nikoacutew po wi ca y swoacutej czas by zgromadzi tenzbioacuter i za to powinni my by im wdzi czni Liczby te cho mo e niepozorne kryj w sobieprawdziw moc
Warto te zaznaczy e w danych GeoJSON jako pierwsz podaje si zawsze d ugo geogra-ficzn Mimo e jeste my przyzwyczajeni do zapisu w ktoacuterym najpierw wymienia si szero-ko a potem d ugo w wiecie GeoJSON obowi zuje odwrotny porz dek
I jeszcze ma a ci ga na wypadek gdyby odroacute nianie d ugo ci od szeroko ci geograficznejstanowi o dla Ciebie problem
D ugo geograficzna jak nazwa wskazuje jest d uga Jej linie (po udniki) biegn pionowo(z poacute nocy na po udnie) jakby zwiesza y si z goacutery na doacute
Szeroko geograficzna jest szeroka Jej linie (roacutewnole niki) rozci gaj si poziomo jakbystara y si obj Ziemi w pasie
Roacutewnole niki i po udniki tworz razem ogromn sie obejmuj c ca kul ziemsk Na naszeszcz cie wspoacute rz dne mo na atwo przeliczy na pary x i y ktoacutere z kolei pozwalaj wy-wietla wszystko bez wi kszych problemoacutew na ekranie komputera Gdy rysowali my wy-
kres s upkowy warto ci danych odwzorowywali my na warto ci na ekranie mdash przeliczali myliczby na wysoko prostok toacutew W przypadku tworzenia map geograficznych te generu-jemy odwzorowania mdash pary d ugo i szeroko przechodz w pary x i y Jednocze nie ope-rowanie zmiennymi x i y pozwala w atwy sposoacuteb omin niewygodny problem kolejno cid ugo ci i szeroko ci podanych odwrotnie
Get Lat+Lon (httptecznocomsquares12378043-1222712) to doskona e narz dzieautorstwa Micha a Migurskiego dzi ki ktoacuteremu z atwo ci sprawdzisz czy podanewspoacute rz dne geograficzne s na pewno poprawne Trzymaj t stron otwart w oknieprzegl darki przez ca y czas gdy pracujesz nad mapami zagl da si do niej bowiembardzo cz sto
Kup książkę Poleć książkę
cie ki 211
cie kiMamy ju dane geograficzne Pora co z nimi zrobi
Przede wszystkim nale y zdefiniowa generator cie ek
var path = d3geopath()
Mog z czystym sumieniem powiedzie e d3geopath() to funkcja ratuj ca ycie To onaprzek ada ba agan z pliku GeoJSON na jeszcze bardziej nieporz dny zapis ze znacznikoacutewpath Oddajmy cze d3geopath()
Mogliby my oczywi cie wklei kod GeoJSON bezpo rednio do pliku HTML ale fuj tylewspoacute rz dnych i nawiasoacutew klamrowych Co za ba agan Znacznie porz dniej b dzie gdyzastosujemy bardziej tradycyjne podej cie czyli pozostawimy dane geograficzne w osobnympliku i wczytamy jego zawarto za pomoc funkcji d3json()
d3json(us-statesjson function(json) svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path))
Funkcja d3json() przyjmuje dwa argumenty Pierwszy to zmienna a cuchowa okre laj cacie k dost pu do pliku ktoacuterego zawarto nale y wczyta drugi za to funkcja zwrotna
uruchamiana dopiero po wczytaniu i sparsowaniu zawarto ci pliku JSON (Wi cej na tematfunkcji zwrotnych znajdziesz w ramce bdquoObs uga b doacutew wczytywania danychrdquo z rozdzia u 5)Funkcja d3json() podobnie jak d3csv() jest asynchroniczna a zatem nie wstrzymuje wy-konywania pozosta ej cz ci kodu na czas wczytywania danych z pliku Oznacza to e kodumieszczony po wywo aniu funkcji zwrotnej b dzie w rzeczywisto ci wykonany przed jej cia em
d3json(someFilejson function(json) Tu umie kod zale ny od danych z pliku JSON)
Tu umie tylko te instrukcje ktoacutere nie potrzebuj do pracy zawarto ci pliku JSONconsolelog(Lubi koty)
Dlatego zapami taj podczas korzystania z zewn trznych roacutede danych kod ktoacuterego wyko-nanie zale y od zawarto ci tych roacutede musi si zawsze znale wewn trz funkcji zwrotnej(Mo esz te rozbi go na mniejsze porcje ktoacutere zapiszesz we w asnych funkcjach i dopiero jewywo asz w ciele funkcji zwrotnej)
Wroacute my jednak do przyk adu Pora powi za w a ciwo ci pobrane z pliku GeoJSON z no-wymi znacznikami path Podany kod tworzy osobn cie k dla ka dej z cech
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path)
Zauwa e ostatni wiersz mdash ten w ktoacuterym zmienna d (atrybut przechowuj cy dane znacznikapath) jest przekazywana do generatora cie ek mdash po prostu pobiera wszystkie dane z plikui przelicza je na kod SVG Wynik jest widoczny na rysunku 121
Kup książkę Poleć książkę
212 Rozdzia 12 Mapy geograficzne
Rysunek 121 Pierwsze zetkni cie z danymi GeoJSON
Mapa To zbyt proste by by o mo liwe Aby sprawdzi czy uzyskasz ten sam efekt otwoacuterzplik 01_pathshtml Dalsze dzia ania b d mia y na celu wy cznie dostosowanie mapy do na-szych potrzeb
Je li interesuj Ci zagadnienia zwi zane z prac ze cie kami i ich generatoramipolecam Ci zapoznanie si z dokumentacj (httpsgithubcommbostockd3wikiGeo-Paths)
OdwzorowaniaNiew tpliwie rzuci o Ci si w oczy e mapa nie przedstawia ca ych Stanoacutew ZjednoczonychAby naprawi to niedoci gni cie musimy zmieni u ywane odwzorowanie
Czym jest odwzorowanie Z pewno ci nie usz o Twojej uwadze tak e to e Ziemia jest kuli-sta a nie p aska Wszystkie kuliste obiekty s troacutejwymiarowe co znacznie utrudnia przed-stawianie ich na powierzchniach dwuwymiarowych Odwzorowanie jest algorytmem kom-promisu to metoda pozwalaj ca rzutowa troacutejwymiarow przestrze na dwuwymiarowp aszczyzn
Biblioteka D3 pozwala definiowa mechanizmy rzutowania za pomoc wygl daj cej znajomokonstrukcji
var projection = d3geoalbersUsa() translate([w2 h2])
Biblioteka pozwala korzysta z kilku dost pnych w niej algorytmoacutew rzutowania Odwzoro-wanie Albersa jest rzutem z o onym przygotowanym tak by na mapie zmie ci y si tak eAlaska i Hawaje ktoacutere umieszcza si pod po udniowo-zachodnim wybrze em Stanoacutew Zjed-noczonych (zaraz zobaczysz jak to wygl da) To w a nie albersUsa jest domy lnym odwzo-rowaniem u ywanym przez funkcj d3pathgeo() Teraz gdy okre lili my je ju jawniemo emy dodatkowo poda kilka opcji z jakimi mia oby by wykorzystywane jak cho by war-to przesuni cia Z przytoczonej instrukcji wynika e przesuwamy odwzorowanie w kie-runku rodka obrazu (o po ow szeroko ci i o po ow wysoko ci)
Kup książkę Poleć książkę
Odwzorowania 213
Drug zmian jak zrobimy b dzie jawne za danie od generatora cie ek by wszystkiecie ki wyznacza w odniesieniu do wskazanego wcze niej w asnego odwzorowania
var path = d3geopath() projection(projection)
W ten sposoacuteb otrzymali my map przedstawion na rysunku 122 Powoli zbli amy si do celuKod znajdziesz w pliku 02_projectionhtml
Rysunek 122 Te same dane GeoJSON ale przy wy rodkowaniu rzutu
Mo emy te doda do odwzorowania metod scale() eby zmniejszy nieco map i osi gntym samym wynik przedstawiony na rysunku 123
var projection = d3geoalbersUsa() translate([w2 h2]) scale([500])
Rysunek 123 Mapa Stanoacutew Zjednoczonych mdash przeskalowana i wy rodkowana tak by mie ci a siw obszarze obrazu
Domy ln warto ci skalowania jest 1000 Mniejsze liczby zmniejszaj map a wi ksze po-wi kszaj
Kup książkę Poleć książkę
214 Rozdzia 12 Mapy geograficzne
Doskonale Je li otworzysz w przegl darce plik 03_scaledhtml przekonasz si e wszystkodzia a
Wystarczy doda jedn instrukcj style() eby zmieni kolor wype nienia cie ek na jakimniej przygn biaj cy S dz e niebieski widoczny na rysunku 124 nie jest brzydki
Rysunek 124 Niebieski jest zdecydowanie lepszy
Ca y kod znajdziesz w pliku 04_fillhtml W ten sam sposoacuteb mo na zdefiniowa kolor i szero-ko p dzla obramowania
Funkcje rzutuj ce ktoacutere pozwalaj uzyskiwa roacute nego rodzaju odwzorowania kartograficz-ne to niezwykle pot ne algorytmy Warto wiedzie e nie ma odwzorowa uniwersalnychmdash zmienia si je w zale no ci od tego jakich informacji potrzebujemy i o ktoacuter cz wiatachodzi (inaczej odwzorowuje si bieguny a inaczej okolice roacutewnika)
Zas ug g oacutewnie Jasona Daviesa (httpwwwjasondaviescom) jest to e dodatki do biblioteki D3odpowiedzialne za przygotowanie odwzorowa kartograficznych oferuj dzi u ytkownikomniemal wszystkie znane nam rodzaje rzutoacutew Szczegoacute owy opis pracy z rzutami znajdziesz w do-kumentacji (httpsgithubcommbostockd3wikiGeo-Projections) Warto te zapozna si z poroacutewna-niem przedstawiaj cym w a ciwo ci poszczegoacutelnych rzutoacutew (httpblocksorgmbostock3711652)
KartogramKarto co To s owo ktoacuterego nie s yszy si na co dzie okre la map na ktoacuterej ca e obszaryzosta y wype nione roacute nymi odcieniami (jasnymi lub ciemnymi) czy te roacute nymi kolorami takby odda rozk ad powi zanych z oznaczeniami warto ci W Stanach Zjednoczonych szcze-goacutelnie w okresie wyboroacutew cz sto spotyka si kartogramy okre lane mianem bdquoczerwonychi niebieskich stanoacutewrdquo Na mapach tych zaznacza si odpowiednim kolorem przewag popar-cia dla kandydatoacutew Partii Demokratycznej b d Partii Republika skiej Ale kartogramy wy-konuje si z roacute nych przyczyn niekoniecznie politycznych
Takie odwzorowania ciesz si chyba najwi ksz popularno ci w roacuted u ytkownikoacutew D3Pami taj jednak e cho kartogramy potrafi by niezwykle pomocne to maj jednak po-wa ne ograniczenia Poniewa na tego rodzaju mapach warto ci odwzorowuje si na pewnejpowierzchni atwo mo e doj do niezamierzonego przek amania du e powierzchnie o niskiej
Kup książkę Poleć książkę
Kartogram 215
g sto ci danej wielko ci (na przyk ad stan Nevada) mog sprawia wra enie bardziej istot-nych ni s w rzeczywisto ci Typowy kartogram nie oddaje dobrze warto ci liczonych bdquonag ow rdquo bo na przyk ad Nevada jest zbyt du a a Delaware zbyt ma y Jednocze nie karto-gram zachowuje geografi miejsca oraz mdash jak na map mdash wygl da naprawd imponuj coZobaczmy zatem co da si z tym zrobi (Kod znajdziesz w pliku 05_choroplethhtml)
Po pierwsze zdefiniuj funkcj skaluj c ktoacutera pobierze warto ci liczbowe a zwroacuteci koloryNa tym w a nie polega w du ej mierze praca nad kartogramem
var color = d3scalequantize() range([rgb(237248233) rgb(186228179)rgb(116196118)rgb(4916384)rgb(010944)])
Funkcja quantize jest zaliczana do grupy skal liniowych ale wynikiem jej dzia ania jest zbioacuterwarto ci dyskretnych Warto ciami wyj ciowymi mog by liczby kolory (jak w tym przy-padku) czy cokolwiek innego co uznasz za odpowiednie Funkcja ta przydaje si bardzo je lichcesz podzieli zbioacuter warto ci na grupy W omawianym przypadku zdecydowa em si utwo-rzy pi grup docelowych ale ich liczba nie jest w aden sposoacuteb formalnie ograniczona
Zauwa e okre li em tu zbioacuter warto ci wyj ciowych natomiast nie napisa em nic na tematdziedziny (Czekam a wczytaj si dane) Kolory ktoacuterymi si pos u y em pochodz z plikucolorbrewerjs dost pnego pod adresem httpsgithubcommbostockd3treemasterlibcolorbrewerRepozytorium to zawiera sporych rozmiaroacutew zbioacuter barw dobranych przez Cynthi Brewerna podstawie prowadzonych przez ni bada
Pora wczyta jakie dane Zawczasu przygotowa em plik us-ag-productivity-2004csv w ktoacuterymznajdziesz dane u o one w nast puj cy sposoacuteb
statevalueAlabama11791Arkansas13705Arizona13847California17979Colorado10325Connecticut13209Delaware14345
Dane te udost pnione przez Departament Rolnictwa Stanoacutew Zjednoczonych zawieraj in-formacje na temat produkcji rolnej w poszczegoacutelnych stanach w 2004 roku Dane liczboweprzedstawiaj wyniki wzgl dne wyznaczane dla linii bazowej jak by a produkcja rolnaw Alabamie w 1996 roku (10) Wi ksze od jedynki warto ci nale y zatem rozumie jakowy szy poziom produkcji p odoacutew rolnych a mniejsze jako ni szy (Na stronie httpdatagovmo na znale wiele oficjalnych zestawie statystycznych) Wydaje si e te warto ci po-winny adnie si prze o y na kartogram produkcji rolnej
Dane z pliku wczytamy za pomoc funkcji d3csv()
d3csv(us-ag-productivity-2004csv function(data)
Teraz (zanim zapomn ) w funkcji zwrotnej zdefiniuj parametr color dziedziny warto ciwej ciowych skali kwantuj cej
colordomain([ d3min(data function(d) return dvalue ) d3max(data function(d) return dvalue )])
Kup książkę Poleć książkę
216 Rozdzia 12 Mapy geograficzne
W kodzie tym pojawiaj si funkcje d3min() i d3max() pozwalaj ce wyznaczy i zwroacutecinajmniejsz i najwi ksz warto dzi ki czemu dziedzina b dzie wyznaczana dynamicznie
Nast pnie wczytamy dane JSON mdash t cz operacji przeprowadzimy tak jak poprzednioG oacutewna roacute nica i nowo polega na tym e tym razem chc w czy dane dotycz ce rolnictwado danych GeoJSON Dlaczego Poniewa do znacznika mo na do cza tylko jeden zestawdanych naraz Zdecydowanie potrzebujemy danych GeoJSON bo na ich podstawie tworzones cie ki ale jednocze nie potrzebujemy te danych dotycz cych upraw Gdyby zatemuda o si po czy je w jedn monstrualn tablic wtedy mogliby my podpi ca o podznaczniki path (Istnieje kilka sposoboacutew rozwi zania tego problemu mdash jak zawsze prezentujswoj ulubion metod )
d3json(us-statesjson function(json) czy dane rolnicze z danymi GeoJSON Sprawdza w p tli raz ca y zestaw danych rolniczych for (var i = 0 i lt datalength i++) Pobiera nazw stanu var dataState = data[i]state Pobiera warto danych i przekszta ca j na liczb zmiennoprzecinkow var dataValue = parseFloat(data[i]value) Odnajduje odpowiedni stan w danych GeoJSON for (var j = 0 j lt jsonfeatureslength j++) var jsonState = jsonfeatures[j]propertiesname if (dataState == jsonState) Kopiuje dane do zmiennej JSON jsonfeatures[j]propertiesvalue = dataValue Przestaje przeszukiwa JSON break
Przyjrzyj si uwa nie przytoczonemu fragmentowi kodu Zasadniczo zaproponowane roz-wi zanie polega na tym by dla ka dego stanu odnale dane GeoJSON opatrzone t samnazw (na przyk ad Colorado) Gdy to si uda pobierzemy warto ci danych zapisanych dlaka dego stanu i dodamy je do jsonfeatures[j]propertiesvalue W ten sposoacuteb b done po czone ze znacznikiem i dost pne poacute niej gdy b dziemy ich potrzebowa
Wreszcie w ten sam sposoacuteb co ostatnio przygotujemy cie ki przy czym tym razem wartofunkcji style() b dziemy przypisywa dynamicznie
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path) style(fill function(d) Pobiera warto ci danych var value = dpropertiesvalue if (value) Je li warto istnieje return color(value) else Je li warto jest niezdefiniowana return ccc )
Kup książkę Poleć książkę
Dodawanie punktoacutew 217
Teraz ka da ze cie ek zostanie wype niona innym kolorem a nie jak mia o to miejsce po-przednio gdy wszystkie wype nili my barw steelblue Problem polega na tym e niedysponujemy danymi ze wszystkich stanoacutew Zestawienie ktoacuterym si pos u y em nie obej-mowa o Alaski Dystryktu Kolumbii Hawajoacutew i Portoryko (ktoacutere wprawdzie nie jest stanemale jest uwzgl dnione w danych GeoJSON i pojawia si w odwzorowaniu)
Aby poradzi sobie jako z tymi wyj tkami doda em do kodu warunek logiczny mdash instrukcjif() ktoacutera sprawdza czy dla danego stanu warto danych zosta a zdefiniowana Je li daneistniej zwracana jest funkcja color(value) co oznacza e mog przekaza dane do skalikwantuj cej i otrzyma w wyniku tego kod koloru Dla warto ci niezdefiniowanych ustali emdomy ln warto koloru ccc co odpowiada delikatnej szaro ci
Pi knie Spoacutejrz tylko na wyniki widoczne na rysunku 125 Sprawd jak prezentuje si kodi sproacutebuj z nim swoich si Znajdziesz go w pliku 05_choroplethhtml
Rysunek 125 Kartogram przedstawiaj cy poziom produkcji rolnej w poszczegoacutelnych stanach
Dodawanie punktoacutewMi o by oby zaznaczy na mapie cho kilka miast by nada grafice dok adniejszy kontekstprawda Warto by oby te znaczy ile jest du ych obszaroacutew g sto zaludnionych w stanacho najwy szym (i najni szym) poziomie produktywno ci rolnej Zaczniemy znoacutew od znale-zienia odpowiednich danych
Na szcz cie niedawno mieli my znoacutew spis powszechny (Na to id nasze podatki) Otopocz tek nieobrobionego pliku CSV zawieraj cego roczne szacunkowe zestawienie liczbyludno ci miast powy ej 50 000 mieszka coacutew (plik dost pny pod adresem httpwwwcensusgovpopestdatacitiestotals2011tablesSUB-EST2011-01csv)
table with row headers in column A and column headers in rows 3 through 4Table 1 Annual Estimates of the Resident Population for Incorporated PlacesOver 50000 Ranked by July 1 2011 Population April 1 2010 to July 1 2011RankGeographic AreaApril 1 2010Population Estimate (as of July 1)PlaceStateCensusEstimates Base201020111New York cityNew York81751338175133818644382449102Los Angeles cityCalifornia37926213792625379576138197023Chicago cityIllinois2695598269559826982832707120
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
210 Rozdzia 12 Mapy geograficzne
geometry type MultiPolygon coordinates [[[[-13160202155117982] [-1315691595528229][-13135555855183705] [-131388425501392][-13164583655035827] [-13160202155117982]]][[[-1318320525542469] [-13164583655304197][-13174989855128935] [-13183205255189182] ]]]
Dane jak to w stylu GeoJSON s zapisane w jednym wielkim obiekcie (Nawiasy klamrowepami tasz) W obiekcie znajdziemy deklaracj typu type FeatureCollecion Po typie po-jawia si pole features ktoacutere przechowuje tablic pojedynczych obiektoacutew typu FeatureKa dy z nich odpowiada jednemu ze stanoacutew Nazwa stanu jest podana w polu properties
Jednak sedno ka dego pliku GeoJSON le y w polu geometry Tam w a nie pojawiaj si de-finicja typu (type) oraz wspoacute rz dne (coordinates) okre laj ce kontur danego elementu Polecoordinates przechowuje szeroko ci i d ugo ci geograficzne zapisane parami w ma ych dwu-warto ciowych tablicach Przetwarzanie i udoskonalanie tych warto ci stanowi sens ycia ka -dego kartografa Pokolenia badaczy i podroacute nikoacutew po wi ca y swoacutej czas by zgromadzi tenzbioacuter i za to powinni my by im wdzi czni Liczby te cho mo e niepozorne kryj w sobieprawdziw moc
Warto te zaznaczy e w danych GeoJSON jako pierwsz podaje si zawsze d ugo geogra-ficzn Mimo e jeste my przyzwyczajeni do zapisu w ktoacuterym najpierw wymienia si szero-ko a potem d ugo w wiecie GeoJSON obowi zuje odwrotny porz dek
I jeszcze ma a ci ga na wypadek gdyby odroacute nianie d ugo ci od szeroko ci geograficznejstanowi o dla Ciebie problem
D ugo geograficzna jak nazwa wskazuje jest d uga Jej linie (po udniki) biegn pionowo(z poacute nocy na po udnie) jakby zwiesza y si z goacutery na doacute
Szeroko geograficzna jest szeroka Jej linie (roacutewnole niki) rozci gaj si poziomo jakbystara y si obj Ziemi w pasie
Roacutewnole niki i po udniki tworz razem ogromn sie obejmuj c ca kul ziemsk Na naszeszcz cie wspoacute rz dne mo na atwo przeliczy na pary x i y ktoacutere z kolei pozwalaj wy-wietla wszystko bez wi kszych problemoacutew na ekranie komputera Gdy rysowali my wy-
kres s upkowy warto ci danych odwzorowywali my na warto ci na ekranie mdash przeliczali myliczby na wysoko prostok toacutew W przypadku tworzenia map geograficznych te generu-jemy odwzorowania mdash pary d ugo i szeroko przechodz w pary x i y Jednocze nie ope-rowanie zmiennymi x i y pozwala w atwy sposoacuteb omin niewygodny problem kolejno cid ugo ci i szeroko ci podanych odwrotnie
Get Lat+Lon (httptecznocomsquares12378043-1222712) to doskona e narz dzieautorstwa Micha a Migurskiego dzi ki ktoacuteremu z atwo ci sprawdzisz czy podanewspoacute rz dne geograficzne s na pewno poprawne Trzymaj t stron otwart w oknieprzegl darki przez ca y czas gdy pracujesz nad mapami zagl da si do niej bowiembardzo cz sto
Kup książkę Poleć książkę
cie ki 211
cie kiMamy ju dane geograficzne Pora co z nimi zrobi
Przede wszystkim nale y zdefiniowa generator cie ek
var path = d3geopath()
Mog z czystym sumieniem powiedzie e d3geopath() to funkcja ratuj ca ycie To onaprzek ada ba agan z pliku GeoJSON na jeszcze bardziej nieporz dny zapis ze znacznikoacutewpath Oddajmy cze d3geopath()
Mogliby my oczywi cie wklei kod GeoJSON bezpo rednio do pliku HTML ale fuj tylewspoacute rz dnych i nawiasoacutew klamrowych Co za ba agan Znacznie porz dniej b dzie gdyzastosujemy bardziej tradycyjne podej cie czyli pozostawimy dane geograficzne w osobnympliku i wczytamy jego zawarto za pomoc funkcji d3json()
d3json(us-statesjson function(json) svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path))
Funkcja d3json() przyjmuje dwa argumenty Pierwszy to zmienna a cuchowa okre laj cacie k dost pu do pliku ktoacuterego zawarto nale y wczyta drugi za to funkcja zwrotna
uruchamiana dopiero po wczytaniu i sparsowaniu zawarto ci pliku JSON (Wi cej na tematfunkcji zwrotnych znajdziesz w ramce bdquoObs uga b doacutew wczytywania danychrdquo z rozdzia u 5)Funkcja d3json() podobnie jak d3csv() jest asynchroniczna a zatem nie wstrzymuje wy-konywania pozosta ej cz ci kodu na czas wczytywania danych z pliku Oznacza to e kodumieszczony po wywo aniu funkcji zwrotnej b dzie w rzeczywisto ci wykonany przed jej cia em
d3json(someFilejson function(json) Tu umie kod zale ny od danych z pliku JSON)
Tu umie tylko te instrukcje ktoacutere nie potrzebuj do pracy zawarto ci pliku JSONconsolelog(Lubi koty)
Dlatego zapami taj podczas korzystania z zewn trznych roacutede danych kod ktoacuterego wyko-nanie zale y od zawarto ci tych roacutede musi si zawsze znale wewn trz funkcji zwrotnej(Mo esz te rozbi go na mniejsze porcje ktoacutere zapiszesz we w asnych funkcjach i dopiero jewywo asz w ciele funkcji zwrotnej)
Wroacute my jednak do przyk adu Pora powi za w a ciwo ci pobrane z pliku GeoJSON z no-wymi znacznikami path Podany kod tworzy osobn cie k dla ka dej z cech
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path)
Zauwa e ostatni wiersz mdash ten w ktoacuterym zmienna d (atrybut przechowuj cy dane znacznikapath) jest przekazywana do generatora cie ek mdash po prostu pobiera wszystkie dane z plikui przelicza je na kod SVG Wynik jest widoczny na rysunku 121
Kup książkę Poleć książkę
212 Rozdzia 12 Mapy geograficzne
Rysunek 121 Pierwsze zetkni cie z danymi GeoJSON
Mapa To zbyt proste by by o mo liwe Aby sprawdzi czy uzyskasz ten sam efekt otwoacuterzplik 01_pathshtml Dalsze dzia ania b d mia y na celu wy cznie dostosowanie mapy do na-szych potrzeb
Je li interesuj Ci zagadnienia zwi zane z prac ze cie kami i ich generatoramipolecam Ci zapoznanie si z dokumentacj (httpsgithubcommbostockd3wikiGeo-Paths)
OdwzorowaniaNiew tpliwie rzuci o Ci si w oczy e mapa nie przedstawia ca ych Stanoacutew ZjednoczonychAby naprawi to niedoci gni cie musimy zmieni u ywane odwzorowanie
Czym jest odwzorowanie Z pewno ci nie usz o Twojej uwadze tak e to e Ziemia jest kuli-sta a nie p aska Wszystkie kuliste obiekty s troacutejwymiarowe co znacznie utrudnia przed-stawianie ich na powierzchniach dwuwymiarowych Odwzorowanie jest algorytmem kom-promisu to metoda pozwalaj ca rzutowa troacutejwymiarow przestrze na dwuwymiarowp aszczyzn
Biblioteka D3 pozwala definiowa mechanizmy rzutowania za pomoc wygl daj cej znajomokonstrukcji
var projection = d3geoalbersUsa() translate([w2 h2])
Biblioteka pozwala korzysta z kilku dost pnych w niej algorytmoacutew rzutowania Odwzoro-wanie Albersa jest rzutem z o onym przygotowanym tak by na mapie zmie ci y si tak eAlaska i Hawaje ktoacutere umieszcza si pod po udniowo-zachodnim wybrze em Stanoacutew Zjed-noczonych (zaraz zobaczysz jak to wygl da) To w a nie albersUsa jest domy lnym odwzo-rowaniem u ywanym przez funkcj d3pathgeo() Teraz gdy okre lili my je ju jawniemo emy dodatkowo poda kilka opcji z jakimi mia oby by wykorzystywane jak cho by war-to przesuni cia Z przytoczonej instrukcji wynika e przesuwamy odwzorowanie w kie-runku rodka obrazu (o po ow szeroko ci i o po ow wysoko ci)
Kup książkę Poleć książkę
Odwzorowania 213
Drug zmian jak zrobimy b dzie jawne za danie od generatora cie ek by wszystkiecie ki wyznacza w odniesieniu do wskazanego wcze niej w asnego odwzorowania
var path = d3geopath() projection(projection)
W ten sposoacuteb otrzymali my map przedstawion na rysunku 122 Powoli zbli amy si do celuKod znajdziesz w pliku 02_projectionhtml
Rysunek 122 Te same dane GeoJSON ale przy wy rodkowaniu rzutu
Mo emy te doda do odwzorowania metod scale() eby zmniejszy nieco map i osi gntym samym wynik przedstawiony na rysunku 123
var projection = d3geoalbersUsa() translate([w2 h2]) scale([500])
Rysunek 123 Mapa Stanoacutew Zjednoczonych mdash przeskalowana i wy rodkowana tak by mie ci a siw obszarze obrazu
Domy ln warto ci skalowania jest 1000 Mniejsze liczby zmniejszaj map a wi ksze po-wi kszaj
Kup książkę Poleć książkę
214 Rozdzia 12 Mapy geograficzne
Doskonale Je li otworzysz w przegl darce plik 03_scaledhtml przekonasz si e wszystkodzia a
Wystarczy doda jedn instrukcj style() eby zmieni kolor wype nienia cie ek na jakimniej przygn biaj cy S dz e niebieski widoczny na rysunku 124 nie jest brzydki
Rysunek 124 Niebieski jest zdecydowanie lepszy
Ca y kod znajdziesz w pliku 04_fillhtml W ten sam sposoacuteb mo na zdefiniowa kolor i szero-ko p dzla obramowania
Funkcje rzutuj ce ktoacutere pozwalaj uzyskiwa roacute nego rodzaju odwzorowania kartograficz-ne to niezwykle pot ne algorytmy Warto wiedzie e nie ma odwzorowa uniwersalnychmdash zmienia si je w zale no ci od tego jakich informacji potrzebujemy i o ktoacuter cz wiatachodzi (inaczej odwzorowuje si bieguny a inaczej okolice roacutewnika)
Zas ug g oacutewnie Jasona Daviesa (httpwwwjasondaviescom) jest to e dodatki do biblioteki D3odpowiedzialne za przygotowanie odwzorowa kartograficznych oferuj dzi u ytkownikomniemal wszystkie znane nam rodzaje rzutoacutew Szczegoacute owy opis pracy z rzutami znajdziesz w do-kumentacji (httpsgithubcommbostockd3wikiGeo-Projections) Warto te zapozna si z poroacutewna-niem przedstawiaj cym w a ciwo ci poszczegoacutelnych rzutoacutew (httpblocksorgmbostock3711652)
KartogramKarto co To s owo ktoacuterego nie s yszy si na co dzie okre la map na ktoacuterej ca e obszaryzosta y wype nione roacute nymi odcieniami (jasnymi lub ciemnymi) czy te roacute nymi kolorami takby odda rozk ad powi zanych z oznaczeniami warto ci W Stanach Zjednoczonych szcze-goacutelnie w okresie wyboroacutew cz sto spotyka si kartogramy okre lane mianem bdquoczerwonychi niebieskich stanoacutewrdquo Na mapach tych zaznacza si odpowiednim kolorem przewag popar-cia dla kandydatoacutew Partii Demokratycznej b d Partii Republika skiej Ale kartogramy wy-konuje si z roacute nych przyczyn niekoniecznie politycznych
Takie odwzorowania ciesz si chyba najwi ksz popularno ci w roacuted u ytkownikoacutew D3Pami taj jednak e cho kartogramy potrafi by niezwykle pomocne to maj jednak po-wa ne ograniczenia Poniewa na tego rodzaju mapach warto ci odwzorowuje si na pewnejpowierzchni atwo mo e doj do niezamierzonego przek amania du e powierzchnie o niskiej
Kup książkę Poleć książkę
Kartogram 215
g sto ci danej wielko ci (na przyk ad stan Nevada) mog sprawia wra enie bardziej istot-nych ni s w rzeczywisto ci Typowy kartogram nie oddaje dobrze warto ci liczonych bdquonag ow rdquo bo na przyk ad Nevada jest zbyt du a a Delaware zbyt ma y Jednocze nie karto-gram zachowuje geografi miejsca oraz mdash jak na map mdash wygl da naprawd imponuj coZobaczmy zatem co da si z tym zrobi (Kod znajdziesz w pliku 05_choroplethhtml)
Po pierwsze zdefiniuj funkcj skaluj c ktoacutera pobierze warto ci liczbowe a zwroacuteci koloryNa tym w a nie polega w du ej mierze praca nad kartogramem
var color = d3scalequantize() range([rgb(237248233) rgb(186228179)rgb(116196118)rgb(4916384)rgb(010944)])
Funkcja quantize jest zaliczana do grupy skal liniowych ale wynikiem jej dzia ania jest zbioacuterwarto ci dyskretnych Warto ciami wyj ciowymi mog by liczby kolory (jak w tym przy-padku) czy cokolwiek innego co uznasz za odpowiednie Funkcja ta przydaje si bardzo je lichcesz podzieli zbioacuter warto ci na grupy W omawianym przypadku zdecydowa em si utwo-rzy pi grup docelowych ale ich liczba nie jest w aden sposoacuteb formalnie ograniczona
Zauwa e okre li em tu zbioacuter warto ci wyj ciowych natomiast nie napisa em nic na tematdziedziny (Czekam a wczytaj si dane) Kolory ktoacuterymi si pos u y em pochodz z plikucolorbrewerjs dost pnego pod adresem httpsgithubcommbostockd3treemasterlibcolorbrewerRepozytorium to zawiera sporych rozmiaroacutew zbioacuter barw dobranych przez Cynthi Brewerna podstawie prowadzonych przez ni bada
Pora wczyta jakie dane Zawczasu przygotowa em plik us-ag-productivity-2004csv w ktoacuterymznajdziesz dane u o one w nast puj cy sposoacuteb
statevalueAlabama11791Arkansas13705Arizona13847California17979Colorado10325Connecticut13209Delaware14345
Dane te udost pnione przez Departament Rolnictwa Stanoacutew Zjednoczonych zawieraj in-formacje na temat produkcji rolnej w poszczegoacutelnych stanach w 2004 roku Dane liczboweprzedstawiaj wyniki wzgl dne wyznaczane dla linii bazowej jak by a produkcja rolnaw Alabamie w 1996 roku (10) Wi ksze od jedynki warto ci nale y zatem rozumie jakowy szy poziom produkcji p odoacutew rolnych a mniejsze jako ni szy (Na stronie httpdatagovmo na znale wiele oficjalnych zestawie statystycznych) Wydaje si e te warto ci po-winny adnie si prze o y na kartogram produkcji rolnej
Dane z pliku wczytamy za pomoc funkcji d3csv()
d3csv(us-ag-productivity-2004csv function(data)
Teraz (zanim zapomn ) w funkcji zwrotnej zdefiniuj parametr color dziedziny warto ciwej ciowych skali kwantuj cej
colordomain([ d3min(data function(d) return dvalue ) d3max(data function(d) return dvalue )])
Kup książkę Poleć książkę
216 Rozdzia 12 Mapy geograficzne
W kodzie tym pojawiaj si funkcje d3min() i d3max() pozwalaj ce wyznaczy i zwroacutecinajmniejsz i najwi ksz warto dzi ki czemu dziedzina b dzie wyznaczana dynamicznie
Nast pnie wczytamy dane JSON mdash t cz operacji przeprowadzimy tak jak poprzednioG oacutewna roacute nica i nowo polega na tym e tym razem chc w czy dane dotycz ce rolnictwado danych GeoJSON Dlaczego Poniewa do znacznika mo na do cza tylko jeden zestawdanych naraz Zdecydowanie potrzebujemy danych GeoJSON bo na ich podstawie tworzones cie ki ale jednocze nie potrzebujemy te danych dotycz cych upraw Gdyby zatemuda o si po czy je w jedn monstrualn tablic wtedy mogliby my podpi ca o podznaczniki path (Istnieje kilka sposoboacutew rozwi zania tego problemu mdash jak zawsze prezentujswoj ulubion metod )
d3json(us-statesjson function(json) czy dane rolnicze z danymi GeoJSON Sprawdza w p tli raz ca y zestaw danych rolniczych for (var i = 0 i lt datalength i++) Pobiera nazw stanu var dataState = data[i]state Pobiera warto danych i przekszta ca j na liczb zmiennoprzecinkow var dataValue = parseFloat(data[i]value) Odnajduje odpowiedni stan w danych GeoJSON for (var j = 0 j lt jsonfeatureslength j++) var jsonState = jsonfeatures[j]propertiesname if (dataState == jsonState) Kopiuje dane do zmiennej JSON jsonfeatures[j]propertiesvalue = dataValue Przestaje przeszukiwa JSON break
Przyjrzyj si uwa nie przytoczonemu fragmentowi kodu Zasadniczo zaproponowane roz-wi zanie polega na tym by dla ka dego stanu odnale dane GeoJSON opatrzone t samnazw (na przyk ad Colorado) Gdy to si uda pobierzemy warto ci danych zapisanych dlaka dego stanu i dodamy je do jsonfeatures[j]propertiesvalue W ten sposoacuteb b done po czone ze znacznikiem i dost pne poacute niej gdy b dziemy ich potrzebowa
Wreszcie w ten sam sposoacuteb co ostatnio przygotujemy cie ki przy czym tym razem wartofunkcji style() b dziemy przypisywa dynamicznie
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path) style(fill function(d) Pobiera warto ci danych var value = dpropertiesvalue if (value) Je li warto istnieje return color(value) else Je li warto jest niezdefiniowana return ccc )
Kup książkę Poleć książkę
Dodawanie punktoacutew 217
Teraz ka da ze cie ek zostanie wype niona innym kolorem a nie jak mia o to miejsce po-przednio gdy wszystkie wype nili my barw steelblue Problem polega na tym e niedysponujemy danymi ze wszystkich stanoacutew Zestawienie ktoacuterym si pos u y em nie obej-mowa o Alaski Dystryktu Kolumbii Hawajoacutew i Portoryko (ktoacutere wprawdzie nie jest stanemale jest uwzgl dnione w danych GeoJSON i pojawia si w odwzorowaniu)
Aby poradzi sobie jako z tymi wyj tkami doda em do kodu warunek logiczny mdash instrukcjif() ktoacutera sprawdza czy dla danego stanu warto danych zosta a zdefiniowana Je li daneistniej zwracana jest funkcja color(value) co oznacza e mog przekaza dane do skalikwantuj cej i otrzyma w wyniku tego kod koloru Dla warto ci niezdefiniowanych ustali emdomy ln warto koloru ccc co odpowiada delikatnej szaro ci
Pi knie Spoacutejrz tylko na wyniki widoczne na rysunku 125 Sprawd jak prezentuje si kodi sproacutebuj z nim swoich si Znajdziesz go w pliku 05_choroplethhtml
Rysunek 125 Kartogram przedstawiaj cy poziom produkcji rolnej w poszczegoacutelnych stanach
Dodawanie punktoacutewMi o by oby zaznaczy na mapie cho kilka miast by nada grafice dok adniejszy kontekstprawda Warto by oby te znaczy ile jest du ych obszaroacutew g sto zaludnionych w stanacho najwy szym (i najni szym) poziomie produktywno ci rolnej Zaczniemy znoacutew od znale-zienia odpowiednich danych
Na szcz cie niedawno mieli my znoacutew spis powszechny (Na to id nasze podatki) Otopocz tek nieobrobionego pliku CSV zawieraj cego roczne szacunkowe zestawienie liczbyludno ci miast powy ej 50 000 mieszka coacutew (plik dost pny pod adresem httpwwwcensusgovpopestdatacitiestotals2011tablesSUB-EST2011-01csv)
table with row headers in column A and column headers in rows 3 through 4Table 1 Annual Estimates of the Resident Population for Incorporated PlacesOver 50000 Ranked by July 1 2011 Population April 1 2010 to July 1 2011RankGeographic AreaApril 1 2010Population Estimate (as of July 1)PlaceStateCensusEstimates Base201020111New York cityNew York81751338175133818644382449102Los Angeles cityCalifornia37926213792625379576138197023Chicago cityIllinois2695598269559826982832707120
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
cie ki 211
cie kiMamy ju dane geograficzne Pora co z nimi zrobi
Przede wszystkim nale y zdefiniowa generator cie ek
var path = d3geopath()
Mog z czystym sumieniem powiedzie e d3geopath() to funkcja ratuj ca ycie To onaprzek ada ba agan z pliku GeoJSON na jeszcze bardziej nieporz dny zapis ze znacznikoacutewpath Oddajmy cze d3geopath()
Mogliby my oczywi cie wklei kod GeoJSON bezpo rednio do pliku HTML ale fuj tylewspoacute rz dnych i nawiasoacutew klamrowych Co za ba agan Znacznie porz dniej b dzie gdyzastosujemy bardziej tradycyjne podej cie czyli pozostawimy dane geograficzne w osobnympliku i wczytamy jego zawarto za pomoc funkcji d3json()
d3json(us-statesjson function(json) svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path))
Funkcja d3json() przyjmuje dwa argumenty Pierwszy to zmienna a cuchowa okre laj cacie k dost pu do pliku ktoacuterego zawarto nale y wczyta drugi za to funkcja zwrotna
uruchamiana dopiero po wczytaniu i sparsowaniu zawarto ci pliku JSON (Wi cej na tematfunkcji zwrotnych znajdziesz w ramce bdquoObs uga b doacutew wczytywania danychrdquo z rozdzia u 5)Funkcja d3json() podobnie jak d3csv() jest asynchroniczna a zatem nie wstrzymuje wy-konywania pozosta ej cz ci kodu na czas wczytywania danych z pliku Oznacza to e kodumieszczony po wywo aniu funkcji zwrotnej b dzie w rzeczywisto ci wykonany przed jej cia em
d3json(someFilejson function(json) Tu umie kod zale ny od danych z pliku JSON)
Tu umie tylko te instrukcje ktoacutere nie potrzebuj do pracy zawarto ci pliku JSONconsolelog(Lubi koty)
Dlatego zapami taj podczas korzystania z zewn trznych roacutede danych kod ktoacuterego wyko-nanie zale y od zawarto ci tych roacutede musi si zawsze znale wewn trz funkcji zwrotnej(Mo esz te rozbi go na mniejsze porcje ktoacutere zapiszesz we w asnych funkcjach i dopiero jewywo asz w ciele funkcji zwrotnej)
Wroacute my jednak do przyk adu Pora powi za w a ciwo ci pobrane z pliku GeoJSON z no-wymi znacznikami path Podany kod tworzy osobn cie k dla ka dej z cech
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path)
Zauwa e ostatni wiersz mdash ten w ktoacuterym zmienna d (atrybut przechowuj cy dane znacznikapath) jest przekazywana do generatora cie ek mdash po prostu pobiera wszystkie dane z plikui przelicza je na kod SVG Wynik jest widoczny na rysunku 121
Kup książkę Poleć książkę
212 Rozdzia 12 Mapy geograficzne
Rysunek 121 Pierwsze zetkni cie z danymi GeoJSON
Mapa To zbyt proste by by o mo liwe Aby sprawdzi czy uzyskasz ten sam efekt otwoacuterzplik 01_pathshtml Dalsze dzia ania b d mia y na celu wy cznie dostosowanie mapy do na-szych potrzeb
Je li interesuj Ci zagadnienia zwi zane z prac ze cie kami i ich generatoramipolecam Ci zapoznanie si z dokumentacj (httpsgithubcommbostockd3wikiGeo-Paths)
OdwzorowaniaNiew tpliwie rzuci o Ci si w oczy e mapa nie przedstawia ca ych Stanoacutew ZjednoczonychAby naprawi to niedoci gni cie musimy zmieni u ywane odwzorowanie
Czym jest odwzorowanie Z pewno ci nie usz o Twojej uwadze tak e to e Ziemia jest kuli-sta a nie p aska Wszystkie kuliste obiekty s troacutejwymiarowe co znacznie utrudnia przed-stawianie ich na powierzchniach dwuwymiarowych Odwzorowanie jest algorytmem kom-promisu to metoda pozwalaj ca rzutowa troacutejwymiarow przestrze na dwuwymiarowp aszczyzn
Biblioteka D3 pozwala definiowa mechanizmy rzutowania za pomoc wygl daj cej znajomokonstrukcji
var projection = d3geoalbersUsa() translate([w2 h2])
Biblioteka pozwala korzysta z kilku dost pnych w niej algorytmoacutew rzutowania Odwzoro-wanie Albersa jest rzutem z o onym przygotowanym tak by na mapie zmie ci y si tak eAlaska i Hawaje ktoacutere umieszcza si pod po udniowo-zachodnim wybrze em Stanoacutew Zjed-noczonych (zaraz zobaczysz jak to wygl da) To w a nie albersUsa jest domy lnym odwzo-rowaniem u ywanym przez funkcj d3pathgeo() Teraz gdy okre lili my je ju jawniemo emy dodatkowo poda kilka opcji z jakimi mia oby by wykorzystywane jak cho by war-to przesuni cia Z przytoczonej instrukcji wynika e przesuwamy odwzorowanie w kie-runku rodka obrazu (o po ow szeroko ci i o po ow wysoko ci)
Kup książkę Poleć książkę
Odwzorowania 213
Drug zmian jak zrobimy b dzie jawne za danie od generatora cie ek by wszystkiecie ki wyznacza w odniesieniu do wskazanego wcze niej w asnego odwzorowania
var path = d3geopath() projection(projection)
W ten sposoacuteb otrzymali my map przedstawion na rysunku 122 Powoli zbli amy si do celuKod znajdziesz w pliku 02_projectionhtml
Rysunek 122 Te same dane GeoJSON ale przy wy rodkowaniu rzutu
Mo emy te doda do odwzorowania metod scale() eby zmniejszy nieco map i osi gntym samym wynik przedstawiony na rysunku 123
var projection = d3geoalbersUsa() translate([w2 h2]) scale([500])
Rysunek 123 Mapa Stanoacutew Zjednoczonych mdash przeskalowana i wy rodkowana tak by mie ci a siw obszarze obrazu
Domy ln warto ci skalowania jest 1000 Mniejsze liczby zmniejszaj map a wi ksze po-wi kszaj
Kup książkę Poleć książkę
214 Rozdzia 12 Mapy geograficzne
Doskonale Je li otworzysz w przegl darce plik 03_scaledhtml przekonasz si e wszystkodzia a
Wystarczy doda jedn instrukcj style() eby zmieni kolor wype nienia cie ek na jakimniej przygn biaj cy S dz e niebieski widoczny na rysunku 124 nie jest brzydki
Rysunek 124 Niebieski jest zdecydowanie lepszy
Ca y kod znajdziesz w pliku 04_fillhtml W ten sam sposoacuteb mo na zdefiniowa kolor i szero-ko p dzla obramowania
Funkcje rzutuj ce ktoacutere pozwalaj uzyskiwa roacute nego rodzaju odwzorowania kartograficz-ne to niezwykle pot ne algorytmy Warto wiedzie e nie ma odwzorowa uniwersalnychmdash zmienia si je w zale no ci od tego jakich informacji potrzebujemy i o ktoacuter cz wiatachodzi (inaczej odwzorowuje si bieguny a inaczej okolice roacutewnika)
Zas ug g oacutewnie Jasona Daviesa (httpwwwjasondaviescom) jest to e dodatki do biblioteki D3odpowiedzialne za przygotowanie odwzorowa kartograficznych oferuj dzi u ytkownikomniemal wszystkie znane nam rodzaje rzutoacutew Szczegoacute owy opis pracy z rzutami znajdziesz w do-kumentacji (httpsgithubcommbostockd3wikiGeo-Projections) Warto te zapozna si z poroacutewna-niem przedstawiaj cym w a ciwo ci poszczegoacutelnych rzutoacutew (httpblocksorgmbostock3711652)
KartogramKarto co To s owo ktoacuterego nie s yszy si na co dzie okre la map na ktoacuterej ca e obszaryzosta y wype nione roacute nymi odcieniami (jasnymi lub ciemnymi) czy te roacute nymi kolorami takby odda rozk ad powi zanych z oznaczeniami warto ci W Stanach Zjednoczonych szcze-goacutelnie w okresie wyboroacutew cz sto spotyka si kartogramy okre lane mianem bdquoczerwonychi niebieskich stanoacutewrdquo Na mapach tych zaznacza si odpowiednim kolorem przewag popar-cia dla kandydatoacutew Partii Demokratycznej b d Partii Republika skiej Ale kartogramy wy-konuje si z roacute nych przyczyn niekoniecznie politycznych
Takie odwzorowania ciesz si chyba najwi ksz popularno ci w roacuted u ytkownikoacutew D3Pami taj jednak e cho kartogramy potrafi by niezwykle pomocne to maj jednak po-wa ne ograniczenia Poniewa na tego rodzaju mapach warto ci odwzorowuje si na pewnejpowierzchni atwo mo e doj do niezamierzonego przek amania du e powierzchnie o niskiej
Kup książkę Poleć książkę
Kartogram 215
g sto ci danej wielko ci (na przyk ad stan Nevada) mog sprawia wra enie bardziej istot-nych ni s w rzeczywisto ci Typowy kartogram nie oddaje dobrze warto ci liczonych bdquonag ow rdquo bo na przyk ad Nevada jest zbyt du a a Delaware zbyt ma y Jednocze nie karto-gram zachowuje geografi miejsca oraz mdash jak na map mdash wygl da naprawd imponuj coZobaczmy zatem co da si z tym zrobi (Kod znajdziesz w pliku 05_choroplethhtml)
Po pierwsze zdefiniuj funkcj skaluj c ktoacutera pobierze warto ci liczbowe a zwroacuteci koloryNa tym w a nie polega w du ej mierze praca nad kartogramem
var color = d3scalequantize() range([rgb(237248233) rgb(186228179)rgb(116196118)rgb(4916384)rgb(010944)])
Funkcja quantize jest zaliczana do grupy skal liniowych ale wynikiem jej dzia ania jest zbioacuterwarto ci dyskretnych Warto ciami wyj ciowymi mog by liczby kolory (jak w tym przy-padku) czy cokolwiek innego co uznasz za odpowiednie Funkcja ta przydaje si bardzo je lichcesz podzieli zbioacuter warto ci na grupy W omawianym przypadku zdecydowa em si utwo-rzy pi grup docelowych ale ich liczba nie jest w aden sposoacuteb formalnie ograniczona
Zauwa e okre li em tu zbioacuter warto ci wyj ciowych natomiast nie napisa em nic na tematdziedziny (Czekam a wczytaj si dane) Kolory ktoacuterymi si pos u y em pochodz z plikucolorbrewerjs dost pnego pod adresem httpsgithubcommbostockd3treemasterlibcolorbrewerRepozytorium to zawiera sporych rozmiaroacutew zbioacuter barw dobranych przez Cynthi Brewerna podstawie prowadzonych przez ni bada
Pora wczyta jakie dane Zawczasu przygotowa em plik us-ag-productivity-2004csv w ktoacuterymznajdziesz dane u o one w nast puj cy sposoacuteb
statevalueAlabama11791Arkansas13705Arizona13847California17979Colorado10325Connecticut13209Delaware14345
Dane te udost pnione przez Departament Rolnictwa Stanoacutew Zjednoczonych zawieraj in-formacje na temat produkcji rolnej w poszczegoacutelnych stanach w 2004 roku Dane liczboweprzedstawiaj wyniki wzgl dne wyznaczane dla linii bazowej jak by a produkcja rolnaw Alabamie w 1996 roku (10) Wi ksze od jedynki warto ci nale y zatem rozumie jakowy szy poziom produkcji p odoacutew rolnych a mniejsze jako ni szy (Na stronie httpdatagovmo na znale wiele oficjalnych zestawie statystycznych) Wydaje si e te warto ci po-winny adnie si prze o y na kartogram produkcji rolnej
Dane z pliku wczytamy za pomoc funkcji d3csv()
d3csv(us-ag-productivity-2004csv function(data)
Teraz (zanim zapomn ) w funkcji zwrotnej zdefiniuj parametr color dziedziny warto ciwej ciowych skali kwantuj cej
colordomain([ d3min(data function(d) return dvalue ) d3max(data function(d) return dvalue )])
Kup książkę Poleć książkę
216 Rozdzia 12 Mapy geograficzne
W kodzie tym pojawiaj si funkcje d3min() i d3max() pozwalaj ce wyznaczy i zwroacutecinajmniejsz i najwi ksz warto dzi ki czemu dziedzina b dzie wyznaczana dynamicznie
Nast pnie wczytamy dane JSON mdash t cz operacji przeprowadzimy tak jak poprzednioG oacutewna roacute nica i nowo polega na tym e tym razem chc w czy dane dotycz ce rolnictwado danych GeoJSON Dlaczego Poniewa do znacznika mo na do cza tylko jeden zestawdanych naraz Zdecydowanie potrzebujemy danych GeoJSON bo na ich podstawie tworzones cie ki ale jednocze nie potrzebujemy te danych dotycz cych upraw Gdyby zatemuda o si po czy je w jedn monstrualn tablic wtedy mogliby my podpi ca o podznaczniki path (Istnieje kilka sposoboacutew rozwi zania tego problemu mdash jak zawsze prezentujswoj ulubion metod )
d3json(us-statesjson function(json) czy dane rolnicze z danymi GeoJSON Sprawdza w p tli raz ca y zestaw danych rolniczych for (var i = 0 i lt datalength i++) Pobiera nazw stanu var dataState = data[i]state Pobiera warto danych i przekszta ca j na liczb zmiennoprzecinkow var dataValue = parseFloat(data[i]value) Odnajduje odpowiedni stan w danych GeoJSON for (var j = 0 j lt jsonfeatureslength j++) var jsonState = jsonfeatures[j]propertiesname if (dataState == jsonState) Kopiuje dane do zmiennej JSON jsonfeatures[j]propertiesvalue = dataValue Przestaje przeszukiwa JSON break
Przyjrzyj si uwa nie przytoczonemu fragmentowi kodu Zasadniczo zaproponowane roz-wi zanie polega na tym by dla ka dego stanu odnale dane GeoJSON opatrzone t samnazw (na przyk ad Colorado) Gdy to si uda pobierzemy warto ci danych zapisanych dlaka dego stanu i dodamy je do jsonfeatures[j]propertiesvalue W ten sposoacuteb b done po czone ze znacznikiem i dost pne poacute niej gdy b dziemy ich potrzebowa
Wreszcie w ten sam sposoacuteb co ostatnio przygotujemy cie ki przy czym tym razem wartofunkcji style() b dziemy przypisywa dynamicznie
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path) style(fill function(d) Pobiera warto ci danych var value = dpropertiesvalue if (value) Je li warto istnieje return color(value) else Je li warto jest niezdefiniowana return ccc )
Kup książkę Poleć książkę
Dodawanie punktoacutew 217
Teraz ka da ze cie ek zostanie wype niona innym kolorem a nie jak mia o to miejsce po-przednio gdy wszystkie wype nili my barw steelblue Problem polega na tym e niedysponujemy danymi ze wszystkich stanoacutew Zestawienie ktoacuterym si pos u y em nie obej-mowa o Alaski Dystryktu Kolumbii Hawajoacutew i Portoryko (ktoacutere wprawdzie nie jest stanemale jest uwzgl dnione w danych GeoJSON i pojawia si w odwzorowaniu)
Aby poradzi sobie jako z tymi wyj tkami doda em do kodu warunek logiczny mdash instrukcjif() ktoacutera sprawdza czy dla danego stanu warto danych zosta a zdefiniowana Je li daneistniej zwracana jest funkcja color(value) co oznacza e mog przekaza dane do skalikwantuj cej i otrzyma w wyniku tego kod koloru Dla warto ci niezdefiniowanych ustali emdomy ln warto koloru ccc co odpowiada delikatnej szaro ci
Pi knie Spoacutejrz tylko na wyniki widoczne na rysunku 125 Sprawd jak prezentuje si kodi sproacutebuj z nim swoich si Znajdziesz go w pliku 05_choroplethhtml
Rysunek 125 Kartogram przedstawiaj cy poziom produkcji rolnej w poszczegoacutelnych stanach
Dodawanie punktoacutewMi o by oby zaznaczy na mapie cho kilka miast by nada grafice dok adniejszy kontekstprawda Warto by oby te znaczy ile jest du ych obszaroacutew g sto zaludnionych w stanacho najwy szym (i najni szym) poziomie produktywno ci rolnej Zaczniemy znoacutew od znale-zienia odpowiednich danych
Na szcz cie niedawno mieli my znoacutew spis powszechny (Na to id nasze podatki) Otopocz tek nieobrobionego pliku CSV zawieraj cego roczne szacunkowe zestawienie liczbyludno ci miast powy ej 50 000 mieszka coacutew (plik dost pny pod adresem httpwwwcensusgovpopestdatacitiestotals2011tablesSUB-EST2011-01csv)
table with row headers in column A and column headers in rows 3 through 4Table 1 Annual Estimates of the Resident Population for Incorporated PlacesOver 50000 Ranked by July 1 2011 Population April 1 2010 to July 1 2011RankGeographic AreaApril 1 2010Population Estimate (as of July 1)PlaceStateCensusEstimates Base201020111New York cityNew York81751338175133818644382449102Los Angeles cityCalifornia37926213792625379576138197023Chicago cityIllinois2695598269559826982832707120
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
212 Rozdzia 12 Mapy geograficzne
Rysunek 121 Pierwsze zetkni cie z danymi GeoJSON
Mapa To zbyt proste by by o mo liwe Aby sprawdzi czy uzyskasz ten sam efekt otwoacuterzplik 01_pathshtml Dalsze dzia ania b d mia y na celu wy cznie dostosowanie mapy do na-szych potrzeb
Je li interesuj Ci zagadnienia zwi zane z prac ze cie kami i ich generatoramipolecam Ci zapoznanie si z dokumentacj (httpsgithubcommbostockd3wikiGeo-Paths)
OdwzorowaniaNiew tpliwie rzuci o Ci si w oczy e mapa nie przedstawia ca ych Stanoacutew ZjednoczonychAby naprawi to niedoci gni cie musimy zmieni u ywane odwzorowanie
Czym jest odwzorowanie Z pewno ci nie usz o Twojej uwadze tak e to e Ziemia jest kuli-sta a nie p aska Wszystkie kuliste obiekty s troacutejwymiarowe co znacznie utrudnia przed-stawianie ich na powierzchniach dwuwymiarowych Odwzorowanie jest algorytmem kom-promisu to metoda pozwalaj ca rzutowa troacutejwymiarow przestrze na dwuwymiarowp aszczyzn
Biblioteka D3 pozwala definiowa mechanizmy rzutowania za pomoc wygl daj cej znajomokonstrukcji
var projection = d3geoalbersUsa() translate([w2 h2])
Biblioteka pozwala korzysta z kilku dost pnych w niej algorytmoacutew rzutowania Odwzoro-wanie Albersa jest rzutem z o onym przygotowanym tak by na mapie zmie ci y si tak eAlaska i Hawaje ktoacutere umieszcza si pod po udniowo-zachodnim wybrze em Stanoacutew Zjed-noczonych (zaraz zobaczysz jak to wygl da) To w a nie albersUsa jest domy lnym odwzo-rowaniem u ywanym przez funkcj d3pathgeo() Teraz gdy okre lili my je ju jawniemo emy dodatkowo poda kilka opcji z jakimi mia oby by wykorzystywane jak cho by war-to przesuni cia Z przytoczonej instrukcji wynika e przesuwamy odwzorowanie w kie-runku rodka obrazu (o po ow szeroko ci i o po ow wysoko ci)
Kup książkę Poleć książkę
Odwzorowania 213
Drug zmian jak zrobimy b dzie jawne za danie od generatora cie ek by wszystkiecie ki wyznacza w odniesieniu do wskazanego wcze niej w asnego odwzorowania
var path = d3geopath() projection(projection)
W ten sposoacuteb otrzymali my map przedstawion na rysunku 122 Powoli zbli amy si do celuKod znajdziesz w pliku 02_projectionhtml
Rysunek 122 Te same dane GeoJSON ale przy wy rodkowaniu rzutu
Mo emy te doda do odwzorowania metod scale() eby zmniejszy nieco map i osi gntym samym wynik przedstawiony na rysunku 123
var projection = d3geoalbersUsa() translate([w2 h2]) scale([500])
Rysunek 123 Mapa Stanoacutew Zjednoczonych mdash przeskalowana i wy rodkowana tak by mie ci a siw obszarze obrazu
Domy ln warto ci skalowania jest 1000 Mniejsze liczby zmniejszaj map a wi ksze po-wi kszaj
Kup książkę Poleć książkę
214 Rozdzia 12 Mapy geograficzne
Doskonale Je li otworzysz w przegl darce plik 03_scaledhtml przekonasz si e wszystkodzia a
Wystarczy doda jedn instrukcj style() eby zmieni kolor wype nienia cie ek na jakimniej przygn biaj cy S dz e niebieski widoczny na rysunku 124 nie jest brzydki
Rysunek 124 Niebieski jest zdecydowanie lepszy
Ca y kod znajdziesz w pliku 04_fillhtml W ten sam sposoacuteb mo na zdefiniowa kolor i szero-ko p dzla obramowania
Funkcje rzutuj ce ktoacutere pozwalaj uzyskiwa roacute nego rodzaju odwzorowania kartograficz-ne to niezwykle pot ne algorytmy Warto wiedzie e nie ma odwzorowa uniwersalnychmdash zmienia si je w zale no ci od tego jakich informacji potrzebujemy i o ktoacuter cz wiatachodzi (inaczej odwzorowuje si bieguny a inaczej okolice roacutewnika)
Zas ug g oacutewnie Jasona Daviesa (httpwwwjasondaviescom) jest to e dodatki do biblioteki D3odpowiedzialne za przygotowanie odwzorowa kartograficznych oferuj dzi u ytkownikomniemal wszystkie znane nam rodzaje rzutoacutew Szczegoacute owy opis pracy z rzutami znajdziesz w do-kumentacji (httpsgithubcommbostockd3wikiGeo-Projections) Warto te zapozna si z poroacutewna-niem przedstawiaj cym w a ciwo ci poszczegoacutelnych rzutoacutew (httpblocksorgmbostock3711652)
KartogramKarto co To s owo ktoacuterego nie s yszy si na co dzie okre la map na ktoacuterej ca e obszaryzosta y wype nione roacute nymi odcieniami (jasnymi lub ciemnymi) czy te roacute nymi kolorami takby odda rozk ad powi zanych z oznaczeniami warto ci W Stanach Zjednoczonych szcze-goacutelnie w okresie wyboroacutew cz sto spotyka si kartogramy okre lane mianem bdquoczerwonychi niebieskich stanoacutewrdquo Na mapach tych zaznacza si odpowiednim kolorem przewag popar-cia dla kandydatoacutew Partii Demokratycznej b d Partii Republika skiej Ale kartogramy wy-konuje si z roacute nych przyczyn niekoniecznie politycznych
Takie odwzorowania ciesz si chyba najwi ksz popularno ci w roacuted u ytkownikoacutew D3Pami taj jednak e cho kartogramy potrafi by niezwykle pomocne to maj jednak po-wa ne ograniczenia Poniewa na tego rodzaju mapach warto ci odwzorowuje si na pewnejpowierzchni atwo mo e doj do niezamierzonego przek amania du e powierzchnie o niskiej
Kup książkę Poleć książkę
Kartogram 215
g sto ci danej wielko ci (na przyk ad stan Nevada) mog sprawia wra enie bardziej istot-nych ni s w rzeczywisto ci Typowy kartogram nie oddaje dobrze warto ci liczonych bdquonag ow rdquo bo na przyk ad Nevada jest zbyt du a a Delaware zbyt ma y Jednocze nie karto-gram zachowuje geografi miejsca oraz mdash jak na map mdash wygl da naprawd imponuj coZobaczmy zatem co da si z tym zrobi (Kod znajdziesz w pliku 05_choroplethhtml)
Po pierwsze zdefiniuj funkcj skaluj c ktoacutera pobierze warto ci liczbowe a zwroacuteci koloryNa tym w a nie polega w du ej mierze praca nad kartogramem
var color = d3scalequantize() range([rgb(237248233) rgb(186228179)rgb(116196118)rgb(4916384)rgb(010944)])
Funkcja quantize jest zaliczana do grupy skal liniowych ale wynikiem jej dzia ania jest zbioacuterwarto ci dyskretnych Warto ciami wyj ciowymi mog by liczby kolory (jak w tym przy-padku) czy cokolwiek innego co uznasz za odpowiednie Funkcja ta przydaje si bardzo je lichcesz podzieli zbioacuter warto ci na grupy W omawianym przypadku zdecydowa em si utwo-rzy pi grup docelowych ale ich liczba nie jest w aden sposoacuteb formalnie ograniczona
Zauwa e okre li em tu zbioacuter warto ci wyj ciowych natomiast nie napisa em nic na tematdziedziny (Czekam a wczytaj si dane) Kolory ktoacuterymi si pos u y em pochodz z plikucolorbrewerjs dost pnego pod adresem httpsgithubcommbostockd3treemasterlibcolorbrewerRepozytorium to zawiera sporych rozmiaroacutew zbioacuter barw dobranych przez Cynthi Brewerna podstawie prowadzonych przez ni bada
Pora wczyta jakie dane Zawczasu przygotowa em plik us-ag-productivity-2004csv w ktoacuterymznajdziesz dane u o one w nast puj cy sposoacuteb
statevalueAlabama11791Arkansas13705Arizona13847California17979Colorado10325Connecticut13209Delaware14345
Dane te udost pnione przez Departament Rolnictwa Stanoacutew Zjednoczonych zawieraj in-formacje na temat produkcji rolnej w poszczegoacutelnych stanach w 2004 roku Dane liczboweprzedstawiaj wyniki wzgl dne wyznaczane dla linii bazowej jak by a produkcja rolnaw Alabamie w 1996 roku (10) Wi ksze od jedynki warto ci nale y zatem rozumie jakowy szy poziom produkcji p odoacutew rolnych a mniejsze jako ni szy (Na stronie httpdatagovmo na znale wiele oficjalnych zestawie statystycznych) Wydaje si e te warto ci po-winny adnie si prze o y na kartogram produkcji rolnej
Dane z pliku wczytamy za pomoc funkcji d3csv()
d3csv(us-ag-productivity-2004csv function(data)
Teraz (zanim zapomn ) w funkcji zwrotnej zdefiniuj parametr color dziedziny warto ciwej ciowych skali kwantuj cej
colordomain([ d3min(data function(d) return dvalue ) d3max(data function(d) return dvalue )])
Kup książkę Poleć książkę
216 Rozdzia 12 Mapy geograficzne
W kodzie tym pojawiaj si funkcje d3min() i d3max() pozwalaj ce wyznaczy i zwroacutecinajmniejsz i najwi ksz warto dzi ki czemu dziedzina b dzie wyznaczana dynamicznie
Nast pnie wczytamy dane JSON mdash t cz operacji przeprowadzimy tak jak poprzednioG oacutewna roacute nica i nowo polega na tym e tym razem chc w czy dane dotycz ce rolnictwado danych GeoJSON Dlaczego Poniewa do znacznika mo na do cza tylko jeden zestawdanych naraz Zdecydowanie potrzebujemy danych GeoJSON bo na ich podstawie tworzones cie ki ale jednocze nie potrzebujemy te danych dotycz cych upraw Gdyby zatemuda o si po czy je w jedn monstrualn tablic wtedy mogliby my podpi ca o podznaczniki path (Istnieje kilka sposoboacutew rozwi zania tego problemu mdash jak zawsze prezentujswoj ulubion metod )
d3json(us-statesjson function(json) czy dane rolnicze z danymi GeoJSON Sprawdza w p tli raz ca y zestaw danych rolniczych for (var i = 0 i lt datalength i++) Pobiera nazw stanu var dataState = data[i]state Pobiera warto danych i przekszta ca j na liczb zmiennoprzecinkow var dataValue = parseFloat(data[i]value) Odnajduje odpowiedni stan w danych GeoJSON for (var j = 0 j lt jsonfeatureslength j++) var jsonState = jsonfeatures[j]propertiesname if (dataState == jsonState) Kopiuje dane do zmiennej JSON jsonfeatures[j]propertiesvalue = dataValue Przestaje przeszukiwa JSON break
Przyjrzyj si uwa nie przytoczonemu fragmentowi kodu Zasadniczo zaproponowane roz-wi zanie polega na tym by dla ka dego stanu odnale dane GeoJSON opatrzone t samnazw (na przyk ad Colorado) Gdy to si uda pobierzemy warto ci danych zapisanych dlaka dego stanu i dodamy je do jsonfeatures[j]propertiesvalue W ten sposoacuteb b done po czone ze znacznikiem i dost pne poacute niej gdy b dziemy ich potrzebowa
Wreszcie w ten sam sposoacuteb co ostatnio przygotujemy cie ki przy czym tym razem wartofunkcji style() b dziemy przypisywa dynamicznie
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path) style(fill function(d) Pobiera warto ci danych var value = dpropertiesvalue if (value) Je li warto istnieje return color(value) else Je li warto jest niezdefiniowana return ccc )
Kup książkę Poleć książkę
Dodawanie punktoacutew 217
Teraz ka da ze cie ek zostanie wype niona innym kolorem a nie jak mia o to miejsce po-przednio gdy wszystkie wype nili my barw steelblue Problem polega na tym e niedysponujemy danymi ze wszystkich stanoacutew Zestawienie ktoacuterym si pos u y em nie obej-mowa o Alaski Dystryktu Kolumbii Hawajoacutew i Portoryko (ktoacutere wprawdzie nie jest stanemale jest uwzgl dnione w danych GeoJSON i pojawia si w odwzorowaniu)
Aby poradzi sobie jako z tymi wyj tkami doda em do kodu warunek logiczny mdash instrukcjif() ktoacutera sprawdza czy dla danego stanu warto danych zosta a zdefiniowana Je li daneistniej zwracana jest funkcja color(value) co oznacza e mog przekaza dane do skalikwantuj cej i otrzyma w wyniku tego kod koloru Dla warto ci niezdefiniowanych ustali emdomy ln warto koloru ccc co odpowiada delikatnej szaro ci
Pi knie Spoacutejrz tylko na wyniki widoczne na rysunku 125 Sprawd jak prezentuje si kodi sproacutebuj z nim swoich si Znajdziesz go w pliku 05_choroplethhtml
Rysunek 125 Kartogram przedstawiaj cy poziom produkcji rolnej w poszczegoacutelnych stanach
Dodawanie punktoacutewMi o by oby zaznaczy na mapie cho kilka miast by nada grafice dok adniejszy kontekstprawda Warto by oby te znaczy ile jest du ych obszaroacutew g sto zaludnionych w stanacho najwy szym (i najni szym) poziomie produktywno ci rolnej Zaczniemy znoacutew od znale-zienia odpowiednich danych
Na szcz cie niedawno mieli my znoacutew spis powszechny (Na to id nasze podatki) Otopocz tek nieobrobionego pliku CSV zawieraj cego roczne szacunkowe zestawienie liczbyludno ci miast powy ej 50 000 mieszka coacutew (plik dost pny pod adresem httpwwwcensusgovpopestdatacitiestotals2011tablesSUB-EST2011-01csv)
table with row headers in column A and column headers in rows 3 through 4Table 1 Annual Estimates of the Resident Population for Incorporated PlacesOver 50000 Ranked by July 1 2011 Population April 1 2010 to July 1 2011RankGeographic AreaApril 1 2010Population Estimate (as of July 1)PlaceStateCensusEstimates Base201020111New York cityNew York81751338175133818644382449102Los Angeles cityCalifornia37926213792625379576138197023Chicago cityIllinois2695598269559826982832707120
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
Odwzorowania 213
Drug zmian jak zrobimy b dzie jawne za danie od generatora cie ek by wszystkiecie ki wyznacza w odniesieniu do wskazanego wcze niej w asnego odwzorowania
var path = d3geopath() projection(projection)
W ten sposoacuteb otrzymali my map przedstawion na rysunku 122 Powoli zbli amy si do celuKod znajdziesz w pliku 02_projectionhtml
Rysunek 122 Te same dane GeoJSON ale przy wy rodkowaniu rzutu
Mo emy te doda do odwzorowania metod scale() eby zmniejszy nieco map i osi gntym samym wynik przedstawiony na rysunku 123
var projection = d3geoalbersUsa() translate([w2 h2]) scale([500])
Rysunek 123 Mapa Stanoacutew Zjednoczonych mdash przeskalowana i wy rodkowana tak by mie ci a siw obszarze obrazu
Domy ln warto ci skalowania jest 1000 Mniejsze liczby zmniejszaj map a wi ksze po-wi kszaj
Kup książkę Poleć książkę
214 Rozdzia 12 Mapy geograficzne
Doskonale Je li otworzysz w przegl darce plik 03_scaledhtml przekonasz si e wszystkodzia a
Wystarczy doda jedn instrukcj style() eby zmieni kolor wype nienia cie ek na jakimniej przygn biaj cy S dz e niebieski widoczny na rysunku 124 nie jest brzydki
Rysunek 124 Niebieski jest zdecydowanie lepszy
Ca y kod znajdziesz w pliku 04_fillhtml W ten sam sposoacuteb mo na zdefiniowa kolor i szero-ko p dzla obramowania
Funkcje rzutuj ce ktoacutere pozwalaj uzyskiwa roacute nego rodzaju odwzorowania kartograficz-ne to niezwykle pot ne algorytmy Warto wiedzie e nie ma odwzorowa uniwersalnychmdash zmienia si je w zale no ci od tego jakich informacji potrzebujemy i o ktoacuter cz wiatachodzi (inaczej odwzorowuje si bieguny a inaczej okolice roacutewnika)
Zas ug g oacutewnie Jasona Daviesa (httpwwwjasondaviescom) jest to e dodatki do biblioteki D3odpowiedzialne za przygotowanie odwzorowa kartograficznych oferuj dzi u ytkownikomniemal wszystkie znane nam rodzaje rzutoacutew Szczegoacute owy opis pracy z rzutami znajdziesz w do-kumentacji (httpsgithubcommbostockd3wikiGeo-Projections) Warto te zapozna si z poroacutewna-niem przedstawiaj cym w a ciwo ci poszczegoacutelnych rzutoacutew (httpblocksorgmbostock3711652)
KartogramKarto co To s owo ktoacuterego nie s yszy si na co dzie okre la map na ktoacuterej ca e obszaryzosta y wype nione roacute nymi odcieniami (jasnymi lub ciemnymi) czy te roacute nymi kolorami takby odda rozk ad powi zanych z oznaczeniami warto ci W Stanach Zjednoczonych szcze-goacutelnie w okresie wyboroacutew cz sto spotyka si kartogramy okre lane mianem bdquoczerwonychi niebieskich stanoacutewrdquo Na mapach tych zaznacza si odpowiednim kolorem przewag popar-cia dla kandydatoacutew Partii Demokratycznej b d Partii Republika skiej Ale kartogramy wy-konuje si z roacute nych przyczyn niekoniecznie politycznych
Takie odwzorowania ciesz si chyba najwi ksz popularno ci w roacuted u ytkownikoacutew D3Pami taj jednak e cho kartogramy potrafi by niezwykle pomocne to maj jednak po-wa ne ograniczenia Poniewa na tego rodzaju mapach warto ci odwzorowuje si na pewnejpowierzchni atwo mo e doj do niezamierzonego przek amania du e powierzchnie o niskiej
Kup książkę Poleć książkę
Kartogram 215
g sto ci danej wielko ci (na przyk ad stan Nevada) mog sprawia wra enie bardziej istot-nych ni s w rzeczywisto ci Typowy kartogram nie oddaje dobrze warto ci liczonych bdquonag ow rdquo bo na przyk ad Nevada jest zbyt du a a Delaware zbyt ma y Jednocze nie karto-gram zachowuje geografi miejsca oraz mdash jak na map mdash wygl da naprawd imponuj coZobaczmy zatem co da si z tym zrobi (Kod znajdziesz w pliku 05_choroplethhtml)
Po pierwsze zdefiniuj funkcj skaluj c ktoacutera pobierze warto ci liczbowe a zwroacuteci koloryNa tym w a nie polega w du ej mierze praca nad kartogramem
var color = d3scalequantize() range([rgb(237248233) rgb(186228179)rgb(116196118)rgb(4916384)rgb(010944)])
Funkcja quantize jest zaliczana do grupy skal liniowych ale wynikiem jej dzia ania jest zbioacuterwarto ci dyskretnych Warto ciami wyj ciowymi mog by liczby kolory (jak w tym przy-padku) czy cokolwiek innego co uznasz za odpowiednie Funkcja ta przydaje si bardzo je lichcesz podzieli zbioacuter warto ci na grupy W omawianym przypadku zdecydowa em si utwo-rzy pi grup docelowych ale ich liczba nie jest w aden sposoacuteb formalnie ograniczona
Zauwa e okre li em tu zbioacuter warto ci wyj ciowych natomiast nie napisa em nic na tematdziedziny (Czekam a wczytaj si dane) Kolory ktoacuterymi si pos u y em pochodz z plikucolorbrewerjs dost pnego pod adresem httpsgithubcommbostockd3treemasterlibcolorbrewerRepozytorium to zawiera sporych rozmiaroacutew zbioacuter barw dobranych przez Cynthi Brewerna podstawie prowadzonych przez ni bada
Pora wczyta jakie dane Zawczasu przygotowa em plik us-ag-productivity-2004csv w ktoacuterymznajdziesz dane u o one w nast puj cy sposoacuteb
statevalueAlabama11791Arkansas13705Arizona13847California17979Colorado10325Connecticut13209Delaware14345
Dane te udost pnione przez Departament Rolnictwa Stanoacutew Zjednoczonych zawieraj in-formacje na temat produkcji rolnej w poszczegoacutelnych stanach w 2004 roku Dane liczboweprzedstawiaj wyniki wzgl dne wyznaczane dla linii bazowej jak by a produkcja rolnaw Alabamie w 1996 roku (10) Wi ksze od jedynki warto ci nale y zatem rozumie jakowy szy poziom produkcji p odoacutew rolnych a mniejsze jako ni szy (Na stronie httpdatagovmo na znale wiele oficjalnych zestawie statystycznych) Wydaje si e te warto ci po-winny adnie si prze o y na kartogram produkcji rolnej
Dane z pliku wczytamy za pomoc funkcji d3csv()
d3csv(us-ag-productivity-2004csv function(data)
Teraz (zanim zapomn ) w funkcji zwrotnej zdefiniuj parametr color dziedziny warto ciwej ciowych skali kwantuj cej
colordomain([ d3min(data function(d) return dvalue ) d3max(data function(d) return dvalue )])
Kup książkę Poleć książkę
216 Rozdzia 12 Mapy geograficzne
W kodzie tym pojawiaj si funkcje d3min() i d3max() pozwalaj ce wyznaczy i zwroacutecinajmniejsz i najwi ksz warto dzi ki czemu dziedzina b dzie wyznaczana dynamicznie
Nast pnie wczytamy dane JSON mdash t cz operacji przeprowadzimy tak jak poprzednioG oacutewna roacute nica i nowo polega na tym e tym razem chc w czy dane dotycz ce rolnictwado danych GeoJSON Dlaczego Poniewa do znacznika mo na do cza tylko jeden zestawdanych naraz Zdecydowanie potrzebujemy danych GeoJSON bo na ich podstawie tworzones cie ki ale jednocze nie potrzebujemy te danych dotycz cych upraw Gdyby zatemuda o si po czy je w jedn monstrualn tablic wtedy mogliby my podpi ca o podznaczniki path (Istnieje kilka sposoboacutew rozwi zania tego problemu mdash jak zawsze prezentujswoj ulubion metod )
d3json(us-statesjson function(json) czy dane rolnicze z danymi GeoJSON Sprawdza w p tli raz ca y zestaw danych rolniczych for (var i = 0 i lt datalength i++) Pobiera nazw stanu var dataState = data[i]state Pobiera warto danych i przekszta ca j na liczb zmiennoprzecinkow var dataValue = parseFloat(data[i]value) Odnajduje odpowiedni stan w danych GeoJSON for (var j = 0 j lt jsonfeatureslength j++) var jsonState = jsonfeatures[j]propertiesname if (dataState == jsonState) Kopiuje dane do zmiennej JSON jsonfeatures[j]propertiesvalue = dataValue Przestaje przeszukiwa JSON break
Przyjrzyj si uwa nie przytoczonemu fragmentowi kodu Zasadniczo zaproponowane roz-wi zanie polega na tym by dla ka dego stanu odnale dane GeoJSON opatrzone t samnazw (na przyk ad Colorado) Gdy to si uda pobierzemy warto ci danych zapisanych dlaka dego stanu i dodamy je do jsonfeatures[j]propertiesvalue W ten sposoacuteb b done po czone ze znacznikiem i dost pne poacute niej gdy b dziemy ich potrzebowa
Wreszcie w ten sam sposoacuteb co ostatnio przygotujemy cie ki przy czym tym razem wartofunkcji style() b dziemy przypisywa dynamicznie
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path) style(fill function(d) Pobiera warto ci danych var value = dpropertiesvalue if (value) Je li warto istnieje return color(value) else Je li warto jest niezdefiniowana return ccc )
Kup książkę Poleć książkę
Dodawanie punktoacutew 217
Teraz ka da ze cie ek zostanie wype niona innym kolorem a nie jak mia o to miejsce po-przednio gdy wszystkie wype nili my barw steelblue Problem polega na tym e niedysponujemy danymi ze wszystkich stanoacutew Zestawienie ktoacuterym si pos u y em nie obej-mowa o Alaski Dystryktu Kolumbii Hawajoacutew i Portoryko (ktoacutere wprawdzie nie jest stanemale jest uwzgl dnione w danych GeoJSON i pojawia si w odwzorowaniu)
Aby poradzi sobie jako z tymi wyj tkami doda em do kodu warunek logiczny mdash instrukcjif() ktoacutera sprawdza czy dla danego stanu warto danych zosta a zdefiniowana Je li daneistniej zwracana jest funkcja color(value) co oznacza e mog przekaza dane do skalikwantuj cej i otrzyma w wyniku tego kod koloru Dla warto ci niezdefiniowanych ustali emdomy ln warto koloru ccc co odpowiada delikatnej szaro ci
Pi knie Spoacutejrz tylko na wyniki widoczne na rysunku 125 Sprawd jak prezentuje si kodi sproacutebuj z nim swoich si Znajdziesz go w pliku 05_choroplethhtml
Rysunek 125 Kartogram przedstawiaj cy poziom produkcji rolnej w poszczegoacutelnych stanach
Dodawanie punktoacutewMi o by oby zaznaczy na mapie cho kilka miast by nada grafice dok adniejszy kontekstprawda Warto by oby te znaczy ile jest du ych obszaroacutew g sto zaludnionych w stanacho najwy szym (i najni szym) poziomie produktywno ci rolnej Zaczniemy znoacutew od znale-zienia odpowiednich danych
Na szcz cie niedawno mieli my znoacutew spis powszechny (Na to id nasze podatki) Otopocz tek nieobrobionego pliku CSV zawieraj cego roczne szacunkowe zestawienie liczbyludno ci miast powy ej 50 000 mieszka coacutew (plik dost pny pod adresem httpwwwcensusgovpopestdatacitiestotals2011tablesSUB-EST2011-01csv)
table with row headers in column A and column headers in rows 3 through 4Table 1 Annual Estimates of the Resident Population for Incorporated PlacesOver 50000 Ranked by July 1 2011 Population April 1 2010 to July 1 2011RankGeographic AreaApril 1 2010Population Estimate (as of July 1)PlaceStateCensusEstimates Base201020111New York cityNew York81751338175133818644382449102Los Angeles cityCalifornia37926213792625379576138197023Chicago cityIllinois2695598269559826982832707120
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
214 Rozdzia 12 Mapy geograficzne
Doskonale Je li otworzysz w przegl darce plik 03_scaledhtml przekonasz si e wszystkodzia a
Wystarczy doda jedn instrukcj style() eby zmieni kolor wype nienia cie ek na jakimniej przygn biaj cy S dz e niebieski widoczny na rysunku 124 nie jest brzydki
Rysunek 124 Niebieski jest zdecydowanie lepszy
Ca y kod znajdziesz w pliku 04_fillhtml W ten sam sposoacuteb mo na zdefiniowa kolor i szero-ko p dzla obramowania
Funkcje rzutuj ce ktoacutere pozwalaj uzyskiwa roacute nego rodzaju odwzorowania kartograficz-ne to niezwykle pot ne algorytmy Warto wiedzie e nie ma odwzorowa uniwersalnychmdash zmienia si je w zale no ci od tego jakich informacji potrzebujemy i o ktoacuter cz wiatachodzi (inaczej odwzorowuje si bieguny a inaczej okolice roacutewnika)
Zas ug g oacutewnie Jasona Daviesa (httpwwwjasondaviescom) jest to e dodatki do biblioteki D3odpowiedzialne za przygotowanie odwzorowa kartograficznych oferuj dzi u ytkownikomniemal wszystkie znane nam rodzaje rzutoacutew Szczegoacute owy opis pracy z rzutami znajdziesz w do-kumentacji (httpsgithubcommbostockd3wikiGeo-Projections) Warto te zapozna si z poroacutewna-niem przedstawiaj cym w a ciwo ci poszczegoacutelnych rzutoacutew (httpblocksorgmbostock3711652)
KartogramKarto co To s owo ktoacuterego nie s yszy si na co dzie okre la map na ktoacuterej ca e obszaryzosta y wype nione roacute nymi odcieniami (jasnymi lub ciemnymi) czy te roacute nymi kolorami takby odda rozk ad powi zanych z oznaczeniami warto ci W Stanach Zjednoczonych szcze-goacutelnie w okresie wyboroacutew cz sto spotyka si kartogramy okre lane mianem bdquoczerwonychi niebieskich stanoacutewrdquo Na mapach tych zaznacza si odpowiednim kolorem przewag popar-cia dla kandydatoacutew Partii Demokratycznej b d Partii Republika skiej Ale kartogramy wy-konuje si z roacute nych przyczyn niekoniecznie politycznych
Takie odwzorowania ciesz si chyba najwi ksz popularno ci w roacuted u ytkownikoacutew D3Pami taj jednak e cho kartogramy potrafi by niezwykle pomocne to maj jednak po-wa ne ograniczenia Poniewa na tego rodzaju mapach warto ci odwzorowuje si na pewnejpowierzchni atwo mo e doj do niezamierzonego przek amania du e powierzchnie o niskiej
Kup książkę Poleć książkę
Kartogram 215
g sto ci danej wielko ci (na przyk ad stan Nevada) mog sprawia wra enie bardziej istot-nych ni s w rzeczywisto ci Typowy kartogram nie oddaje dobrze warto ci liczonych bdquonag ow rdquo bo na przyk ad Nevada jest zbyt du a a Delaware zbyt ma y Jednocze nie karto-gram zachowuje geografi miejsca oraz mdash jak na map mdash wygl da naprawd imponuj coZobaczmy zatem co da si z tym zrobi (Kod znajdziesz w pliku 05_choroplethhtml)
Po pierwsze zdefiniuj funkcj skaluj c ktoacutera pobierze warto ci liczbowe a zwroacuteci koloryNa tym w a nie polega w du ej mierze praca nad kartogramem
var color = d3scalequantize() range([rgb(237248233) rgb(186228179)rgb(116196118)rgb(4916384)rgb(010944)])
Funkcja quantize jest zaliczana do grupy skal liniowych ale wynikiem jej dzia ania jest zbioacuterwarto ci dyskretnych Warto ciami wyj ciowymi mog by liczby kolory (jak w tym przy-padku) czy cokolwiek innego co uznasz za odpowiednie Funkcja ta przydaje si bardzo je lichcesz podzieli zbioacuter warto ci na grupy W omawianym przypadku zdecydowa em si utwo-rzy pi grup docelowych ale ich liczba nie jest w aden sposoacuteb formalnie ograniczona
Zauwa e okre li em tu zbioacuter warto ci wyj ciowych natomiast nie napisa em nic na tematdziedziny (Czekam a wczytaj si dane) Kolory ktoacuterymi si pos u y em pochodz z plikucolorbrewerjs dost pnego pod adresem httpsgithubcommbostockd3treemasterlibcolorbrewerRepozytorium to zawiera sporych rozmiaroacutew zbioacuter barw dobranych przez Cynthi Brewerna podstawie prowadzonych przez ni bada
Pora wczyta jakie dane Zawczasu przygotowa em plik us-ag-productivity-2004csv w ktoacuterymznajdziesz dane u o one w nast puj cy sposoacuteb
statevalueAlabama11791Arkansas13705Arizona13847California17979Colorado10325Connecticut13209Delaware14345
Dane te udost pnione przez Departament Rolnictwa Stanoacutew Zjednoczonych zawieraj in-formacje na temat produkcji rolnej w poszczegoacutelnych stanach w 2004 roku Dane liczboweprzedstawiaj wyniki wzgl dne wyznaczane dla linii bazowej jak by a produkcja rolnaw Alabamie w 1996 roku (10) Wi ksze od jedynki warto ci nale y zatem rozumie jakowy szy poziom produkcji p odoacutew rolnych a mniejsze jako ni szy (Na stronie httpdatagovmo na znale wiele oficjalnych zestawie statystycznych) Wydaje si e te warto ci po-winny adnie si prze o y na kartogram produkcji rolnej
Dane z pliku wczytamy za pomoc funkcji d3csv()
d3csv(us-ag-productivity-2004csv function(data)
Teraz (zanim zapomn ) w funkcji zwrotnej zdefiniuj parametr color dziedziny warto ciwej ciowych skali kwantuj cej
colordomain([ d3min(data function(d) return dvalue ) d3max(data function(d) return dvalue )])
Kup książkę Poleć książkę
216 Rozdzia 12 Mapy geograficzne
W kodzie tym pojawiaj si funkcje d3min() i d3max() pozwalaj ce wyznaczy i zwroacutecinajmniejsz i najwi ksz warto dzi ki czemu dziedzina b dzie wyznaczana dynamicznie
Nast pnie wczytamy dane JSON mdash t cz operacji przeprowadzimy tak jak poprzednioG oacutewna roacute nica i nowo polega na tym e tym razem chc w czy dane dotycz ce rolnictwado danych GeoJSON Dlaczego Poniewa do znacznika mo na do cza tylko jeden zestawdanych naraz Zdecydowanie potrzebujemy danych GeoJSON bo na ich podstawie tworzones cie ki ale jednocze nie potrzebujemy te danych dotycz cych upraw Gdyby zatemuda o si po czy je w jedn monstrualn tablic wtedy mogliby my podpi ca o podznaczniki path (Istnieje kilka sposoboacutew rozwi zania tego problemu mdash jak zawsze prezentujswoj ulubion metod )
d3json(us-statesjson function(json) czy dane rolnicze z danymi GeoJSON Sprawdza w p tli raz ca y zestaw danych rolniczych for (var i = 0 i lt datalength i++) Pobiera nazw stanu var dataState = data[i]state Pobiera warto danych i przekszta ca j na liczb zmiennoprzecinkow var dataValue = parseFloat(data[i]value) Odnajduje odpowiedni stan w danych GeoJSON for (var j = 0 j lt jsonfeatureslength j++) var jsonState = jsonfeatures[j]propertiesname if (dataState == jsonState) Kopiuje dane do zmiennej JSON jsonfeatures[j]propertiesvalue = dataValue Przestaje przeszukiwa JSON break
Przyjrzyj si uwa nie przytoczonemu fragmentowi kodu Zasadniczo zaproponowane roz-wi zanie polega na tym by dla ka dego stanu odnale dane GeoJSON opatrzone t samnazw (na przyk ad Colorado) Gdy to si uda pobierzemy warto ci danych zapisanych dlaka dego stanu i dodamy je do jsonfeatures[j]propertiesvalue W ten sposoacuteb b done po czone ze znacznikiem i dost pne poacute niej gdy b dziemy ich potrzebowa
Wreszcie w ten sam sposoacuteb co ostatnio przygotujemy cie ki przy czym tym razem wartofunkcji style() b dziemy przypisywa dynamicznie
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path) style(fill function(d) Pobiera warto ci danych var value = dpropertiesvalue if (value) Je li warto istnieje return color(value) else Je li warto jest niezdefiniowana return ccc )
Kup książkę Poleć książkę
Dodawanie punktoacutew 217
Teraz ka da ze cie ek zostanie wype niona innym kolorem a nie jak mia o to miejsce po-przednio gdy wszystkie wype nili my barw steelblue Problem polega na tym e niedysponujemy danymi ze wszystkich stanoacutew Zestawienie ktoacuterym si pos u y em nie obej-mowa o Alaski Dystryktu Kolumbii Hawajoacutew i Portoryko (ktoacutere wprawdzie nie jest stanemale jest uwzgl dnione w danych GeoJSON i pojawia si w odwzorowaniu)
Aby poradzi sobie jako z tymi wyj tkami doda em do kodu warunek logiczny mdash instrukcjif() ktoacutera sprawdza czy dla danego stanu warto danych zosta a zdefiniowana Je li daneistniej zwracana jest funkcja color(value) co oznacza e mog przekaza dane do skalikwantuj cej i otrzyma w wyniku tego kod koloru Dla warto ci niezdefiniowanych ustali emdomy ln warto koloru ccc co odpowiada delikatnej szaro ci
Pi knie Spoacutejrz tylko na wyniki widoczne na rysunku 125 Sprawd jak prezentuje si kodi sproacutebuj z nim swoich si Znajdziesz go w pliku 05_choroplethhtml
Rysunek 125 Kartogram przedstawiaj cy poziom produkcji rolnej w poszczegoacutelnych stanach
Dodawanie punktoacutewMi o by oby zaznaczy na mapie cho kilka miast by nada grafice dok adniejszy kontekstprawda Warto by oby te znaczy ile jest du ych obszaroacutew g sto zaludnionych w stanacho najwy szym (i najni szym) poziomie produktywno ci rolnej Zaczniemy znoacutew od znale-zienia odpowiednich danych
Na szcz cie niedawno mieli my znoacutew spis powszechny (Na to id nasze podatki) Otopocz tek nieobrobionego pliku CSV zawieraj cego roczne szacunkowe zestawienie liczbyludno ci miast powy ej 50 000 mieszka coacutew (plik dost pny pod adresem httpwwwcensusgovpopestdatacitiestotals2011tablesSUB-EST2011-01csv)
table with row headers in column A and column headers in rows 3 through 4Table 1 Annual Estimates of the Resident Population for Incorporated PlacesOver 50000 Ranked by July 1 2011 Population April 1 2010 to July 1 2011RankGeographic AreaApril 1 2010Population Estimate (as of July 1)PlaceStateCensusEstimates Base201020111New York cityNew York81751338175133818644382449102Los Angeles cityCalifornia37926213792625379576138197023Chicago cityIllinois2695598269559826982832707120
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
Kartogram 215
g sto ci danej wielko ci (na przyk ad stan Nevada) mog sprawia wra enie bardziej istot-nych ni s w rzeczywisto ci Typowy kartogram nie oddaje dobrze warto ci liczonych bdquonag ow rdquo bo na przyk ad Nevada jest zbyt du a a Delaware zbyt ma y Jednocze nie karto-gram zachowuje geografi miejsca oraz mdash jak na map mdash wygl da naprawd imponuj coZobaczmy zatem co da si z tym zrobi (Kod znajdziesz w pliku 05_choroplethhtml)
Po pierwsze zdefiniuj funkcj skaluj c ktoacutera pobierze warto ci liczbowe a zwroacuteci koloryNa tym w a nie polega w du ej mierze praca nad kartogramem
var color = d3scalequantize() range([rgb(237248233) rgb(186228179)rgb(116196118)rgb(4916384)rgb(010944)])
Funkcja quantize jest zaliczana do grupy skal liniowych ale wynikiem jej dzia ania jest zbioacuterwarto ci dyskretnych Warto ciami wyj ciowymi mog by liczby kolory (jak w tym przy-padku) czy cokolwiek innego co uznasz za odpowiednie Funkcja ta przydaje si bardzo je lichcesz podzieli zbioacuter warto ci na grupy W omawianym przypadku zdecydowa em si utwo-rzy pi grup docelowych ale ich liczba nie jest w aden sposoacuteb formalnie ograniczona
Zauwa e okre li em tu zbioacuter warto ci wyj ciowych natomiast nie napisa em nic na tematdziedziny (Czekam a wczytaj si dane) Kolory ktoacuterymi si pos u y em pochodz z plikucolorbrewerjs dost pnego pod adresem httpsgithubcommbostockd3treemasterlibcolorbrewerRepozytorium to zawiera sporych rozmiaroacutew zbioacuter barw dobranych przez Cynthi Brewerna podstawie prowadzonych przez ni bada
Pora wczyta jakie dane Zawczasu przygotowa em plik us-ag-productivity-2004csv w ktoacuterymznajdziesz dane u o one w nast puj cy sposoacuteb
statevalueAlabama11791Arkansas13705Arizona13847California17979Colorado10325Connecticut13209Delaware14345
Dane te udost pnione przez Departament Rolnictwa Stanoacutew Zjednoczonych zawieraj in-formacje na temat produkcji rolnej w poszczegoacutelnych stanach w 2004 roku Dane liczboweprzedstawiaj wyniki wzgl dne wyznaczane dla linii bazowej jak by a produkcja rolnaw Alabamie w 1996 roku (10) Wi ksze od jedynki warto ci nale y zatem rozumie jakowy szy poziom produkcji p odoacutew rolnych a mniejsze jako ni szy (Na stronie httpdatagovmo na znale wiele oficjalnych zestawie statystycznych) Wydaje si e te warto ci po-winny adnie si prze o y na kartogram produkcji rolnej
Dane z pliku wczytamy za pomoc funkcji d3csv()
d3csv(us-ag-productivity-2004csv function(data)
Teraz (zanim zapomn ) w funkcji zwrotnej zdefiniuj parametr color dziedziny warto ciwej ciowych skali kwantuj cej
colordomain([ d3min(data function(d) return dvalue ) d3max(data function(d) return dvalue )])
Kup książkę Poleć książkę
216 Rozdzia 12 Mapy geograficzne
W kodzie tym pojawiaj si funkcje d3min() i d3max() pozwalaj ce wyznaczy i zwroacutecinajmniejsz i najwi ksz warto dzi ki czemu dziedzina b dzie wyznaczana dynamicznie
Nast pnie wczytamy dane JSON mdash t cz operacji przeprowadzimy tak jak poprzednioG oacutewna roacute nica i nowo polega na tym e tym razem chc w czy dane dotycz ce rolnictwado danych GeoJSON Dlaczego Poniewa do znacznika mo na do cza tylko jeden zestawdanych naraz Zdecydowanie potrzebujemy danych GeoJSON bo na ich podstawie tworzones cie ki ale jednocze nie potrzebujemy te danych dotycz cych upraw Gdyby zatemuda o si po czy je w jedn monstrualn tablic wtedy mogliby my podpi ca o podznaczniki path (Istnieje kilka sposoboacutew rozwi zania tego problemu mdash jak zawsze prezentujswoj ulubion metod )
d3json(us-statesjson function(json) czy dane rolnicze z danymi GeoJSON Sprawdza w p tli raz ca y zestaw danych rolniczych for (var i = 0 i lt datalength i++) Pobiera nazw stanu var dataState = data[i]state Pobiera warto danych i przekszta ca j na liczb zmiennoprzecinkow var dataValue = parseFloat(data[i]value) Odnajduje odpowiedni stan w danych GeoJSON for (var j = 0 j lt jsonfeatureslength j++) var jsonState = jsonfeatures[j]propertiesname if (dataState == jsonState) Kopiuje dane do zmiennej JSON jsonfeatures[j]propertiesvalue = dataValue Przestaje przeszukiwa JSON break
Przyjrzyj si uwa nie przytoczonemu fragmentowi kodu Zasadniczo zaproponowane roz-wi zanie polega na tym by dla ka dego stanu odnale dane GeoJSON opatrzone t samnazw (na przyk ad Colorado) Gdy to si uda pobierzemy warto ci danych zapisanych dlaka dego stanu i dodamy je do jsonfeatures[j]propertiesvalue W ten sposoacuteb b done po czone ze znacznikiem i dost pne poacute niej gdy b dziemy ich potrzebowa
Wreszcie w ten sam sposoacuteb co ostatnio przygotujemy cie ki przy czym tym razem wartofunkcji style() b dziemy przypisywa dynamicznie
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path) style(fill function(d) Pobiera warto ci danych var value = dpropertiesvalue if (value) Je li warto istnieje return color(value) else Je li warto jest niezdefiniowana return ccc )
Kup książkę Poleć książkę
Dodawanie punktoacutew 217
Teraz ka da ze cie ek zostanie wype niona innym kolorem a nie jak mia o to miejsce po-przednio gdy wszystkie wype nili my barw steelblue Problem polega na tym e niedysponujemy danymi ze wszystkich stanoacutew Zestawienie ktoacuterym si pos u y em nie obej-mowa o Alaski Dystryktu Kolumbii Hawajoacutew i Portoryko (ktoacutere wprawdzie nie jest stanemale jest uwzgl dnione w danych GeoJSON i pojawia si w odwzorowaniu)
Aby poradzi sobie jako z tymi wyj tkami doda em do kodu warunek logiczny mdash instrukcjif() ktoacutera sprawdza czy dla danego stanu warto danych zosta a zdefiniowana Je li daneistniej zwracana jest funkcja color(value) co oznacza e mog przekaza dane do skalikwantuj cej i otrzyma w wyniku tego kod koloru Dla warto ci niezdefiniowanych ustali emdomy ln warto koloru ccc co odpowiada delikatnej szaro ci
Pi knie Spoacutejrz tylko na wyniki widoczne na rysunku 125 Sprawd jak prezentuje si kodi sproacutebuj z nim swoich si Znajdziesz go w pliku 05_choroplethhtml
Rysunek 125 Kartogram przedstawiaj cy poziom produkcji rolnej w poszczegoacutelnych stanach
Dodawanie punktoacutewMi o by oby zaznaczy na mapie cho kilka miast by nada grafice dok adniejszy kontekstprawda Warto by oby te znaczy ile jest du ych obszaroacutew g sto zaludnionych w stanacho najwy szym (i najni szym) poziomie produktywno ci rolnej Zaczniemy znoacutew od znale-zienia odpowiednich danych
Na szcz cie niedawno mieli my znoacutew spis powszechny (Na to id nasze podatki) Otopocz tek nieobrobionego pliku CSV zawieraj cego roczne szacunkowe zestawienie liczbyludno ci miast powy ej 50 000 mieszka coacutew (plik dost pny pod adresem httpwwwcensusgovpopestdatacitiestotals2011tablesSUB-EST2011-01csv)
table with row headers in column A and column headers in rows 3 through 4Table 1 Annual Estimates of the Resident Population for Incorporated PlacesOver 50000 Ranked by July 1 2011 Population April 1 2010 to July 1 2011RankGeographic AreaApril 1 2010Population Estimate (as of July 1)PlaceStateCensusEstimates Base201020111New York cityNew York81751338175133818644382449102Los Angeles cityCalifornia37926213792625379576138197023Chicago cityIllinois2695598269559826982832707120
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
216 Rozdzia 12 Mapy geograficzne
W kodzie tym pojawiaj si funkcje d3min() i d3max() pozwalaj ce wyznaczy i zwroacutecinajmniejsz i najwi ksz warto dzi ki czemu dziedzina b dzie wyznaczana dynamicznie
Nast pnie wczytamy dane JSON mdash t cz operacji przeprowadzimy tak jak poprzednioG oacutewna roacute nica i nowo polega na tym e tym razem chc w czy dane dotycz ce rolnictwado danych GeoJSON Dlaczego Poniewa do znacznika mo na do cza tylko jeden zestawdanych naraz Zdecydowanie potrzebujemy danych GeoJSON bo na ich podstawie tworzones cie ki ale jednocze nie potrzebujemy te danych dotycz cych upraw Gdyby zatemuda o si po czy je w jedn monstrualn tablic wtedy mogliby my podpi ca o podznaczniki path (Istnieje kilka sposoboacutew rozwi zania tego problemu mdash jak zawsze prezentujswoj ulubion metod )
d3json(us-statesjson function(json) czy dane rolnicze z danymi GeoJSON Sprawdza w p tli raz ca y zestaw danych rolniczych for (var i = 0 i lt datalength i++) Pobiera nazw stanu var dataState = data[i]state Pobiera warto danych i przekszta ca j na liczb zmiennoprzecinkow var dataValue = parseFloat(data[i]value) Odnajduje odpowiedni stan w danych GeoJSON for (var j = 0 j lt jsonfeatureslength j++) var jsonState = jsonfeatures[j]propertiesname if (dataState == jsonState) Kopiuje dane do zmiennej JSON jsonfeatures[j]propertiesvalue = dataValue Przestaje przeszukiwa JSON break
Przyjrzyj si uwa nie przytoczonemu fragmentowi kodu Zasadniczo zaproponowane roz-wi zanie polega na tym by dla ka dego stanu odnale dane GeoJSON opatrzone t samnazw (na przyk ad Colorado) Gdy to si uda pobierzemy warto ci danych zapisanych dlaka dego stanu i dodamy je do jsonfeatures[j]propertiesvalue W ten sposoacuteb b done po czone ze znacznikiem i dost pne poacute niej gdy b dziemy ich potrzebowa
Wreszcie w ten sam sposoacuteb co ostatnio przygotujemy cie ki przy czym tym razem wartofunkcji style() b dziemy przypisywa dynamicznie
svgselectAll(path) data(jsonfeatures) enter() append(path) attr(d path) style(fill function(d) Pobiera warto ci danych var value = dpropertiesvalue if (value) Je li warto istnieje return color(value) else Je li warto jest niezdefiniowana return ccc )
Kup książkę Poleć książkę
Dodawanie punktoacutew 217
Teraz ka da ze cie ek zostanie wype niona innym kolorem a nie jak mia o to miejsce po-przednio gdy wszystkie wype nili my barw steelblue Problem polega na tym e niedysponujemy danymi ze wszystkich stanoacutew Zestawienie ktoacuterym si pos u y em nie obej-mowa o Alaski Dystryktu Kolumbii Hawajoacutew i Portoryko (ktoacutere wprawdzie nie jest stanemale jest uwzgl dnione w danych GeoJSON i pojawia si w odwzorowaniu)
Aby poradzi sobie jako z tymi wyj tkami doda em do kodu warunek logiczny mdash instrukcjif() ktoacutera sprawdza czy dla danego stanu warto danych zosta a zdefiniowana Je li daneistniej zwracana jest funkcja color(value) co oznacza e mog przekaza dane do skalikwantuj cej i otrzyma w wyniku tego kod koloru Dla warto ci niezdefiniowanych ustali emdomy ln warto koloru ccc co odpowiada delikatnej szaro ci
Pi knie Spoacutejrz tylko na wyniki widoczne na rysunku 125 Sprawd jak prezentuje si kodi sproacutebuj z nim swoich si Znajdziesz go w pliku 05_choroplethhtml
Rysunek 125 Kartogram przedstawiaj cy poziom produkcji rolnej w poszczegoacutelnych stanach
Dodawanie punktoacutewMi o by oby zaznaczy na mapie cho kilka miast by nada grafice dok adniejszy kontekstprawda Warto by oby te znaczy ile jest du ych obszaroacutew g sto zaludnionych w stanacho najwy szym (i najni szym) poziomie produktywno ci rolnej Zaczniemy znoacutew od znale-zienia odpowiednich danych
Na szcz cie niedawno mieli my znoacutew spis powszechny (Na to id nasze podatki) Otopocz tek nieobrobionego pliku CSV zawieraj cego roczne szacunkowe zestawienie liczbyludno ci miast powy ej 50 000 mieszka coacutew (plik dost pny pod adresem httpwwwcensusgovpopestdatacitiestotals2011tablesSUB-EST2011-01csv)
table with row headers in column A and column headers in rows 3 through 4Table 1 Annual Estimates of the Resident Population for Incorporated PlacesOver 50000 Ranked by July 1 2011 Population April 1 2010 to July 1 2011RankGeographic AreaApril 1 2010Population Estimate (as of July 1)PlaceStateCensusEstimates Base201020111New York cityNew York81751338175133818644382449102Los Angeles cityCalifornia37926213792625379576138197023Chicago cityIllinois2695598269559826982832707120
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
Dodawanie punktoacutew 217
Teraz ka da ze cie ek zostanie wype niona innym kolorem a nie jak mia o to miejsce po-przednio gdy wszystkie wype nili my barw steelblue Problem polega na tym e niedysponujemy danymi ze wszystkich stanoacutew Zestawienie ktoacuterym si pos u y em nie obej-mowa o Alaski Dystryktu Kolumbii Hawajoacutew i Portoryko (ktoacutere wprawdzie nie jest stanemale jest uwzgl dnione w danych GeoJSON i pojawia si w odwzorowaniu)
Aby poradzi sobie jako z tymi wyj tkami doda em do kodu warunek logiczny mdash instrukcjif() ktoacutera sprawdza czy dla danego stanu warto danych zosta a zdefiniowana Je li daneistniej zwracana jest funkcja color(value) co oznacza e mog przekaza dane do skalikwantuj cej i otrzyma w wyniku tego kod koloru Dla warto ci niezdefiniowanych ustali emdomy ln warto koloru ccc co odpowiada delikatnej szaro ci
Pi knie Spoacutejrz tylko na wyniki widoczne na rysunku 125 Sprawd jak prezentuje si kodi sproacutebuj z nim swoich si Znajdziesz go w pliku 05_choroplethhtml
Rysunek 125 Kartogram przedstawiaj cy poziom produkcji rolnej w poszczegoacutelnych stanach
Dodawanie punktoacutewMi o by oby zaznaczy na mapie cho kilka miast by nada grafice dok adniejszy kontekstprawda Warto by oby te znaczy ile jest du ych obszaroacutew g sto zaludnionych w stanacho najwy szym (i najni szym) poziomie produktywno ci rolnej Zaczniemy znoacutew od znale-zienia odpowiednich danych
Na szcz cie niedawno mieli my znoacutew spis powszechny (Na to id nasze podatki) Otopocz tek nieobrobionego pliku CSV zawieraj cego roczne szacunkowe zestawienie liczbyludno ci miast powy ej 50 000 mieszka coacutew (plik dost pny pod adresem httpwwwcensusgovpopestdatacitiestotals2011tablesSUB-EST2011-01csv)
table with row headers in column A and column headers in rows 3 through 4Table 1 Annual Estimates of the Resident Population for Incorporated PlacesOver 50000 Ranked by July 1 2011 Population April 1 2010 to July 1 2011RankGeographic AreaApril 1 2010Population Estimate (as of July 1)PlaceStateCensusEstimates Base201020111New York cityNew York81751338175133818644382449102Los Angeles cityCalifornia37926213792625379576138197023Chicago cityIllinois2695598269559826982832707120
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
218 Rozdzia 12 Mapy geograficzne
4Houston cityTexas20994512099430210827821451465Philadelphia cityPennsylvania15260061526006152807415364716Phoenix cityArizona14456321445656144853114694717San Antonio cityTexas13274071327606133443113597588San Diego cityCalifornia13074021307406131151613261799Dallas cityTexas119781611978161201715122322910San Jose cityCalifornia945942952612955091967487
Niez y w tym ba agan i nie wszystkie dane s mi potrzebne Otwieram wi c plik w ukochanymarkuszu kalkulacyjnym porz dkuj nieco dane i usuwam zb dne kolumny (Ty mo esz zrobi tosamo w programach LibreOffice Calc Apple Numbers b d Microsoft Excel) Jednocze niestwierdzam e interesuje mnie tylko pi dziesi t najwi kszych miast wi c spokojnie mog po-min niektoacutere dane Po zapisaniu ostatecznej wersji w formacie CSV na dysku pozosta o mi to
rankplacepopulation1New York city81751332Los Angeles city37926213Chicago city26955984Houston city20994515Philadelphia city15260066Phoenix city14456327San Antonio city13274078San Diego city13074029Dallas city119781610San Jose city945942
To przydatne informacje ale eby moacutec umie ci je na mapie b d potrzebowa ich wspoacute -rz dnych geograficznych mdash szeroko ci i d ugo ci R czne sprawdzenie tego zaj oby ca e wiekiNa szcz cie mo emy wykorzysta us ug geokodowania Pozwala ona sprawdzi wspoacute rz dnegeograficzne miejsc na podstawie ich nazw Nazwy te s sprawdzane na mapie (a w zasadziew bazie danych) a nast pnie us uga zwraca dok adne dane dotycz ce szeroko ci i d ugo cigeograficznej No mo e przesadzi em nieco z t dok adno ci Geokoder stara si jak mo e aleczasami musi przyjmowa pewne za o enia szczegoacutelnie je li dostanie nieprecyzyjne dane wej-ciowe Gdy na przyk ad podasz mu nazw bdquoPary rdquo koder za o y e chodzi o Pary we Francji
a nie Pary w Teksasie Dlatego zawsze warto sprawdzi dane wyj ciowe na mapie i r czniepoprawi ewentualne pomy ki (maj c na podor dziu stron httpwwwtecznocomsquares)
Ruszam zatem do swojego ulubionego geokodera wsadowego (httpwwwgpsvisualizercomgeocoder)wklejam nazwy miejscowo ci i klikam Start Po kilku minutach otrzymuj kolejn list mdash warto cioddzielonych przecinkami mdash na ktoacuterej wyra nie rzucaj si w oczy pary liczb oznaczaj cychszeroko i d ugo geograficzn Przenosz wyniki do arkusza kalkulacyjnego i zapisuj nowyujednolicony plik CSV ze wspoacute rz dnymi interesuj cych mnie miejsc
rankplacepopulationlatlon1New York city81751334071455-740071242Los Angeles city37926213405349-1182453233Chicago city26955984537399-928887594Houston city209945141337462-757336275Philadelphia city15260063715477-944861146Phoenix city14456323246764-850008237San Antonio city132740737706576-1224406128San Diego city130740237707815-1224666249Dallas city119781640636-9116830910San Jose city94594241209716-112003047
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
Dodawanie punktoacutew 219
To by o banalnie proste Dziesi lat temu przeprowadzenie takiej operacji wymaga oby go-dzin bada i mudnego zbierania danych a dzi w ci gu u amka sekundy kopiuj c i wkle-jaj c bezmy lnie dane mamy ca prac za sob Rozumiesz ju chyba dlaczego do wiad-czamy prawdziwego wysypu przeroacute nych map internetowych
Dane s gotowe a my wiemy w jaki sposoacuteb wprowadzi je do aplikacji
d3csv(us-citiescsv function(data) Robi co )
Mo emy teraz doda do funkcji zwrotnej kod odpowiedzialny za przygotowanie nowychznacznikoacutew circle ktoacuterymi oznaczymy ka de miasto Potem wystarczy ustawi ka de ko ona mapie zgodnie ze sprawdzonymi wcze niej wspoacute rz dnymi
svgselectAll(circle) data(data) enter() append(circle) attr(cx function(d) return projection([dlon dlat])[0] ) attr(cy function(d) return projection([dlon dlat])[1] ) attr(r 5) style(fill yellow) style(opacity 075)
W podanym kodzie najistotniejsze s wyra enia attr() w ktoacuterych okre lamy warto cizmiennych cx i cy Jak widzisz dostanie si do warto ci szeroko ci i d ugo ci geograficz-nych ktoacutere uzyska em przed chwil nie sprawia adnych problemoacutew mdash wystarczy odwo asi do odpowiedniego pola obiektu dlat lub dlon Prawdziwa trudno polega na tyme potrzebujemy nie tyle wspoacute rz dnych geograficznych co wspoacute rz dnych na ekranie czyli
warto ci x i y
Dlatego te znoacutew odwo amy si do pomocy przewspania ej metody projection() ktoacuteraw zasadzie jest odmian dwuwymiarowej funkcji skaluj cej Funkcje skaluj ce przyjmowa yjako argument jedn liczb i zwraca y inn w charakterze wyniku Funkcje rzutuj ce pobie-raj dwie liczby i zwracaj dwie (Oczywi cie mi dzy tymi funkcjami istnieje zasadnicza roacute -nica bo obliczenia prowadzone wewn trz funkcji rzutowania s znacznie bardziej z o oneni te ktoacuterych dokonuje funkcja skaluj ce)
Argumentem funkcji rzutowania jest dwuwarto ciowa tablica w ktoacuterej jako pierwsza poja-wia si d ugo geograficzna (pami taj d ugo i szeroko a nie szeroko i d ugo jeste mybowiem w GeoJSON-landii) a wynikiem jej dzia ania mdash dwuwarto ciowa tablica ze wspoacute -rz dnymi ekranu x i y Dlatego atrybutowi cx przypiszemy [0] bo chcemy eby przyjwarto pierwszej z tych liczb czyli x Z kolei dla atrybutu cy przypiszemy [1] gdy chcemyprzekaza do niego drug warto czyli y Czy to ma sens
Mapa ktoacuter otrzymali my w efekcie tych dzia a (rysunek 126) jest prze liczna Sprawdte kod w pliku 06_pointshtml
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
220 Rozdzia 12 Mapy geograficzne
Rysunek 126 Pi dziesi t najwi kszych miast USA przedstawionych w postaci licznych oacute tych kropeczek
No dobrze ale wszystkie kropki maj taki sam rozmiar Sproacutebujmy po czy teraz liczebnomieszka coacutew z rozmiarem reprezentuj cej miasto kropki Zatem zamiast statycznego polapowierzchni przeka emy do funkcji warto population
attr(r function(d) return Mathsqrt(parseInt(dpopulation) 000004))
W tym miejscu przechwytujemy warto parametru dpopulation umieszczamy j w funkcjiparseInt() by przekszta ci zmienn a cuchow w liczb ca kowit skalujemy w doacute mno cprzez ustalon z goacutery liczb i wreszcie wyci gamy z wyniku pierwiastek ( eby z jednostek polapowierzchni przej do jednostek promienia) Kod aplikacji znajdziesz w pliku 07_points_sizedhtml
Jak wida na rysunku 127 teraz najwi ksze miasta naprawd rzucaj si w oczy Nie sposoacutebpomin roacute nic w rozmiarze Tego rodzaju zale no ci by yby zapewne lepiej widoczne naskali logarytmicznej szczegoacutelnie je li uwzgl dnialiby my tak e ma e miasta Poza tym za-miast mno y wynik przez 000004 mo na by u y funkcji skaluj cej (Ten problem pozo-stawi Tobie)
Rysunek 127 Miasta jako kropki ktoacuterych wielko odpowiada wielko ci populacji
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 221
Chcia bym w tym momencie podkre li e uda o si nam wczyta i przedstawi graficzniena mapie dwa rodzaje danych (A w zasadzie trzy je li uwzgl dni wspoacute rz dne miast z geo-kodera ktoacutere w czyli my do zestawu)
Pobieranie danych geograficznych i ich parsowanieGdyby zale a o nam wy cznie na przygotowywaniu map Stanoacutew Zjednoczonych mieliby myju gotowe wszystkie potrzebne dane GeoJSON Ale przecie wiat jest znacznie wi kszy i pe-en miejsc ktoacutere warto nanie na mapy Pozwoacutel mi zatem na niewielk dygresj chcia bym
bowiem odnie si do tematu pozyskiwania danych geograficznych dowolnie wybranej okolicyi parsowania ich na potrzeby dalszego u ycia Naszym celem b dzie uzyskanie pliku GeoJSONtakiego jak us-statesjson ktoacutery by by zrozumia y dla biblioteki D3
Znajd pliki kszta toacutewTak zwane pliki kszta toacutew (ang shapefiles) pochodz z czasoacutew znacznie poprzedzaj cych boomna tworzenie map internetowych i interaktywnych wizualizacji Zawiera y zasadniczo te sa-me informacje ktoacutere dzi przechowuje si w plikach GeoJSON (granice krain geograficznychoraz le ce w ich obr bie punkty) ale zawarty w nich by nie tylko tekst wi c odczytywanieich by o mocno utrudnione Format plikoacutew kszta toacutew wyroacutes w kr gu geografoacutew kartogra-foacutew i naukowcoacutew korzystaj cych z oprogramowania GIS (Geographic Information Systems)Je li masz dost p do drogiego oprogramowania GIS to pliki kszta toacutew zostan pewnieTwoimi najlepszymi przyjacioacute mi W tpi jednak eby wielu moich Czytelnikoacutew zalicza osi do tego w skiego grona z kolei przegl darki internetowe i tak nie mog przetworzy za-warto ci plikoacutew kszta toacutew
Je li nie uda Ci si znale pliku GeoJSON ktoacutery opisywa by interesuj cy Ci teren wtedyfaktycznie nie pozostanie Ci nic innego jak znale odpowiedni plik kszta toacutew Dobrympunktem wyj cia dla dalszych poszukiwa s strony rz dowe szczegoacutelnie je li interesuj Cikonkretne rejony Ja lubi najbardziej dwie strony
Natural Earth (httpwwwnaturalearthdatacom)Witryna ta to dost pna w domenie publicznej szeroka gama danych geograficznych przy-gotowanych z my l o przedstawianiu kulturowego i politycznego dorobku ludzko ciOdwzorowywanie granic pa stwowych ma charakter wybitnie polityczny i Natural Earthcz sto publikuje wyja nienia swoich decyzji
Strona spisu powszechnego w Stanach Zjednoczonych (httpwwwcensusgov)Znajdziesz tu opracowania graficzne wszystkich stanoacutew i hrabstw sieci droacuteg szlakoacutewwodnych mdash co tylko chcesz
Wybierz rozdzielczoZanim zaczniesz cokolwiek pobiera sprawd rozdzielczo danych Wszystkie pliki kszta toacutews zapisywane w postaci wektorowej (a nie bitmapy) wi c pisz c o rozdzielczo ci nie mamna my li pikseli lecz poziom szczegoacute owo ci kartograficznej czyli tak zwan ziarnisto
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
222 Rozdzia 12 Mapy geograficzne
Zestawy danych przygotowywane przez Natural Earth wyst puj w jednej z trzech skal
110 000 000
150 000 000
1110 000 000
Oznacza to e w przypadku danych o najwi kszej rozdzielczo ci jednej jednostce wyznaczo-nej na mapie odpowiada dziesi milionoacutew takich jednostek w prawdziwym wiecie Mo nate podej do tego zagadnienia odwrotnie i powiedzie e dziesi milionoacutew jednostekuproszczono do jednej Znaczy oby to e 10 000 000 centymetroacutew po prze o eniu do skalimapy odpowiada 1 centymetrowi
Wspoacute czynniki skali mo na zapisa w prostszej postaci
110m
150m
1110m
W przypadku mniej szczegoacute owych (oddalonych) map wiata w zupe no ci wystarczy roz-dzielczo rz du 1110m ale ju eby pokaza wyra nie kszta t granicy konkretnego stanupotrzeba mapy o skali co najmniej 110m Je li za przygotowujesz map naprawd niewiel-kiego obszaru (mocno przybli onego) mdash miasta czy dzielnicy mdash nawet taka skala by abyniewystarczaj ca (W takim przypadku sugeruj poszuka informacji na stronach WWW sta-noacutew wojewoacutedztw czy miast)
Roacute ne roacuted a oferuj mapy o roacute nych skalach Wiele z oferowanych na stronie ameryka -skiego spisu powszechnego plikoacutew kszta tu jest wykonanych w jednej z nast puj cych skal
1500 000 (1500k)
15 000 000 (15m)
120 000 000 (120m)
Wybierz skal i pobierz plik Najcz ciej b dzie mia on posta archiwum ZIP w ktoacuterym za-pisano kilka innych plikoacutew Dam Ci przyk ad Pobior teraz plik przedstawiaj cy ocean od-wzorowany w skali 1110m (ma o szczegoacute owej) Jest on dost pny na stronie Natural Earthpod adresem httpwwwnaturalearthdatacomdownloads110m-physical-vectors110m-ocean
W archiwum znajduj si nast puj ce pliki
ne_110m_oceandbfne_110m_oceanprjne_110m_oceanREADMEhtmlne_110m_oceanshpne_110m_oceanshxne_110m_oceanVERSIONtxt
Coacute to si nazywa kolekcja dziwacznych rozszerze Nas interesuj pliki o rozszerzeniu shpale nie pozbywajmy si jeszcze pozosta ych
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 223
Upraszczanie kszta toacutewW idealnym wiecie bez trudu znale liby my pliki kszta toacutew o takiej rozdzielczo ci jaka by-aby nam potrzebna Ale co zrobi je li jedynym dost pnym b dzie plik o superwysokiej
rozdzielczo ci na przyk ad 1100k Jego rozmiary by yby olbrzymie A skoro zajmujesz siju programowaniem w JavaScripcie wydajno kodu powinna mie dla Ciebie pierwszo-rz dne znaczenie Dlatego wysy anie miliarda bajtoacutew danych geograficznych do przegl darkizdecydowanie odpada
Na szcz cie plik kszta tu mo na upro ci uzyskuj c jego mniej szczegoacute ow wersj Procesten pi knie ilustruje interaktywna aplikacja Mikersquoa Bostocka dost pna pod adresem httpbostocksorgmikesimplify
MapShaper (httpmapshaperorg) autorstwa Matta Blocha jest doskona ym atwym w obs u-dze interaktywnym narz dziem s u cym w a nie do upraszczania map Aplikacja pozwalawczyta w asne pliki kszta toacutew i wyregulowa zwyk ym suwakiem poziom ich skompliko-wania Jak zawsze w takich przypadkach chodzi o osi gni cie dobrego kompromisu mi dzyodpowiedni szczegoacute owo ci a rozmiarem pliku
Je li zdecydujesz si u ywa MapShapera przed wyeksportowaniem mapy wybierz opcjShapefile-polygons (plik kszta tu mdash wielok ty) W ten sposoacuteb otrzymasz od razu pliki shpi shx Pobierz obydwa na dysk zmie ich nazwy na identyczne z oryginalnymi plikami o tychrozszerzeniach Potem przed przeprowadzeniem konwersji do formatu GeoJSON wykonajkopi oryginalnego pliku dbf i umie j w tym samym katalogu co uproszczone pliki shpi shx To wa ny krok dzi ki ktoacuteremu na pewno nie stracisz istotnych metadanych zapisanychw pliku dbf na przyk ad identyfikatora kraju czy identyfikatoroacutew cie ek
Mo esz te skorzysta z napisanego przez Micha a Migurskiego w j zyku Python skryptuBloch (httpsgithubcommigurskiBloch) wykorzystuj cego algorytmy upraszczaj ce Matta Blochai b d cego dodatkiem do biblioteki d3simplify (u ytego zreszt do przygotowania wspo-mnianego wcze niej demo Mikersquoa Bostocka) Programistom przy wieca jeden cel by pewnegodnia moacutec przeprowadzi uproszczenie liniowe bezpo rednio z poziomu samego JavaScriptui wyeksportowa wyniki do uproszczonej wersji formatu JSON eby moacutec potem korzystaz nich w innych projektach Wachlarz dost pnych narz dzi rozszerza si z ka d chwil wiecmiej oczy otwarte (Dok adnie wtedy gdy opracowywa em ten akapit Mike Bostock udost pnispo eczno ci wersj proacutebn (httpblocksorgmbostock4090870) nowej aplikacji s u cej do prze-prowadzania geometrycznych uproszcze mdash TopoJSON (httpsgithubcommbostocktopojson)Stan rzeczy zmienia si dos ownie z dnia na dzie Z kolei teraz gdy czytasz te s owa narz dziewiersza polece TopoJSON jest prawdopodobnie nasz najwi ksz nadziej Obecnie potrafi onowczytywa pliki kszta tu upraszcza je i przekszta ca dane do formatu JSON Oczywi cie To-poJSON jest zaprojektowany tak by wspoacute pracowa z bibliotek D3 mimo e zapisuje wynikioblicze w nowym formacie mdash TopoJSON mdash podobnym do GeoJSON lecz bardziej wydajnym)
Konwersja do GeoJSONJe li nie masz jeszcze zainstalowanego odpowiedniego oprogramowania prawdopodobniezbli asz si w a nie do najbardziej ryzykownego etapu ca ego procesu Ostatecznie chcieliby-my uzyska dost p do narz dzia wiersza polece ogr2ogr niezale nie od tego czy u ywasz
systemu Mac Unix czy Windows Problem polega na tym e ogr2ogr nie zadzia a bez asy-sty kilku innych szkieletoacutew aplikacji bibliotek i innych im podobnych
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
224 Rozdzia 12 Mapy geograficzne
Nie b d tu wnika w niuanse instalacji ale sproacutebuj u atwi Ci nieco zadanie
Przede wszystkim b dziesz potrzebowa biblioteki Geospatial Data Abstraction Library czyli takzwanej GDAL (httpwwwgdalorg) Narz dzie ogr2ogr jest jej cz ci
Poza tym musisz pobra tak e GEOS czyli Geometry Engine Open Source (tracosgeoorggeos)
Je li na Twoim komputerze dzia a system Windows lub UnixLinux mo esz teraz przyst pido najlepszej cz ci a mianowicie rozpocz pobieranie plikoacutew roacuted owych i instalowanie ichza pomoc zabawnie wygl daj cych polece typu build make czy dlaczego to nie idzieomg prosze prosze zainstaluj sie teraz bo mam juz dosc
Nie pami tam dok adnie nazw polece ale tak mniej wi cej brzmia y (A moacutewi c powa niemusisz mie wiadomo e problemy na tym etapie nie powinny Ci dziwi Kwestii pobie-rania i instalowania pakietoacutew oprogramowania po wi cono w ca o ci niejedn ksi k i je liprzejrzysz ofert wydawnictwa Helion z pewno ci trafisz na kilka z nich)
Je li pracujesz na macu na ktoacuterym jakim przypadkiem s zainstalowane Xcode i Homebrewnaraz wpisz po prostu w wierszu polece brew install gdal I to ju wszystko (Je li niemasz adnego z tych wspania ych narz dzi poszukaj ich Obydwa s dost pne za darmo alezainstalowanie ich b dzie wymaga o od Ciebie nak adu czasu i energii Xcode mo na pobraze strony AppStore (httpsitunesapplecomusappxcodeid497799835mt=12) Gdy Xcode znaj-dzie si ju na dysku Twojego komputera instalacja Homebrew powinna teoretycznie spro-wadzi si do wpisania w oknie terminalu prostego polecenia httpbrewsh Z do wiadczeniawiem jednak e nale y spodziewa si b doacutew podczas tego etapu pracy)
Do wszystkich u ytkownikoacutew komputeroacutew marki Mac ktoacuterzy nie korzystaj z Xcode aniHomebrew macie szcz cie e jaki dobry cz owiek przygotowa przyjazny instalator GUIumieszczaj cy w komputerze GDAL GEOS oraz kilka innych narz dzi o nazwach ktoacuterychnaprawd nie musisz zna Poszukaj najnowszej wersji pakietu GDAL Complete (httpwwwkyngchaoscomsoftwareframeworks) ale zanim cokolwiek zrobisz zapoznaj si z zawarto cipliku GDAL Read Me Uko czenie instalowania nie oznacza e mo esz od razu wpisa w kon-soli ogr2ogr Najpierw nale y doda programy z rodziny GDAL do cie ki prowadz cej dopow oki Najprostszym na to sposobem jest otworzy nowe okno terminala wpisa w nim nanobash_profile wklei do okna polece export PATH=LibraryFrameworksGDALframeworkPrograms$PATH a nast pnie nacisn Control+X i Control+y by zachowa zmiany Zako czpotem sesj wpisuj c w oknie exit i otwoacuterz nowe okno konsoli W nim mo esz wpisa ogr2ogri mie nadziej e zadzia a
Niezale nie jednak od rodzaju systemu operacyjnego z jakiego korzystasz gdy sko czysz juinstalowa niezb dne oprogramowanie otwoacuterz okno konsoli i udaj si do katalogu w ktoacuterymtrzymasz pliki kszta toacutew (na przyk ad cd ~ocean_shapes) Nast pnie przepisz polecenie
ogr2ogr -f GeoJSON outputjson filenameshp
Nakazuje ono skryptowi ogr2ogr pobra plik filename ktoacutery powinien mie rozszerzenie typushp przekonwertowa jego zawarto do formatu GeoJSON i zapisa wynik w pliku outputjson
W przypadku przyk adowego pliku z map oceanoacutew uruchomienie narz dzia ogr2ogr po-winno wygl da nast puj co
ogr2ogr -f GeoJSON outputjson ne_110m_oceanshp
Wpisz to w konsoli i trzymaj kciuki eby nic si nigdzie nie wy wietli o
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
Pobieranie danych geograficznych i ich parsowanie 225
Jakie to pozbawione klimatu Wiem wiemhellip Po godzinach sp dzonych nad amaniem koduniezb dnego do zainstalowania starego dobrego ogr cz owiek chcia by jakiego spektakular-nego fina u uczucia ktoacutere Ci towarzyszy o gdy po przej ciu ca ego Super Mario 3 znoacutew ra-towa o si ksi niczk (Prawd moacutewi c nigdy mi si to nie uda o ale podejrzewam e wra-enia musz by niezapomniane)
Nic z tego Tym razem trzeba mie nadziej e nie sta o si nic Za ca y spektakularny efektmusi wystarczy pojawienie si w tym samym katalogu nowego pliku o nazwie outputjson
Oto jak wygl da pocz tek mojego pliku
type FeatureCollectionfeatures [ type Feature properties scalerank 0 featurecla Ocean geometry type Polygon coordinates [ [ [ 49110290527343778 4128228759765625 ] [ 48584472656250085 4180889892578125 ] [ 47492492675781335 429866943359375 ] [ 47590881347656278 43660278320312528 ] [ 46682128906250028 44609313964843807 ] [ 47675903320312585 45641479492187557 ] [ 48645507812500085 45806274414062557 ]
Zaczyna wygl da podobnie
Pe ni nadziei i podekscytowani wizj zbli aj cego si sukcesu kopiujemy nowy plik Geo-JSON do katalogu biblioteki D3 Swojemu zmieni em nazw na oceansjson Skopiowa em teomawiany wcze niej plik HTML i w kodzie D3 zmieni em tylko nazw z us-statesjson naoceansjson Po otwarciu pliku w oknie przegl darki otrzyma em wynik jak na rysunku 128
Rysunek 128 GeoJSON utrzymuje e to oceany wiatahellip
Fuj Co to ma by Nie wiem ale je li chcesz zobaczy to na w asnym ekranie zajrzyj dopliku 08_oceanshtml
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
226 Rozdzia 12 Mapy geograficzne
Tak si pieszy em e zapomnia em zaktualizowa funkcj rzutuj c Zmiana jest niewielkawystarczy zast pi albersUsa warto ci mercator (rysunek 129)
Rysunek 129 GeoJSON prezentuje oceany wiata mdash tym razem we w a ciwym rzucie
Poprawny kod znajdziesz w pliku 09_mercatorhtml gdzie mo esz zobaczy cie ki GeoJSONprzedstawiaj ce kontury linii brzegowych mdash pobrane sparsowane i wy wietlone
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
237
Skorowidz
Aadres
URI 28URL 28
akapitydynamicznie przypisywane style 86
aktualizacjarodzaje 161
aktualizowaniedanych 139elementoacutew graficznych 141funkcji skaluj cych 150osi 153referencji 170
animacjeefekty 147
Apache 28 70Arborjs 24argument
bounce 147circle 147elastic 147
argumenty funkcjiprzekazywanie 53
atrybutalt 88class 88fill 62id 88metody attr() 88okre lanie 88opacity 62 64rgba() 64shape-rendering 128src 88
stroke 62text-anchor 107transform 129width 88
Bbiblioteka D3 16 19 22
dane 76dowi zywanie 75
dodawanie etykiet 106dokumentacja 234funkcje 19
brakuj ce 20skaluj ce 115 123
generowanie koloroacutew kategorii 198kompatybilno 66mechanizmy rzutowania 212nak adki 26odwo ania 68odwzorowania wielowarto ciowe 105osie wykresoacutew 125p tle 52pobieranie 67uk ady wykresoacutew 195zamienniki 23zaznaczenia 162znaczniki
wybieranie 79zwracanie metod 75
blokowy zakres 56b dy wczytywania danych
obs uga 78
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
238 Skorowidz
Ccentroid 199comma-separated values 76Crossfilter 26CSS
komentarze 41pseudoklasa hover 179wprowadzanie styloacutew SVG
korzy ci 63CSV 76
przechowywanie warto ci 77Cubism 26
DD3 19dane 71
a grafika 75aktualizowanie 139definiowanie kszta toacutew 96dowi zywanie 75 80geograficzne 209
parsowanie 221pobieranie 221rozdzielczo 221szeroko i d ugo 218upraszczanie kszta toacutew 223
geolokalizacyjne w JavaScript 49jednoczesne dodawanie i usuwanie 174kodowanie warto ci w kolorach 104losowe 92 149
czenie 169miejsce zapisywania 84o z o onej strukturze 109odwzorowanie graficzne 14powi zanie 71przedstawianie w formie graficznej 87sieciowe 203skumulowane 201sortowanie 184tekstowe 71u ywanie 82wczytywanie
format JSON 79obs uga b doacutew 78z pliku CSV 76
wykres punktowy 108zmienianie 141zmienne 135
Dashku 26Data-Driven Documents Patrz biblioteka D3DataWrapper 23dcjs 26dimensional charting 26d ugo geograficzna 210Document Object Model DOM 35 41
zmiana wygl du elementoacutew 39dodawanie etykiet 106dowi zywanie danych 75dziedzina warto ci wej ciowych 114
Eedytory dla programistoacutew 68eksportowanie grafiki 227elementy graficzne
aktualizowanie 141przechowywanie w cie kach
przycinaj cych 158wyroacute nianie kursorem myszy 179
event listener 141
FFlare 22Flot 23for 51funkcja 53 73
aktualizuj ca 135anonimowa 83
jako warto w asno ci 105asynchroniczna 211call() 127d3max() 116 216d3min() 116 216d3scalecategory() 123d3scaleordinal() 138d3timescale() 123delay() 147dost powa 117 171duration() 145 148ease() 146formatuj ca
sprawdzanie poprawno ci 134klucza 169 171kumuluj ca 201log 123Modernizrload() 66
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
Skorowidz 239
nas uchuj ca zdarze 140dowi zywanie 177powi zanie ze znacznikiem 182
nazwana 83ordinal 123poroacutewnuj ca 185pow 123push 132quantile 123quantize 123 215rangeBands() 138rangeRoundBands() 138rzutuj ca 214
argumenty 219scale 115skaluj ca 113
aktualizowanie 150dziedzina warto ci wej ciowych 114porz dkowo 136przygotowywanie 115zbioacuter warto ci wyj ciowych 114
sortuj ca 184sqrt 123struktura definicji 83tickFormat() 133ticks() 130tworzenie w asnych 83xAxis 126xScale 118zwrotna 77 78
GGDAL 224generator cie ek 211Geographic Information Systems 221GeoJSON 49 209geokoder 218geokodowanie 218Geometry Engine Open Source 224GEOS 224Geospatial Data Abstraction Library 224Get Lat+Lon 210ggplot2 20GIS 221globalna przestrze nazw 56Google Chart Tools 23graf 24 203grafika troacutejwymiarowa
narz dzia 25
grafiki wektorowe 20gRaphaeumll 23
HHighchartsJS 23Homebrew 224HTML 29
atrybuty znacznikoacutew 33dokument
dodawanie regu styloacutew 41element 35
blokowy 39hierarchiczna struktura dokumentu 35inline 42inspektor kodu 37
wy wietlanie znacznikoacutew 39klasy i identyfikatory 34kod 29komentarze 34narz dzia programisty w przegl darkach
35odwo anie do zewn trznego arkusza
styloacutew 42osadzenie kodu CSS 41parsowanie 35podgl d kodu roacuted owego 36szablon strony 68tre i struktura 30znaczniki 31
budowanie struktury 31podpowiedzi 191regu y styloacutew 42zagnie d anie 31
HTTP 28HTTPS 28Hypertext Transfer Protocol Patrz HTTP
Iidentyfikator
tooltip 190instrukcja
for 51if 51
interaktywno wizualizacji 177internet
zasada dzia ania 27interpreter j zyka Python 69
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
240 Skorowidz
JJavaScript 44
funkcje 53anonimowe 54
GeoJSON 49globalna przestrze nazw 56instrukcje 46
steruj ce 51JSON 49konsola 45komentarze 54
czenie struktur danych 48model zdarze 177notacja obiektowa 49obiekty 47operatory
matematyczne 50poroacutewnania 50
tablice 46wykorzystanie 52
typowanie dynamiczne 55warto ci 47w a ciwo ci 47wprowadzanie skryptoacutew na stron 54zasi g funkcyjny 56zmienne 45
i 52a cuchowe 46
typy 55unoszenie 55
znaki ko ca linii 74JavaScript InfoVis Toolkit 23JavaScript Object Notation 49j zyk lu no typowany 55JIT Patrz JavaScript InfoVis ToolkitjqPlot 23jQuery
przej cia 157jQuery Sparklines 24JSON 49
Kkartogram 214Kartograph 24kaskadowe arkusze styloacutew 39
dziedziczenie 43kaskadowo 44szczegoacute owo 44
klasa 89axis 127hidden 192
klienty sieciowe 28kod w przyk adach 17kolejno indeksowania 169 175kolory
formaty 41konwencja typograficzna 10kre lenie wymiarowe 26
LLAMP 70Leaflet 25licencja BSD 19linia bazowa 202
czenie metod 73
MMAMP 70MapShaper 223mapy
bitowe 20 227geograficzne
dodawanie punktoacutew 217skala 222
marginesy 121metoda 73
append() 74 96 126arccentroid() 199Arrayshift() 169asynchroniczna 78attr() 85 88axis() 126barsenter() 163clamp() 122classed() 89d3csv() 76d3geopath() 211d3json() 79 211d3layoutpie() 196d3layoutstack() 200d3max() 116 216d3min() 116 216d3ordinalcategoty10() 198
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
Skorowidz 241
d3range() 137d3scalecategory() 123d3scalelinear 122d3scaleordinal() 138d3svgarc() 197d3svgaxis() 126d3timescale() 123d3tsv() 79data() 83 91 96 175domain() 115duration() 145 148each() 155
bez przej cia 158ease() 146enter() 79 96
czenie 73Mathfloor() 94Mathrandom() 93Mathround() 94Mathsqrt() 110nice() 122on() 178parseFloat() 189pie() 197projection() 219przekazywanie 75range() 116rangeRound() 122remove() 167select() 74selectAll() 74 96 174 178selectiondata() 76selectionon() 141sort() 185sortBars() 184style() 85 88 90text() 74 85transition() 145
model pude kowy 38Modernizr 66Modest Maps 25MySQL 70
Nnak adanie maski 159normalizacja 115NVD3 26
Oobiekt
window 56dodawanie warto ci 58
obiektowy model dokumentu 35obrazy wektorowe 58odwo ywanie
do znacznikoacutew 96odwzorowanie 212
Albersa 212kartograficzne 24promienia 110wielowarto ciowe 105
odwzorowywanie 24danych
graficzne 14regu y 14
operatorczeniaznak + 111
przypisania 45osiadanie 146osie 113
aktualizowanie 153wykresu 125
oznaczanie 31
PPaperjs 25Peity 24PhiloGL 26PHP 70piksel 59pliki
kszta toacutew 221poziom szczegoacute owo ci 221upraszczanie 223roacuted a 221
PDF 228SVG 229
podpowiedzi 187przegl darki 188wy wietlane w znacznikach
div 191SVG 189
podwoacutejne kodowanie 104pole
coordinates 210geometry 210
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
242 Skorowidz
Polychartjs 26Polymaps 25Portable Document Format 228prefuse 21Processing 25Processingjs 25Protovis 22przegl darki
kod HTML 35rozwoacutej 21
przej cia 135 144charakter ruchu 146etapowe 148pocz tek i koniec 155skalowanie opoacute nie 148usuwanie elementoacutew 167wyj ciowe 172
przezroczysto 63przycinanie cie ek 159pseudoklasa
hover 179
Rradiany 196Raphaeumll 25referencje
aktualizowanie 170regu a
arkusza CSS 40pointer-events none 192rect hover 179
renderowanie 38Rickshaw 26
SScalable Vector Graphics 58selektor 39
identyfikatoroacutew 40klasowy 40potomny 40rodzaje 40szczegoacute owo 44
serwerstron WWW
j zyka Python 69konfiguracja 69przygotowanie 69
internetowy 28lokalny 28zdalny 28
shapefiles 221Shneiderman Ben 15Sigmajs 24skala 113
ilo ciowazbioacuter warto ci wyj ciowych 138
liniowanormalizacja 115
porz dkowa 136dziedzina danych wej ciowych 137referencja 139zbioacuter danych wyj ciowych 138
skalowanie 113dynamiczne 118osi 118pot gowe 123promieni punktoacutew 121
sk adnia czenia 73s owo kluczowe
this 180var 45
sortowanieklikni ciem 184
spoacutejno obiektowa 169struktura
dokumentu HTML 31semantyczna 30wizualna 30
SVG 58definiowanie styloacutew znacznikoacutew 62kod
dodawanie do dokumentu HTML 59kolejno rysowania 63kompatybilno 65nazwy w a ciwo ci 128pliki 59praca z tekstem 61proste kszta ty 59przezroczysto 63przycinanie cie ek 159przygotowanie plikoacutew 59transformacje 129tworzenie znacznikoacutew 95warstwy 63w a ciwo ci 94zapisywanie obrazoacutew 229
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
Skorowidz 243
znacznik 59atrybuty 128grupowanie 182podpowiedzi 189regu y styloacutew 128
systemy projektowania 14szeroko geograficzna 210
cie ki 211
TTableau 20tablica
danych 77obietoacutew 170
Threejs 26Timelinejs 24tooltips 187TopoJSON 223transformacja translacyjna 129transition 135Tributary 26TSV 79Tweeter 235tworzenie
akapitoacutew 80form wizualnych
aplikacje 25znacznikoacutew
DOM 71SVG 95
typowanie dynamiczne 55
Uuk ady wykresoacutew
ko owy 196si owy 203skumulowany 200
unoszenie zmiennych 55update 135urz dzenia dotykowe 193User Interface Library 24
Vvariable hoisting 56
WW3 19WAMP 70warto ci przeskalowane 118WebGL 25wizualizacja
dynamiczna 15interaktywna 15obja niaj ca 20poznawcza 20statyczna 14w internecie 15
wizualizowanie 13w a ciwo 39
i warto 41World Wide Web 19wprowadzanie
skryptoacutew na stron 54styloacutew 41
wykreskolumnowy 87ko owy 196nadawanie styloacutew 90osie 125
formatowanie opisoacutew 133pionowe 131
pier cieniowy 199punktowy 108 125
etykiety 111etykiety osi 126poprawianie 119przygotowanie 108rozmiar punktoacutew 110skalowanie 116z danymi generowanymi losowo 133
si owy 203s upkowy 87
aktualizowanie danych 142dodawanie warto ci 162etykiety 106kolorowanie 104po o enie s upkoacutew 101przygotowywanie 98skumulowany 200szeroko s upkoacutew 102usuwanie warto ci 166
sparkline 24uk ady 195
wywo anie funkcji 53
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę
244 Skorowidz
XXAMPP 70Xcode 224
YYUI Charts 24
Zzasi g funkcyjny zmiennej 56zaznaczenie
aktualizuj ce 162 164 175wej ciowe 163 175wyj ciowe 166
zbioacuter warto ci wyj ciowych 114zdarzenie
click 141mouseout 181mouseover 141w JavaScript 177wska nikowe 183
ziarnisto 221zmienna
bars 163charge 204cy 97error 78i 97padding 120
znacznikltDOCTYPE htmlgt 32a 32body 32circle 60 96clipPath 159div 32 87
DOMtworzenie 71
ellipse 60em 32g 126grupowania 182h1 32head 32html 32li 32line 60meta 68nadawanie styloacutew 61nak adanie a zdarzenia 183odwo ywanie 96ol 32p 32path 61 197rect 60
punkty odniesienia 103script 68span 32strong 32svg 59text 61 106title 32ul 32usuwanie 166wchodz cy 163wyj ciowy 166
roacuted aksi ki 234strony WWW 234
Kup książkę Poleć książkę