[MUSIC JOC] 

DAVID Chouinard: Sunt David Chouinard, iar acest lucru este D3. Bine ai venit. Vom afla mai multe despre D3 astăzi. D3 este un cadru de activarea JavaScript- pentru a construi o înaltă calitate vizualizări interactive pentru web. Lucruri ca ceea ce suntem văzând în spate de mine, vom învăța să facă cele lucruri, un fel de elementele de bază ale acestuia. Dar va fi rece. Să începem a face poze frumoase. Avem mai multe demo-uri de perspective disponibile. Hai să o facem. 

Actul I, DOM manipulation-- mergem pentru a începe imediat face lucruri interesante. În primul rând, pe stânga, avem cod. In dreapta, avem rezultatul codul nostru. Să mergem prin ea. 

Să facem un cerc. Cum ți se pare? svg.append circle-- ne-am făcut un cerc. Tu nu mă crezi, nu? Nu e acolo. 

Deci, ceea ce am făcut aici este, SVG este grafică vectorială scalabilă. Acesta este modul în care spune browser-ului pentru a face grafică vectorială în browser. Ceea ce tocmai am făcut-o chiar acum Se adaugă un cerc pentru a căuta. 

Promisiunea este că cercul necesită un pic de atribute de bază înainte de a putea vedea de fapt. Trebuie să-l spun poziția x, poziția y, raza sa. Nu am spus nimic din toate acestea, așa că nu-l văd chiar acum. Dar să-l spun chestii. 

Deci, în primul rând, ai pentru a se obține cercul nostru un nume. Deci, haideți să-l numim cerc. Cerc nostru are un nume acum. Și să-l dau câteva atribute. Ce zici de cx-ar centru x, astfel centrul poziției x. Să spunem, 200 de 200 pixeli. 

Să dau un y de 200 de pixeli, de asemenea. Și o r, o rază, de aproximativ 40 de pixeli. Acum, să vedem. Eu nu pot scrie. 

Acolo te duci. Avem un cerc la poziția 200 pixeli, 200 pixeli pe o rază de 40 pixeli. Un fel de rece, nu? Avem un cerc. Da. 

Deci, nu este nevoie să urmeze de-a lungul. Toate aceste exemple, toate din codul Fac astăzi vor fi furnizate online la capătul sub formă de exemple interactive cu puncte de control de la fiecare act, și așa mai departe. 

Să facem mai multe lucruri. Acest cerc negru este foarte urât. Îmi pare rău pentru această eroare Mesajele acolo. Acolo mergem. 

Să dau o culoare. Cum e asta? Îmi place să albastru oțel. Ei bine, cercul nostru schimbat culoarea. Grozav. Să facem o semi-transparent too-- semi-transparent. 

Deci, acestea sunt atribute suntem definirea pe cercul. Primul lucru pe care am făcut-o este am pus un cerc pe pagina. Și apoi vom definirea o grămadă de atribute. Unele dintre acestea sunt necesare, ca CX, CY, și Radius. Și altele sunt opționale. 

Există mult mai multe atribute. Există o mulțime de ei. De exemplu, am putea avea o accident vascular cerebral, de asemenea, un accident vascular cerebral de roșu. Dar să scoateți asta. Ne-am întors într-un cerc, un cerc albastru. 

Așa că hai să facem mai multe cercuri. Cum e asta? Să facem un alt cerc. Acest lucru este interesant, nu? 

Deci, spune că doar Copy-Copiat ceea ce am avut deja. Să-i spunem circle2. Și să facem exact același lucru și dau atribute, având în vedere o poziție x de 300. Yay, avem două cercuri acum. 

Și, bineînțeles, am putea actualiza aceste valori. Am putea pune la 400, iar acum se mișcă. Si din moment ce e enervant, să scoateți-l, așa circle2.remove. A plecat acum. 

Deci, ce facem și este doar foarte, very-- acest este foarte similar cu ceea ce s-ar putea face în jQuery, de exemplu. Noi doar manipulare DOM, se numește. S-ar putea fi auzit acest cuvânt înainte. Suntem crearea de lucruri, stabilirea atribute pe chestii, eliminarea chestii. 

