[MUSIC PLAYING] 

DAVID Chouinard: Mən David Ben Chouinard və bu D3 edir. Xoş gəlmisiniz. Biz bu gün D3 haqqında məlumat olacaq. D3 JavaScript çərçivəsində yüksək keyfiyyətli tikinti üçün web üçün interaktiv visualizations. Biz etdiyiniz nə kimi şeylər Mənə geri görən, biz o etmək öyrənmək olacaq hər şeyi, bu əsasları cür. Amma bu sərin olacaq. Nin başlamaq edək olduqca şəkillər edir. Biz daha çox demoları var Mövcud perspektivləri. Bunu edək. 

Act I, DOM manipulation-- gedirik sərin şeyi edilməsi hemen başlamaq üçün. İlk növbədə, sol, biz kodu var. Sağ, biz bizim kodu nəticəsidir. Üzrə keçmək edək. 

Bir daire etmək edək. Necə ki, səs edir? svg.append circle-- biz yalnız bir dairə etdi. Siz sağ, mənə iman yoxdur? Orada deyil. 

Beləliklə, biz edir burada nə, SVG ölçeklenebilir vektor qrafik edir. Bu üçün brauzer demək yoldur brauzerinizin vektor qrafik etmək. Biz yalnız indi etdi göz bir dairə əlavə edilir. 

söz dairə ki, Əsas atributlarından bir az tələb edir faktiki olaraq onu görmək bilər. Biz, bu onun x mövqeyini demək lazımdır Onun y mövqeyi, onun radius. Biz ki, hər hansı demək deyil, belə ki, biz indi bunu görən deyilik. Amma stuff demək imkan verir. 

Belə ki, ilk növbədə, siz var Bizim dairə bir ad vermək. Belə ki, dairə zəng edək. Bizim dairə indi bir adı var. Və bir neçə atributları verək. Necə CX haqqında, x mərkəzi olacaq x mövqeyi mərkəzi. 200 piksel üçün 200 deyirlər. 

Kimi də bu 200 piksel y verim. Və təxminən 40 piksel r, bir radius. İndi görək. Mən yazım bilməz. 

Burada getmək. Biz vəziyyəti 200 bir dairə var piksel, 200 piksel, 40 piksel radius. Kind sərin, sağ? Biz bir dairə var. Bəli. 

Belə ki, heç bir ehtiyac boyunca riayət edin. Bütün bu nümunələr, bütün Mən bu gün edirəm kodu sonunda online təmin ediləcək interaktiv nümunələri şəklində da məntəqələrində hər bir akt, və s. 

Daha stuff bunu edək. Bu qara dairə həqiqətən çirkin deyil. Hesab edirəm ki, səhv təəssüf edirəm orada messages. Biz də gedin. 

Nin bir rəng verək. Necə var? Mən polad mavi istəyirəm. Bəli, bizim dairəsi rəngi dəyişdi. Bu harika. Nin yarı-şəffaf edək too-- yarı-şəffaf. 

Belə ki, bu atributları var Biz dairə müəyyən edirik. Biz ilk şey biz page bir dairə qoydu. Və sonra biz müəyyən edirik atributları bir dəstə. Bunlardan bəziləri tələb olunur, CX, CY, və Radius kimi. Və başqaları isteğe bağlıdır. 

Bir çox atributları var. Onların bir çox var. Məsələn, biz ola bilər stroke, eləcə də qırmızı bir vuruş. Amma aradan qaldırılması edək. Biz geri bir daire, mavi dairə istəyirik. 

Belə ki, daha çox dairələri edək. Necə var? Başqa bir dairə edək. Bu hüquq, maraqlı? 

Mən yalnız Copy-yapışdırılır demək biz artıq. Nin circle2 zəng edək. Və dəqiq nə edək Eyni şey və vermək 300 x mövqeyi nəzərə alaraq, atributları. Yay, indi iki dairələri var. 

Əlbəttə, biz bilər bu dəyərləri yeniləmə. Mən 400 qoymaq bilər, və indi hərəkət edir. Bu annoying var-ci ildən, edək belə circle2.remove, aradan qaldırılması. İndi getdi. 

Beləliklə, biz işle və Bu very--, yalnız çox deyil sizə nə çox oxşardır Məsələn, jQuery edə bilər. Biz yalnız manipulyasiya edirik DOM, deyirlər. Siz əvvəl söz eşitmişəm bilər. Biz qəbulu məhsulları yaratmaq edirik məhsulları aradan qaldırılması, məhsulları haqqında atributları. 

Maraqlı olur yerləşir İndi burada. Belə ki, sonra kodu, biz hələ də bilər Burada orijinal dairə baxın. Belə ki, CX öz atributu yenidən imkan verir. 400 onun x mövqeyi deyək. Mən keçid gedirəm ki, aydın deyil, belə ki,. Biz də gedin. 

