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ę