Acum, aici e în cazul în care devine interesant. Deci, mai târziu, în codul, am putea încă se referă la cercul inițial aici. Așa că haideți să resetați atributul său de cx. Să spunem, poziția sa x 400. Și am de gând să tranziție că, deci e evident. Acolo mergem. 

Deci, am adaugat un cerc. Am stabilit unele atribute. Am adaugat un alt cerc, îndepărtat ea. Și apoi vom modifica cercul inițial. 

Dar aici e în cazul în care acesta devine mult mai interesant. Nu numai că putem stabili atribute ca doar valori, putem spune, hei, cerc, du-te la poziția 200. Putem de asemenea, le seta ca funcții. 

Deci, în loc de a da 400 aici, putem face unele de calcul pe zbor pentru ceea ce noi vrea ca atribut să fie. Deci, acesta este modul în care ar exprima asta. Spunem, în loc de 400, lasă-mă să îți dau o funcție în schimb. Și aici, în interiorul această funcție, putem face orice calcul nebun. 

Am putea lua timp și uita-te la un alt lucru și să decidă dinamic pentru cercul ce valoare vrem. Ce zici ne-am da un post x întâmplare? Deci asta e. 

Deci, ce care spune este, pentru fiecare x, executați această funcție. Și ceea ce facem este calcularea unele lucruri, ori și aleatoare lățimea și returnarea că. Deci, de fiecare dată când executați, vom obține o cerc care merge la un loc aleator. E un fel de rece. Mă simt ca și cum aș putea uita la acest lucru pentru un mic. Suntem incepand de a ajunge la ceva interesant aici. Să facem condus acum aceste date. Nu e nici date aici. Să schimbăm asta. 

Documents-- Actul II, Data Driven Deci, să ne întoarcem la aici. Și hai să scăpăm de circle2, pentru că suntem doar adăugarea și eliminarea ea. Deci, nu avem nevoie de el. Trebuie să fim mult mai inteligent aici. Să spunem, ne-am unele date de un anumit fel. Un moment-- să zicem, am avut datele acest formular. Am avut o matrice, doar o grămadă de numere. Avem șapte numere aici, indiferent de acestea sumă reprezenta: în contul bancar oamenilor, cum mult acestea să cântărească, Dumnezeu știe ce. 

Acestea sunt numere, și noi doriți să utilizați cercurile noastre pentru a reprezenta aceste numere într-un fel. Vrem să lega nostru cercuri la aceste numere. Deci, ceea ce facem. Să spunem, ne dorim o cerc pentru fiecare număr. Am putea face vechi lucru am fost doing-- Adăugare cerc și circle2 și circle3. Dar acest scapă de sub control, și există o mulțime de repetarea logică. 

Așa că hai să mai inteligent cu asta. În loc de a folosi cercului var svg.append că am fost doar folosind, vom utiliza acest mic bloc de aici. Nu vreau să merg în profunzime în ceea ce toate aceste părți face. Și e un fel de subiect avansat. Și am vrea să pot. 

Dar lucrul cheie pentru a recognize-- și veți vedea este foarte des în cod D3. Acest bloc de bază de text creeaza cat mai multe cercuri ca exista elemente de date în această matrice aici. Deci, acest lucru creează cât mai multe cercuri ca exista elemente. Va ne crea șapte cercuri. Și o face un lucru foarte, foarte cheie. Deci să executați. Să elimina alte cercul nostru. Hai să comenteze această o parte afară și executați din nou. 

Acolo mergem. Deci, cercul nostru de aici este o lot mai inchisa, pentru ca ne au șapte cercuri, o pe deasupra celuilalt. Tocmai am creat șapte cercuri, unul fiecare pentru fiecare dintre aceste elemente de date. Dar există un lucru care sa întâmplat cheie cu acest fragment aici. 

E ca datele au fost legat. Deci, fiecare dintre aceste elemente de date, 10, 45, 105, a fost legat la un anumit cerc. Deci, acestea nu numai că a creat o grămadă de cercuri dar leagă aceste două lucruri împreună. 

Iar în viitor, pentru că am creat aceste cercuri cu această funcție D3, dacă ți-aș da un cerc, puteți da-mi datele asociate cu ea. Deci, putem întreba D3. Hei, D3, am acest cerc. Ce-i datele care cercul are? Și D3 ne-ar spune de 10 sau 45 sau 105. 

