1 00:00:00,000 --> 00:00:00,780 2 00:00:00,780 --> 00:00:11,880 >> [MUSIC PLAYING] 3 00:00:11,880 --> 00:00:16,480 >> DAVID Chouinard: Saya David Chouinard, dan ini adalah D3. 4 00:00:16,480 --> 00:00:17,700 Selamat Datang. 5 00:00:17,700 --> 00:00:21,270 Kita akan belajar tentang D3 hari ini. 6 00:00:21,270 --> 00:00:25,020 D3 adalah kerangka JavaScript untuk membangun kualitas tinggi 7 00:00:25,020 --> 00:00:28,110 visualisasi interaktif untuk web. 8 00:00:28,110 --> 00:00:30,870 Hal-hal seperti apa yang kita melihat di belakang saya, 9 00:00:30,870 --> 00:00:34,230 kita akan belajar untuk membuat mereka hal, seperti dasar-dasar itu. 10 00:00:34,230 --> 00:00:36,452 Tapi itu akan menjadi dingin. 11 00:00:36,452 --> 00:00:38,160 Mari kita mulai membuat gambar-gambar cantik. 12 00:00:38,160 --> 00:00:41,108 13 00:00:41,108 --> 00:00:44,350 Kami punya lebih banyak demo prospek yang tersedia. 14 00:00:44,350 --> 00:00:48,040 15 00:00:48,040 --> 00:00:50,760 Mari kita lakukan. 16 00:00:50,760 --> 00:00:58,700 >> Babak I, DOM manipulation-- kita akan untuk memulai segera membuat hal-hal keren. 17 00:00:58,700 --> 00:01:01,240 Pertama-tama, di sebelah kiri, kita memiliki kode. 18 00:01:01,240 --> 00:01:03,470 Di sebelah kanan, kita memiliki hasil dari kode kita. 19 00:01:03,470 --> 00:01:04,900 Mari kita pergi melalui itu. 20 00:01:04,900 --> 00:01:05,780 >> Mari kita membuat lingkaran. 21 00:01:05,780 --> 00:01:08,570 Bagaimana menurutmu? 22 00:01:08,570 --> 00:01:14,934 svg.append circle-- Kami hanya membuat lingkaran. 23 00:01:14,934 --> 00:01:16,100 Anda tidak percaya padaku, kan? 24 00:01:16,100 --> 00:01:18,190 Ini tidak ada. 25 00:01:18,190 --> 00:01:21,830 >> Jadi apa yang kita lakukan di sini adalah, SVG adalah scalable vector graphics. 26 00:01:21,830 --> 00:01:27,530 Ini adalah cara kita memberitahu browser untuk membuat grafis vektor dalam browser. 27 00:01:27,530 --> 00:01:30,740 Apa yang baru saja kita lakukan sekarang ditambahkan lingkaran untuk browsing. 28 00:01:30,740 --> 00:01:34,790 >> Janji adalah bahwa lingkaran memerlukan sedikit atribut dasar 29 00:01:34,790 --> 00:01:36,850 sebelum kita benar-benar bisa melihatnya. 30 00:01:36,850 --> 00:01:40,045 Kita perlu menceritakannya posisi x nya, posisi y nya, jari-jarinya. 31 00:01:40,045 --> 00:01:43,310 Kami tidak mengatakan itu semua itu, jadi kita tidak melihat hal itu sekarang. 32 00:01:43,310 --> 00:01:46,210 Tapi mari kita kirim barang. 33 00:01:46,210 --> 00:01:49,510 >> Jadi pertama-tama, Anda punya untuk memberi nama lingkaran kami. 34 00:01:49,510 --> 00:01:53,070 Jadi mari kita menyebutnya lingkaran. 35 00:01:53,070 --> 00:01:54,406 Lingkaran kami memiliki nama sekarang. 36 00:01:54,406 --> 00:01:57,230 37 00:01:57,230 --> 00:01:59,490 Dan mari kita memberikan beberapa atribut. 38 00:01:59,490 --> 00:02:03,690 Bagaimana cx akan memusatkan x, sehingga pusat posisi x. 39 00:02:03,690 --> 00:02:06,730 Katakanlah, 200 untuk 200 piksel. 40 00:02:06,730 --> 00:02:10,220 >> Mari kita memberikan y 200 piksel juga. 41 00:02:10,220 --> 00:02:16,032 Dan r, radius, sekitar 40 piksel. 42 00:02:16,032 --> 00:02:16,950 Sekarang mari kita lihat. 43 00:02:16,950 --> 00:02:21,740 44 00:02:21,740 --> 00:02:23,440 Saya tidak bisa mengeja. 45 00:02:23,440 --> 00:02:30,430 46 00:02:30,430 --> 00:02:31,520 >> Ini dia. 47 00:02:31,520 --> 00:02:37,330 Kami memiliki lingkaran pada posisi 200 pixel, 200 pixel, radius 40 piksel. 48 00:02:37,330 --> 00:02:38,280 Jenis dingin, kan? 49 00:02:38,280 --> 00:02:38,988 Kami memiliki lingkaran. 50 00:02:38,988 --> 00:02:40,880 Ya. 51 00:02:40,880 --> 00:02:42,670 >> Jadi tidak perlu untuk mengikuti. 52 00:02:42,670 --> 00:02:45,790 Semua contoh-contoh ini, semua kode saya lakukan hari 53 00:02:45,790 --> 00:02:51,300 akan disediakan secara online pada akhir dalam bentuk contoh interaktif 54 00:02:51,300 --> 00:02:54,010 dengan pos-pos pemeriksaan di setiap tindakan, dan sebagainya. 55 00:02:54,010 --> 00:02:55,160 >> Mari kita lakukan lebih banyak barang. 56 00:02:55,160 --> 00:02:58,901 Lingkaran hitam ini benar-benar jelek. 57 00:02:58,901 --> 00:03:01,541 Saya minta maaf untuk kesalahan yang pesan di sana. 58 00:03:01,541 --> 00:03:05,340 Di sana kami pergi. 59 00:03:05,340 --> 00:03:06,350 >> Mari kita memberikan warna. 60 00:03:06,350 --> 00:03:07,170 Bagaimana? 61 00:03:07,170 --> 00:03:08,340 Saya ingin biru baja. 62 00:03:08,340 --> 00:03:13,280 63 00:03:13,280 --> 00:03:16,030 Nah, lingkaran kami berubah warna. 64 00:03:16,030 --> 00:03:17,320 Itu bagus. 65 00:03:17,320 --> 00:03:31,330 Mari kita membuat semi-transparan too-- semi-transparan. 66 00:03:31,330 --> 00:03:33,670 >> Jadi ini adalah atribut kita mendefinisikan pada lingkaran. 67 00:03:33,670 --> 00:03:36,774 Hal pertama yang kita lakukan adalah kami menempatkan lingkaran pada halaman. 68 00:03:36,774 --> 00:03:38,690 Dan kemudian kita mendefinisikan sekelompok atribut. 69 00:03:38,690 --> 00:03:41,610 Beberapa di antaranya yang diperlukan, seperti CX, CY, dan Radius. 70 00:03:41,610 --> 00:03:42,680 Dan lain-lain adalah opsional. 71 00:03:42,680 --> 00:03:44,730 >> Ada lebih banyak atribut. 72 00:03:44,730 --> 00:03:46,760 Ada banyak dari mereka. 73 00:03:46,760 --> 00:03:53,070 Sebagai contoh, kita bisa memiliki Stroke juga, stroke merah. 74 00:03:53,070 --> 00:03:55,630 Tapi mari kita hapus itu. 75 00:03:55,630 --> 00:04:00,450 Kami kembali ke lingkaran, lingkaran biru. 76 00:04:00,450 --> 00:04:01,600 >> Jadi mari kita membuat lebih banyak kalangan. 77 00:04:01,600 --> 00:04:02,810 Bagaimana? 78 00:04:02,810 --> 00:04:04,665 Mari kita membuat lingkaran lain. 79 00:04:04,665 --> 00:04:05,985 Ini menarik, kan? 80 00:04:05,985 --> 00:04:09,630 81 00:04:09,630 --> 00:04:12,300 >> Jadi mengatakan saya hanya Copy-Disisipkan apa yang kita miliki sudah. 82 00:04:12,300 --> 00:04:13,570 Sebut saja circle2. 83 00:04:13,570 --> 00:04:15,840 Dan mari kita lakukan yang tepat hal yang sama dan memberikan 84 00:04:15,840 --> 00:04:20,450 atribut, mengingat posisi x 300. 85 00:04:20,450 --> 00:04:24,140 Yay, kita memiliki dua lingkaran sekarang. 86 00:04:24,140 --> 00:04:27,240 >> Dan tentu saja, kita bisa memperbarui nilai-nilai ini. 87 00:04:27,240 --> 00:04:31,640 Aku bisa meletakkannya di 400, dan sekarang bergerak. 88 00:04:31,640 --> 00:04:35,470 Dan karena itu mengganggu, mari kita menghapusnya, sehingga circle2.remove. 89 00:04:35,470 --> 00:04:39,000 90 00:04:39,000 --> 00:04:40,730 Ini sudah pergi sekarang. 91 00:04:40,730 --> 00:04:43,170 >> Jadi apa yang kita lakukan dan hanya sangat, very-- ini 92 00:04:43,170 --> 00:04:46,030 sangat mirip dengan apa yang Anda mungkin dilakukan di jQuery, misalnya. 93 00:04:46,030 --> 00:04:48,240 Kami hanya memanipulasi DOM, itu disebut. 94 00:04:48,240 --> 00:04:50,040 Anda mungkin pernah mendengar kata itu sebelumnya. 95 00:04:50,040 --> 00:04:53,255 Kami sedang menciptakan hal-hal, pengaturan atribut pada hal-hal, menghapus hal-hal. 96 00:04:53,255 --> 00:04:58,950 97 00:04:58,950 --> 00:05:02,360 >> Sekarang, di sinilah mulai menarik. 98 00:05:02,360 --> 00:05:07,250 Jadi nanti dalam kode, kita masih bisa lihat lingkaran asli di sini. 99 00:05:07,250 --> 00:05:14,100 Jadi mari kita ulang atribut untuk cx. 100 00:05:14,100 --> 00:05:18,260 Katakanlah, x posisinya 400. 101 00:05:18,260 --> 00:05:22,406 Dan aku akan transisi itu, jadi sudah jelas. 102 00:05:22,406 --> 00:05:23,360 Di sana kami pergi. 103 00:05:23,360 --> 00:05:24,780 >> Jadi kami menambahkan lingkaran. 104 00:05:24,780 --> 00:05:26,440 Kami mengatur beberapa atribut. 105 00:05:26,440 --> 00:05:28,210 Kami menambahkan lingkaran lain, dihapus. 106 00:05:28,210 --> 00:05:31,650 Dan kemudian kita memodifikasi lingkaran asli. 107 00:05:31,650 --> 00:05:35,400 >> Tapi di sini adalah di mana ia mendapat jauh lebih menarik. 108 00:05:35,400 --> 00:05:39,070 Tidak hanya bisa kita mengatur atribut hanya sebagai nilai, kita dapat mengatakan, 109 00:05:39,070 --> 00:05:41,610 hey, lingkaran, pergi ke posisi 200. 110 00:05:41,610 --> 00:05:44,540 Kami juga dapat menetapkan mereka sebagai fungsi. 111 00:05:44,540 --> 00:05:48,850 >> Jadi alih-alih memberikan 400 sini, kita dapat membuat beberapa perhitungan 112 00:05:48,850 --> 00:05:53,950 on the fly untuk apa yang kita ingin atribut yang menjadi. 113 00:05:53,950 --> 00:05:56,580 Jadi ini adalah bagaimana Anda akan menyatakan bahwa. 114 00:05:56,580 --> 00:06:00,660 Kita mengatakan, bukan 400, biarkan aku memberikan fungsi sebagai gantinya. 115 00:06:00,660 --> 00:06:04,180 Dan di sini, di dalam fungsi ini, kita bisa membuat perhitungan gila. 116 00:06:04,180 --> 00:06:06,820 >> Kita bisa meluangkan waktu dan melihat beberapa hal lain 117 00:06:06,820 --> 00:06:11,230 dan dinamis memutuskan untuk lingkaran apa nilai yang kita inginkan. 118 00:06:11,230 --> 00:06:15,266 Bagaimana kalau kita hanya memberikan itu posisi x acak? 119 00:06:15,266 --> 00:06:20,360 120 00:06:20,360 --> 00:06:21,120 Jadi itu yang. 121 00:06:21,120 --> 00:06:25,490 >> Jadi apa yang mengatakan, bagi setiap x, menjalankan fungsi ini. 122 00:06:25,490 --> 00:06:29,340 Dan apa yang kita lakukan adalah menghitung beberapa hal, kali acak lebar 123 00:06:29,340 --> 00:06:30,410 dan kembali itu. 124 00:06:30,410 --> 00:06:34,765 Jadi setiap kali kita menjalankan itu, kita mendapatkan lingkaran yang masuk ke tempat acak. 125 00:06:34,765 --> 00:06:36,394 Ini agak dingin. 126 00:06:36,394 --> 00:06:38,310 Aku merasa seperti aku bisa melihat ini untuk sedikit. 127 00:06:38,310 --> 00:06:44,274 128 00:06:44,274 --> 00:06:46,440 Kami mulai untuk mendapatkan sesuatu yang menarik di sini. 129 00:06:46,440 --> 00:06:49,120 130 00:06:49,120 --> 00:06:51,390 Mari kita membuat data ini didorong sekarang. 131 00:06:51,390 --> 00:06:53,420 Tidak ada data. 132 00:06:53,420 --> 00:06:54,482 Mari kita mengubah itu. 133 00:06:54,482 --> 00:06:57,440 134 00:06:57,440 --> 00:07:12,140 >> Act II, Data Driven Documents-- Jadi mari kita kembali ke sini. 135 00:07:12,140 --> 00:07:15,340 Dan mari kita menyingkirkan circle2, karena kita hanya menambahkan dan menghapus 136 00:07:15,340 --> 00:07:15,840 saya t. 137 00:07:15,840 --> 00:07:17,382 Jadi kita tidak benar-benar membutuhkannya. 138 00:07:17,382 --> 00:07:21,421 Kita harus lebih banyak pintar di sini. 139 00:07:21,421 --> 00:07:23,170 Katakanlah, kita memiliki beberapa data dari beberapa macam. 140 00:07:23,170 --> 00:07:31,540 141 00:07:31,540 --> 00:07:40,020 Satu moment-- katakanlah, kami memiliki data formulir ini. 142 00:07:40,020 --> 00:07:41,800 Kami memiliki sebuah array, hanya sekelompok angka. 143 00:07:41,800 --> 00:07:45,750 Kami memiliki tujuh angka di sini, apa ini jumlah represent-- 144 00:07:45,750 --> 00:07:48,810 dalam rekening bank rakyat, bagaimana banyak mereka menimbang, Tuhan tahu apa. 145 00:07:48,810 --> 00:07:51,310 >> Ini adalah angka, dan kami ingin menggunakan lingkaran kami 146 00:07:51,310 --> 00:07:53,240 untuk mewakili angka-angka entah bagaimana. 147 00:07:53,240 --> 00:07:55,515 Kami ingin untuk mengikat kami lingkaran untuk angka-angka. 148 00:07:55,515 --> 00:07:58,750 149 00:07:58,750 --> 00:07:59,626 Jadi apa yang kita lakukan. 150 00:07:59,626 --> 00:08:01,500 Katakanlah, kita ingin lingkaran untuk setiap nomor. 151 00:08:01,500 --> 00:08:03,590 Kita bisa melakukan hal yang lama hal yang kita doing-- 152 00:08:03,590 --> 00:08:06,020 lingkaran append dan circle2 dan circle3. 153 00:08:06,020 --> 00:08:10,020 Tapi ini keluar dari tangan, dan ada banyak mengulang logika. 154 00:08:10,020 --> 00:08:12,760 >> Jadi mari kita lebih pintar dengan itu. 155 00:08:12,760 --> 00:08:17,810 Alih-alih menggunakan lingkaran var svg.append bahwa kami hanya menggunakan, 156 00:08:17,810 --> 00:08:21,580 kita akan menggunakan blok ini sedikit di sini. 157 00:08:21,580 --> 00:08:24,510 Saya tidak ingin pergi mendalam ke dalam apa semua bagian ini lakukan. 158 00:08:24,510 --> 00:08:26,020 Dan itu jenis topik yang canggih. 159 00:08:26,020 --> 00:08:27,830 Dan aku berharap aku bisa. 160 00:08:27,830 --> 00:08:31,370 >> Tetapi hal kunci untuk recognize-- dan Anda akan melihat sangat sering dalam kode D3. 161 00:08:31,370 --> 00:08:36,840 Ini blok teks dasar menciptakan banyak kalangan 162 00:08:36,840 --> 00:08:41,360 karena ada elemen data dalam array ini di sini. 163 00:08:41,360 --> 00:08:53,420 164 00:08:53,420 --> 00:08:55,780 Jadi ini menciptakan banyak lingkaran karena ada unsur. 165 00:08:55,780 --> 00:08:58,520 Ini akan membuat kita tujuh lingkaran. 166 00:08:58,520 --> 00:09:01,710 Dan itu hal yang benar-benar penting. 167 00:09:01,710 --> 00:09:02,460 Jadi mari kita jalankan itu. 168 00:09:02,460 --> 00:09:05,460 Mari kita menghapus lingkaran kami yang lain. 169 00:09:05,460 --> 00:09:09,565 Mari kita komentar ini berpisah dan menjalankan ini lagi. 170 00:09:09,565 --> 00:09:13,840 171 00:09:13,840 --> 00:09:15,260 >> Di sana kami pergi. 172 00:09:15,260 --> 00:09:18,030 Jadi lingkaran kami di sini adalah banyak gelap, karena kami 173 00:09:18,030 --> 00:09:20,720 memiliki tujuh lingkaran, satu di atas yang lain. 174 00:09:20,720 --> 00:09:25,425 Kami hanya menciptakan tujuh lingkaran, satu masing-masing untuk masing-masing elemen data tersebut. 175 00:09:25,425 --> 00:09:28,860 Tapi ada hal penting yang terjadi dengan potongan ini di sini. 176 00:09:28,860 --> 00:09:31,030 >> Ini data terikat. 177 00:09:31,030 --> 00:09:33,440 Jadi setiap satu dari unsur-unsur data, 178 00:09:33,440 --> 00:09:38,830 10, 45, 105, adalah terikat untuk lingkaran tertentu. 179 00:09:38,830 --> 00:09:40,960 Jadi ini tidak hanya menciptakan sekelompok lingkaran 180 00:09:40,960 --> 00:09:43,420 tetapi mengikat kedua hal bersama-sama. 181 00:09:43,420 --> 00:09:48,740 >> Dan di masa depan, karena kita diciptakan lingkaran-lingkaran dengan fungsi D3 ini, 182 00:09:48,740 --> 00:09:52,430 jika saya memberi Anda sebuah lingkaran, Anda dapat memberikan data yang terkait dengan itu. 183 00:09:52,430 --> 00:09:53,280 Jadi kita bisa meminta D3. 184 00:09:53,280 --> 00:09:54,840 Hei, D3, saya punya lingkaran ini. 185 00:09:54,840 --> 00:09:57,350 Apa data bahwa lingkaran memiliki? 186 00:09:57,350 --> 00:10:01,290 Dan D3 akan memberitahu kita 10 atau 45 atau 105. 187 00:10:01,290 --> 00:10:02,380 >> Hal-hal ini terikat. 188 00:10:02,380 --> 00:10:04,490 Itu konsep yang sangat, sangat mendasar. 189 00:10:04,490 --> 00:10:06,070 Mari kita lihat itu. 190 00:10:06,070 --> 00:10:12,210 >> Jadi cara kita akan bertanya D3-- sehingga ini tidak relevan untuk ini, 191 00:10:12,210 --> 00:10:16,620 tapi hanya percaya padaku itu. 192 00:10:16,620 --> 00:10:17,620 Ini adalah bagaimana kita meminta D3. 193 00:10:17,620 --> 00:10:21,312 Hei, D3, beri aku yang pertama lingkaran yang dapat Anda temukan. 194 00:10:21,312 --> 00:10:23,580 Beri aku lingkaran pertama Anda dapat menemukan. 195 00:10:23,580 --> 00:10:29,660 Dan kemudian kita bisa meminta D3, apa data pada itu, seperti ini, 10. 196 00:10:29,660 --> 00:10:33,380 >> Jadi kami hanya meminta D3, menemukan saya lingkaran pertama Anda dapat menemukan. 197 00:10:33,380 --> 00:10:34,400 Apa datanya? 198 00:10:34,400 --> 00:10:36,650 10, yang memang kami elemen data pertama. 199 00:10:36,650 --> 00:10:42,150 Kita bisa menanyakannya, hei, D3, menemukan kami lingkaran ketiga. 200 00:10:42,150 --> 00:10:44,450 105. 201 00:10:44,450 --> 00:10:45,740 Mengapa ini sangat penting? 202 00:10:45,740 --> 00:10:49,790 203 00:10:49,790 --> 00:10:52,250 >> Jadi di sini, saya sebutkan bahwa kita bisa menggunakan fungsi. 204 00:10:52,250 --> 00:10:54,910 Dan saya sebutkan itu hal yang sangat kuat. 205 00:10:54,910 --> 00:11:03,070 Jadi tidak hanya bisa fungsi kita melakukan hal-hal seperti melakukan perhitungan, misalnya, 206 00:11:03,070 --> 00:11:09,170 mengembalikan nomor acak, dapat juga melakukan hal-hal yang didasarkan pada data. 207 00:11:09,170 --> 00:11:11,550 Inilah yang didorong data dokumen berarti. 208 00:11:11,550 --> 00:11:13,750 Itulah yang D3 singkatan. 209 00:11:13,750 --> 00:11:17,800 >> Jadi ini bukan x postition-- hanya mengatakan, semua kalangan, 210 00:11:17,800 --> 00:11:21,735 mendapatkan posisi x 200, kami bisa memberikan fungsi. 211 00:11:21,735 --> 00:11:26,140 212 00:11:26,140 --> 00:11:30,140 Dan di sini, kita bisa membuat beberapa perhitungan. 213 00:11:30,140 --> 00:11:33,710 dan d sini berdiri di tempat untuk data. 214 00:11:33,710 --> 00:11:36,120 Jadi setiap kali kita memiliki lingkaran, pada dasarnya, 215 00:11:36,120 --> 00:11:37,750 D3 akan membuat tujuh lingkaran tersebut. 216 00:11:37,750 --> 00:11:38,500 Dan kemudian untuk setiap 217 00:11:38,500 --> 00:11:41,920 >> lingkaran, itu akan pergi, hei, circle1 apa posisi x Anda. 218 00:11:41,920 --> 00:11:45,210 Sebelumnya, kami selalu menjawab 200. 219 00:11:45,210 --> 00:11:48,630 Tapi sekarang, setiap kali D3 meminta apa posisi x Anda, 220 00:11:48,630 --> 00:11:51,790 itu akan memberikan us-- kami lingkaran itu, sehingga kita memiliki data. 221 00:11:51,790 --> 00:11:55,290 Ini akan memberi kita data dan berkata, apa yang Anda inginkan eksposisi menjadi, 222 00:11:55,290 --> 00:11:57,120 berdasarkan data tersebut. 223 00:11:57,120 --> 00:11:59,590 >> Mari kita mengembalikan data aktual. 224 00:11:59,590 --> 00:12:04,910 Jadi jika kita menjalankan ini, ini memberikan Data kami didorong dokumen. 225 00:12:04,910 --> 00:12:08,040 Lingkaran ini didasarkan sehubungan position-- 226 00:12:08,040 --> 00:12:11,120 mereka basis sebagai fungsi dari data. 227 00:12:11,120 --> 00:12:13,100 >> Jadi untuk lingkaran pertama, D3 menempatkan lingkaran. 228 00:12:13,100 --> 00:12:16,770 Dan kemudian D3 meminta kita, apa yang Anda ingin eksposisi menjadi. 229 00:12:16,770 --> 00:12:19,620 Dan kita hanya mengatakan, apa pun data yang. 230 00:12:19,620 --> 00:12:21,185 Membuat eksposisi 10. 231 00:12:21,185 --> 00:12:26,320 >> Kemudian bertanya, apa yang Anda ingin eksposisi menjadi untuk lingkaran kedua. 232 00:12:26,320 --> 00:12:27,270 Dan kita menjawab, 45. 233 00:12:27,270 --> 00:12:30,000 234 00:12:30,000 --> 00:12:32,230 Dan kami, tentu saja, bisa membuat beberapa perhitungan di sini. 235 00:12:32,230 --> 00:12:35,510 Saya menemukan bahwa orang-orang lingkaran adalah jenis squished up. 236 00:12:35,510 --> 00:12:38,965 >> Jadi kalikan dengan 3, kalikan data dengan 3. 237 00:12:38,965 --> 00:12:41,870 238 00:12:41,870 --> 00:12:43,840 Lingkaran kami baru saja diperluas keluar. 239 00:12:43,840 --> 00:12:46,730 Nilai kami tiga kali lipat. 240 00:12:46,730 --> 00:12:51,010 >> Lingkaran ini benar-benar di tepi, jadi mari kita mungkin jenis mengimbangi itu. 241 00:12:51,010 --> 00:12:53,632 Katakanlah, 20. 242 00:12:53,632 --> 00:12:56,070 Di sini Anda pergi. 243 00:12:56,070 --> 00:12:57,590 >> Ini adalah visualisasi data. 244 00:12:57,590 --> 00:13:01,767 Ini adalah salah satu yang sangat dasar, tapi ini memberi kita wawasan tentang data kami. 245 00:13:01,767 --> 00:13:04,600 Ini memberitahu kita bahwa, misalnya, kita memiliki kelompok kecil elemen. 246 00:13:04,600 --> 00:13:06,340 Dan kami memiliki outlier besar di sini. 247 00:13:06,340 --> 00:13:10,830 Ini memberikan kita beberapa informasi tentang distribusi. 248 00:13:10,830 --> 00:13:20,830 >> Jika kita, misalnya, untuk mengubah data sampai 150 di sini dan refresh, 249 00:13:20,830 --> 00:13:22,630 visualisasi kita berubah. 250 00:13:22,630 --> 00:13:24,285 Dokumen ini adalah data didorong. 251 00:13:24,285 --> 00:13:32,640 252 00:13:32,640 --> 00:13:36,180 >> Jadi tentu saja, semua elemen, semua atribut ini di sini, 253 00:13:36,180 --> 00:13:38,430 kita dapat menggunakan fungsi, tidak hanya nomor, bukan hanya 254 00:13:38,430 --> 00:13:39,900 x dan y posisi. 255 00:13:39,900 --> 00:13:42,120 Jadi kita bisa menggunakan fungsi untuk warna. 256 00:13:42,120 --> 00:13:45,260 257 00:13:45,260 --> 00:13:46,360 Jadi kita akan melakukan hal yang sama. 258 00:13:46,360 --> 00:13:49,360 Kami akan memberikan fungsi. 259 00:13:49,360 --> 00:13:52,320 >> Dan katakanlah, kita bisa memiliki conditional dalam fungsi kita. 260 00:13:52,320 --> 00:13:54,770 Fungsi ini dapat ratusan garis panjang. 261 00:13:54,770 --> 00:13:57,150 Hal ini dapat melakukan hal-hal yang sangat, sangat rumit. 262 00:13:57,150 --> 00:13:59,080 >> Jadi mari kita jika pernyataan di sini. 263 00:13:59,080 --> 00:14:03,420 Katakanlah, jika data kami kurang dari 50, itu beberapa ambang 264 00:14:03,420 --> 00:14:05,817 bahwa kami tertarik di untuk beberapa alasan. 265 00:14:05,817 --> 00:14:06,650 Mari kita membuatnya hijau. 266 00:14:06,650 --> 00:14:09,830 267 00:14:09,830 --> 00:14:15,320 Jika tidak, mari kita membuatnya merah. 268 00:14:15,320 --> 00:14:16,110 Bagaimana? 269 00:14:16,110 --> 00:14:19,630 270 00:14:19,630 --> 00:14:21,220 Nice. 271 00:14:21,220 --> 00:14:24,860 >> Jadi visualisasi data kami mulai untuk menyampaikan informasi yang lebih menarik 272 00:14:24,860 --> 00:14:26,727 pada banyak saluran. 273 00:14:26,727 --> 00:14:28,560 Jadi sekarang kita tahu sedikit tentang distribusi. 274 00:14:28,560 --> 00:14:31,768 Dan kita tahu bahwa ada beberapa jenis memotong di 50 yang kita tertarik. 275 00:14:31,768 --> 00:14:35,630 Kita tahu bahwa ada dua titik data di bawah ambang batas itu dan sebagian besar dari mereka 276 00:14:35,630 --> 00:14:36,130 di atas. 277 00:14:36,130 --> 00:14:41,510 278 00:14:41,510 --> 00:14:46,160 >> Jadi sebagai langkah terakhir, data ini di sini, itu sangat jarang untuk melihat ini seperti itu. 279 00:14:46,160 --> 00:14:52,610 Jadi mari kita bergerak ke variabel karena itulah bersih, seperti ini. 280 00:14:52,610 --> 00:15:02,980 281 00:15:02,980 --> 00:15:05,197 Dan kemudian kita menggunakan variabel itu di sini. 282 00:15:05,197 --> 00:15:06,280 Ini hal yang sama persis. 283 00:15:06,280 --> 00:15:07,280 Ini hanya sedikit lebih bersih. 284 00:15:07,280 --> 00:15:25,300 285 00:15:25,300 --> 00:15:35,300 >> Berikutnya, Babak III, Scales-- Jadi satu masalah yang tepat 286 00:15:35,300 --> 00:15:38,920 di sini adalah, jika kita mengubah kami Data di 200 value-- ini 287 00:15:38,920 --> 00:15:41,685 jika kita mengubahnya ke 400 atau sesuatu dan refresh, 288 00:15:41,685 --> 00:15:44,540 maka nilai ini hanya pergi offscreen. 289 00:15:44,540 --> 00:15:49,040 Jadi logika kita di sini bagaimana kita melakukan kali 3 290 00:15:49,040 --> 00:15:52,570 dan 20, untuk menyebar keluar dan kemudian mengimbangi sedikit benar-benar kikuk. 291 00:15:52,570 --> 00:15:54,150 >> Apa artinya angka-angka? 292 00:15:54,150 --> 00:15:55,400 Mereka hanya sulit kode di sana. 293 00:15:55,400 --> 00:15:58,830 Dan mereka sangat terikat dengan data. 294 00:15:58,830 --> 00:16:00,550 Kami ingin dokumen didorong data. 295 00:16:00,550 --> 00:16:05,460 Kami ingin dokumen yang sangat fleksibel, bahwa data yang diberikan, menyesuaikan dengan itu 296 00:16:05,460 --> 00:16:07,900 dan mewakili itu. 297 00:16:07,900 --> 00:16:11,330 >> Apa yang kita butuhkan adalah pada dasarnya, kita memiliki rentang angka 10. 298 00:16:11,330 --> 00:16:12,640 45, 105. 299 00:16:12,640 --> 00:16:17,630 Dan kami ingin memetakan bahwa keluar ke lebar, lebar penuh di sini. 300 00:16:17,630 --> 00:16:20,620 Jadi kita memiliki kisaran nomor akan dari 0 sampai 100. 301 00:16:20,620 --> 00:16:24,980 Dan kami memiliki kampus ini saya pergi 20-700, dalam hal ini. 302 00:16:24,980 --> 00:16:26,515 >> Kami semacam ingin memetakan bahwa pada. 303 00:16:26,515 --> 00:16:30,002 Kami ingin skala yang dan kemudian diimbangi itu sedikit. 304 00:16:30,002 --> 00:16:33,165 Ternyata D3 memiliki ini. 305 00:16:33,165 --> 00:16:34,220 Ini disebut skala. 306 00:16:34,220 --> 00:16:37,410 307 00:16:37,410 --> 00:16:38,250 Jadi mari kita menggunakannya. 308 00:16:38,250 --> 00:16:46,300 309 00:16:46,300 --> 00:16:49,670 >> Cara yang works-- aku akan ketik ini dan kemudian menjelaskannya. 310 00:16:49,670 --> 00:17:01,530 311 00:17:01,530 --> 00:17:02,450 Ini adalah skala. 312 00:17:02,450 --> 00:17:08,670 Apa yang akan Anda lakukan adalah, ia akan memetakan nilai 1-200 pada 20-600. 313 00:17:08,670 --> 00:17:10,990 Kita bisa memeriksa itu. 314 00:17:10,990 --> 00:17:13,329 Kita bisa melihat bahwa di sini. 315 00:17:13,329 --> 00:17:21,704 >> Jadi jika saya makan itu 1-- satu saat. 316 00:17:21,704 --> 00:17:47,764 317 00:17:47,764 --> 00:17:48,555 Beri aku satu detik. 318 00:17:48,555 --> 00:17:53,680 319 00:17:53,680 --> 00:17:55,080 Aku pasti salah tulis itu. 320 00:17:55,080 --> 00:18:15,320 321 00:18:15,320 --> 00:18:15,990 Ini dia. 322 00:18:15,990 --> 00:18:17,930 Aku minta maaf soal itu. 323 00:18:17,930 --> 00:18:22,050 >> Jadi apa skala akan melakukan adalah, ia akan mengambil nilai 324 00:18:22,050 --> 00:18:24,930 dan kemudian mengubah itu, memperluas hal itu, sehingga 325 00:18:24,930 --> 00:18:27,320 mengisi berbagai yang Anda minta. 326 00:18:27,320 --> 00:18:32,910 Jadi dalam hal ini, jika kita memberikan satu, itu akan memetakan bahwa keluar ke 20. 327 00:18:32,910 --> 00:18:37,750 Dan jika kita memberikan 200, itu akan memetakan bahwa pada 600. 328 00:18:37,750 --> 00:18:40,460 Dan di suatu tempat di antara, jika kita mendapatkan 100, itu 329 00:18:40,460 --> 00:18:44,610 akan berada di suatu tempat di antara 20 dan 600. 330 00:18:44,610 --> 00:18:51,480 >> Dan tentu saja, sekarang ini adalah apa yang kita perlu untuk menghapus dikode 331 00:18:51,480 --> 00:18:53,402 hal yang harus kita di sana. 332 00:18:53,402 --> 00:18:55,950 Jadi apa yang ingin kita lakukan adalah mengambil data yang kita 333 00:18:55,950 --> 00:19:00,950 mengingat, bahwa data individu elemen, dan menyebarkannya untuk skala pertama. 334 00:19:00,950 --> 00:19:02,635 Jadi skala akan skala itu. 335 00:19:02,635 --> 00:19:27,020 336 00:19:27,020 --> 00:19:48,880 >> Well-- Oh, kami memiliki kesalahan kecil di sini. 337 00:19:48,880 --> 00:19:50,120 Kita kehilangan data. 338 00:19:50,120 --> 00:19:51,290 Ini dia. 339 00:19:51,290 --> 00:19:58,550 340 00:19:58,550 --> 00:19:59,550 Dan yang memperluas keluar. 341 00:19:59,550 --> 00:20:01,383 >> Yang memberi kita sama Hasil yang kami miliki sebelumnya, 342 00:20:01,383 --> 00:20:04,030 tapi bukannya memiliki mereka sulit kode kendala. 343 00:20:04,030 --> 00:20:07,790 Dan jika ukuran kami perubahan kanvas, misalnya, 344 00:20:07,790 --> 00:20:11,790 jika kita ingin memiliki lebih dari ini 400 piksel dan squishes keluar, 345 00:20:11,790 --> 00:20:15,440 kita dapat memilikinya over-- kita dapat memperluas, atau kita 346 00:20:15,440 --> 00:20:21,890 dapat mengurangi marjin kiri ini sesuatu yang kurang atau lebih dari 20. 347 00:20:21,890 --> 00:20:25,470 Angka-angka ini, ini dikode angka sekarang masuk akal bagi kita. 348 00:20:25,470 --> 00:20:28,110 349 00:20:28,110 --> 00:20:30,520 >> Dan kita bisa melakukan lebih banyak hal yang menarik juga. 350 00:20:30,520 --> 00:20:35,990 Jadi, bukannya memiliki linear skala, kita mungkin ingin log skala. 351 00:20:35,990 --> 00:20:37,840 Dan itu akan memberi kita skala log. 352 00:20:37,840 --> 00:20:41,269 >> Jadi sekarang skala kita, bukan hanya memperluas jangkauan keluar itu, 353 00:20:41,269 --> 00:20:42,810 itu melakukan hal-hal yang lebih canggih. 354 00:20:42,810 --> 00:20:48,790 355 00:20:48,790 --> 00:20:53,790 Alih-alih memiliki kisaran ini sulit kode, dan alih-alih memiliki yang 600, 356 00:20:53,790 --> 00:20:58,465 kita mungkin ingin hanya menggunakan lebar, sehingga dari 20 sampai lebar minus 40, 357 00:20:58,465 --> 00:21:02,392 2 kali margin di sisi lain. 358 00:21:02,392 --> 00:21:05,350 Dan ini membuat lebih banyak akal untuk seseorang yang mungkin melihat kode. 359 00:21:05,350 --> 00:21:08,080 360 00:21:08,080 --> 00:21:11,850 >> Menariknya, timbangan mendapatkan sangat, sangat canggih juga. 361 00:21:11,850 --> 00:21:13,350 Mereka melakukan banyak hal yang menarik. 362 00:21:13,350 --> 00:21:17,620 Jadi sisik tidak perlu harus untuk beroperasi hanya dengan angka. 363 00:21:17,620 --> 00:21:18,955 Mari kita membuat skala warna. 364 00:21:18,955 --> 00:21:23,120 365 00:21:23,120 --> 00:21:26,120 >> Jadi jangkauan kami bisa be-- domain kami adalah 1 sampai 200. 366 00:21:26,120 --> 00:21:28,220 Itulah hal masukan. 367 00:21:28,220 --> 00:21:33,793 Tapi kita mungkin ingin untuk memetakan dari hijau ke merah, misalnya. 368 00:21:33,793 --> 00:21:39,710 369 00:21:39,710 --> 00:21:42,910 Dan sekarang, jika kita lulus 1, kita akan mendapatkan hijau. 370 00:21:42,910 --> 00:21:45,110 Jika kita memberikan 200, kita akan mendapatkan merah. 371 00:21:45,110 --> 00:21:49,480 Dan jika kita melewati sesuatu di antara, itu akan ada beberapa campuran itu, 372 00:21:49,480 --> 00:21:52,520 di suatu tempat di gradien antara hijau dan merah. 373 00:21:52,520 --> 00:21:55,210 >> Dan bukannya memiliki semacam ini logika kikuk 374 00:21:55,210 --> 00:21:58,550 kita miliki di sini dengan bersyarat di sana, 375 00:21:58,550 --> 00:22:03,250 kita bisa memiliki sebuah something-- skala linier antara mereka. 376 00:22:03,250 --> 00:22:07,100 Jadi kita akan menggunakan skala kita hanya dibuat, yang kami sebut warna. 377 00:22:07,100 --> 00:22:09,060 Dan kami akan memberikan d, yang adalah elemen data kami. 378 00:22:09,060 --> 00:22:14,250 379 00:22:14,250 --> 00:22:15,060 Dan di sana kita pergi. 380 00:22:15,060 --> 00:22:18,070 Kami memiliki skala warna. 381 00:22:18,070 --> 00:22:18,940 >> Jadi ini adalah pemetaan. 382 00:22:18,940 --> 00:22:20,960 Jadi paling kiri benar-benar hijau. 383 00:22:20,960 --> 00:22:22,560 Paling kanan benar-benar merah. 384 00:22:22,560 --> 00:22:24,828 Dan segala sesuatu di antara adalah fungsi dari d. 385 00:22:24,828 --> 00:22:33,369 386 00:22:33,369 --> 00:22:35,160 Kami memiliki menarik visualisasi di sini. 387 00:22:35,160 --> 00:22:36,952 Tapi data kami agak membosankan. 388 00:22:36,952 --> 00:22:39,410 Mari kita lihat apa yang bisa kita lakukan jika kami memiliki data yang lebih menarik. 389 00:22:39,410 --> 00:22:44,420 390 00:22:44,420 --> 00:22:50,500 >> Undang-Undang IV, Dengan Kerja Data-- hal pertama 391 00:22:50,500 --> 00:22:53,560 kita akan ingin lakukan untuk membuat kita visualisasi lebih menarik 392 00:22:53,560 --> 00:22:56,140 adalah untuk memindahkan data di tempat lain. 393 00:22:56,140 --> 00:22:58,310 Ini sangat kikuk untuk memiliki data sulit kode sini. 394 00:22:58,310 --> 00:23:01,220 Dan umumnya, kami akan meminta orang lain untuk data. 395 00:23:01,220 --> 00:23:05,400 Kami akan mungkin meminta pemerintah, Biro Sensus, apa data Anda 396 00:23:05,400 --> 00:23:10,170 dan kemudian merencanakan itu atau meminta beberapa entitas pihak ketiga untuk beberapa data 397 00:23:10,170 --> 00:23:13,330 dan kemudian membangun visualisasi itu. 398 00:23:13,330 --> 00:23:17,170 >> Jadi hal pertama yang kita ingin lakukan adalah langkah yang ke tempat lain. 399 00:23:17,170 --> 00:23:24,130 Jadi aku akan membuat mengajukan sini disebut data.json. 400 00:23:24,130 --> 00:23:25,600 JSON adalah format data. 401 00:23:25,600 --> 00:23:29,210 Anda tidak perlu tahu banyak tentang itu. 402 00:23:29,210 --> 00:23:33,210 Dan kita akan menyalin sedikit data yang kita miliki di sana, 403 00:23:33,210 --> 00:23:40,330 paste di sana verbatim, pergi kembali ke kode visualisasi kami 404 00:23:40,330 --> 00:23:45,362 di sini, dan menggunakan fungsi ini di sini. 405 00:23:45,362 --> 00:23:46,820 Anda tidak perlu tahu rincian. 406 00:23:46,820 --> 00:23:49,800 Tapi apa ini akan lakukan adalah, ia akan menemukan file tersebut, 407 00:23:49,800 --> 00:23:51,780 mengambilnya, dan mengembalikannya kepada kami. 408 00:23:51,780 --> 00:24:11,660 409 00:24:11,660 --> 00:24:15,220 Jadi apa yang dilakukan adalah, ia pergi dan mendapatkan file data.json. 410 00:24:15,220 --> 00:24:18,570 Dan kemudian semua kode yang menjorok inside-- dasarnya, 411 00:24:18,570 --> 00:24:21,800 semua kode yang kita miliki besar-- akan menjalankan hanya ketika kita mendapatkan data kembali. 412 00:24:21,800 --> 00:24:25,760 Dan kemudian itu akan menjalankan bahwa kode dengan data yang kita miliki. 413 00:24:25,760 --> 00:24:28,870 Besar, kita memiliki visualisasi yang query 414 00:24:28,870 --> 00:24:31,390 untuk beberapa kode di suatu tempat lain, yang biasanya 415 00:24:31,390 --> 00:24:36,110 dimana query beberapa data dari di tempat lain, yang biasanya 416 00:24:36,110 --> 00:24:38,656 bagaimana visualisasi bekerja. 417 00:24:38,656 --> 00:24:41,400 >> Tapi aku ingin kembali ke data. 418 00:24:41,400 --> 00:24:48,030 Jadi data fundamental di D3-- D3 mengkonsumsi data yang adalah daftar hal-hal. 419 00:24:48,030 --> 00:24:53,000 D3 mengharapkan data hanya menjadi daftar hal, berbagai hal. 420 00:24:53,000 --> 00:24:58,780 Tidak peduli apa hal-hal adalah, asalkan itu array dari mereka. 421 00:24:58,780 --> 00:25:02,460 >> Jadi di sini, misalnya, kita bisa dari Tentu saja telah floating point nilai. 422 00:25:02,460 --> 00:25:04,830 Kita bisa negatif. 423 00:25:04,830 --> 00:25:09,400 D3 tidak peduli, asalkan seperti itu adalah daftar hal-hal. 424 00:25:09,400 --> 00:25:13,270 >> Hal-hal sebagaimana yang menarik kami bisa, kita bisa juga 425 00:25:13,270 --> 00:25:19,410 memiliki daftar string seperti itu. 426 00:25:19,410 --> 00:25:25,440 Jadi ini adalah berita Crimson Aku mengambil beberapa hari yang lalu. 427 00:25:25,440 --> 00:25:29,220 Dan mungkin Anda dapat menemukan beberapa menarik hal tentang ini sebuah berita. 428 00:25:29,220 --> 00:25:30,970 >> Jadi sekali lagi, ini adalah daftar hal-hal. 429 00:25:30,970 --> 00:25:32,360 D3 tidak peduli. 430 00:25:32,360 --> 00:25:35,572 Ini kebetulan string. 431 00:25:35,572 --> 00:25:36,530 Kami telah mengubah data kami. 432 00:25:36,530 --> 00:25:38,210 >> Mari kita kembali ke visualisasi kita. 433 00:25:38,210 --> 00:25:42,495 Sekarang, visualisasi kami mengharapkan input menjadi angka. 434 00:25:42,495 --> 00:25:44,370 Jadi kita akan memiliki untuk membuat beberapa perubahan. 435 00:25:44,370 --> 00:25:47,180 436 00:25:47,180 --> 00:25:52,180 Jadi misalnya, pertama-tama, mungkin kita ingin menempatkan lingkaran ini bersama 437 00:25:52,180 --> 00:25:56,870 dengan panjang judul, yang jumlah karakter dalam judul. 438 00:25:56,870 --> 00:26:03,600 >> Jadi apa yang akan kita lakukan is-- setiap kali kita Fungsi ini disebut dengan string, 439 00:26:03,600 --> 00:26:09,095 kita akan menemukan itu panjang dan kemudian mengirimkannya ke skala. 440 00:26:09,095 --> 00:26:11,550 Warna, saya akan kembali yang menjadi biru baja. 441 00:26:11,550 --> 00:26:19,060 442 00:26:19,060 --> 00:26:20,420 Dan di sana kita pergi. 443 00:26:20,420 --> 00:26:23,190 Kami memiliki visualisasi headline dari Crimson. 444 00:26:23,190 --> 00:26:25,500 >> Skala kami adalah sedikit off. 445 00:26:25,500 --> 00:26:29,680 Mari kita berasumsi bahwa terpanjang headline adalah 100 karakter, 446 00:26:29,680 --> 00:26:32,244 sehingga rentang yang keluar sedikit. 447 00:26:32,244 --> 00:26:33,410 Dan kami memiliki visualisasi. 448 00:26:33,410 --> 00:26:36,710 Jadi sepertinya bahwa sebagian besar berita utama cukup dekat bersama-sama, 449 00:26:36,710 --> 00:26:38,750 dalam hal baris karakter. 450 00:26:38,750 --> 00:26:41,200 Tapi satu benar-benar menonjol. 451 00:26:41,200 --> 00:26:46,660 >> Kita bisa membangun beberapa alat untuk mengeksplorasi bahwa lebih. 452 00:26:46,660 --> 00:26:50,710 Tapi ketika saya sedang mengerjakan ini, saya penasaran apakah, dalam kumpulan data ini, 453 00:26:50,710 --> 00:26:53,880 headline dengan titik dua di dalamnya akan lebih lama. 454 00:26:53,880 --> 00:26:55,770 Saya menganggap mereka akan. 455 00:26:55,770 --> 00:26:56,660 >> Jadi mari kita cari tahu. 456 00:26:56,660 --> 00:27:00,650 Mari kita gunakan warna channel seperti yang kami lakukan sebelumnya, 457 00:27:00,650 --> 00:27:04,540 untuk mengkodekan beberapa tentang apakah ada usus besar atau tidak. 458 00:27:04,540 --> 00:27:07,220 Jadi kita akan menggunakan kondisional lagi. 459 00:27:07,220 --> 00:27:09,350 Anda tidak harus tahu rincian ini, 460 00:27:09,350 --> 00:27:14,260 tapi ini adalah bagaimana kita memeriksa string untuk karakter tertentu 461 00:27:14,260 --> 00:27:16,355 dalam JavaScript, sekali lagi, tidak relevan. 462 00:27:16,355 --> 00:27:18,910 463 00:27:18,910 --> 00:27:23,270 >> Tetapi jika kita tidak menemukan usus besar, kami akan kembali hijau. 464 00:27:23,270 --> 00:27:26,100 Dan jika kita lakukan, kita akan kembali merah. 465 00:27:26,100 --> 00:27:29,010 Jadi sekali lagi, berita utama bahwa telah usus besar akan merah. 466 00:27:29,010 --> 00:27:34,980 Inilah yang ini means-- bagus. 467 00:27:34,980 --> 00:27:38,040 >> Jadi sepertinya bahwa saya hipotesis terbentur. 468 00:27:38,040 --> 00:27:39,360 Hanya ada dua. 469 00:27:39,360 --> 00:27:42,380 Kami hanya memiliki enam titik data dan hanya dua memiliki titik dua. 470 00:27:42,380 --> 00:27:45,510 Tapi tampaknya sedikit lebih di ujung bawah, pada kenyataannya. 471 00:27:45,510 --> 00:27:47,830 Headline dengan titik dua tampak secara umum lebih pendek, 472 00:27:47,830 --> 00:27:52,370 setidaknya dalam data kami set-- menarik. 473 00:27:52,370 --> 00:27:55,830 >> Mari kita kembali bahwa untuk baja biru dan kemudian melihat 474 00:27:55,830 --> 00:28:00,601 apa yang bisa kita buat dengan bahkan Data lebih menarik. 475 00:28:00,601 --> 00:28:04,370 476 00:28:04,370 --> 00:28:09,070 Jadi sekali lagi, saya menyebutkan bahwa Data di D3 adalah daftar hal-hal. 477 00:28:09,070 --> 00:28:11,080 Kami telah melihat jumlah banyak jenis. 478 00:28:11,080 --> 00:28:12,810 Kami telah melihat string. 479 00:28:12,810 --> 00:28:15,700 Namun hal ini juga bisa menjadi objek. 480 00:28:15,700 --> 00:28:20,080 >> Mereka bisa menjadi hal yang rumit yang mencakup banyak hal. 481 00:28:20,080 --> 00:28:24,510 Untuk mengatakan bahwa lebih jelas, dalam banyak kasus, kita 482 00:28:24,510 --> 00:28:28,384 ingin membangun setiap titik data lebih rumit dari sekedar satu nilai. 483 00:28:28,384 --> 00:28:30,175 Jika Anda akan membayangkan Database tentang siswa, 484 00:28:30,175 --> 00:28:32,470 mungkin ada mahasiswa nama, ID mahasiswa, 485 00:28:32,470 --> 00:28:36,370 dan banyak hal yang berhubungan dengan catatan tertentu, 486 00:28:36,370 --> 00:28:39,834 bukan hanya string atau nomor. 487 00:28:39,834 --> 00:28:40,750 Jadi mari kita lihat itu. 488 00:28:40,750 --> 00:28:55,180 489 00:28:55,180 --> 00:28:56,760 >> Ini adalah salah satu data tersebut ditetapkan. 490 00:28:56,760 --> 00:28:59,090 Ini adalah kumpulan data tentang gempa bumi. 491 00:28:59,090 --> 00:29:01,910 492 00:29:01,910 --> 00:29:08,430 Jadi semuanya di sini pada daftar atau array kami hal mengandung banyak hal sendiri. 493 00:29:08,430 --> 00:29:11,380 Jadi setiap titik data memiliki besarnya dan koordinat. 494 00:29:11,380 --> 00:29:13,425 Dan koordinat sendiri mengandung dua hal. 495 00:29:13,425 --> 00:29:15,960 496 00:29:15,960 --> 00:29:20,450 >> Jadi setiap hari sekarang lebih banyak rumit dan jauh lebih menarik 497 00:29:20,450 --> 00:29:22,700 dan mengandung lebih banyak Informasi yang menarik. 498 00:29:22,700 --> 00:29:26,730 Mari kita lihat kita bisa membangun dari itu. 499 00:29:26,730 --> 00:29:36,130 Kembali kembali ke sini, sekali lagi, menggunakan visualisasi histogram lingkaran kami 500 00:29:36,130 --> 00:29:42,110 kami telah membangun, mari kita lihat apakah kita bisa membangun visualisasi distribusi besarnya 501 00:29:42,110 --> 00:29:43,305 di set data kami. 502 00:29:43,305 --> 00:29:45,850 503 00:29:45,850 --> 00:29:48,660 >> Jadi di sini, itu adalah konsep yang sama. 504 00:29:48,660 --> 00:29:51,920 Tapi sekarang, d mengandung lebih banyak hal. 505 00:29:51,920 --> 00:29:54,780 d mengandung banyak elemen data. 506 00:29:54,780 --> 00:29:57,946 Jadi kita bisa d kembali. 507 00:29:57,946 --> 00:29:59,670 D3 memberi kita d. 508 00:29:59,670 --> 00:30:06,080 Dan kita menanggapi dengan mencari besarnya d dan kemudian melewati bahwa untuk skala. 509 00:30:06,080 --> 00:30:08,490 >> Dan kemudian kita perlu mengubah skala kami, tentu saja. 510 00:30:08,490 --> 00:30:12,980 Jadi besaran hanya tidak pergi lebih dari 10. 511 00:30:12,980 --> 00:30:15,485 Sebenarnya, ada tidak pernah gempa berkekuatan 10. 512 00:30:15,485 --> 00:30:19,360 Tapi itu semacam atas kami end, spektrum atas kami. 513 00:30:19,360 --> 00:30:20,240 >> Mari kita menyegarkan. 514 00:30:20,240 --> 00:30:22,990 Bagus, kami memiliki visualisasi. 515 00:30:22,990 --> 00:30:25,490 Sungguh menarik untuk note-- sehingga ada dua titik data yang 516 00:30:25,490 --> 00:30:29,010 hampir persis di atas satu sama lainnya, dalam hal besarnya. 517 00:30:29,010 --> 00:30:31,350 Anda melihat ini dengan opacity yang kita gunakan. 518 00:30:31,350 --> 00:30:40,810 519 00:30:40,810 --> 00:30:42,690 >> Kami memiliki data geografis sekarang. 520 00:30:42,690 --> 00:30:44,710 Kami memiliki lintang dan bujur. 521 00:30:44,710 --> 00:30:47,549 Mungkin kita bisa melakukan sesuatu yang jauh lebih menarik dengan itu. 522 00:30:47,549 --> 00:30:49,590 Mari kita cari lagi cara yang menarik untuk memvisualisasikan 523 00:30:49,590 --> 00:30:53,500 ini lebih rumit Data kita memiliki akses ke. 524 00:30:53,500 --> 00:31:04,950 >> Undang-Undang V, Mapping-- fundamental, kita ingin menempatkan ini pada peta. 525 00:31:04,950 --> 00:31:07,690 Maksudku, ini adalah di mana hal ini terjadi. 526 00:31:07,690 --> 00:31:13,130 Kami ingin mengkodekan informasi tentang posisi pembacaan gempa tersebut, 527 00:31:13,130 --> 00:31:16,350 serta besarnya mereka, karena kita memiliki itu sekarang. 528 00:31:16,350 --> 00:31:21,310 Kami memahami bagaimana mengkonsumsi Data lebih rumit. 529 00:31:21,310 --> 00:31:26,200 >> Hal pertama yang akan kita lakukan adalah membuat peta, peta latar belakang. 530 00:31:26,200 --> 00:31:29,360 Aku akan pergi melalui ini sangat cepat. 531 00:31:29,360 --> 00:31:30,560 Ini adalah kode rumit. 532 00:31:30,560 --> 00:31:33,110 Ini salah satu dari mereka resep Anda tidak benar-benar 533 00:31:33,110 --> 00:31:35,690 harus memahami sepenuhnya untuk Anda gunakan. 534 00:31:35,690 --> 00:31:38,510 535 00:31:38,510 --> 00:31:39,740 Tapi ini adalah kode. 536 00:31:39,740 --> 00:31:43,580 Kode ini di sini menciptakan peta. 537 00:31:43,580 --> 00:31:45,730 >> Kami tidak akan pergi secara rinci. 538 00:31:45,730 --> 00:31:54,210 Tapi dangkal, apa yang dilakukannya adalah, itu permintaan berkas us.json ini, yang 539 00:31:54,210 --> 00:31:57,150 adalah data file seperti yang kita miliki sebelumnya. 540 00:31:57,150 --> 00:31:59,150 Ini lebih kompleks, tentu saja. 541 00:31:59,150 --> 00:32:02,920 Tapi dalam kasus ini, segala sesuatu, setiap titik data negara ini 542 00:32:02,920 --> 00:32:05,420 dan memiliki daftar lintang dan bujur 543 00:32:05,420 --> 00:32:10,500 yang mendefinisikan poligon, bentuk yang, negara itu. 544 00:32:10,500 --> 00:32:13,280 >> Jadi apa D3 akan melakukan mirip dengan apa yang kita lakukan sebelumnya. 545 00:32:13,280 --> 00:32:18,140 Ini akan meminta dan mengikat bahwa untuk sebuah elemen. 546 00:32:18,140 --> 00:32:20,890 Dan ada fungsi yang akan memetakan elemen yang keluar, 547 00:32:20,890 --> 00:32:23,410 berdasarkan garis lintang dan bujur. 548 00:32:23,410 --> 00:32:24,580 Anda dapat membaca lebih lanjut tentang itu. 549 00:32:24,580 --> 00:32:27,385 Dan saya sarankan itu. 550 00:32:27,385 --> 00:32:30,090 >> Ada link di akhir kode ini diposting. 551 00:32:30,090 --> 00:32:31,570 Dan kode berkomentar. 552 00:32:31,570 --> 00:32:34,050 Dalam ada link untuk lebih lanjut tentang ini. 553 00:32:34,050 --> 00:32:36,590 Saya sarankan Anda mencarinya. 554 00:32:36,590 --> 00:32:39,460 Tapi apa yang kita pedulikan adalah Fungsi proyeksi ini. 555 00:32:39,460 --> 00:32:41,210 Aku ingin pergi melalui itu. 556 00:32:41,210 --> 00:32:43,522 >> Pertama-tama, mari saya tunjukkan Anda bahwa, ya, kita memiliki peta. 557 00:32:43,522 --> 00:32:47,300 558 00:32:47,300 --> 00:32:49,970 Maps yang keren. 559 00:32:49,970 --> 00:32:52,330 Jadi mari kita lihat ini fungsi produksi. 560 00:32:52,330 --> 00:32:56,481 >> Proyeksi sangat banyak seperti skala, skala lagi. 561 00:32:56,481 --> 00:32:59,210 Jadi apa yang produksi Fungsi proyeksi ini 562 00:32:59,210 --> 00:33:06,610 tidak adalah, kita bisa melewatinya bujur dan latitudes-- dalam hal ini, 563 00:33:06,610 --> 00:33:09,590 nilai-nilai di sini adalah lat-rindu bangunan 564 00:33:09,590 --> 00:33:13,990 Kami sedang duduk di sebelah kanan sekarang-- untuk proyeksi. 565 00:33:13,990 --> 00:33:20,560 Dan proyeksi akan mengkonversi yang menjadi nilai-nilai x dan y pixel. 566 00:33:20,560 --> 00:33:23,300 >> Jadi apa proyeksi yang dilakukan sangat mirip dengan skala kita. 567 00:33:23,300 --> 00:33:27,270 Ini mengambil lintang dan bujur yang mewakili seluruh dunia 568 00:33:27,270 --> 00:33:31,390 dan menyusut dan ukuran yang ke alun-alun yang kita inginkan, 569 00:33:31,390 --> 00:33:33,510 bahwa kita telah diberikan itu. 570 00:33:33,510 --> 00:33:35,220 Dalam hal ini, kami melewati nilai-nilai ini. 571 00:33:35,220 --> 00:33:41,370 Dan itu memberi kita, baik, bahwa pada layar Anda berarti 640 piksel. 572 00:33:41,370 --> 00:33:46,250 Seluruh layar ini adalah 700 piksel lebar, sehingga membuat kita di sini, 573 00:33:46,250 --> 00:33:53,310 dan 154 piksel ke bawah, yang saya akan Perkiraan ini cukup banyak di sini. 574 00:33:53,310 --> 00:33:57,250 >> Jadi mengambil orang-orang lat-rindu, yang mewakili sesuatu di seluruh dunia 575 00:33:57,250 --> 00:34:02,850 dan pemampatan dan bergerak bahwa sekitar untuk memberikan nilai x dan y pixel, 576 00:34:02,850 --> 00:34:05,450 ini adalah hal pertama yang dilakukan dalam kode pemetaan ini. 577 00:34:05,450 --> 00:34:07,920 Dan kemudian sisa kode mengkonsumsi data 578 00:34:07,920 --> 00:34:14,310 dan kemudian peta mereka lat-rindu ke sesuatu di layar Anda. 579 00:34:14,310 --> 00:34:18,380 >> Tapi kita akan menggunakan proyeksi ini fungsi, karena ternyata 580 00:34:18,380 --> 00:34:20,270 kami memiliki lat-rindu rindu juga. 581 00:34:20,270 --> 00:34:24,509 Melihat kembali data kami, kami memiliki lintang dan bujur 582 00:34:24,509 --> 00:34:25,425 untuk setiap pengamatan. 583 00:34:25,425 --> 00:34:28,131 584 00:34:28,131 --> 00:34:29,130 Jadi mari kita gunakan proyeksi. 585 00:34:29,130 --> 00:34:33,250 586 00:34:33,250 --> 00:34:37,639 >> Jadi melihat eksposisi kami, kami ingin exposition-- kami 587 00:34:37,639 --> 00:34:39,590 kami memiliki lintang dan bujur a. 588 00:34:39,590 --> 00:34:40,770 Tapi kami ingin nilai-nilai pixel. 589 00:34:40,770 --> 00:34:43,510 Dan ternyata, kita memiliki tepat apa yang kita want-- proyeksi. 590 00:34:43,510 --> 00:34:46,239 Sangat banyak seperti kami menggunakan skala di sini, 591 00:34:46,239 --> 00:34:52,075 kita sekarang akan menggunakan proyeksi dan menyebarkannya koordinat. 592 00:34:52,075 --> 00:34:55,241 593 00:34:55,241 --> 00:34:56,949 Jadi hal pertama kita doing-- jadi kita 594 00:34:56,949 --> 00:35:01,520 mendapatkan d, yang merupakan data individu unsur gempa individu 595 00:35:01,520 --> 00:35:02,370 sedang membaca. 596 00:35:02,370 --> 00:35:04,640 Hal pertama yang kita lakukan adalah mendapatkan koordinat. 597 00:35:04,640 --> 00:35:06,150 Baiklah, kita memiliki koordinat. 598 00:35:06,150 --> 00:35:09,160 >> Hal kedua yang kita lakukan adalah menyampaikan bahwa pada proyeksi. 599 00:35:09,160 --> 00:35:13,440 Proyeksi mengkonversi koordinat dalam nilai-nilai piksel, x dan y. 600 00:35:13,440 --> 00:35:16,680 Dan kemudian hal terakhir yang kita ingin lakukan adalah hanya mendapatkan x, 601 00:35:16,680 --> 00:35:19,342 hal ini adalah yang pertama. 602 00:35:19,342 --> 00:35:22,050 Ini adalah pertama dari dua hal yang dikembalikan oleh proyeksi. 603 00:35:22,050 --> 00:35:27,840 604 00:35:27,840 --> 00:35:29,630 >> Kami akan melakukan hal yang sama untuk y. 605 00:35:29,630 --> 00:35:34,960 Tapi sebaliknya, kita akan kembali elemen kedua, y. 606 00:35:34,960 --> 00:35:35,980 Bersiap-siap untuk me-refresh. 607 00:35:35,980 --> 00:35:39,830 608 00:35:39,830 --> 00:35:46,450 Ooh, karakter tambahan sini-baik, kita memiliki 609 00:35:46,450 --> 00:35:51,730 didorong data dokumen yang menyembunyikan file ini JSON objek, 610 00:35:51,730 --> 00:35:57,560 membuat peta, dan mengubah atribut dalam kaitannya dengan data 611 00:35:57,560 --> 00:35:59,600 untuk proyek itu pada peta. 612 00:35:59,600 --> 00:36:00,840 Ini benar-benar menarik. 613 00:36:00,840 --> 00:36:03,770 Ini keren. 614 00:36:03,770 --> 00:36:05,640 >> Mari kita itu membuat takik. 615 00:36:05,640 --> 00:36:08,795 Maksudku, kita memiliki dua buah informasi dengan setiap titik data. 616 00:36:08,795 --> 00:36:10,000 Maksudku, tiga. 617 00:36:10,000 --> 00:36:12,540 Kami memiliki koordinat, yang merupakan x dan y. 618 00:36:12,540 --> 00:36:15,700 Dan kami memiliki besarnya. 619 00:36:15,700 --> 00:36:17,420 >> Kita perlu untuk mengkodekan besarnya entah bagaimana. 620 00:36:17,420 --> 00:36:18,920 Kami memiliki banyak saluran. 621 00:36:18,920 --> 00:36:20,370 Kita bisa menggunakan warna. 622 00:36:20,370 --> 00:36:21,890 Kita bisa menggunakan jari-jari. 623 00:36:21,890 --> 00:36:23,040 Kita bisa menggunakan opacity. 624 00:36:23,040 --> 00:36:25,540 Kita bisa menggunakan banyak hal dalam kode. 625 00:36:25,540 --> 00:36:29,180 Setiap atribut ini dan banyak lebih yang tidak terdaftar di sana, 626 00:36:29,180 --> 00:36:33,065 karena mereka opsional, kita bisa digunakan untuk mengkodekan data ini, stroke 627 00:36:33,065 --> 00:36:35,670 dan semua hal-hal ini yang telah saya sebutkan. 628 00:36:35,670 --> 00:36:36,690 >> Mari kita lakukan radius. 629 00:36:36,690 --> 00:36:38,830 Saya pikir radius adalah yang paling intuitif. 630 00:36:38,830 --> 00:36:46,210 Jadi sekali lagi, kami akan mengganti yang keras-kode 40 dan membuat beberapa perhitungan. 631 00:36:46,210 --> 00:36:48,810 Kami akan menggunakan skala favorit kami lagi. 632 00:36:48,810 --> 00:36:50,290 Dan kami melewati d. 633 00:36:50,290 --> 00:36:55,850 Tapi tidak d karena kami ingin besarnya d. d hanyalah titik data. 634 00:36:55,850 --> 00:36:57,430 Kami akan melewati besarnya untuk skala. 635 00:36:57,430 --> 00:36:58,470 >> Mari kita coba lagi. 636 00:36:58,470 --> 00:37:00,230 Ooh, itu tidak bekerja. 637 00:37:00,230 --> 00:37:02,940 Mengapa tidak bekerja? 638 00:37:02,940 --> 00:37:04,387 >> Jadi ingat apa yang skala tidak. 639 00:37:04,387 --> 00:37:05,470 Mari kita lihat skala lagi. 640 00:37:05,470 --> 00:37:10,800 Peta skala 1 sampai 10 pada untuk 22-600, lebih atau kurang. 641 00:37:10,800 --> 00:37:12,030 600 sangat besar. 642 00:37:12,030 --> 00:37:14,730 Inilah sebabnya mengapa kita mendapatkan ini. 643 00:37:14,730 --> 00:37:18,420 >> Jadi kita ingin mengubah skala kami untuk sesuatu yang lebih masuk akal. 644 00:37:18,420 --> 00:37:22,610 Katakanlah, kita ingin 0-60. 645 00:37:22,610 --> 00:37:25,340 60 besar, namun gempa bumi 10 yang sangat langka. 646 00:37:25,340 --> 00:37:27,880 Bahkan, mereka tidak pernah terjadi. 647 00:37:27,880 --> 00:37:31,830 >> Jadi apa yang akan Anda lakukan adalah, itu akan membawa besarnya kami yang berlangsung dari 1 sampai 10 648 00:37:31,830 --> 00:37:34,490 dan peta itu untuk memperluas itu. 649 00:37:34,490 --> 00:37:37,370 Dan peta itu ke 0 hingga 60. 650 00:37:37,370 --> 00:37:38,840 Mari kita menyegarkan. 651 00:37:38,840 --> 00:37:41,850 >> Bagus, kami memiliki visualisasi. 652 00:37:41,850 --> 00:37:42,500 Ini bagus. 653 00:37:42,500 --> 00:37:43,736 Ini adalah data yang sebenarnya. 654 00:37:43,736 --> 00:37:46,360 Anda akan melihat, dalam mainan kecilku Misalnya, gempa terbesar 655 00:37:46,360 --> 00:37:49,417 tepat di atas kita. 656 00:37:49,417 --> 00:37:50,000 Tapi hanya itu. 657 00:37:50,000 --> 00:37:54,422 Kami memiliki visualisasi tanggal didorong yang mengkonsumsi data 658 00:37:54,422 --> 00:37:56,255 dan memberi kita benar-benar Informasi yang menarik. 659 00:37:56,255 --> 00:38:02,600 660 00:38:02,600 --> 00:38:06,420 Ya, mari kita tambahkan beberapa interaktivitas untuk itu. 661 00:38:06,420 --> 00:38:08,675 Saya sebutkan itu kekuatan yang kuat dari D3. 662 00:38:08,675 --> 00:38:11,490 663 00:38:11,490 --> 00:38:15,060 >> Jadi di sini, untuk setiap elemen, kami menggambarkan sekelompok atribut. 664 00:38:15,060 --> 00:38:20,230 Tapi kita juga bisa menggambarkan apa yang kita inginkan terjadi dengan unsur-unsur interaktivitas. 665 00:38:20,230 --> 00:38:26,190 Sebagai contoh, kita bisa menggambarkan apa yang terjadi ketika kita mouse. 666 00:38:26,190 --> 00:38:28,740 667 00:38:28,740 --> 00:38:33,640 Dan sangat mirip itu, yang akan mengambil fungsi, 668 00:38:33,640 --> 00:38:36,700 sangat mirip dengan atribut kita miliki sebelumnya, 669 00:38:36,700 --> 00:38:44,650 di mana kita melakukan sesuatu untuk Unsur ketika kita membawa lebih dari itu. 670 00:38:44,650 --> 00:38:47,100 >> Jadi hal pertama yang perlu kita lakukan adalah memilih elemen itu, 671 00:38:47,100 --> 00:38:49,435 menemukannya pada dasarnya, dalam browser. 672 00:38:49,435 --> 00:38:57,090 673 00:38:57,090 --> 00:39:00,920 dan kemudian kita bisa mengatur atribut untuk itu. 674 00:39:00,920 --> 00:39:06,870 Jadi apa yang saya lakukan di sini adalah, ketika kita membawa atas sesuatu, kita akan mendapatkan elemen yang 675 00:39:06,870 --> 00:39:11,197 dan kemudian mengatur opacity kembali 1, untuk benar-benar buram. 676 00:39:11,197 --> 00:39:12,488 Mari kita lihat apa yang terlihat seperti. 677 00:39:12,488 --> 00:39:29,430 678 00:39:29,430 --> 00:39:39,080 >> Tampaknya kita memiliki koma tambahan di sini. 679 00:39:39,080 --> 00:39:42,420 Jadi jika kita membawa lebih dari sini, itu akan penuh. 680 00:39:42,420 --> 00:39:46,530 681 00:39:46,530 --> 00:39:48,960 Tapi sekarang, tentu saja, tetap penuh, karena kita 682 00:39:48,960 --> 00:39:53,240 harus menjelaskan apa yang terjadi ketika menghapus kursor kita. 683 00:39:53,240 --> 00:39:59,990 Jadi mari kita melakukan hal itu pada mouseout, sebagai lawan Gunaka mouse. 684 00:39:59,990 --> 00:40:06,399 >> Dan kita akan me-reset ke apa yang kita miliki before-- 0,5. 685 00:40:06,399 --> 00:40:10,260 Dan sekarang, setiap kali kita hover, kita mendapatkan lingkaran penuh. 686 00:40:10,260 --> 00:40:13,468 Ini membantu kita melihat apa yang kita kita memilih dasarnya. 687 00:40:13,468 --> 00:40:19,210 688 00:40:19,210 --> 00:40:22,860 >> Dan sekarang mari kita membuat ini benar-benar hebat. 689 00:40:22,860 --> 00:40:26,210 Mari kita menghubungkan ini ke data real. 690 00:40:26,210 --> 00:40:30,890 Jadi mari kita bertanya bisa USGS tentang data mereka. 691 00:40:30,890 --> 00:40:35,630 Jadi US Geological Survey memiliki data tentang gempa bumi. 692 00:40:35,630 --> 00:40:41,460 Mereka memiliki API publik yang mampu untuk dikonsumsi dalam format JSON. 693 00:40:41,460 --> 00:40:42,548 Jadi mari kita lakukan itu. 694 00:40:42,548 --> 00:40:49,730 695 00:40:49,730 --> 00:40:55,900 >> Jadi ini adalah sedikit kode yang menghubungkan ke USGS API. 696 00:40:55,900 --> 00:40:57,990 Dan ada sedikit pengolahan di atasnya. 697 00:40:57,990 --> 00:41:02,200 Hal ini tidak relevan tetapi menyederhanakan itu ke format data sederhana seperti yang 698 00:41:02,200 --> 00:41:03,800 kita miliki sebelumnya. 699 00:41:03,800 --> 00:41:08,140 Jadi saya menyingkirkan panggilan kita untuk data.json palsu kami pada file. 700 00:41:08,140 --> 00:41:13,110 Dan sebagai gantinya, aku menelepon USGS dasarnya. 701 00:41:13,110 --> 00:41:16,700 >> Mari kita menyegarkan, bagus. 702 00:41:16,700 --> 00:41:21,260 Hal ini sebenarnya, data real-hidup dari minggu ini untuk gempa bumi. 703 00:41:21,260 --> 00:41:23,217 Ini benar-benar menarik. 704 00:41:23,217 --> 00:41:25,050 Hal ini tidak mengherankan bagi kita, tetapi ada 705 00:41:25,050 --> 00:41:27,909 banyak gempa bumi di Pantai Barat di California. 706 00:41:27,909 --> 00:41:30,950 Tapi saya pikir itu sangat menarik bahwa ada begitu banyak gempa bumi 707 00:41:30,950 --> 00:41:34,350 di Alaska, dan tampaknya, di sini di Midwest. 708 00:41:34,350 --> 00:41:37,630 Maksudku, menarik, dan kita baik. 709 00:41:37,630 --> 00:41:40,410 Itulah kesimpulan. 710 00:41:40,410 --> 00:41:43,760 >> Tapi pada dasarnya, ini adalah apa D3 membantu kita lakukan. 711 00:41:43,760 --> 00:41:48,030 Ini membantu kita mengambil data, mengikat untuk elemen dalam DOM, 712 00:41:48,030 --> 00:41:51,620 dan memiliki unsur-unsur berubah sebagai fungsi dari data, 713 00:41:51,620 --> 00:41:54,780 memiliki atribut, semua banyak atribut elemen, 714 00:41:54,780 --> 00:41:57,393 semua akan berguna untuk saluran untuk menyampaikan informasi. 715 00:41:57,393 --> 00:42:05,440 716 00:42:05,440 --> 00:42:09,290 >> D3 adalah sangat kuat Perpustakaan dan luar biasa dikelola dengan baik. 717 00:42:09,290 --> 00:42:12,260 Ini adalah beberapa hal yang kuat. 718 00:42:12,260 --> 00:42:15,960 Visualisasi data adalah alat yang sangat kuat 719 00:42:15,960 --> 00:42:21,530 untuk menyampaikan kepada orang-orang yang mendalam wawasan yang sampai ke inti mereka 720 00:42:21,530 --> 00:42:25,430 dan membantu mereka memahami, di secara mendalam dan intuitif, 721 00:42:25,430 --> 00:42:29,760 bagaimana data bekerja dan bagaimana Data mengubah hidup kita. 722 00:42:29,760 --> 00:42:31,019