Beləliklə, biz bir dairə əlavə edib. Biz bəzi atributları seçin. Biz başqa dairə əlavə qaldırıldı. Və sonra biz değiştirmeyle edirik Orijinal dairə. 

Bu olur yerləşir Amma burada bir çox maraqlı. Yalnız biz atributları bilərsiniz yalnız dəyər kimi, biz, demək olar hey, dairə, 200 yerləşdirilməlidir gedin. Biz də funksiyaları kimi qura bilərsiniz. 

Belə ki, əvəzinə, burada 400 verilməsi bəzi hesablanması edə bilərsiniz nə üçün Tez biz ki, atribut olmaq istəyirəm. Belə ki, bu ifadə istədiyiniz necə. Biz yerinə 400, mənə imkan, demək əvəzinə bir funksiyası verir. Və burada, bu funksiya daxilində, Biz hər hansı bir crazy hesablanması edə bilərsiniz. 

Biz vaxt bilər və Bəzi digər şey baxmaq və dinamik qərar biz istədiyiniz nə dəyəri dairə. Necə biz yalnız vermək haqqında Bu təsadüfi x mövqeyi? Belə ki, var. 

Belə ki, nə deyir ki, üçün, Hər x, bu funksiyanı çalıştırın. Və nə edirik hesablanması edir bəzi şeylər, təsadüfi dəfə eni və qaytarılması. Beləliklə, biz run hər zaman, biz almaq təsadüfi yerə gedir dairə. Bu sərin növü var. Mən baxmaq bilər kimi hiss edirəm bir az bu. Biz almaq üçün başlanğıc edirik Burada maraqlı bir şey. Indi idarə bu məlumatları edək. Burada heç bir məlumat yoxdur. Ki, dəyişdirmək edək. 

Aktı II, Data idarə sənədlərdə Belə ki, burada qayıdaq. Və yalnız circle2 xilas edək biz yalnız əlavə və aradan qaldırılması, çünki Bu. Belə ki, biz, həqiqətən, ehtiyac yoxdur. Biz burada bir çox ağıllı olmaq lazımdır. Biz, Deyək bir növ bəzi məlumatlar. Bir, deyək anda Biz bu formada məlumatları var idi. Biz yalnız, bir sıra var idi ədəd bir dəstə. Biz burada yeddi nömrələri nə bu represent-- məbləği xalq bank hesabı, necə qədər Allah nə bilir çəkin. 

Bu nömrələr və biz Bizim dairələri istifadə etmək istədiyiniz elə həmin nömrələr təmsil edəcək. Biz əlimizdən bağlamaq istəyirəm bu nömrələrə dairələr. Beləliklə, biz nə. Deyək, istəyirik Hər sıra dairə. Biz köhnə edə bilər Biz doing-- edildi şey dairə əlavə və circle2 və circle3. Amma bu əl həyata olur, və məntiq təkrar bir çox var. 

Belə ki, daha ağıllı almaq imkan verir. Əvəzində var dairə istifadə , biz yalnız istifadə edilmişdir ki, svg.append Biz istifadə etmək olacaq burada bu kiçik blok. Mən dərin getmək istəmirəm nə bütün bu hissələr yoxdur. Və inkişaf etmiş bir mövzu növü var. Mən isterdim. 

Amma əsas odur ki, recognize-- və Siz D3 kodu çox tez-tez görəcəksiniz. Mətn əsaslandırılmış Bu blok kimi bir çox dairələr yaradır məlumat elementləri var burada bu array. Belə ki, bu kimi bir çox yaradır orada dairələr elementləridir. Bu, bizim yeddi dairələri yaratmaq olacaq. Və bu, həqiqətən, həqiqətən, əsas şey yoxdur. Belə ki, run imkan verir. Bizim digər dairə aradan qaldırılması edək. Yalnız bu şərh edək həyata hissəsi və yenidən bu axır. 

Biz də gedin. Belə ki, burada bizim dairə bir çox qaranlıq, çünki biz Yeddi dairələri var, bir digər üst. Biz yalnız yeddi dairələri, bir yaratmışdır Bu data elementlərin hər biri üçün hər. Amma baş verən əsas şey var burada bu parçası ilə. 

Bu data bağlı idi ki, var. Belə ki, hər bir bir bu data elementləri, 10, 45, 105, bağlı idi xüsusi dairə. Belə ki, bu yalnız yaradılmış deyil dairələrinin bir dəstə lakin birlikdə bu iki şeyi əlaqələri. 

Və gələcəkdə biz yaratdıq, çünki Bu D3 funksiyası ilə həmin dairələr, Mən sizə bir dairə vermək əgər, siz Mənə onunla bağlı məlumat verir. Belə ki, biz D3 xahiş edə bilər. Hey, D3, bu dairə var. Dairə var data nədir? Və D3 bizə 10 və ya 45 və ya 105 demək istəyirəm. 

Bunlar bağlıdırlar. Ki, bir çox, çox fundamental anlayış var. Ki baxaq. 