Aceste lucruri sunt legate. E un concept foarte, foarte fundamental. Să ne uităm la asta. 

Deci, modul în care ne-ar întreba D3-- așa acest lucru este irelevant pentru acest lucru, dar doar încredere în mine pe ea. Acesta este modul în care cerem D3. Hei, D3, da-mi primul cerc pe care le puteți găsi. Dă-mi primul cerc puteți găsi. Și atunci am putea întreba D3, ce este datele de pe care, ca aceasta, 10. 

Deci, ne-am întreba D3, găsiți-mi primul cerc puteți găsi. Ce-i datele sale? 10, care este într-adevăr nostru primul element de date. Am putea întreba, hei, D3, ne sa treilea cercul nostru. 105. De ce este acest lucru cu adevărat importantă? 

Deci aici, am menționat pe care le-ar putea folosi funcțiile. Și am menționat că a fost un lucru foarte puternic. Deci, nu numai că se poate face funcțiile noastre lucruri ca face unele calcule, de exemplu, reveni un număr aleator, se poate De asemenea, face lucruri pe baza datelor. Aceasta este ceea ce înseamnă date condus documente. Asta e ceea ce reprezintă D3 pentru. 

Deci, acest x postition-- loc de doar că toate cercurile, obține x poziție 200, ne-am ar putea da o funcție. Și aici, putem face unele calcule. și d aici stă în loc pentru datele. Deci, de fiecare dată când avem un cerc, în esență, D3 va crea aceste șapte cercuri. Și apoi pentru fiecare 

cerc, se va merge, hei, circle1 care e poziția ta de x. Anterior, am fost răspunde întotdeauna 200. Dar acum, de fiecare dată D3 solicită ne care e poziția ta x, se va da us-- avem că cerc, așa că avem datele. Va să ne dea datele și spune, ce vrei expunerea să fie, pe baza acestor date. 

Să se întoarcă datele reale. Deci, dacă vom rula aceasta, aceasta dă Date noi condus documente. Aceste cercuri sunt bazate în ceea ce position-- acestea sunt baze ca o funcție a datelor. 

Deci, pentru primul cerc, D3 pune un cerc. Și apoi D3 ne cere, ce face vrei expunerea să fie. Și noi spunem doar, indiferent de datele sunt. Asigurați specificații 10. 

Apoi întreabă, ce vrei expunerea să fie pentru al doilea cerc. Iar noi răspundem la, 45. Iar noi, desigur, poate face unele calcul aici. Mi se pare că aceste cercuri sunt un fel de squished sus. 

Deci, multiplica de 3, înmulțiți datele de 3. Cerc nostru tocmai a fost extins afară. Valoarea noastră a fost triplat. 

Cercul este într-adevăr pe margine, Să poate un fel de ea compensare. Să spunem, de 20. Poftim. 

Aceasta este o vizualizare a datelor. Este un foarte de bază, dar acest lucru ne dă o idee despre datele noastre. Ea ne spune că, de exemplu, au un mic grup de elemente. Și avem o valoare aberantă mare aici. Acest lucru ne dă câteva informații despre distribuția. 

Dacă ar fi, de exemplu, să schimbe datele la 150 de aici și de reîmprospătare, vizualizare noastră este schimbat. Acest document este condus de date. 

Deci, desigur, toate aceste elemente, toate aceste atribute aici, putem folosi o funcție, nu doar numerele, nu doar x și y pozițiile. Deci, putem folosi o funcție de culoare. Deci, vom face la fel. Vom da o funcție. 

Și să spunem, am putea avea condiționale în funcție noastră. Această funcție poate fi sute de linii lungi. Se poate face lucruri foarte, foarte complicate. 

Deci să punem un if aici. Să spunem, în cazul în care datele noastre sunt mai puțin decât 50, asta e un prag că suntem interesați în pentru un motiv oarecare. Să facem acest verde. În caz contrar, să facem o roșie. Cum e asta? Nisa. 

Deci vizualizare noastra de date începe pentru a transmite informații mai interesante pe mai multe canale. Deci, acum stim un pic despre distribuția. Și știm că există un fel de tăiat la 50, care suntem interesati de. Știm că există două puncte de date sub acest prag și cele mai multe dintre ele de mai sus. 

