[Muzik bermain] 

DAVID CHOUINARD: Saya Daud Chouinard, dan ini adalah D3. Selamat datang. Kita akan belajar tentang D3 hari ini. D3 adalah satu rangka kerja JavaScript untuk membina kualiti yang tinggi visualisasi interaktif untuk web. Hal-hal seperti apa yang kami lihat di belakang saya, kita akan belajar untuk membuat mereka perkara, jenis asas-asas itu. Tetapi ia akan menjadi sejuk. Mari kita bermula membuat gambar cantik. Kami mempunyai lebih demo prospek yang ada. Mari kita melakukannya. 

Akta I, DOM manipulation-- kita akan untuk memulakan segera membuat perkara yang sejuk. Pertama sekali, di sebelah kiri, kita mempunyai kod. Di sebelah kanan, kita mempunyai hasil daripada kod kami. Mari kita melaluinya. 

Mari kita membuat satu bulatan. Bagaimana bunyi itu? svg.append circle-- kita hanya membuat satu bulatan. Anda tidak percaya kepadaku, bukan? Ia bukan di sana. 

Jadi apa yang kita lakukan di sini adalah, SVG adalah grafik vektor boleh skala. Ini adalah cara kita memberitahu pelayar untuk membuat grafik vektor dalam penyemak imbas. Apa yang kita hanya lakukan sekarang ditambah bulatan untuk menyemak imbas. 

Janji adalah bahawa bulatan memerlukan sedikit sifat-sifat asas sebelum kita benar-benar dapat melihatnya. Kita perlu beritahu kedudukan x mesra, kedudukan y itu, jejarinya. Kami tidak beritahu apa-apa itu, jadi kita tidak melihat ia sekarang. Tetapi mari kita beritahu barangan. 

Jadi pertama sekali, anda telah mendapat untuk memberikan bulatan kami nama. Jadi mari kita memanggilnya bulatan. Bulatan kami mempunyai nama yang sekarang. Dan mari kita memberikan sifat-sifat beberapa. Bagaimana pula cx akan tertumpu x, jadi pusat kedudukan x. Katakan, 200 untuk 200 piksel. 

Mari kita memberikan y 200 piksel juga. Dan r, jejari, kira-kira 40 piksel. Sekarang mari kita lihat. Saya tidak boleh mengeja. 

Terdapat anda pergi. Kami mempunyai bulatan di kedudukan 200 piksel, 200 piksel, jejari 40 piksel. Jenis sejuk, kan? Kami mempunyai bulatan. Yeah. 

Jadi tidak perlu untuk mengikuti bersama-sama. Semua contoh-contoh ini, semua kod yang saya lakukan hari ini akan disediakan dalam talian di hujung dalam bentuk contoh interaktif dengan pusat pemeriksaan di tiap-tiap perbuatan, dan sebagainya. 

Mari kita buat hal lagi. Ini bulatan hitam adalah benar-benar hodoh. Saya minta maaf untuk kesilapan yang mesej di sana. Di sana kami pergi. 

Mari kita memberikan warna. Bagaimana itu? Saya suka keluli biru. Nah, bulatan kami berubah warna. Itu yang besar. Mari kita membuat ia separa telus too-- separa telus. 

Jadi ini adalah sifat-sifat kami menentukan pada bulatan. Perkara pertama yang kami lakukan adalah kita meletakkan bulatan pada halaman. Dan kemudian kita mentakrifkan sekumpulan sifat-sifat. Sebahagian daripada yang diperlukan, seperti CX, CY, dan Radius. Dan lain-lain adalah pilihan. 

Terdapat banyak lagi ciri-ciri. Terdapat banyak daripada mereka. Sebagai contoh, kita boleh mempunyai strok juga, strok merah. Tetapi mari kita keluarkan itu. Kami kembali ke bulatan, bulatan biru. 

Jadi mari kita membuat lebih banyak bulatan. Bagaimana itu? Mari kita membuat bulatan lain. Ini adalah menarik, bukan? 

Jadi mengatakan saya hanya Salinan-ditampalkan apa yang kita sudah. Mari kita memanggilnya circle2. Dan mari kita buat yang tepat Perkara yang sama dan memberikan atribut, diberi kedudukan x 300. Yay, kita mempunyai dua bulatan kini. 

Dan sudah tentu, kita boleh mengemas kini nilai-nilai ini. Saya boleh meletakkannya pada 400, dan kini ia bergerak. Dan sejak itu menjengkelkan, mari kita mengeluarkannya, jadi circle2.remove. Ia pergi sekarang. 

Jadi apa yang kita lakukan dan hanya sangat, very-- ini adalah hampir sama dengan apa yang anda mungkin lakukan dalam jQuery, sebagai contoh. Kami hanya memanipulasi DOM itu, ia dipanggil. Anda mungkin pernah mendengar perkataan yang sebelum. Kami mewujudkan barangan, menetapkan atribut pada barangan, mengeluarkan barangan. 

Sekarang, di sini di mana ia menjadi menarik. Jadi kemudian dalam kod, kita masih boleh merujuk kepada bulatan asal di sini. Jadi mari kita menetapkan semula atribut untuk cx. Katakan, kedudukan x untuk 400. Dan saya akan beralih itu, jadi ia jelas. Di sana kami pergi. 

