[MUZYKA GRY] 

DAVID Chouinard: Jestem Dawid Chouinard, a to D3. Witaj. Mamy zamiar dowiedzieć się o D3 dziś. D3 jest ramy JavaScript do tworzenia wysokiej jakości interaktywne wizualizacje dla sieci. Rzeczy, jak to, co mamy widząc w końcu mnie mamy zamiar nauczyć się tych rzeczy, rodzaj podstawy nim. Ale to będzie fajne. Zaczynajmy co ładne zdjęcia. Mamy więcej dema perspektyw dostępnych. Zróbmy to. 

Akt I, DOM manipulation-- jedziemy zacząć od razu, co fajne rzeczy. Przede wszystkim, po lewej stronie, mamy kodu. Po prawej stronie mamy Wynik naszego kodu. Przejdźmy przez to. 

Zróbmy koło. Jak to brzmi? svg.append circle-- po prostu się koło. Nie wierzysz mi, prawda? To nie istnieje. 

Więc to, co zrobiliśmy tu jest, SVG jest skalowalne grafiki wektorowej. To jest sposób, w jaki poinformować przeglądarkę, aby dokonać grafiki wektorowej w przeglądarce. Co nam po prostu nie teraz dodano okrąg przeglądania. 

Obietnica, że ​​koła wymaga trochę podstawowych atrybutów zanim będziemy mogli to obejrzeć. Musimy powiedzieć, że swoją pozycję x, jego pozycja y, jej promień. My go nie powiedzieć nic z tego, więc nie widzisz go teraz. Ale powiedzmy to rzeczy. 

Więc przede wszystkim, że masz aby dać naszym kręgu nazwę. Więc nazwijmy to koło. Nasze koło ma nazwę teraz. I dajmy mu kilka atrybutów. Jak o cx skupiać x, więc Środek pozycji X. Powiedzmy, 200 na 200 pikseli. 

Dajmy mu y 200 pikseli, jak również. I r, promień, około 40 pikseli. Teraz zobaczmy. Nie mogę przeliterować. 

Proszę bardzo. Mamy okrąg w pozycji 200 pikseli, 200 pikseli, promień 40 pikseli. Niby fajne, prawda? Mamy koło. Tak. 

Więc nie trzeba podążać. We wszystkich tych przykładach, wszystkie Kod robię dziś będzie dostępna w Internecie na koniec w postaci interaktywnych przykłady z punktów kontrolnych w każdy akt, i tak dalej. 

Zróbmy więcej rzeczy. Ten czarny okrąg jest naprawdę brzydki. Przykro mi z powodu tego błędu Komunikaty tam. Nie idziemy. 

Dajmy mu kolor. Jak to jest? Lubię stalowego błękitu. Cóż, nasz krąg zmienił kolor. To świetnie. Zróbmy to półprzezroczyste too-- półprzezroczyste. 

Więc to są atrybuty mamy do zdefiniowania na okręgu. Pierwszą rzeczą, jaką zrobiliśmy to kładziemy koło na stronie. A potem mamy definiowania kilka atrybutów. Niektóre z nich są wymagane jak CX, CY, i Radius. A inne są opcjonalne. 

Istnieje wiele więcej atrybutów. Istnieje wiele z nich. Na przykład, może to mieć udar mózgu, jak również, skok czerwony. Ale to usunięcie. Wracamy do okręgu, niebieskie koło. 

Więc zróbmy więcej okręgów. Jak to jest? Zróbmy kolejny krąg. To jest ekscytujące, prawda? 

Więc powiedzieć, że po prostu skopiowali stamtąd co mieliśmy już. Nazwijmy to circle2. I zróbmy dokładny samo i dać go atrybuty, zważywszy Pozycja X 300. Yay, mamy dwa okręgi teraz. 

Oczywiście, moglibyśmy zaktualizować te wartości. I może umieścić go na 400, a teraz porusza. A ponieważ jest to irytujące, niech wyjmij go, więc circle2.remove. To już nie ma. 

Więc to, co robimy i jest po prostu bardzo, very-- tego jest bardzo podobny do tego, co może zrobić w jQuery, na przykład. Jesteśmy po prostu manipulacji DOM, to się nazywa. Być może słyszał to słowo. Tworzymy rzeczy, ustawienie przypisuje się na rzeczy, usuwając rzeczy. 

Teraz, tutaj, gdzie robi się ciekawie. Więc później w kodzie, moglibyśmy nadal odnosi się do pierwotnego kręgu tutaj. Warto więc przywrócić jego atrybut cx. Powiedzmy, jego pozycja do 400 x. I mam zamiar przejścia że tak, to oczywiste. Nie idziemy. 