Deci, ca o etapă finală, aceste date aici, este foarte rar la aceasta ca asta. Așa că hai să-l mute la o variabilă pentru că e mai curat, ca aceasta. Și apoi vom folosi acea variabila aici. Este exact același lucru. E doar un pic mai curat. 

Următorul, Actul III, Scales-- Deci, o problema dreapta aici este, dacă vom schimba nostru date în acest 200 value-- dacă am schimba la 400 sau ceva și de reîmprospătare, atunci această valoare tocmai a offscreen. Deci, logica noastră aici de modul în care facem ori 3 și 20, să-l întins și apoi compensa un pic este foarte greoaie. 

Ce înseamnă aceste numere? Ei pur și simplu greu codificate acolo. Și ei foarte mult legat de datele. Ne dorim un document de date condus. Ne dorim un document foarte flexibil, că datele prezentate, se adaptează la ea și reprezintă. 

Ceea ce avem nevoie de fapt este că au această gamă de numere 10. 45, 105. Și vrem să harta asta într-o formă lățimea, complet lățimea de aici. Deci avem gama de Numerele merg la 0 la 100. Și avem această campus am trecut 2-70, în acest caz. 

Ne fel de doresc să harta asta pe. Vrem la scară că până și apoi compensa un pic. Se pare că D3 are aceste. Se numește o scară. Deci să-l folosească. 

Modul în care works-- am de gând să acest tip în sus și apoi explica. Aceasta este o scală. Ce va face este, se va schița valori între 1 și 200 de pe la 2-60. Putem verifica asta. Putem vedea că aici. 

Deci, dacă am hrăni 1-- un moment. Dă-mi o secundă. Cred că am o scris corect. Acolo te duci. Îmi pare rău pentru asta. 

Deci, ce va face o scală este, se va lua o valoare și apoi conversia, extinde asta, așa că umple întreaga gamă ceri pentru. Deci, în acest caz, dacă are un da, se va harta care intră 20. Și dacă ne dau 200, e O să harta care pe la 600. Și undeva în între, dacă vom obține 100, e Va fi undeva între 20 și 600. 

Și, bineînțeles, acum acest lucru este ceea ce avem nevoie pentru a elimina aceste codificate hard lucruri pe care le avem acolo. Deci, ceea ce vrem să facem este ia datele pe care suntem având în vedere, că datele individuale Element, și se trece la scară întâi. Deci scară se va intensifica. 

Well-- Oh, avem un pic de eroare aici. Ne lipsesc date. Acolo te duci. Și că se extinde afară. 

Asta ne dă aceeași rezultat, am avut înainte, dar în loc de a avea cele greu codificate constrângeri. Și dacă mărimea noastre modificări panza, de exemplu, dacă vrem să avem această peste 400 pixeli și squishes afară, putem avea over-- putem extinde, sau noi poate reduce această marjă stânga la ceva mai puțin sau mai mult de 20. Aceste numere, acestea greu codificate Numerele face acum sens pentru noi. 

Și am putea face mult mai mult lucruri interesante, de asemenea. Deci, în loc de a avea un liniar scară, am putea dori să vă conectați o scară. Și asta ne va da o scară jurnal. 

Deci, acum scară noastră, în loc de doar extinderea faptul că gama, se face lucrurile mai sofisticate. În loc de a avea aceasta gama greu codificate, și în loc de a avea acea 600, am putea dori să folosească doar lățimea, astfel de la 20 la lățimea minus 40, 2 ori marja de cealaltă parte. Și acest lucru face mult mai mult sens pentru cineva care ar putea sa te uiti la codul. 

Interesant, scalele primi foarte, foarte sofisticat de asemenea. Ei fac o mulțime de lucruri interesante. Deci, scale nu au neapărat să funcționeze doar cu numere. Să facem o scară de culori. 

Deci, gama noastră ar putea be-- Domeniul nostru este de 1 până la 200. Asta e lucrul de intrare. Dar s-ar putea dori să harta de la verde la roșu, de exemplu. Și acum, dacă am trece 1, vom obține verde. Dacă da 200, vom primi roșu. Și dacă am trece ceva în între, se va fi ceva mix de faptul că, undeva pe gradientul între verde și roșu. 