Belə ki, yol biz belə D3-- xahiş ediyorum Bu, bu yersiz ancaq bu barədə mənə etibar. Bu D3 xahiş necə. Hey, D3, mənə ilk vermək Siz tapa bilərsiniz dairəsi. Mənə tapa bilərsiniz ilk dairə verin. Və sonra biz D3 xahiş edə bilər, nə bu kimi ki, data, 10. 

Belə ki, biz yalnız D3 xahiş mənə tapmaq Siz tapa bilərsiniz ilk dairə. Onun data nədir? 10 həqiqətən əlimizdən deyil İlk data element. Biz, hey, D3 onu xahiş edə bilər bizim üçüncü dairə tapa bilərsiniz. 105. Niyə bu, həqiqətən vacibdir? 

Belə ki, burada, mən qeyd ki, funksiyaları istifadə edə bilər. Mən ki, qeyd çox güclü bir şey. Belə ki, yalnız funksiyaları şeyi edə bilər deyil Məsələn kimi, bəzi hesablanması etmək, , bir təsadüfi sayı bu edə bilərsiniz qayıtmaq da məlumatlar əsasında şeylər. Bu data idarə sənədlər demək nə. Bu D3 dayanır budur. 

Belə ki, bu x postition-- yerinə yalnız, bütün dairələr söyləyərək, x mövqeyi 200 olsun, biz bu bir funksiyası verə bilər. Və burada, bəzi hesablanması edə bilərsiniz. və d burada məlumat üçün yerdə dayanır. Belə ki, hər zaman var bir dairə, əsasən, D3 Bu yeddi dairələri yaradacaq. Və sonra hər 

dairə, bu, hey, getmək olacaq circle1 Sizin x mövqeyi budur. Əvvəllər biz həmişə 200 cavab. Amma indi hər zaman D3 soruşur Bizə x mövqeyi nə, Bu biz, bizə oynatılırken vermək olacaq ki, dairə, biz məlumatlar var. Bu, bizə məlumat vermək və demək olacaq nə ekspozisiyası olmaq istəyirəm ki, data əsaslanır. 

Yalnız faktiki məlumatları qayıdaq. Biz bu run Belə ki, bu verir Bizə data sənədləri idarə. Bu dairələr əsaslanır əlaqə position-- da Qeyd: onlar məlumatın funksiyası kimi əsasları istəyirik. 

İlk dairəsi Belə ki, D3 bir dairə qoyur. Və sonra D3 nə, bizə xahiş edir Siz ekspozisiyası olmaq istəyirəm. Və biz yalnız məlumat nə demək. Ekspozisiyası 10 olun. 

Sonra istədiyiniz nə, xahiş ekspozisiyası ikinci dairəsi üçün olmalıdır. Və biz 45 cavab. Və biz, əlbəttə bilər burada hesablanmasını edir. Mən o dairələr ki, tapmaq cür qədər squished olunur. 

Belə ki, 3 məlumatları çoxaltmaq 3 ilə çoxaltmaq. Bizim dairə yalnız genişlənmişdir oldu. Bizim dəyəri üç dəfə artmışdır. 

dairə, həqiqətən kənarında belə ki, bəlkə cür onu ofset imkan verir. Üzrə 20, deyirlər. Burada getmək. 

Bu data vizual edir. Bu, çox əsas biri, lakin bu Bizim data bir fikir verir. Bu bizə deyir ki, məsələn, biz elementlərin bir az çoxluq var. Və biz burada böyük bir outlier var. Bu bizə məlumat verir səhifələrdən getdikləri barədə. 

Biz olsaydı, məsələn, dəyişdirmək Burada 150 Yenile data, Bizim vizual dəyişdirilir. Bu sənəd data idarə edir. 

Əlbəttə ki, bütün bu elementlər, Burada bütün bu atributları, Biz bir funksiyası istifadə edə Yalnız nömrələri, yalnız x və y vəzifələri. Beləliklə, biz rəng üçün bir funksiyası istifadə edə bilərsiniz. Belə ki, biz eyni edəcəyik. Biz bir funksiyası vermək lazımdır. 

Və biz ola bilər, deyək Bizim funksiyası conditionals. Bu funksiya ola bilər uzun xətləri yüz. Bu, çox, çox mürəkkəb şeyi edə bilər. 

Belə ki, burada əgər bəyanat qoymaq bildirin. Bizim data az olduqda, deyək 50-dən, bəzi ərəfəsində var biz maraqlı olduğunu nədənsə üçün. Üzrə yaşıl edək. Əks halda, bu qırmızı edək. Necə var? Nice. 

Belə ki, bizim data vizual başlayır daha maraqlı məlumat çatdırmaq çox kanalları. Belə ki, indi biz bir az bilirik səhifələrdən getdikləri barədə. Və biz bir növ var ki, bilirik biz ilgilendiğiniz 50 kəsdi. Biz iki data xal var bilirik ki, Onların ən çox həddindən aşağı və yuxarıda. 