Tak więc dodaliśmy koło. Stawiamy pewne atrybuty. Dodaliśmy kolejny krąg, usunąć go. A potem mamy modyfikacji oryginalne koło. 

Ale tu, gdzie robi Dużo bardziej interesujące. Nie tylko możemy ustawić atrybuty jak właśnie wartości, można powiedzieć, hej, koło, przejdź do pozycji 200. Możemy także ustawić je jako funkcje. 

Więc zamiast dawać 400 tutaj, możemy dokonać pewnych obliczeń w locie na to, co chce, że atrybut będzie. Tak to jest jak chcesz wyrazić, że. Mówimy, zamiast 400, pozwól mi dać funkcji zamiast. I tu, wewnątrz tej funkcji, możemy wykonać dowolny szalony obliczenia. 

Możemy trochę czasu i spojrzeć na coś innego i dynamicznie zdecydować koło, jakie wartości chcemy. Jak się po prostu dać Stanowisko to losowa x? Więc to jest to. 

Więc co to mówi, jest dla co x, uruchomić tę funkcję. A to, co robimy jest obliczania pewne rzeczy, a przypadkowe razy szerokość i powrót tego. Dlatego za każdym razem prowadzimy, że mamy okrąg, że idzie do przypadkowym miejscu. To trochę chłodu. Czuję się jak mogłem patrzeć na to za mało. Zaczynamy dostać się do coś tu interesujące. Zróbmy to dane napędzany teraz. Nie ma danych tutaj. Zmieńmy to. 

Akt II, danych Driven Documents-- Więc wróćmy do tutaj. I niech po prostu pozbyć circle2, bo my po prostu dodawanie i usuwanie go. Tak naprawdę nie jest to potrzebne. Musimy być bardziej sprytny tutaj. Powiedzmy, że mamy niektóre dane z pewnego rodzaju. Moment-- Jeden powiedzmy, mieliśmy dane z tego formularza. Mieliśmy tablicę, po prostu kilka numerów. Mamy tu siedem liczb, co to represent-- ilość konta bankowego, ludzi, jak ważą, bóg wie co. 

Są to numery, a my Aby korzystać z naszych kręgów do reprezentowania tych liczb jakoś. Chcemy związać NASZEGO kółka do tych numerów. Więc to, co robimy. Powiedzmy, że chcemy Koło dla każdej liczby. Moglibyśmy zrobić stare rzeczą byliśmy doing-- Koło dołączania i circle2 i circle3. Ale to wymknie się spod kontroli, a istnieje wiele powtarzających się logiki. 

Więc przejdźmy sprytniejsi z tym. Zamiast korzystać z okręgu var svg.append, że byliśmy tylko za pomocą, będziemy korzystać ten mały blok tutaj. Nie chcę iść na głębokości w to, co wszystkie te części nie. I jest to rodzaj zaawansowanego tematu. I wish I could. 

Ale kluczem jest, aby recognize-- i zobaczysz, jest bardzo często w kodzie D3. Ten blok tekstu podstawowego tworzy tak wielu środowisk jak są elementy danych w tej tablicy w prawo tutaj. Więc to tworzy tak wielu koła jak istnieją elementy. To się stworzyć nam siedem okręgów. I robi się naprawdę kluczową rzeczą. Więc uruchom to. Miejmy usunąć inne nasze koło. Miejmy tylko skomentować ten rozstać się i uruchomić to ponownie. 

Nie idziemy. Więc nasze grono o to dużo ciemniejszy, bo my siedem okręgów, jeden na wierzchu drugiej. Po prostu stworzył siedem okręgów, jeden każdy z każdym z tych elementów danych. Ale jest rzeczą, że stało się kluczowym z tym fragmencie tutaj. 

To, że dane związane. Tak więc każdy z te elementy danych, 10, 45, 105, był związany w szczególności koła. Więc to nie tylko stworzył kilka kręgów ale łączy te dwie rzeczy razem. 

I w przyszłości, ponieważ utworzone te koła z tej funkcji D3, jeśli dam ci koło, można daj mi dane z nim związane. Możemy więc zapytać, D3. Hej, D3, mam ten krąg. Co znajduje się dane, że koło ma? I D3 powie nam 10 lub 45 lub 105. 

Te rzeczy są powiązane. To jest bardzo, bardzo podstawowe pojęcie. Spójrzmy na to. 