Oleh itu, kita tambah satu bulatan. Kami menetapkan beberapa sifat-sifat. Kami telah menambah satu lagi bulatan, ia dikeluarkan. Dan kemudian kami mengubah suai bulatan asal. 

Tetapi di sini di mana ia menjadi banyak yang lebih menarik. Bukan sahaja kita boleh menetapkan sifat-sifat sebagai hanya menghargai, kita boleh mengatakan, hey, bulatan, pergi ke kedudukan 200. Kami juga boleh menetapkan mereka sebagai fungsi. 

Jadi, daripada memberikan 400 di sini, kita boleh membuat pengiraan beberapa pada lalat untuk apa yang kita mahu atribut yang menjadi. Jadi ini adalah bagaimana anda akan menyatakan bahawa. Kami berkata, daripada 400, biarlah saya memberikan anda fungsi yang sebaliknya. Dan di sini, di dalam fungsi ini, kita boleh membuat apa-apa perkiraan gila. 

Kita boleh mengambil masa dan melihat beberapa perkara lain dan dinamik untuk membuat keputusan bulatan apa nilai yang kita mahu. Bagaimana kalau kita hanya memberikan ia kedudukan x rawak? Jadi itulah yang. 

Jadi apa yang mengatakan, kerana setiap x, menjalankan fungsi ini. Dan apa yang kita lakukan adalah mengira beberapa perkara, kali rawak lebar dan kembali itu. Jadi setiap kali kita berjalan itu, kita akan mendapat bulatan yang pergi ke tempat yang rawak. Ia adalah jenis sejuk. Saya rasa seperti saya boleh melihat pada ini untuk sedikit. Kami bermula untuk sampai ke sesuatu yang menarik di sini. Mari kita membuat data ini didorong kini. Tidak ada data di sini. Mari kita mengubahnya. 

Documents-- Akta II, Data Didorong Jadi mari kita kembali ke sini. Dan mari kita hanya menghilangkan circle2, kerana kami hanya menambah dan mengalih keluar ia. Oleh itu, kita tidak benar-benar memerlukannya. Kita perlu lebih banyak pandai di sini. Katakan, kita mempunyai beberapa data dari beberapa macam. Satu moment-- katakan, kami mempunyai data borang ini. Kami mempunyai array, hanya sekumpulan nombor. Kami mempunyai tujuh nombor tersebut di sini, sebarang jumlah ini represent-- dalam akaun bank rakyat, bagaimana banyak yang berat, tuhan tahu apa yang. 

Ini adalah nombor, dan kami mahu menggunakan bulatan kami untuk mewakili nombor-nombor entah bagaimana. Kita mahu untuk mengikat kami kalangan untuk nombor-nombor tersebut. Jadi apa yang kita lakukan. Katakan, kita mahu bulatan untuk setiap nombor. Kami boleh buat yang lama perkara yang kami telah doing-- append bulatan dan circle2 dan circle3. Tetapi ini keluar dari tangan, dan ada banyak mengulangi logik. 

Jadi mari kita mendapatkan lebih pandai dengan itu. Daripada menggunakan bulatan var yang svg.append bahawa kami hanya menggunakan, kita akan menggunakan blok kecil ini di sini. Saya tidak mahu pergi secara mendalam apa ke semua bahagian-bahagian ini tidak. Dan ia jenis topik maju. Dan saya berharap saya boleh. 

Tetapi perkara utama untuk recognize-- dan anda akan melihat sangat sering dalam kod D3. Ini blok asas teks menciptakan apa yang banyak bulatan kerana ada unsur-unsur data dalam pelbagai ini di sini. Jadi ini mewujudkan banyak bulatan kerana terdapat unsur-unsur. Ia akan membuat kita tujuh bulatan. Dan ia satu perkara yang benar-benar, benar-benar penting. Jadi mari kita berjalan itu. Mari kita keluarkan bulatan kami yang lain. Mari kita komen ini sebahagian keluar dan menjalankan ini lagi. 

Di sana kami pergi. Jadi bulatan kami di sini adalah banyak lebih gelap, kerana kita mempunyai tujuh bulatan, satu di atas yang lain. Kami hanya menciptakan tujuh bulatan, satu setiap satu bagi setiap elemen-elemen data. Tetapi ada satu perkara yang utama yang berlaku dengan coretan ini di sini. 

Ia adalah bahawa data telah terikat. Oleh itu, setiap seorang daripada elemen-elemen data, 10, 45, 105, adalah terikat kepada suatu golongan tertentu. Jadi ini bukan sahaja dicipta sekumpulan bulatan tetapi mengikat kedua-dua perkara bersama-sama. 

Dan pada masa akan datang, kerana kita dicipta orang-orang bulatan dengan fungsi D3 ini, jika saya memberikan anda bulatan, anda boleh memberi saya data yang berkaitan dengannya. Oleh itu, kita boleh meminta D3. Hey, D3, saya mempunyai bulatan ini. Apakah data yang mempunyai bulatan? Dan D3 akan memberitahu kita 10 atau 45 atau 105. 