Belə ki, son addım kimi, burada bu məlumatlar, bu kimi görmək çox nadir deyil. Belə ki, yalnız bir dəyişən onu hərəkət edək bu kimi təmiz, çünki. Və sonra biz burada dəyişən istifadə edin. Bu eyni şey. Bu, sadəcə bir az təmiz. 

Sonrakı qədər Aktı III, Scales-- Belə ki, bir problem biz dəyişdirmək əgər burada bizim Bu 200 value-- məlumat Biz 400 dəyişdirmək əgər və ya bir şey və yenileme, onda bu dəyər yalnız offscreen getdi. Burada bizim məntiq Belə ki, necə biz dəfə 3 20, sonra onu yaymaq və bu ofset bir az həqiqətən clunky edir. 

Bu nömrələr nə deməkdir? Onlar yalnız ağır orada kodlu edirik. Onlar çox məlumat bağladı edirik. Biz data idarə sənəd istəyirəm. Çox çevik sənəd istəyirəm, verilən məlumatların ki, bu uyğunlaşır və təmsil edir. 

Biz əsasən lazımdır ki, edir ədəd 10 bu sıra var. 45, 105. Və biz üzərində ki, xəritəyə istəyirəm eni, burada tam eni. Beləliklə, biz bir sıra var 0-dan 100 gedən nömrələri. Və biz bu kampus I gedir Bu halda, 700 20. 

Biz cür ki, xəritəsi istəyirəm. Biz o klikləyin etmək istəyirəm sonra bir az ofset. Bu D3 bu ki çıxır. Bu miqyaslı deyirlər. Belə ki, istifadə edək. 

Mən gedirəm çalışır ki, yol Bu qədər yazın və sonra izah. Bu miqyaslı edir. Nə edəcəyik, bu xəritəyə edəcək 20 600 üçün 1-dən 200-ə dəyərlər. Biz bu kontrol edə bilərsiniz. Biz burada görə bilərsiniz. 

Belə ki, mən onu qidalandırmaq 1 var bir an. Mənə bir ikinci verin. Mən bunu mistyped olmalıdır. Burada getmək. Mən bu barədə üzüldüm. 

Belə ki, bir miqyaslı nə ki, bir dəyər olacaq ki, və sonra çevirmək, ki, genişləndirmək, belə ki, Sizin üçün xahiş edirik sıra doldurur. Bu halda, belə ki, biz bunu bir vermək əgər, Bu 20 üzərində ki, xəritəyə olacaq. Biz bu 200 vermək əgər, bu 600 üçün xəritəsi gedir. Və haradasa arasında, Biz 100 almaq, bu yerdə olacaq 20 və 600 arasında. 

Və əlbəttə, indi bu nə edir Biz bu ağır kodlu aradan qaldırılması lazımdır şeylər orada var. Belə ki, biz nə etmək istəyirəm nə Biz istəyirik məlumatları almaq nəzərə alaraq, fərdi məlumatlar element və ilk miqyaslı keçir. Belə ki, miqyaslı onu miqyaslı olacaq. 

Oh Well--, biz burada bir az səhv var. Biz data itkin edirik. Burada getmək. Və onu genişləndirir. 

Bu bizə eyni verir Nəticədə biz əvvəl lakin əvəzinə olanlar ağır məhdudiyyətlər kodlu. Və ölçüsü bizim kətan dəyişikliklər, misal üçün, bu artıq etmək istəyirsinizsə 400 piksel və onu squishes, Biz bunu over-- ola bilər Biz bunu genişləndirmək, və ya edə bilər Bu sol margin azalda bilər daha az və ya 20-dən çox bir şey. Bu nömrələr, bu ağır kodlu nömrələri indi bizim mənada. 

Və biz bir çox daha çox ola bilər eləcə də maraqlı şeylər. Belə ki, əvəzinə bir xətti olan miqyaslı, bir miqyaslı daxil edə bilərsiniz. Və bizə bir günlük miqyaslı verəcək. 

Belə ki, indi bizim miqyaslı əvəzinə yalnız sıra genişləndirilməsi, Bu daha mürəkkəb şeyler var. Bunun əvəzinə ağır sıra olan və əvəzinə 600 olan kodlu, biz yalnız eni istifadə edə bilərsiniz, belə ki, eni mənfi 40 20, 2 dəfə digər tərəfdən margin. Bu bir çox əhəmiyyət kəsb edir kodu baxmaq bilər kimsə. 

Maraqlıdır ki, tərəzi almaq çox çox inkişaf etmiş, həm də. Onlar maraqlı bir çox. Belə ki, tərəzi mütləq yoxdur yalnız nömrələri ilə fəaliyyət. Bir rəng miqyaslı edək. 