Więc sposób chcemy zwrócić D3-- tak to nie ma znaczenia dla tego, ale po prostu zaufaj mi na nim. W ten sposób prosimy D3. Hej, D3, daj mi pierwszy koło, które można znaleźć. Daj mi pierwszy krąg można znaleźć. I wtedy możemy zapytać D3, co jest Dane na ten temat, jak to, 10. 

Więc po prostu zapytać, D3, znaleźć mnie Pierwszy krąg można znaleźć. Co znajduje się jego dane? 10, który jest wręcz naszym Pierwszy element danych. Możemy go zapytać, hej, D3, znaleźć nam nasz trzeci krąg. 105. Dlaczego jest to naprawdę ważne? 

Więc tutaj, wspomniałem że możemy korzystać z funkcji. A mówiłem, że był bardzo silny rzeczą. Więc może nie tylko nasze funkcje robienia rzeczy jak zrobić kilka obliczeń, na przykład, powrót liczby losowej, można również robić rzeczy, na podstawie danych. To jest to, co dane napędzane dokumenty chodzi. To, co wyróżnia D3 dla. 

Więc zamiast tego x postition-- po prostu mówiąc, wszystkie koła, uzyskać x pozycję 200, mamy może dać mu funkcję. I tutaj możemy poczynić pewne obliczenia. d tutaj stoi w miejscu dla danych. Dlatego za każdym razem mamy koło, w zasadzie, D3 stworzy te siedem okręgów. A następnie dla każdego 

koło, to pójdzie, hej, CYRK1 jaka jest twoja pozycja x. Wcześniej byliśmy Zawsze odpowiadając 200. Ale teraz, za każdym razem pyta D3 nam co jest pozycja x, to nic nie da us-- mamy że koło, więc mamy dane. To da nam dane i powiedzieć, co chcesz Ekspozycja będzie, na podstawie tych danych. 

Niech tylko wrócić rzeczywiste dane. Jeśli więc uruchomić to, co daje Dane z USA napędzane dokumentów. Kręgi te są oparte w relacji position-- są zasady w funkcji danych. 

Tak więc w pierwszym kręgu D3 stawia koło. A potem D3 prosi nas, co robić chcesz Ekspozycja będzie. A my po prostu powiedzieć, co dane. Dodać ekspozycję 10. 

Następnie pyta, co chcesz Ekspozycja jest do drugiego koła. A my odpowiadamy, 45. A my, oczywiście, może się tu obliczenia. Uważam, że te kręgi są trochę spłaszczony się. 

Tak więc pomnożyć przez 3, mnożenie danych przez 3. Nasz krąg prostu się rozszerzył się. Nasza wartość została trzykrotnie. 

Koło jest naprawdę na krawędzi, więc niech to może i rodzaj przesunięcie go. Powiedzmy, przez 20. Proszę bardzo. 

Jest wizualizacja danych. To bardzo proste, jedno, ale to daje nam wgląd w nasze dane. Która głosi, że na przykładzie mieć mały klaster elementów. I tu mamy duży odrębne stanowisko. To daje nam informacje o dystrybucji. 

Jeśli są, na przykład, aby zmienić dane do 150 tutaj i odświeżenia, nasza wizualizacja zostanie zmieniona. Dokument ten jest napędzany danych. 

Tak oczywiście, wszystkie te elementy, te wszystkie atrybuty, tutaj możemy skorzystać z funkcji, nie tylko liczby, a nie tylko X i Y pozycji. Tak więc możemy użyć funkcji do koloru. Więc robimy to samo. Damy mu funkcję. 

I powiedzmy, możemy mieć warunkowe w naszej funkcji. Funkcja ta może być stu linii długich. To może zrobić bardzo, bardzo skomplikowane rzeczy. 

Więc postawmy się, jeśli stwierdzę. Powiedzmy, jeśli nasze dane są mniej niż 50, to jest jakiś próg że jesteśmy zainteresowani z jakiegoś powodu. Zróbmy to na zielono. W przeciwnym razie, zróbmy go na czerwono. Jak to jest? Ładny. 

Więc nasza wizualizacja danych zaczyna przekazać więcej ciekawych informacji na wielu kanałach. Więc teraz wiemy trochę o dystrybucji. I wiemy, że istnieje jakiś obcięte na 50, że jesteśmy zainteresowani. Wiemy, że są dwa punkty danych poniżej tego progu, a większość z nich powyżej. 

Tak więc, w końcowej fazie, dane tutaj to bardzo rzadko zdarza się zobaczyć tak. Więc po prostu przenieść go do zmiennej bo to jest czystsze, tak. A potem będziemy używać tej zmiennej. To jest dokładnie to samo. To jest po prostu nieco czystsze. 