Perkara-perkara ini adalah terikat. Itulah satu konsep yang sangat, sangat asas. Mari kita lihat itu. 

Jadi cara kita akan bertanya D3-- jadi ini adalah tidak relevan untuk ini, tetapi hanya mempercayai saya di atasnya. Ini adalah bagaimana kami meminta D3. Hey, D3, berilah pertama bulatan yang boleh anda dapati. Berikan saya bulatan pertama yang anda boleh mencari. Dan kemudian kita boleh meminta D3, apa yang data pada itu, seperti ini, 10. 

Oleh itu, kita hanya meminta D3, saya mendapati bulatan pertama yang anda boleh mencari. Apa yang datanya? 10, yang memang kami elemen data pertama. Kita juga boleh tanya ia, hey, D3, mencari kami Bulatan ketiga kami. 105. Mengapa ini benar-benar penting? 

Jadi di sini, saya nyatakan bahawa kita boleh menggunakan fungsi-fungsi. Dan saya nyatakan bahawa adalah satu perkara yang sangat kuat. Jadi bukan sahaja boleh berfungsi kita melakukan perkara-perkara seperti melakukan pengiraan, sebagai contoh, mengembalikan nombor rawak, ia boleh juga melakukan perkara-perkara berdasarkan data. Ini adalah apa yang dipacu data dokumen bermakna. Itulah yang D3 bermaksud. 

Jadi ini bukan x postition-- hanya berkata, semua kalangan, mendapatkan kedudukan 200 x, kita boleh memberikan fungsi. Dan di sini, kita boleh membuat pengiraan beberapa. dan d sini berada di tempat untuk data. Jadi setiap kali kita mempunyai bulatan, pada dasarnya, D3 akan mewujudkan tujuh bulatan. Dan kemudian untuk setiap 

bulatan, ia akan pergi, hey, circle1 apa yang x kedudukan anda. Sebelum ini, kami sentiasa menjawab 200. Tetapi sekarang, setiap kali D3 meminta kami apa yang x kedudukan anda, ia akan memberikan kita mempunyai us-- kelompok ini, jadi kami mempunyai data. Ia akan memberi kita data dan berkata, apa yang anda mahu penjelasan yang menjadi, berdasarkan data yang. 

Mari kita kembali data sebenar. Jadi, jika kita menjalankan ini, ini memberi kami data didorong dokumen. Ini bulatan adalah berdasarkan berhubung position-- mereka asas sebagai fungsi data. 

Jadi untuk bulatan yang pertama, D3 meletakkan bulatan. Dan kemudian D3 meminta kita, apa yang dilakukan anda mahu penjelasan untuk menjadi. Dan kita hanya berkata, apa sahaja data itu. Membuat penjelasan 10. 

Kemudian ia bertanya, apa yang anda mahu penjelasan bagi sesuatu bulatan kedua. Dan kita menjawab, 45. Dan kita, sudah tentu, boleh membuat beberapa pengiraan di sini. Saya mendapati bahawa orang-orang bulatan adalah sejenis squished up. 

Jadi kalikan dengan 3, darab data oleh 3. Bulatan kami baru sahaja berkembang keluar. Nilai kita telah meningkat tiga kali ganda. 

Bulatan adalah benar-benar di pinggir, jadi mari kita mungkin jenis mengimbangi ia. Katakan, sebanyak 20. Di sini anda pergi. 

Ini adalah visualisasi data. Ia adalah salah satu yang sangat asas, tetapi ini memberikan kita sedikit pemahaman tentang data kami. Ia memberitahu kita bahawa, sebagai contoh, kita mempunyai kelompok sedikit unsur-unsur. Dan kita mempunyai titik terpencil besar di sini. Ini memberikan kami beberapa maklumat mengenai pengagihan. 

Jika kita, sebagai contoh, untuk menukar data ke 150 di sini dan segar semula, visualisasi kita berubah. Dokumen ini adalah data didorong. 

Jadi, sudah tentu, semua elemen-elemen ini, semua sifat-sifat ini di sini, kita boleh menggunakan fungsi, tidak hanya nombor, bukan hanya x dan y jawatan. Oleh itu, kita boleh menggunakan fungsi untuk warna. Oleh itu, kita akan melakukan perkara yang sama. Kami akan memberikan fungsi. 

Dan mari kita mengatakan, kita boleh mempunyai syarat dalam fungsi kami. Fungsi ini boleh menjadi ratus daripada barisan panjang. Ia boleh melakukan perkara-perkara yang sangat, sangat rumit. 

Jadi mari kita meletakkan jika kenyataan di sini. Katakan, jika data kami adalah kurang daripada 50, itu beberapa ambang bahawa kita berminat di atas sebab tertentu. Mari kita membuat ia hijau. Jika tidak, mari kita menjadikannya merah. Bagaimana itu? Nice. 

Jadi visualisasi data kita bermula untuk menyampaikan maklumat yang lebih menarik di banyak saluran. Jadi sekarang kita tahu sedikit mengenai pengagihan. Dan kita tahu bahawa ada beberapa jenis memotong di 50 yang kita minati. Kita tahu bahawa terdapat dua titik data di bawah tahap itu dan sebahagian besar daripada mereka atas. 