Belə ki, bizim üçündür Olacaq bilər bizim domen 200 1. Bu giriş şey. Amma biz xəritəsi istəyirəm bilər Məsələn, qırmızı, yaşıl. İndi biz bunu 1 keçmək əgər, biz yaşıl almaq olacaq. Biz bu 200 versələr, biz qırmızı almaq lazımdır. Biz arasında bu şey keçmək əgər, ki, bir mix olacaq, haradasa gradient haqqında yaşıl və qırmızı arasında. 

Və əvəzinə olan clunky məntiq bu cür biz burada var orada şərti, biz bir şey bir ola bilər arasında xətti miqyaslı. Beləliklə, biz miqyaslı istifadə edin, biz yalnız yaradılmış biz rəng çağırıblar. Və biz, bu d vermək istədiyiniz Bizim data element edir. Və biz getmək. Biz bir rəng miqyaslı var. 

Belə ki, bu mapping edir. Bu günə qədər tərk tamamilə yaşıl. sağında tamamilə qırmızı. Arasında hər şey d bir funksiyası var. Biz maraqlı var Burada visualizations. Amma bizim data cür darıxdırıcı idi. Biz əgər nə edə bilər nə edək daha çox maraqlı məlumatlar idi. 

Act IV, ilə İş Ilk şey veri Biz etmək üçün nə etmək lazımdır bizim daha maraqlı vizual başqa bir yerdə məlumat hərəkət etməkdir. Bu üçün çox clunky deyil məlumat çətin anlar kodlu. Və ümumiyyətlə, biz xahiş olacaq məlumat üçün başqası. Biz bəlkə, hökumət xahiş olacaq Siyahıyaalınması Bürosu veri nə və sonra hiylələri və ya xahiş Bəzi məlumatlara görə, bəzi üçüncü şəxs və sonra tikinti ki, vizual. 

Ilk şey, belə ki, biz nə istəyirik başqa bir yerdə ki, hərəkət edir. Mən bir yaratmaq üçün gedirəm Burada deyilən data.json fayl. JSON data format edir. Siz haqqında çox bilmək yoxdur. Və biz surəti olacaq biz var az məlumat, orada birə yapışdırıb getmək geri vizual kodu burada və burada bu funksiyanı istifadə edin. Siz ətraflı bilmək yoxdur. Amma nə bu edəcəyik ki, bu fayl tapa bilərsiniz, bu almaq və bizə qaytarın. Belə ki, bu nə gedir ki, və data.json fayl almaq. Və sonra bütün kodu ki, mahiyyətcə Inside indented, bütün code biz orada olacaq var biz geri məlumat almaq yalnız axır. Və sonra run olacaq Biz data kodu. Böyük, biz bir sorğu vizual Bəzi kodu yerdə başqa, hansı adətən harada bəzi məlumatları sorğu başqa bir yerdə, adətən olan visualizations necə. 

Amma məlumatlara geri getmək istəyirəm. D3-- D3 əsaslı Belə ki, data şeyi bir siyahısı var data sərf edir. D3 data yalnız bir siyahısı gözləyir şeyi, hər şeyi bir sıra. Bu nə o şeyi Fərq etməz belə uzun onların bir sıra kimi, var. 

Belə ki, burada, məsələn, biz olunması bilər Əlbəttə point dəyərləri üzən var. Biz neqativ ola bilər. D3 belə uzun aldırmaz, Bu şeyi bir siyahısı kimi. 

Biz maraqlı şeylər ola bilər, biz də ola bilər kimi strings bir siyahısı var. Belə ki, bu Crimson başlıqları var Mən bir neçə gün əvvəl seçilmiş. Və bəlkə bəzi maraqlı tapa bilərsiniz bu bir başlıqları haqqında hər şeyi. 

Belə ki, yenə bu şeyi bir siyahısı. D3 qayğı deyil. Bu string olmaq üçün nə. Biz data dəyişib etdik. 

Bizim vizual qayıdaq. İndi bizim vizual gözləyir giriş nömrələri olmalıdır. Beləliklə, biz olacaq Bir neçə dəyişikliklər etmək. Belə ki, məsələn, ilk növbədə, bəlkə Biz birlikdə bu dairələr qoymaq istəyirəm mövzu uzunluğu, mövzu simvol sayı. 

Belə ki, nə biz hər zaman That edəcəyik bizim funksiyası bir simli ilə adlanır, biz uzunluğu tapa bilərsiniz və sonra miqyaslı ki, keçir. rəng, mən qayıtmaq lazımdır polad mavi ki. Və biz getmək. Biz vizual bir Crimson başlıqları. 

Bizim miqyaslı bir az off edir. Ən uzun güman edək mövzu, 100 simvol uzunluğunda belə ki, bir az ki span. Və biz bir vizual var. Belə ki, ən çox başlıqları görünür birlikdə olduqca yaxın, karakter xətti baxımından. Amma bir həqiqətən seçilir. 

Biz bəzi alətlər qurmaq bilər daha tədqiq etmək. Mən bu barədə iş zaman, mən maraqlı olub, bu veri dəsti, bir nöqtə ilə başlıqları Onların uzun olardı. Mən ki, nəzərdə tutur. 