Następna w kolejce, Akt III, Scales-- Tak więc jeden problem w prawo tutaj jest, jeśli zmienimy nasze Dane w tym 200 value-- jeśli zmienimy ją do 400 czy coś i odświeżania, to wartość ta po prostu poszedł poza ekranem. Więc nasza logika tutaj od tego, jak robimy to razy 3 i 20, do rozprzestrzeniania go, a następnie Przesunięcie to nieco jest naprawdę niezgrabne. 

Co te liczby oznaczają? Oni po prostu na sztywno tam. I są bardzo przywiązane do danych. Chcemy danych napędzane dokument. Chcemy bardzo elastyczny dokument, że podanych danych, dostosowuje się do niego i reprezentuje ją. 

Co to w zasadzie wystarczy, że mają ten zakres numerów 10. 45, 105. I chcemy map, które wychodzą Szerokość, pełna szerokość tutaj. Mamy więc wybór Numery przechodząc od 0 do 100. I mamy to idzie mi kampusu od 20 do 700, w tym przypadku. 

W pewien sposób mapować, że na. Chcemy, aby skalować, że i następnie przesunięcie go trochę. Okazuje się, że D3 ma ich. To się nazywa skalę. Więc użyjmy go. 

Sposób, że works-- zamierzam wpisz to w górę, a następnie wyjaśnić. To jest skala. Co to będzie zrobić, to będzie nakreślenie Wartości od 1 do 200 w celu 20 600. Możemy sprawdzić, że. Widzimy, że tutaj. 

Więc jeśli karmię go 1-- jednej chwili. Daj mi chwilę. Muszę literówka go. Proszę bardzo. Przykro mi o tym. 

Więc co zrobi skali jest, to zajmie wartość a następnie przekonwertować, rozwiń że obecnie, więc wypełnia pełną gamę prosisz. Więc w tym przypadku, jeśli damy jej jednego, to będzie na mapie, że obecnie na 20. A jeśli damy mu 200, to Mapa, że ​​będzie na 600. I gdzieś pomiędzy, jeśli mamy 100, to będzie gdzieś pomiędzy 20 i 600. 

I oczywiście, teraz jest to co musimy usunąć te zakodowanego rzeczy mamy tam. Więc to, co chcemy zrobić, to wziąć dane, że jesteśmy biorąc pod uwagę, że indywidualne dane elementem, i przekazać go do skalowania pierwszy. Tak więc skala będzie skalować się. 

Well-- Och, mamy tu mały błąd. Jesteśmy brakujących danych. Proszę bardzo. I że rozszerza ją. 

To daje nam sam Wynik mieliśmy wcześniej, ale zamiast tych zakodowana ograniczeń. A jeśli wielkość naszego Zmiany płótno, na przykład, jeśli chcemy mieć nad tym 400 pikseli i jest squishes się, może mamy go over-- możemy ją poszerzyć, albo my może zmniejszyć ten lewy margines czymś więcej lub mniej niż 20. Te liczby, to trudno kodowane numery teraz sensu do nas. 

I możemy zrobić o wiele więcej ciekawe rzeczy, jak również. Tak więc zamiast liniowego skalę, może chcemy, aby zalogować się skalą. I to da nam w skali logarytmicznej. 

Więc teraz nasza skalę, zamiast po prostu rozwija się ten zakres, to robić bardziej zaawansowane rzeczy. Zamiast tego zakresu trudne kodowane i zamiast tego 600, może chcemy po prostu użyć szerokość, Tak więc od 20 do szerokości minus 40 2 razy marży na drugiej stronie. A to sprawia, że ​​o wiele więcej sensu ktoś, kto może spojrzeć na kod. 

Co ciekawe, waga się bardzo, bardzo wyrafinowane, jak również. Robią wiele ciekawych rzeczy. Więc wagi nie muszą działać tylko z numerami. Zróbmy skalę kolorów. 

Tak więc nasza oferta może być: Naszą domeną jest od 1 do 200. To jest rzecz, wejście. Ale może chcemy mapować zielonego na czerwony, na przykład. A teraz, jeśli to jeden przejść, mamy zamiar dostać się na zielono. Jeśli damy mu 200, my się na czerwono. A jeśli mijamy to coś pomiędzy, to będzie jakieś połączenie, które, gdzie w gradiencie między zielonym i czerwonym. 