Și în loc de a avea acest tip de logică greoaie avem aici cu condiționată chiar acolo, am putea avea un something-- scară liniară între cele. Deci, vom folosi scara ne-am a creat, pe care am numit culoare. Și am da d, care este elementul noastra de date. Și acolo mergem. Avem o gama de culori. 

Deci, aceasta este de cartografiere. Deci, extrema stângă este complet verde. Extrema dreaptă este complet roșu. Și totul în între este o funcție a d. Avem un interesant vizualizari aici. Dar datele noastre a fost un fel de plictisitor. Să vedem ce am putea face dacă am avut mai multe date interesante. 

Actul IV, cu de lucru Data-- primul lucru vom dori să facem pentru a face nostru vizualizare mai interesant este de a muta datele în altă parte. Este foarte greoaie de a avea datele de greu codificate aici. Și, în general, vom fi cere altcineva pentru datele. Vom poate cere guvernului, Census Bureau, care e datele dvs. și apoi complot care sau cere o entitate terță parte pentru anumite date și apoi construirea unui vizualizare pe asta. 

Deci, primul lucru vrem să facem este muta că în altă parte. Așa că am de gând să creeze un fișier numit aici data.json. JSON este formatul de date. Nu trebuie să știe prea multe despre asta. Și vom copia puține date avem acolo, lipiți-l acolo textual, du-te înapoi la codul nostru vizualizare aici, și de a folosi această funcție aici. Nu trebuie să cunoască detaliile. Dar ce va face este, se va găsi acel fișier, aduce o, și a reveni la noi. Deci, ce face acest lucru este, merge și obține fișierul data.json. Și apoi tot codul care este indentate inside-- în esență, tot codul avem there-- va rula numai atunci când vom obține datele înapoi. Și apoi o să executați cod cu datele pe care le avem. Grozav, avem o vizualizare care interoghează pentru un cod undeva altceva, care este de obicei în cazul în care se întreabă unele date de la în altă parte, care este de obicei cum funcționează vizualizări. 

Dar vreau să mă întorc la datele. Deci datele în mod fundamental în D3-- D3 consumă date care este o listă de lucruri. D3 se așteaptă ca datele să fie doar o listă de lucruri, o serie de lucruri. Nu contează ce lucruri respective sunt, atât timp cât este o matrice de ele. 

Deci, aici, de exemplu, am putea de Desigur au valori în virgulă mobilă. Am putea avea negative. D3 nu-i pasă, atâta timp ca este o listă de lucruri. 

Ca lucrurile interesante noi ar putea avea, am putea, de asemenea, au o listă de șiruri de genul asta. Deci, acestea sunt titlurile Crimson Am luat câteva zile în urmă. Și poate că puteți găsi unele interesante lucruri despre aceste titluri a. 

Deci, din nou, aceasta este o listă de lucruri. D3 nu-i pasă. Acestea se întâmplă să fie un șir. Ne-am schimbat datele noastre. 

Să revenim la vizualizare nostru. Acum, vizualizare nostru așteaptă de intrare să fie numere. Deci, vom avea pentru a face câteva modificări. Deci, de exemplu, în primul rând, poate dorim a pune aceste cercuri de-a lungul de lungimea titlu, Numărul de caractere în titlu. 

Deci, ce vom face este-- de fiecare dată nostru Funcția se numește cu un șir de caractere, vom găsi că este de lungime și apoi trece asta scară. Culoarea, voi întoarce care a albastru oțel. Și acolo mergem. Avem o vizualizare titluri de Crimson. 

Scară noastra este un pic off. Să presupunem că cel mai mult titlu este de 100 de caractere lung, astfel încât se întind un pic. Și avem o vizualizare. Deci, se pare că cele mai multe titluri sunt destul de apropiate, în ceea ce privește linia caracter. Dar într-o acolo într-adevăr iese în evidență. 

Am putea construi o serie de instrumente de a explora că mai. Dar când am fost de lucru pe acest lucru, am fost curios dacă, în acest set de date, titrează cu două puncte în ele ar fi mai mare. Am presupune acestea ar. 

Așa că hai să aflăm. Să folosim culoarea canal cum am făcut-o mai înainte, pentru a codifica unele despre dacă există un colon sau nu. Deci, vom folosi din nou un condiționată. Nu trebuie să știi detaliile acest lucru, dar acest lucru este modul în care verifica o șir pentru un anumit caracter în JavaScript, din nou, nu este relevant. 