Oleh itu sebagai langkah terakhir, data ini di sini, ia amat jarang untuk melihat ini seperti itu. Jadi mari kita bergerak keluar untuk pembolehubah kerana itulah yang lebih bersih, seperti ini. Dan kemudian kita menggunakan pembolehubah yang di sini. Ia adalah perkara yang sama. Ia hanya sedikit lebih bersih. 

Selanjutnya, Akta III, Scales-- Jadi satu masalah hak di sini ialah, jika kita menukar kami data dalam 200 value-- ini jika kita mengubahnya kepada 400 atau sesuatu dan segar semula, maka nilai ini hanya pergi rahasia. Jadi logik kami di sini bagaimana kita melakukan perkara yang kali 3 dan 20, untuk menyebarkan keluar dan kemudian mengimbangi ia sedikit clunky adalah benar-benar. 

Apa yang nombor-nombor bermakna? Mereka hanya keras berkod ada. Dan mereka sangat terikat kepada data. Kami mahu dokumen data didorong. Kita mahu satu dokumen yang amat fleksibel, bahawa data yang diberikan, menyesuaikan diri kepadanya dan ia mewakili. 

Apa yang kita perlukan adalah pada dasarnya, kita mempunyai julat ini nombor 10. 45, 105. Dan kami ingin peta yang keluar ke lebar, lebar penuh di sini. Oleh itu, kita mempunyai julat nombor pergi dari 0 hingga 100. Dan kita mempunyai kampus ini saya pergi 20-700, dalam kes ini. 

Kami sejenis ingin peta yang pada. Kami mahu mengikut skala yang dan kemudian ia mengimbangi sedikit. Ia ternyata bahawa D3 mempunyai ini. Ia dipanggil timbang. Jadi mari kita menggunakannya. 

Cara yang works-- saya akan menaip ini dan kemudian menjelaskannya. Ini adalah alat timbang. Apa yang ia akan lakukan adalah, ia akan memetakan nilai 1-200 pada 20 hingga 600. Kami boleh pastikan. Kita dapat melihat bahawa di sini. 

Jadi jika saya memberi makan 1-- satu masa. Berikan saya satu saat. Saya mesti telah salah taip itu. Terdapat anda pergi. Saya minta maaf tentang itu. 

Jadi apa skala yang akan melakukan adalah, ia akan mengambil nilai yang dan kemudian menukar bahawa, mengembangkan yang keluar, sehingga ia mengisi rangkaian penuh yang anda meminta. Jadi dalam kes ini, jika kita memberikan satu, ia akan peta yang keluar ke 20. Dan jika kita memberikan 200, ia akan peta yang ke 600. Dan di suatu tempat di antara, jika kita mendapat 100, ia akan menjadi suatu tempat di antara 20 dan 600. 

Dan sudah tentu, sekarang ini adalah apa yang kita perlu membuang mereka Berkod keras perkara yang kita mempunyai di sana. Jadi apa yang kita mahu lakukan adalah mengambil data yang kami diberikan, bahawa data individu elemen, dan lulus mengikut skala pertama. Jadi skala skala akan ia sehingga. 

Well-- Oh, kita mempunyai sedikit kesilapan di sini. Kami data yang hilang. Terdapat anda pergi. Dan yang mengembang keluar. 

Yang memberikan kita yang sama Akibatnya kita mempunyai di hadapan, tetapi daripada harus mereka keras berkod kekangan. Dan jika saiz kami perubahan kanvas, sebagai contoh, jika kita ingin mempunyai lebih daripada ini 400 piksel dan ia squishes keluar, kita boleh memilikinya over-- kita boleh mengembangkannya, atau kita boleh mengurangkan margin ini dibiarkan sesuatu yang kurang atau lebih daripada 20. Nombor-nombor ini, ini keras berkod nombor kini masuk akal untuk kita. 

Dan kami boleh lakukan lebih banyak perkara yang menarik juga. Jadi, daripada mempunyai linear yang skala, kita mungkin mahu log timbang. Dan yang akan memberi kita skala log. 

Jadi sekarang skala kita, bukan hanya berkembang daripada pelbagai itu, ia melakukan perkara-perkara yang lebih canggih. Daripada perlu julat ini keras dikodkan, dan daripada harus yang 600, kita mungkin mahu hanya menggunakan lebar, demikian daripada 20 kepada lebar tolak 40, 2 kali margin di sisi lain. Dan ini masuk akal lebih banyak untuk seseorang yang mungkin melihat kod. 

Menariknya, penimbang mendapatkan sangat, sangat canggih juga. Mereka melakukan banyak perkara yang menarik. Jadi penimbang tidak semestinya mempunyai beroperasi hanya dengan nombor. Mari kita membuat skala warna. 

Jadi pelbagai kami boleh adalah-- domain kami adalah antara 1 hingga 200. Itu perkara input. Tetapi kita mungkin mahu peta dari hijau ke merah, sebagai contoh. Dan sekarang, jika kita lulus 1, kita akan mendapatkan hijau. Jika kita memberikan 200, kita akan mendapat merah. Dan jika kita lulus sesuatu di antara, ia akan menjadi beberapa campuran yang, di suatu tempat di kecerunan antara hijau dan merah. 