I zamiast ten rodzaj logiki przylegający mamy tu z Warunkowe prawo tam, możemy mieć something-- liniową skalę między tymi. Więc chcemy użyć skali po prostu stworzony, które nazwaliśmy kolor. I damy mu d, które jest nasz element danych. A tam idziemy. Mamy skalę kolorów. 

Więc to jest mapowanie. Więc po lewej stronie jest całkowicie zielony. Prawej jest cały czerwony. I wszystko pomiędzy jest funkcją d. Mamy ciekawe wizualizacje tutaj. Ale nasze dane było trochę nudne. Zobaczmy, co możemy zrobić, jeśli mieliśmy więcej ciekawych danych. 

Akt IV, Praca z Data-- pierwszą rzeczą, będziemy chcieli zrobić, aby nasze wizualizacja ciekawsze jest przeniesienie danych gdzieś indziej. To bardzo niezgrabne mieć dane zapisane na stałe tutaj. I ogólnie, będziemy pytać ktoś dla danych. Będziemy być może z prośbą do rządu, Census Bureau, co jest dane a następnie wykreślenie tego lub prosząc niektóre podmiotu trzeciego do niektórych danych a następnie budowę wizualizacja na tym. 

Więc pierwszą rzeczą, jaką chcemy zrobić jest poruszać, że gdzieś indziej. Więc mam zamiar stworzyć plik o nazwie data.json. JSON jest formatem danych. Nie musisz wiedzieć dużo o tym. I mamy zamiar skopiować Trochę danych mamy tam, wklej go tam dosłownie iść z powrotem do naszego kodu wizualizacji tutaj, i korzystać z tej funkcji tutaj. Nie musisz znać szczegóły. Ale co to zrobi to, znajdzie tego pliku, pobrać go i odesłać go do nas. Więc co to robi to, to idzie i pobrać plik data.json. A potem cały kod to wcięty inside-- zasadniczo, wszystkie Kod mamy there-- będzie uruchomić tylko wtedy, gdy mamy dane z powrotem. I wtedy to się uruchomić, że Kod z danych mamy. Świetnie, mamy wizualizacja, która wysyła zapytanie gdzieś jakiegoś kodu innego, który jest zwykle gdzie pyta niektórych danych z gdzie indziej, która jest zwykle jak wizualizacje pracy. 

Ale chcę wrócić do tych danych. Tak więc dane w zasadniczy D3-- D3 pobiera dane, które jest lista rzeczy. D3 oczekuje dane po prostu lista rzeczy, szereg rzeczy. Nie ma znaczenia, co te rzeczy są tak długo, jak jest to matryca z nich. 

Więc, na przykład, możemy od Oczywiście nie zmiennoprzecinkowych. Mogliśmy negatywów. D3 nie obchodzi, tak długo, jak to jest lista rzeczy. 

Jak ciekawych rzeczy my może mieć, mogliśmy również posiada listę ciągów, takich jak to. Tak więc są to nagłówki Crimson Wybrałem się kilka dni temu. A może można znaleźć kilka ciekawych rzeczy o tych ciągu gazet. 

Więc jeszcze raz, to jest lista rzeczy. D3 nie obchodzi. To stało się ciąg. Zmieniliśmy nasze dane. 

Wróćmy do naszej wizualizacji. Teraz nasza wizualizacja oczekuje Wejście być numery. Więc będziemy mieć wprowadzić kilka zmian. Tak na przykład, po pierwsze, może być chcemy umieścić te kręgi wraz przez długość nagłówka, liczba znaków w nagłówku. 

Więc co zrobimy is-- każdym razem nasze Funkcja jest wywoływana z ciągiem, znajdziemy to długość A następnie przekazać, że na skali. Kolor, wrócę że do stalowego błękitu. A tam idziemy. Mamy wizualizację z Crimson nagłówki. 

Nasza skala jest nieco off. Załóżmy, że najdłużej Nagłówek jest długości 100 znaków, tak rozciągać, że się trochę. I mamy wizualizację. Wydaje się więc, że większość gazet są bardzo blisko siebie, w odniesieniu do linii znaków. Ale jedno jest naprawdę wyróżnia się. 

Możemy zbudować kilka narzędzi odkrywać, że więcej. Ale kiedy pracowałem nad tym, byłem ciekawe, czy w tym zestawie danych, nagłówki z dwukropkiem w nich będzie dłuższy. I zakłada, że ​​tak. 

Warto więc dowiedzieć. Użyjmy kolor kanał tak jak poprzednio, do kodowania niektórych o to, czy tam okrężnicy lub nie. Więc użyjemy warunkowe ponownie. Nie musisz wiedzieć szczegóły tego, ale to jest jak sprawdzić Ciąg na szczególny charakter w JavaScript, znowu, nie ma znaczenia. 