Dar dacă nu găsim o colon, vom reveni verde. Și dacă vom face, vom returna roșu. Deci, din nou, titrează că au un colon va fi de culoare roșie. Aceasta este ceea ce acest means-- frumos. 

Deci, se pare că mea ipoteză este lovit. Sunt doar două. Avem doar șase puncte de date și doar doi au avut două puncte. Dar se pare un pic mai mult pe capătul de jos, de fapt. Prima pagină cu două puncte par să fie în general mai scurte, cel puțin în datele noastre la set-- interesant. 

Să ne întoarcem care a oțel albastru și apoi a se vedea ceea ce putem face cu mai mai multe date interesante. Deci, din nou, am menționat că date într-D3 este o listă de lucruri. Am văzut un număr de mai multe tipuri. Am văzut siruri de caractere. Dar lucrurile pot fi, de asemenea, obiecte. 

Ele pot fi lucruri complicate care includ o mulțime de lucruri. A spune că mai clar, în cele mai multe cazuri, noi vrea să construiască fiecare punct de date ca mai complicat decât o valoare. Dacă ai imagina un bază de date despre studenți, ar putea fi un elev nume, un ID de student, și o mulțime de lucruri asociate cu un anumit înregistrare, nu doar un șir sau un număr. Deci, să ne uităm la asta. 

Aceasta este una dintre aceste date stabilite. Acesta este un set de date despre cutremure. Deci, tot aici, pe lista noastră sau matrice de lucruri conține multe lucruri în sine. Deci, fiecare punct de date are o mărime și o coordonează. Și se coordonează conține două lucruri. 

Deci, fiecare zi este acum mult mai complicat și mult mai interesant și conține mult mai informații interesante. Să vedem am putea construi din asta. Revenind înapoi aici, din nou, folosind vizualizare nostru cerc histograma ne-am construit, să vedem dacă putem construi o vizualizare de distribuție mărime în setul noastra de date. 

Deci, aici, e același concept. Dar acum, d conține mai multe lucruri. d conține multe elemente de date. Deci, vom fi d înapoi. D3 ne dă d. Și am răspuns prin găsirea amploarea de d și apoi trece la scara care. 

Și atunci trebuie să se schimbe scară noastră, desigur. Deci, mărimi, pur și simplu nu merge mult mai mult de 10. De fapt, niciodată nu a existat un cutremur cu magnitudinea de 10. Dar asta e un fel de superior noastre scop, spectru nostru superior. 

Să refresh. Nisa, avem o vizualizare. Este interesant de note-- așa există două puncte de date care sunt aproape exact pe partea de sus a fiecărei parte, în ceea ce privește dimensiunea. Veti vedea acest lucru prin opacitatea folosim. 

Avem date geografice acum. Avem latitudini și longitudine. Poate am putea face ceva mult mai interesant cu asta. Să găsim ceva mai mult mod interesant de a vizualiza acest lucru mai complicat Date avem acces la. 

Actul V, Mapping-- fundamental, vrem să astea pe o hartă. Adică, acest lucru este în cazul în care acest lucru se întâmplă. Ne dorim pentru a codifica informații despre Poziția acestor lecturi cutremur, precum și amploarea lor, pentru că avem asta acum. Noi înțelegem cum de a consuma date mai complicate. 

Primul lucru pe care vom face este crea o hartă, o harta de fundal. Am de gând să treacă prin acest lucru foarte repede. Acest lucru este cod complicat. Este un alt unul dintre cei rețete tu nu prea Trebuie să înțelegem pe deplin pentru tine de a utiliza. Dar acest lucru este cod. Acest cod de aici creează o hartă. 

Nu vom merge în detaliu. Dar superficial, ceea ce face este, se întreabă acest dosar us.json, care este un fișier de date ca cea pe care am avut-o înainte. E mult mai complex, desigur. Dar, în acest caz, totul, fiecare punct de date este acest stat și are o listă de latitudini și longitudine care definesc poligonul, această formă, acea stare. 