Belə ki, tapmaq imkan verir. Rəng istifadə edək kanal, biz əvvəl olduğu kimi olub bəzi kodlar bir nöqtə və ya heç bir var. Beləliklə, biz bir daha şərti istifadə edəcəyik. Bilirsiniz yoxdur Bu məlumat, lakin bu bir yoxlamaq necə xüsusi xarakter üçün string JavaScript yenə müvafiq deyil. 

Amma biz bir tapmasanız kolon, biz yaşıl qayıtmaq lazımdır. Biz əgər, biz qırmızı qayıtmaq lazımdır. Belə ki, yenə olduğunu başlıqları bir nöqtə qırmızı olacaq var. Bu gözəl deməkdir, nə. 

Belə ki, görünür ki, mənim fərziyyə bumped olunur. Yalnız iki var. Biz yalnız altı data xal var və yalnız iki colons idi. Amma bu bir az daha görünür aşağı sonunda, əslində. Colons ilə başlıqları görünür ümumən olmaq, bizim data ən azı maraqlı set--. 

Etmək üçün ki, qayıdaq polad mavi və sonra görmək Biz hətta edə bilərsiniz nə daha maraqlı məlumatlar. Belə ki, yenə, mən qeyd D3 data şeyi bir siyahısı. Biz bir çox növləri nömrələri gördüm. Biz strings gördük. Lakin şeyi də obyektləri ola bilər. 

Onlar mürəkkəb şeylər ola bilər ki, bir çox şeyi daxildir. Daha aydın desək, Əksər hallarda, biz hər data point qurmaq istəyirəm daha çox yalnız bir dəyəri daha mürəkkəbdir. Bir təsəvvür istəyirsinizsə tələbə haqqında bazası tələbə ola bilər adı, tələbə ID, və bir çox şeyi bağlı xüsusi rekord ilə, yalnız bir simli və ya bir sıra. Belə ki, baxaq. 

Bu set belə bir məlumatdır. Bu zəlzələ haqqında müəyyən bir məlumatdır. Bizim siyahı və ya array burada hər şey, belə ki, şeyi çox şey özü ehtiva edir. Belə ki, hər data point bir bal gücündə və əlaqələndirmək. Və özləri koordinatları iki şeyi ehtiva edir. 

Belə ki, artıq hər gün daha çox var mürəkkəb və bir çox maraqlı və daha çox ehtiva edir maraqlı məlumatlar. Biz ki, həyata qurmaq bilər görmək edək. , Yenə bura qayıdaraq istifadə Bizim histogram dairə vizual inşa etdik, biz inşa edə bilərsiniz əgər in görək bal gücündə paylanması vizual Bizim data set. 

Belə ki, burada, eyni anlayış var. Amma indi, d çox şey var. d çox məlumat elementləri ehtiva edir. Belə ki, biz d almaq. D3 bizə d verir. Və biz böyüklüyünü tapmaq cavab d və sonra miqyaslı ki, keçən. 

Və sonra biz dəyişdirmək lazımdır Bizim miqyaslı, əlbəttə. Böyüklükləri sadəcə deyil, belə ki, daha 10 gedin. Əslində, orada heç oldu 10 bal gücündə zəlzələ. Amma bizim üst cür sonunda, bizim üst spektri. 

Üzrə yenilemek edək. Nice, bir vizual var. Bu, note-- maraqlıdır Iki data xal var ki, demək olar ki, məhz hər üst edir digər, miqyası baxımından. Biz istifadə etdiyiniz qeyri-şəffaflıq ilə görürük. 

Biz indi coğrafi məlumatlar var. Biz seqmentlərində və uzunluq var. Bəlkə biz bir şey yoxdur və ola bilər çox ki, daha maraqlı. Bəzi daha çox tapa olsun görüntüləmək üçün maraqlı yol Bu daha mürəkkəb məlumat biz girmə imkanı vardır. 

Act V, Mapping-- əsaslı, biz bir harita bu qoymaq istəyirəm. Mən bu hara getdiyini, bu, demək. Biz haqqında məlumat kodlar istəyirəm Bu zəlzələ oxu mövqeyi, habelə onların bal gücündə, biz indi var. Biz istehlak necə başa düşmək daha mürəkkəb data. 

Biz edəcəyik ilk şey bir xəritə, fon xəritəsi yaratmaq. Mən vasitəsilə getmək üçün gedirəm Bu, çox tez. Bu çətin kodu. O başqa biri reseptlər, həqiqətən, yoxdur Istifadə etmək üçün tam başa düşmək lazımdır. Amma bu kodu. Bu kod Burada bir xəritə yaradır. 

Biz ətraflı getmək fikrində deyilik. Amma səthi, nə edir bu us.json faylı sorğu edən bir veri faylı kimi biz əvvəl idi bir. Bu, əlbəttə, daha mürəkkəb var. Lakin bu halda, hər şey, Hər data point bu dövlət və bir siyahısı var en ve boylam ki, poliqon müəyyən, ki, forma, dövlət. 