Dan daripada harus ini jenis logik clunky kami ada di sini dengan bersyarat di sana, kita boleh mempunyai satu something-- skala linear antara mereka. Jadi kita akan menggunakan skala yang kita hanya diwujudkan, yang kita dipanggil warna. Dan kita akan memberikan d, yang adalah elemen data kami. Dan di sana kami pergi. Kami mempunyai skala warna. 

Jadi ini adalah pemetaan. Jadi yang paling kiri adalah benar-benar hijau. Yang paling kanan merah sepenuhnya. Dan segala sesuatu di antara adalah fungsi d. Kami mempunyai menarik visualisasi sini. Tetapi data kami adalah jenis membosankan. Mari kita lihat apa yang boleh kita lakukan jika kami mempunyai data yang lebih menarik. 

Akta IV, Kerja Dengan Data-- perkara pertama kami akan mahu lakukan untuk membuat kami visualisasi lebih menarik adalah untuk memindahkan data di tempat lain. Ia amat clunky mempunyai data keras berkod di sini. Dan secara amnya, kita akan meminta orang lain bagi data itu. Kami mungkin akan meminta kerajaan, Biro Banci, apa data anda dan kemudian merancang itu atau meminta beberapa entiti pihak ketiga untuk beberapa data dan kemudian membina visualisasi pada itu. 

Jadi perkara pertama yang kami mahu lakukan adalah yang bergerak ke tempat lain. Jadi saya akan membuat memfailkan di sini dipanggil data.json. JSON adalah format data. Anda tidak perlu tahu banyak tentang itu. Dan kita akan menyalin sedikit data kita telah ada, tampalkannya di sana kata demi kata, pergi kembali ke kod visualisasi kami di sini, dan menggunakan fungsi ini di sini. Anda tidak perlu mengetahui butiran. Tetapi apa yang akan dilakukan adalah, ia akan mencari fail yang, mengambil ia, dan kembalikan kepada kami. Jadi apa ini tidak adalah, ia pergi dan mendapatkan fail data.json itu. Dan kemudian semua kod itu dilekukan inside-- dasarnya, semua kod yang kita ada akan there-- berjalan hanya apabila kita mendapatkan data kembali. Dan kemudian ia akan berlari, kod dengan data yang kita ada. Great, kita mempunyai visualisasi bahawa pertanyaan untuk beberapa kod di suatu tempat lain, yang biasanya di mana ia pertanyaan beberapa data dari di tempat lain, yang biasanya bagaimana visualisasi bekerja. 

Tetapi saya ingin kembali kepada data. Jadi data asas dalam D3-- D3 menggunakan data itu adalah satu senarai barang-barang. D3 menjangkakan data hanya menjadi senarai perkara, pelbagai perkara. Tidak kira apa yang perkara-perkara adalah, selagi itu pelbagai mereka. 

Jadi di sini, sebagai contoh, kita dapat daripada kursus telah terapung mata yang. Kita boleh mempunyai negatif. D3 tidak peduli, asalkan kerana ia adalah senarai perkara. 

Perkara yang menarik kita boleh mempunyai, kita juga boleh mempunyai senarai tali seperti itu. Jadi ini adalah tajuk-tajuk utama Crimson Saya mengambil beberapa hari yang lalu. Dan mungkin anda boleh mencari beberapa menarik perkara mengenai tajuk-tajuk utama yang. 

Jadi sekali lagi, ini adalah senarai perkara. D3 tidak peduli. Ini berlaku kepada rentetan. Kami telah mengubah data kami. 

Mari kita kembali kepada visualisasi kami. Sekarang, visualisasi kami menjangka input untuk menjadi nombor. Jadi, kita akan mempunyai untuk membuat beberapa perubahan. Jadi, sebagai contoh, pertama sekali, mungkin kita mahu meletakkan golongan-golongan ini bersama-sama dengan panjang tajuk utama, yang Bilangan aksara dalam tajuk. 

Jadi apa yang kita akan lakukan is-- setiap kali kami fungsi dipanggil dengan tali, kita akan mendapati ia panjang Dan kemudian lulus itu untuk skala. Warna, saya akan kembali bahawa untuk keluli biru. Dan di sana kami pergi. Kami mempunyai visualisasi yang tajuk utama daripada Crimson. 

Skala kami adalah di luar sedikit. Mari kita andaikan bahawa yang paling lama tajuk adalah 100 aksara, jadi span yang keluar sedikit. Dan kita mempunyai visualisasi yang. Oleh itu, ia seolah-olah bahawa kebanyakan berita utama cukup dekat bersama-sama, dari segi garis watak. Tetapi salah ada benar-benar menonjol. 

Kita boleh membina beberapa alat untuk meneroka lebih banyak. Tetapi apabila saya bekerja mengenai perkara ini, saya ingin tahu sama ada, dalam set data ini, tajuk utama dengan noktah bertindih dalam mereka akan lebih panjang. Saya menganggap mereka akan. 