Deci, ce va face D3 este similară a ceea ce am făcut înainte. Se va solicita și lega că la un element. Și există o funcție care va harta acel element afară, bazat pe latitudini și longitudine. Puteți citi mai multe despre aceasta. Și eu îl recomand. 

Există link-uri la sfârșitul acestui cod postate. Și codul este comentat. În există link-uri pentru mai mult de pe aceasta. Vă recomand să-l cauți. Dar ce ne pasă este această funcție proiecție. Vreau să merg prin asta. 

Mai întâi de toate, permiteți-mi să arăt voi care, da, avem o hartă. Hărțile sunt cool. Deci, să ne uităm la acest funcția de producție. 

Proiecția este foarte mult ca o scară, cântare din nou. Deci, ce producția de această funcție proiecție nu este, am putea să-l dați longitudine și latitudes-- în acest caz, aceste valori aici sunt lat-lungi ale clădirii stăm în dreapta now-- de proiecție. Și proiecție va converti că în x și y valorile pixelilor. 

Deci, ceea ce face proiecție este foarte similar cu scara noastră. Durează latitudinile noastre și longitudine că reprezintă un întreg glob și în scădere și dimensionarea că până la pătrat pe care ne-o dorim, că l-am dat. În acest caz, suntem trecerea acestor valori. Și ne dă, ei bine, asta pe ecran înseamnă 640 pixeli. Acest ecran întreg este de 700 pixeli larg, astfel încât ne face despre aici, și 154 de pixeli derulează, pe care i-ar estimare este destul de mult aici. 

Deci, luând aceste lat-lungi, care reprezintă ceva pe întregul glob și squishing și se deplasează în jurul valorii de care a ne x și y valorile pixelilor da, acesta este primul lucru care-i făcut în acest cod de cartografiere. Și apoi restul Codul consumă datele și apoi harti aceste lat-lungi într-o formă ceva pe ecran. 

Dar vom folosi această proiecție funcții, pentru că se pare că Avem lat-Longs lungi, de asemenea. Privind înapoi la datele noastre, ne-am latitudini și coordonatele longitudinale pentru fiecare observație. Deci să folosească proiecție. 

Deci, uita la expunerea noastră, ne-o dorim exposition-- nostru avem o latitudine și longitudine un. Dar vrem valorile pixelilor. Și se pare că, avem exact ceea ce doresti cu proiecție. Foarte mult ca am fost folosind scala din dreapta aici, ne acum de gând să utilizeze proiecție și trece-l coordonează. Deci, primul lucru suntem doing-- așa suntem obtinerea d, care este un individ date element al unui cutremur individ lectură. Primul lucru pe care îl facem este să coordonatele. Bine, avem coordonatele. 

Al doilea lucru pe care îl facem este transmite că pe proiecție. Proiectie convertește aceste coordonate în valorile pixelilor, x și y. Și apoi ultimul lucru de care avem vrei sa faci este doar obține x, care acest caz este prima. Este prima din cele două lucruri care sunt returnate de proiecție. 

Vom face același lucru pentru y. Dar, în loc, vom returna al doilea element, y. Gata pentru a reîmprospăta obține. Ooh, caracter suplimentar here-- frumos, ne-am un document condus de date care este ascunde acest fișier JSON de obiecte, face o hartă, și schimbarea atribuie în raport cu datele să-l proiecteze pe o hartă. Acest lucru este foarte interesant. Acest lucru este rece. 

Să-l ia la un alt nivel. Adică, avem două bucăți de Informații cu fiecare punct de date. Adică, trei. Avem coordonatele, care este un x și y. Și avem amploarea. 

Avem nevoie pentru a codifica magnitudinea cumva. Avem o mulțime de canale. Putem folosi culoare. Putem folosi rază. Am putea folosi opacitate. Am putea folosi multe lucruri în cod. Oricare dintre aceste atribute și multe mai mult că nu sunt enumerate aici, pentru că sunt opționale, am putea utilizați pentru a codifica aceste date, accident vascular cerebral și toate aceste lucruri le-am menționat. 

Să facem rază. Cred că raza este cel mai intuitiv. Deci, din nou, vom înlocui așa de greu codificate- 40 și să facă unele calcule. Vom folosi din nou scara noastră favorită. Și am trecut d. Dar nu d pentru că vrem amploarea de d. d este doar punctul de date. Vom trece magnitudinea la scară. 