Belə ki, D3 nə oxşar biz əvvəl nə üçün. Bu tələb və bir element üçün məcburidir. Və bir funksiyası var ki, ki element həyata xəritəsi edəcək, seqmentlərində ve boylam əsaslanır. Siz daha çox oxuya bilərsiniz. Mən bu gəlir. 

Da links var Bu kodu sonu olunub. Və code şərh olunur. Bu daha üçün links var. Mən bu qədər baxmaq gəlir. Amma biz nə qayğı Bu proyeksiya fəaliyyət göstərir. Mən keçmək istəyirəm. 

İlk növbədə, mənə göstərmək bildirin Siz ki, bəli, biz bir xəritə var. Maps sərin var. Belə ki, bu baxaq istehsal fəaliyyət göstərir. 

Projection çox deyil miqyasında kimi, yenə tərəzi. Belə ki, nə istehsalı üçün Bu proyeksiya funksiyası , biz Boylam keçə bilər ki, yoxdur və bu halda latitudes--, Burada bu dəyərlər Binanın Lat-longs Biz sağ oturan edirik , İndi proyeksiya. Və proyeksiya dönüştürür x və y pixel dəyərlər daxil. 

Belə ki, nə proyeksiya edir Bizim miqyasına çox oxşardır. Bu, bizim seqmentlərində alaraq və bütün dünyanın təmsil Boylam və azalan və sizing Biz istəyirik meydanında aşağı, Biz verilmiş etdik ki. Bu halda, biz istəyirik bu dəyərləri keçən. Və bu, yaxşı, bizə verilməsi ekranda 640 piksel deməkdir. Bu, bütün ekran 700 piksel geniş ki, burada haqqında bizə edir ki, aşağı və 154 piksel, mən smeta olduqca çox burada. 

Belə ki, o lat-longs alaraq olan Bütün dünyanın bir şey təmsil və squishing və ətrafında hərəkət Bizə x və y pixel dəyərlər vermək, bu var ilk şey Bu mapping kodu etdik. Və sonra qalan kodu data istehlak və həmin lat-longs xəritələr ekranda bir şey üzərində. 

Amma biz bu proyeksiya istifadə etmək olacaq funksiyaları, bu çıxır, çünki biz də lat-longs longs var. Bizim data geri Axtarıram, biz en ve boylam əlaqələndirir Hər müşahidə. Belə ki, proyeksiya istifadə edək. 

Belə ki, bizim ekspozisiyanın baxaraq, Biz exposition-- istəyirik Biz enlem ve boylam bir var. Amma biz pixel dəyərlər istəyirik. Və çıxır, biz məhz var biz proyeksiya want--. Biz çox kimi Burada miqyaslı istifadə edərək, biz indi proyeksiya istifadə etmək olacaq və koordinatları keçir. Ilk şey, belə ki, Biz istəyirik ki, doing-- edirik fərdi məlumatların əldə d, fərdi zəlzələ element oxu. Biz nə ilk şey koordinatları əldə edir. Bütün hüquqlar, biz koordinatları var. 

biz ikinci şey proyeksiya ki, keçir. Projection bu koordinatları çevirir pixel dəyərlər, x və y daxil. Və sonra son şey biz yalnız x almaq etmək istəyirəm, olan bu halda ilk biridir. Bu iki şeyi ilk var ki, proyeksiya tərəfindən qaytarılır. 

Biz y üçün eyni edəcəyik. Ancaq əvəzinə, biz qayıtmaq lazımdır İkinci element, y. Yenilemek üçün hazır olun. Ooh, əlavə xarakter burada gözəl, biz bir data idarə sənəd obyektlərin bu JSON faylı gizlədilməsi, bir xəritə edilməsi və dəyişdirilməsi məlumatlarına bağlı aid bir xəritədə layihə. Bu, həqiqətən maraqlıdır. Bu sərin edir. 

Bir notch onu edək. Hesab edirəm ki, iki ədəd var, demək Hər data nöqtəsi ilə məlumat. Mən üç deməkdir. Biz koordinatları var, olan bir x və y edir. Və biz böyüklüyünü var. 

Biz elə miqyasını kodlar lazımdır. Biz kanalları bir çox var. Biz rəng istifadə edə bilərsiniz. Biz radius istifadə edə bilərsiniz. Biz qeyri-şəffaflıq istifadə edə bilər. Biz kodu bir çox şeyi istifadə edə bilər. Bu atributları və çox hər hansı orada siyahıda yoxdur ki, daha onlar isteğe istəyirik, çünki biz bilər Bu data kodlar istifadə stroke və bütün bu şeylər dediyim etdik. 

Üzrə radius edək. Mən radius ən asan hesab edirəm. Belə ki, yenə biz ki, ağır kodlu əvəz lazımdır 40 və bəzi hesablamalar etmək. Biz yenə sevimli miqyaslı istifadə edəcəyik. Və biz d keçmiş istəyirik. Biz böyüklüyünü istəyirəm, çünki Lakin d deyil d. d yalnız məlumat nöqtəsidir. Biz bal gücündə miqyaslı keçmək lazımdır. 