Jadi mari kita mengetahui. Mari kita gunakan warna saluran seperti yang kami lakukan sebelum, untuk mengekod beberapa kira-kira sama ada ada kolon atau tidak. Oleh itu, kita akan menggunakan bersyarat lagi. Anda tidak perlu tahu butiran ini, tetapi ini adalah bagaimana kita menyemak tali untuk watak tertentu dalam JavaScript, sekali lagi, tidak relevan. 

Tetapi jika kita tidak mencari kolon, kami akan kembali hijau. Dan jika kita lakukan, kita akan kembali merah. Jadi sekali lagi, tajuk yang telah kolon yang akan menjadi merah. Inilah yang ertinya- ini bagus. 

Oleh itu, ia seolah-olah bahawa saya hipotesis yang terserempak. Hanya ada dua. Kami hanya mempunyai enam mata data dan hanya dua mempunyai titik bertindih. Tetapi ia kelihatan sedikit lebih pada akhir yang lebih rendah, sebenarnya. Tajuk-tajuk utama dengan titik bertindih kelihatan untuk secara amnya lebih pendek, sekurang-kurangnya dalam data kami set-- menarik. 

Mari kita kembali kepada yang keluli biru dan kemudian melihat apa yang kita boleh membuat walaupun dengan data yang lebih menarik. Jadi sekali lagi, saya telah mengumumkan bahawa data dalam D3 adalah senarai perkara. Kami telah melihat nombor dari banyak jenis. Kami telah melihat tali. Tetapi perkara yang juga boleh menjadi objek. 

Mereka boleh menjadi perkara yang rumit yang merangkumi banyak perkara. Untuk mengatakan yang lebih jelas, dalam kebanyakan kes, kita mahu membina setiap titik data sebagai lebih rumit daripada hanya satu nilai. Jika anda akan membayangkan pangkalan data mengenai pelajar, mungkin ada seorang pelajar nama, ID pelajar, dan banyak perkara-perkara yang berkaitan dengan rekod tertentu, bukan hanya rentetan atau nombor. Jadi mari kita lihat itu. 

Ini adalah salah satu data seperti yang ditetapkan. Ini adalah satu set data mengenai gempa bumi. Jadi segala-galanya di sini dalam senarai atau array kami perkara yang mengandungi banyak perkara sendiri. Jadi setiap titik data mempunyai magnitud dan menyelaraskan satu. Dan menyelaraskan diri mengandungi dua perkara. 

Jadi setiap hari kini lebih banyak rumit dan banyak yang lebih menarik dan mengandungi lebih maklumat yang menarik. Mari kita lihat kita boleh membina daripada itu. Kembali semula ke sini, sekali lagi, dengan menggunakan visualisasi bulatan histogram kami kami telah dibina, mari kita lihat jika kita boleh membina visualisasi pengedaran magnitud dalam set data kami. 

Jadi di sini, ia adalah konsep yang sama. Tetapi sekarang, d mengandungi lebih banyak perkara. d mengandungi banyak unsur data. Oleh itu, kita dapat d belakang. D3 memberikan kita d. Dan kita bertindak balas dengan mencari magnitud d dan kemudian lulus itu untuk skala. 

Dan maka kita perlu mengubah skala kami, sudah tentu. Jadi magnitud semata-mata tidak pergi lebih daripada 10. Sebenarnya, di sana tidak pernah menjadi gempa bumi magnitud 10. Tetapi itulah jenis atas kami akhir, spektrum atas kami. 

Mari kita menyegarkan. Nice, kami mempunyai satu visualisasi. Ia adalah menarik untuk note-- jadi terdapat dua titik data yang adalah hampir tepat di atas satu sama lain, dari segi magnitud. Anda melihat ini dengan kelegapan yang kita gunakan. 

Kami mempunyai data geografi kini. Kami mempunyai latitud dan longitud. Mungkin kita boleh melakukan sesuatu yang banyak lebih menarik dengan itu. Mari kita menemui beberapa lebih cara menarik untuk menggambarkan ini lebih rumit data kita mempunyai akses kepada. 

Akta V, Mapping-- asasnya, kita mahu meletakkan ini pada peta. Maksud saya, ini adalah di mana ini akan. Kami mahu mengekod maklumat mengenai kedudukan ini bacaan gempa bumi, serta magnitud mereka, kerana kita mempunyai yang sekarang. Kami memahami bagaimana untuk mengambil data yang lebih rumit. 

Perkara pertama yang kita akan lakukan adalah membuat peta, peta latar belakang. Saya akan pergi melalui ini sangat cepat. Ini adalah kod rumit. Ia adalah satu lagi salah seorang daripada mereka resipi anda tidak benar-benar perlu memahami sepenuhnya untuk anda gunakan. Tetapi ini adalah kod. Kod ini di sini mewujudkan peta. 

Kami tidak akan pergi secara terperinci. Tetapi sekali pandang, apa yang ia lakukan adalah, ia pertanyaan fail us.json ini, yang adalah fail data seperti apa yang kita ada sebelum. Ia lebih kompleks, sudah tentu. Tetapi dalam kes ini, segala-galanya, setiap titik data adalah negeri ini dan mempunyai senarai latitud dan longitud yang menentukan poligon, bentuk yang, menyatakan bahawa. 