Ale jeśli nie znajdziemy jelita grubego, wrócimy na zielono. A jeśli to zrobimy, wrócimy na czerwono. Więc jeszcze raz, pisze, że nie okrężnicy będzie czerwony. To jest to, co ta means-- miłe. 

Wygląda więc na to, że mój Hipoteza jest wpadł. Jest tylko dwóch. Mamy tylko sześć punktów danych i tylko dwie miały dwukropki. Ale wydaje się nieco bardziej na dolnym końcu, w rzeczywistości. Nagłówki z dwukropkami wydają ogólnie być krótszy, przynajmniej w naszych danych set-- interesujące. 

Powróćmy, że do Stal niebieska, a następnie zobaczyć co możemy zrobić jeszcze Więcej ciekawych danych. Więc znowu, mówiłem, że Dane w D3 jest lista rzeczy. Widzieliśmy liczby różnych typów. Widzieliśmy sznurki. Ale rzeczy, może być również obiekty. 

Mogą być skomplikowane rzeczy które obejmują wiele rzeczy. Aby powiedzieć, że bardziej wyraźnie, W większości wypadków chcą zbudować każdy punkt danych, jak bardziej skomplikowane niż tylko jedną wartość. Jeśli chcesz sobie wyobrazić Baza danych o studentach, nie może być studentem wymienić, legitymacji studenckiej, i wiele rzeczy związane z konkretnego rekordu, nie tylko ciąg znaków lub liczba. Więc spójrzmy na to. 

To jest jeden taki zestaw danych. Jest to zbiór danych na temat trzęsień ziemi. Więc wszystko tutaj na naszej liście lub tablicy zawiera wiele rzeczy sam rzeczy. Więc każdy punkt danych ma Wielkość i współrzędnych. I koordynuje się zawiera dwie rzeczy. 

Tak więc każdy dzień jest teraz dużo więcej skomplikowane i dużo bardziej interesujące i zawiera dużo więcej ciekawe informacje. Zobaczmy, udało nam się stworzyć z tego. Wracając z powrotem tutaj ponownie, używając nasz histogram koło wizualizacja zbudowaliśmy, zobaczymy, czy możemy budować wizualizacja rozkładu wielkości w naszym zbiorze danych. 

Więc tutaj, to samo pojęcie. Ale teraz, d zawiera więcej rzeczy. d zawiera wiele elementów danych. Więc się d powrotem. D3 daje nam d. I odpowiadamy poprzez znalezienie wielkości o d a następnie przepuszczanie że skali. 

I wtedy musimy zmienić nasza skalę, oczywiście. Więc po prostu nie bezwzględne go znacznie więcej niż 10. Właściwie nigdy nie było Trzęsienie ziemi 10 wielkości. Ale to trochę nasza górna koniec, nasza górna spektrum. 

Miejmy odświeżyć. Ładny, mamy wizualizację. To ciekawe, note-- tak istnieją dwa punkty danych, które są niemal dokładnie nad sobą inne pod względem wielkości. Widać to przez krycie używamy. 

Teraz mamy dane geograficzne. Mamy długości i szerokości geograficznej. Może moglibyśmy zrobić coś Dużo bardziej interesujące z tego. Przekonajmy się kilka ciekawy sposób na wizualizację Ten bardziej skomplikowany danych mamy dostęp. 

Akt V, Mapping-- fundamentalnie, Chcemy, aby umieścić je na mapie. To znaczy, to jest, gdzie to będzie. Chcemy do kodowania informacji o Stanowisko tych odczytów trzęsienia ziemi, jak również ich wielkość, bo mamy teraz. Rozumiemy jak spożywać bardziej skomplikowanych danych. 

Pierwszą rzeczą, jaką zrobimy to stworzyć mapę, mapę w tle. Zamierzam przejść przez Ten bardzo szybko. Jest to kod trudne. To jeszcze jeden z tych, recepty naprawdę nie mają w pełni zrozumieć do użycia. Ale to jest kod. Ten kod tutaj tworzy mapę. 

Nie zamierzamy iść w szczegółach. Ale powierzchownie, co robi jest, wysyła zapytanie tego pliku us.json, który to plik danych, jak co mieliśmy wcześniej. To jest bardziej skomplikowane, oczywiście. Jednak w tym przypadku wszystkim, każdy punkt danych jest ten stan i ma listę długości i szerokości geograficznej że określenie wielokąta, taka forma, że ​​stan. 