Să încercăm din nou. Ooh, aceasta nu funcționează. De ce nu-l nu funcționează? 

Deci, amintiți-vă ce face scară. Să ne uităm la scară din nou. Scala hărți la 1 la 10 pe to la 22 to 600, mai mult sau mai puțin. 600 este imens. Acesta este motivul pentru care vei primi asta. 

Așa că vrem să se schimbe scara noastră pentru ceva mai rezonabil. Să spunem, vrem 0-60. 60 este mare, dar 10 cutremure sunt incredibil de rare. De fapt, ei nu fi întâmplat. 

Deci, ce va face este, ea va lua magnitudine nostru care merge la 1 la 10 și o hartă pe pentru ao extinde afară. Și mapa la 0 pentru a 60 de ani. Să refresh. 

Nisa, avem o vizualizare. Este un lucru extraordinar. Acest lucru este date reale. Veți observa, în mica mea jucărie exemplu, cel mai mare cutremur este chiar deasupra noastră. Dar asta e. Avem o dată condus vizualizare care consumă datele și ne dă într-adevăr informații interesante. Da, hai adăuga unele interactivitate la ea. Am menționat că a fost forța tare de D3. 

Deci, aici, pentru fiecare element, suntem descrie o grămadă de atribute. Dar putem descrie, de asemenea, ceea ce ne dorim să se întâmple cu elemente de interactivitate. De exemplu, am putea descrie ce se întâmplă atunci când mouse-ul peste. Și foarte similar care, că va lua o funcție, foarte asemanatoare cu atributele am avut înainte, unde facem ceva pentru a Element când am hover peste el. 

Deci, primul lucru pe care trebuie să că este o acel element, să-l găsiți, practic, în browser. și apoi ne-am putea stabili un atribut să-l. Deci, ceea ce fac aici este, atunci când am hover peste ceva, vom primi acest element și apoi setați opacitatea înapoi la 1, la complet opacă. Să vedem cum arată. 

Se pare că avem o punct și virgulă în plus aici. Deci, dacă noi hover peste aici, devine plin. Dar acum, desigur, ea rămâne complet, pentru că noi Trebuie să descrie ceea ce se întâmplă când scoateți cursorul noastră. Deci, haideți să facem exact asta pe mouseout, spre deosebire de mouseover. 

Și vom resetat la ceea ce am avut before-- 0,5. Și acum, de fiecare dată când hover, avem un cerc complet. Ea ne ajută să vedem ce suntem selectarea esență. 

Și acum să facem acest grozav. Să conectați acest la date reale. Așa că haideți să cerem ar putea USGS despre datele lor. Deci, US Geological Survey are date despre cutremure. Ei au un API public care este capabil a fi consumate în format JSON. Așa că hai să facem asta. 

Deci, aceasta este un pic de cod care se conectează la API USGS. Și există un pic de prelucrare pe ea. Acest lucru nu este relevant, dar simplifică aceasta la un format de date simplu ca cel am avut înainte. Așa că am scăpa de apelul nostru de a data.json nostru fals la dosar. Și în loc, sun USGS, în esență,. 

Să refresh, frumos. Acest lucru este, date reale din viața reală din această săptămână pentru cutremure. Acest lucru este foarte interesant. Acest lucru nu este surprinzător pentru noi, dar există o mulțime de cutremure pe West Coast din California. Dar am crezut că a fost foarte interesant că au existat atât de multe cutremure în Alaska, și aparent, aici, în Midwest. Adică, interesant, și suntem bine. Asta e concluzia. 

Dar fundamental, această este ceea ce ajută D3 ne facem. Ea ne ajută să ne ia de date, bind l la elemente DOM, și au aceste elemente se schimbe în funcție de date, au aceste atribute, toate multe atribute ale elementelor, fi util pentru toate canalele pentru a transmite informații. 

D3 este un incredibil de puternic bibliotecă și uimitor de bine gestionată. Acest lucru este unele chestii puternic. Vizualizare a datelor este o instrument incredibil de puternic pentru transportul de persoane profunde perspective care ajunge la miezul lor și îi ajută să înțeleagă, în acest mod profund și intuitiv, modul în care datele de lucrări și modul în care Date schimbă viața noastră.