Jadi apa D3 akan lakukan adalah sama dengan apa yang kita lakukan sebelum ini. Ia akan meminta itu dan mengikat yang kepada unsur. Dan ada satu majlis yang akan peta elemen yang keluar, berdasarkan latitud dan longitud. Anda boleh membaca lebih lanjut mengenai perkara itu. Dan saya cadangkan ia. 

Terdapat pautan di bahagian akhir kod ini disiarkan. Dan kod akan mengulas. Dalam terdapat pautan untuk lanjut mengenai ini. Saya cadangkan anda melihat ia. Tetapi apa yang kita mengambil berat tentang adalah ini fungsi unjuran. Saya mahu pergi melalui itu. 

Pertama sekali, mari saya tunjukkan anda bahawa, ya, kita mempunyai peta. Peta sejuk. Jadi mari kita lihat ini fungsi pengeluaran. 

Unjuran adalah sangat banyak seperti skala, bersisik lagi. Jadi apa pengeluaran untuk fungsi unjuran ini dilakukan, kita boleh lulus longitud dan latitudes-- dalam kes ini, nilai-nilai ini di sini adalah lat-long bangunan kami duduk di kanan now-- kepada unjuran. Dan unjuran akan menukar itu ke dalam x dan y nilai piksel. 

Jadi apa unjuran lakukan hampir sama dengan skala kami. Ia mengambil latitud kami dan longitud yang mewakili seluruh dunia dan mengecut dan saiz yang turun ke dataran yang kita mahu, bahawa kami telah diberikan itu. Dalam kes ini, kami lulus nilai-nilai ini. Dan ia memberi kita, baik, yang pada skrin anda bermakna 640 piksel. Ini skrin keseluruhan adalah 700 piksel luas, sehingga membuat kita tentang di sini, dan 154 piksel ke bawah, yang saya akan anggaran adalah cukup banyak di sini. 

Jadi mengambil orang-lat-long, yang mewakili sesuatu di seluruh dunia dan memicit dan bergerak di sekitar untuk memberi kita x dan nilai y piksel, ini adalah perkara yang pertama itu dilakukan dalam kod pemetaan ini. Dan kemudian yang lain daripada kod menggunakan data dan kemudian maps mereka lat-long kepada sesuatu di skrin anda. 

Tetapi kita akan menggunakan unjuran ini fungsi, kerana ternyata kita mempunyai lat-long long juga. Mengimbas kembali pada data kami, kami mempunyai latitud dan longitud koordinat untuk setiap pemerhatian. Jadi mari kita menggunakan unjuran. 

Jadi melihat pameran kami, kita mahu exposition-- kami kita mempunyai latitud dan longitud yang. Tetapi kita mahu nilai piksel. Dan ternyata, kita betul-betul apa yang kita want-- unjuran. Sangat banyak seperti kita menggunakan skala di sini, kita kini akan menggunakan unjuran dan lulus ia Koordinat. Jadi perkara pertama yang kami doing-- jadi kami mendapatkan d, yang merupakan data individu unsur kejadian gempa bumi individu membaca. Perkara pertama yang kami lakukan adalah mendapatkan koordinat. Baiklah, kita mempunyai koordinat. 

Perkara kedua yang kita lakukan adalah lulus bahawa pada unjuran. Unjuran menukarkan mereka koordinat kepada nilai piksel, x dan y. Dan kemudian sesuatu yang kita tidak mahu lakukan adalah hanya mendapatkan x, yang kes ini adalah yang pertama. Ia merupakan satu dari dua perkara yang yang dikembalikan oleh unjuran. 

Kami akan melakukan perkara yang sama untuk y. Tetapi sebaliknya, kami akan kembali elemen kedua, y. Bersedialah untuk menyegarkan. Ooh, watak tambahan here-- bagus, kami mempunyai dokumen data didorong itulah menyembunyikan fail JSON ini objek, membuat peta, dan mengubah atribut berhubung dengan data yang untuk projek di atas peta. Ini adalah benar-benar menarik. Ini tenang. 

Mari kita mengambil ia sehingga takuk a. Maksud saya, kita mempunyai dua keping maklumat dengan setiap titik data. Maksud saya, tiga. Kami mempunyai koordinat, yang merupakan x dan y. Dan kita mempunyai magnitud. 

Kita perlu untuk mengekod magnitud entah bagaimana. Kami mempunyai banyak saluran. Kita boleh menggunakan warna. Kita boleh menggunakan jejari. Kita boleh menggunakan kelegapan. Kita boleh menggunakan banyak perkara dalam kod. Mana-mana sifat-sifat dan banyak lebih yang tidak disenaraikan di sini, kerana mereka pilihan, kita boleh digunakan untuk mengekod data ini, angin ahmar dan semua ini saya sebutkan. 

Mari kita buat jejari. Saya rasa jejari adalah yang paling intuitif. Jadi sekali lagi, kami akan menggantikan yang keras berkod 40 dan membuat beberapa pengiraan. Kami akan menggunakan skala kegemaran kami lagi. Dan kami lalu d. Tetapi tidak d kerana kita mahu magnitud d. d hanyalah titik data. Kami akan lulus magnitud mengikut skala. 