Więc co D3 jest podobne, do tego, co robiliśmy wcześniej. Będzie on żądać i BIND do elementu. I jest to funkcja, która mapuje ten element się, na podstawie szerokości i długości geograficznej. Możesz przeczytać więcej na ten temat. A ja polecam. 

Istnieją powiązania na Koniec tego kodu pisał. I kod jest skomentował. Tam są linki do dalszego na ten temat. Polecam go znaleźć. Ale co dbamy o to funkcja projekcji. Chcę przez to przechodzić. 

Po pierwsze, pozwól mi pokazać Ci, że tak, mamy mapę. Mapy są fajne. Więc spójrzmy na to Funkcja produkcji. 

Projekcja jest bardzo jak skali wagi ponownie. Więc co produkcja Projekcja ta funkcja nie jest, możemy przekazać mu długość i latitudes-- w tym przypadku, Wartości te są tu ac-long budynku siedzimy w prawo now-- projekcji. I projekcja przekonwertuje że w xiy wartości pikseli. 

Więc co robi projekcji jest bardzo podobny do naszej skali. To biorąc naszych szerokościach geograficznych i długości geograficznej, która reprezentuje cały glob i kurczy i wielkości, które w dół do placu, który chcemy, że daliśmy go. W tym przypadku mamy przekazując te wartości. I to daje nam, dobrze, że na ekranie oznacza 640 pikseli. Ten cały ekran jest 700 pikseli szeroki, więc sprawia, że ​​nam o tutaj, i 154 pikseli w dół, które chciałbym Szacunek jest dość dużo tutaj. 

Więc biorąc te LAT-long, które stanowią coś na całym świecie i squishing i przemieszczania się, że około aby dać nam wartości X i Y pikseli, jest to pierwsza rzecz, która jest odbywa się w tym kodzie odwzorowania. A potem reszta Kod zużywa dane Plany te, a potem lat-long na coś na ekranie. 

Ale mamy zamiar korzystać z tego występu funkcje, ponieważ okazuje się, mamy ac-tęskni tęskni, jak również. Patrząc wstecz na naszych danych, mamy szerokości i długości geograficznej dla każdej obserwacji. Więc użyjmy projekcję. 

Więc patrząc na naszej ekspozycji, chcemy naszą exposition-- mamy szerokość i długość geograficzną. Ale chcemy wartości pikseli. I okazuje się, że mają dokładnie co want-- projekcję. Bardzo podobnie jak my stosując skalę tutaj, my teraz będziemy używać projekcji i przekazać go koordynuje. Więc pierwszą rzeczą, jesteśmy doing-- więc jesteśmy uzyskanie d, która jest indywidualne dane element indywidualnego trzęsienia czytanie. Pierwsze, co robimy jest uzyskać współrzędne. Dobra, mamy współrzędne. 

Druga rzecz, którą robimy jest przekazać, że w dniu projekcji. Projekcja konwertuje te współrzędne do wartości pikseli x i y. A potem ostatnią rzeczą, chcę zrobić, to po prostu x, których sprawa ta pierwsza. Jest to pierwszy z dwóch rzeczy które są zwracane przez projekcji. 

Będziemy robić to samo dla y. Ale zamiast tego, wrócimy Drugi element y. Przygotuj się, aby odświeżyć. Och, bardzo charakter here-- miło, mamy napędzane danych dokument to ukrywanie tego pliku JSON obiektów, sporządzeniu mapy i zmiany atrybutów w odniesieniu do danych, aby wyświetlić ją na mapie. To jest naprawdę ciekawe. To jest fajne. 

Weźmy go wycięcie. To znaczy, mamy dwa kawałki informacje z każdego punktu danych. To znaczy, trzy. Mamy współrzędne, który x i y. I mamy ogrom. 

Musimy zakodować wielkość jakoś. Mamy wiele kanałów. Możemy użyć koloru. Możemy użyć promień. Możemy używać krycie. Możemy korzystać z wielu rzeczy w kodzie. Każda z tych cech i wielu bardziej, że nie są tam wymienione, ponieważ są one opcjonalne, mogliśmy używać do kodowania tych danych, udar mózgu i wszystkie te rzeczy już wspomniałem. 

Zróbmy promień. Myślę, że promień jest najbardziej intuicyjny. Więc jeszcze raz, będziemy zastąpić zakodowane 40 i zrobić kilka obliczeń. Będziemy używać ponownie nasz ulubiony skalę. I jesteśmy obok d. Ale nie d, ponieważ chcemy wielkości z d. d jest tylko punkt danych. Miniemy wielkości w skali. 