Üzrə daha cəhd edək. Ooh, bu iş deyil. Nə iş deyil? 

Belə ki, nə miqyaslı xatırlayıram. Yenidən miqyasında baxaq. 1-dən 10 Scale xəritələr 600 22, az və ya çox. 600 böyükdür. Biz bu əldə etdiyiniz görə. 

Belə ki, biz miqyasını dəyişdirmək istəyirəm daha məqbul bir şey. Biz 60 0 istəyirik deyək. 60 böyük, lakin 10 zəlzələ inanılmaz nadirdir. Əslində, onlar baş heç vaxt etdik. 

Belə ki, bu nə, bu almaq lazımdır 1-dən 10 gedir bizim bal gücündə və onu genişləndirmək üçün onu xəritəyə. Və 60 0 onu xəritəsi. Üzrə yenilemek edək. 

Nice, bir vizual var. Bu, böyük deyil. Bu faktiki məlumatdır. Siz mənim kiçik oyuncaq, görəcəksiniz Məsələn, ən böyük zəlzələ bizə doğru üst edir. Amma bu. Biz tarix idarə vizual ki, data istehlak və həqiqətən bizə verir maraqlı məlumatlar. Bəli, bəzi əlavə edək bu interaktiv. Mən ki, qeyd D3 güclü qüvvə. 

Belə ki, burada, hər bir element, biz istəyirik atributlarından bir dəstə izah. Amma biz də biz istədiyiniz nə təsvir edə bilərsiniz interaktiv elementləri ilə baş. Məsələn, biz təsvir edə bilər nə zaman siçan üzərində olur. Və çox oxşar, ki, bir funksiyası almaq lazımdır, çox oxşar biz əvvəl idi atributları biz bir şey yoxdur biz artıq element hover zaman. 

Belə ki, ilk şey lazımdır ki, element seçin edir, browser, əsasən tapmaq üçün. sonra biz müəyyən edə bilər bu bir atributu. Biz hover zaman nə mən burada edirəm ki, bir şey üzərində, biz element almaq lazımdır və sonra geri qeyri-şəffaflıq müəyyən 1, tamamilə qeyri-şəffaf üçün. Ki kimi görünür nə edək. 

Biz bir var görünür Burada əlavə nöqtəli vergül. Biz burada hover Belə ki, tam olur. Amma indi, əlbəttə, onu tam qalır Çünki biz nə təsvir etmək lazımdır zaman kursor çıxarın. Belə ki, məhz bunu bildirin mouseout, mouseover fərqli olaraq. 

Və biz onu yenidən qurmaq lazımdır biz 0,5 Əvvəl var idi. İndi, hər zaman hover, biz tam dairə almaq. Bu, bizim nə görmək kömək edir, biz biz mahiyyətcə seçilməsi edirik. 

İndi bu, həqiqətən böyük edək. Real məlumatlara bu əlaqə edək. Belə ki, soruşaq bilər USGS onların data haqqında. ABŞ-ın Geoloji Belə ki, zəlzələ haqqında məlumat var. Onlar edə ictimai API var JSON formatda istehlak ediləcək. Belə ki, bunu edək. 

Belə ki, bu kodu bir az ki, USGS API birləşdirir. Və emal bir az var. Bu müvafiq deyil, lakin onu asanlaşdırır kimi bir sadə data format biz əvvəl idi. Beləliklə, mən bizim zəng qurtarmaq fayl Bizim saxta data.json. Və əvəzinə, zəng edirəm Mahiyyətcə USGS. 

, Bu yenileyin gözəl olsun. Bu faktiki, real-life data zəlzələ bu həftə. Bu, həqiqətən maraqlıdır. Bu təəccüblü deyil Bizim üçün, lakin var zəlzələlərin bir çox California West Coast. Amma bu çox maraqlı idi düşündüm bir çox zəlzələ var idi ki, Alyaska, və yəqin, burada Midwest. Mən maraqlı demək və biz yaxşı deyilik. Bu nəticə var. 

Amma əsaslı, bu D3 bizə kömək edir. Bu, bizim məlumat almaq kömək edir, bind DOM elementləri üçün, və bu elementlər dəyişiklik var məlumatların bir funksiyası kimi, bu atributları, bütün elementlərin çox atributları, bütün kanalları üçün faydalı ola məlumat çatdırmaq üçün. 

D3 inanılmaz güclü kitabxana və qəribə də axır. Bu, bəzi güclü heyəti var. Data vizual bir inanılmaz güclü alət dərin insanlara çatdırılması üçün onların əsas olur anlayışlar və onlara, anlamaq kömək edir Bu dərin və intuitiv şəkildə, necə data işlərin və necə məlumat həyatımızı dəyişir.