Mari kita cuba sekali lagi. Ooh, ia tidak berfungsi. Mengapakah ia tidak berfungsi? 

Jadi ingat apa skala tidak. Mari kita lihat skala lagi. Peta skala dari 1 hingga 10 pada untuk 22-600, lebih atau kurang. 600 adalah besar. Inilah sebabnya mengapa kami mendapat ini. 

Oleh itu, kita mahu menukar skala kami kepada sesuatu yang lebih munasabah. Katakan, kita mahu 0-60. 60 adalah besar, tetapi 10 gempa bumi adalah sangat jarang berlaku. Malah, mereka tidak pernah berlaku. 

Jadi apa yang akan dilakukan adalah, ia akan mengambil magnitud kami yang masuk dari 1 hingga 10 dan peta di atas untuk mengembangkan ia keluar. Dan peta ia ke 0-60. Mari kita menyegarkan. 

Nice, kami mempunyai satu visualisasi. Ini adalah besar. Ini adalah data sebenar. Anda akan perasan, dalam mainan kecil saya Sebagai contoh, gempa bumi terbesar yang tepat di atas kami. Tetapi itu sahaja. Kami mempunyai tarikh didorong visualisasi yang menggunakan data dan memberikan kita benar-benar maklumat yang menarik. Yeah, mari kita menambah beberapa interaktiviti kepadanya. Saya nyatakan bahawa adalah daya yang kuat D3. 

Jadi di sini, bagi setiap elemen, kami menggambarkan sekumpulan sifat-sifat. Tetapi kita juga dapat menggambarkan apa yang kita mahu berlaku dengan unsur-unsur interaktiviti. Sebagai contoh, kita boleh menggambarkan apa yang berlaku apabila kita tetikus ke atas. Dan sangat serupa itu, yang akan mengambil fungsi, hampir sama dengan atribut kita mempunyai di hadapan, di mana kita melakukan sesuatu kepada unsur apabila kita pergi ke atas ia. 

Jadi perkara pertama yang perlu kita lakukan adalah memilih elemen yang, untuk merasa pada dasarnya, dalam penyemak imbas. dan kemudian kita boleh menetapkan sifat kepadanya. Jadi apa yang saya lakukan di sini adalah, apabila kita berlegar atas sesuatu, kami akan mendapatkan elemen yang dan kemudian menetapkan opacity kembali 1, untuk benar-benar telus. Mari kita lihat apa yang kelihatan seperti. 

Nampaknya kita mempunyai koma bertitik tambahan di sini. Jadi, jika kita tuding sini, ia menjadi penuh. Tetapi sekarang, sudah tentu, ia tetap penuh, kerana kita perlu menerangkan apa yang berlaku apabila mengeluarkan kursor kami. Jadi mari kita buat betul-betul bahawa pada mouseout, bertentangan dengan mouseover. 

Dan kami akan menetapkan semula kepada apa yang kita mempunyai before-- 0.5. Dan sekarang, setiap kali kita hover, kita akan mendapat satu bulatan penuh. Ia membantu kita lihat apa yang kita kami memilih dasarnya. 

Dan sekarang mari kita membuat ini benar-benar hebat. Mari kita sambung ini kepada data sebenar. Jadi mari kita bertanya boleh USGS mengenai data mereka. Jadi Kajian Geologi Amerika Syarikat mempunyai data mengenai gempa bumi. Mereka mempunyai API awam yang dapat untuk dimakan dalam format JSON. Jadi mari kita buat itu. 

Jadi ini adalah sedikit kod yang menghubungkan kepada API USGS itu. Dan ada sedikit pemprosesan di atasnya. Ini tidak berkaitan tetapi ia memudahkan kepada format data yang mudah seperti yang kita mempunyai di hadapan. Jadi saya menghilangkan panggilan kami untuk data.json palsu kami dalam fail. Dan sebaliknya, saya memanggil USGS dasarnya. 

Mari kita menyegarkan, bagus. Ini adalah sebenar, data sebenar dari minggu ini untuk gempa bumi. Ini adalah benar-benar menarik. Ini tidak menghairankan bagi kita, tetapi ada banyak gempa bumi di Pantai Barat di California. Tetapi saya fikir ia adalah sangat menarik bahawa terdapat begitu banyak gempa bumi di Alaska, dan nampaknya, di sini di Midwest. Maksud saya, menarik, dan kami baik. Itulah kesimpulan. 

Tetapi pada dasarnya, ini adalah apa yang D3 membantu kita lakukan. Ia membantu kita mengambil data, mengikat kepada unsur-unsur dalam DOM, dan mempunyai unsur-unsur mengubah sebagai fungsi data, mempunyai sifat-sifat mereka, semua banyak sifat-sifat unsur-unsur, semua berguna untuk saluran untuk menyampaikan maklumat. 

D3 adalah sangat kuat perpustakaan dan menakjubkan dikendalikan dengan baik. Ini adalah beberapa perkara yang kuat. Visualisasi data adalah alat yang sangat kuat untuk menyampaikan kepada orang-orang yang mendalam wawasan yang mendapat untuk teras mereka dan membantu mereka memahami, dalam cara mendalam dan intuitif ini, bagaimana data kerja dan bagaimana data mengubah hidup kami.