Spróbujmy jeszcze raz. Och, to nie działa. Dlaczego to nie działa? 

Więc pamiętaj jaką skalę ma. Spójrzmy na skali ponownie. Mapy od 1 do 10 w skali do 22 do 600, bardziej lub mniej. 600 jest ogromny. To dlatego jesteśmy coraz to. 

Dlatego chcemy, aby zmienić naszą skalę na coś bardziej rozsądnego. Powiedzmy, że chcemy 0 do 60. 60 jest duży, ale 10 trzęsienia ziemi są niezwykle rzadkie. W rzeczywistości, oni nigdy nie stało. 

Więc co to będzie zrobić, to zajmie to nasza wielkość, która idzie od 1 do 10 odwzorować go na rozszerzenie go. Odwzorować go na 0 do 60. Miejmy odświeżyć. 

Ładny, mamy wizualizację. To jest dobre. To faktyczne dane. Zauważysz, w moim małym zabawki Przykładem, największe trzęsienie ziemi jest prawo na nas. Ale to jest to. Mamy datę napędzane wizualizację który zużywa dane i daje nam naprawdę ciekawe informacje. Tak, dodajmy kilka interaktywność do niego. Wspomniałem, że był silna siła D3. 

Więc, dla każdego elementu, jesteśmy opisując kilka atrybutów. Ale możemy również opisać to, co chcemy się stało z elementami interaktywności. Na przykład, można opisać co się dzieje, kiedy myszkę. I bardzo podobne, że że będziemy mieć funkcję, bardzo podobne do atrybuty mieliśmy wcześniej, gdzie coś zrobić elementu, gdy unoszą się nad nią. 

Więc pierwszą rzeczą, musimy zrobić, to wybrać ten element, go znaleźć w zasadzie w przeglądarce. a następnie możemy ustawić atrybut do niego. Więc co tu robię to, gdy unoszą nad czymś, dostaniemy ten element a następnie ponownie ustawić jej krycie 1, całkowicie nieprzezroczysty. Zobaczmy, co to wygląda. 

Wydaje się, mamy dodatkowe średnik tutaj. Jeśli więc unoszą się nad tutaj, to staje się pełna. Ale teraz, oczywiście, go pozostaje pełna, bo my muszą opisać, co się dzieje, kiedy zdjąć nasz kursor. Warto więc zrobić dokładnie, że na mouseout, w przeciwieństwie do mouseover. 

A my go przywrócić co mieliśmy before-- 0,5. A teraz, za każdym razem, unosić, mamy pełne koło. To pomaga nam zobaczyć, co mamy mamy do wyboru zasadniczo. 

A teraz zróbmy to naprawdę świetnie. Miejmy podłączyć do rzeczywistych danych. Warto więc zapytać, mógł USGS o swoich danych. Więc US Geological Survey ma danych na temat trzęsień ziemi. Mają API, które jest w stanie publicznego zużywanych w formacie JSON. Więc zróbmy to. 

Więc to jest trochę kodu, który łączy się z API USGS. I jest trochę przetwarzania na nim. Nie jest to istotne, ale upraszcza do prostego formatu danych, jak ten mieliśmy wcześniej. Więc mogę się pozbyć naszego wezwania do nasz fałszywy data.json w aktach. A zamiast tego, Dzwonię USGS zasadniczo. 

Załóżmy, odświeżyć, ładne. To jest rzeczywiste, prawdziwych danych z tego tygodnia do trzęsienia ziemi. To jest naprawdę ciekawe. Nie jest to zaskakujące dla nas, ale są wiele trzęsień ziemi na West Coast w Kalifornii. Ale myślałem, że to bardzo ciekawe że było tak wiele trzęsień ziemi na Alasce, a zdaje się, tutaj, na Środkowym Zachodzie. Mam na myśli, ciekawe, i jesteśmy dobrzy. To konkluzja. 

Ale zasadniczo, to jest to, co pomaga nam w D3. To pomaga nam podjąć danych, wiążą jej elementów DOM, i mają te elementy zmienić jako funkcja danych, mają te atrybuty, wszystkie te wiele atrybutów elementów, być użyteczne kanały przekazać informacje. 

D3 jest niesamowicie potężny Biblioteka i niezwykle dobrze prowadzony. To niektóre potężne rzeczy. Wizualizacja danych jest niezwykle potężnym narzędziem do przekazywania ludziom głębokich spostrzeżenia, które dostaje się do ich rdzenia i pomaga im zrozumieć, w ta głęboka i intuicyjny sposób, jak działa i jak dane Dane zmienia nasze życie.