>> [MUSIC PLAYING]
>> DAVID Chouinard: Saya David Chouinard, dan ini adalah D3.
Selamat Datang.
Kita akan belajar tentang D3 hari ini.
D3 adalah kerangka JavaScript untuk membangun kualitas tinggi
visualisasi interaktif untuk web.
Hal-hal seperti apa yang kita melihat di belakang saya,
kita akan belajar untuk membuat mereka hal, seperti dasar-dasar itu.
Tapi itu akan menjadi dingin.
Mari kita mulai membuat gambar-gambar cantik.
Kami punya lebih banyak demo prospek yang tersedia.
Mari kita lakukan.
>> Babak I, DOM manipulation-- kita akan untuk memulai segera membuat hal-hal keren.
Pertama-tama, di sebelah kiri, kita memiliki kode.
Di sebelah kanan, kita memiliki hasil dari kode kita.
Mari kita pergi melalui itu.
>> Mari kita membuat lingkaran.
Bagaimana menurutmu?
svg.append circle-- Kami hanya membuat lingkaran.
Anda tidak percaya padaku, kan?
Ini tidak ada.
>> Jadi apa yang kita lakukan di sini adalah, SVG adalah scalable vector graphics.
Ini adalah cara kita memberitahu browser untuk membuat grafis vektor dalam browser.
Apa yang baru saja kita lakukan sekarang ditambahkan lingkaran untuk browsing.
>> Janji adalah bahwa lingkaran memerlukan sedikit atribut dasar
sebelum kita benar-benar bisa melihatnya.
Kita perlu menceritakannya posisi x nya, posisi y nya, jari-jarinya.
Kami tidak mengatakan itu semua itu, jadi kita tidak melihat hal itu sekarang.
Tapi mari kita kirim barang.
>> Jadi pertama-tama, Anda punya untuk memberi nama lingkaran kami.
Jadi mari kita menyebutnya lingkaran.
Lingkaran kami memiliki nama sekarang.
Dan mari kita memberikan beberapa atribut.
Bagaimana cx akan memusatkan x, sehingga pusat posisi x.
Katakanlah, 200 untuk 200 piksel.
>> Mari kita memberikan y 200 piksel juga.
Dan r, radius, sekitar 40 piksel.
Sekarang mari kita lihat.
Saya tidak bisa mengeja.
>> Ini dia.
Kami memiliki lingkaran pada posisi 200 pixel, 200 pixel, radius 40 piksel.
Jenis dingin, kan?
Kami memiliki lingkaran.
Ya.
>> Jadi tidak perlu untuk mengikuti.
Semua contoh-contoh ini, semua kode saya lakukan hari
akan disediakan secara online pada akhir dalam bentuk contoh interaktif
dengan pos-pos pemeriksaan di setiap tindakan, dan sebagainya.
>> Mari kita lakukan lebih banyak barang.
Lingkaran hitam ini benar-benar jelek.
Saya minta maaf untuk kesalahan yang pesan di sana.
Di sana kami pergi.
>> Mari kita memberikan warna.
Bagaimana?
Saya ingin biru baja.
Nah, lingkaran kami berubah warna.
Itu bagus.
Mari kita membuat semi-transparan too-- semi-transparan.
>> Jadi ini adalah atribut kita mendefinisikan pada lingkaran.
Hal pertama yang kita lakukan adalah kami menempatkan lingkaran pada halaman.
Dan kemudian kita mendefinisikan sekelompok atribut.
Beberapa di antaranya yang diperlukan, seperti CX, CY, dan Radius.
Dan lain-lain adalah opsional.
>> Ada lebih banyak atribut.
Ada banyak dari mereka.
Sebagai contoh, kita bisa memiliki Stroke juga, stroke merah.
Tapi mari kita hapus itu.
Kami kembali ke lingkaran, lingkaran biru.
>> Jadi mari kita membuat lebih banyak kalangan.
Bagaimana?
Mari kita membuat lingkaran lain.
Ini menarik, kan?
>> Jadi mengatakan saya hanya Copy-Disisipkan apa yang kita miliki sudah.
Sebut saja circle2.
Dan mari kita lakukan yang tepat hal yang sama dan memberikan
atribut, mengingat posisi x 300.
Yay, kita memiliki dua lingkaran sekarang.
>> Dan tentu saja, kita bisa memperbarui nilai-nilai ini.
Aku bisa meletakkannya di 400, dan sekarang bergerak.
Dan karena itu mengganggu, mari kita menghapusnya, sehingga circle2.remove.
Ini sudah pergi sekarang.
>> Jadi apa yang kita lakukan dan hanya sangat, very-- ini
sangat mirip dengan apa yang Anda mungkin dilakukan di jQuery, misalnya.
Kami hanya memanipulasi DOM, itu disebut.
Anda mungkin pernah mendengar kata itu sebelumnya.
Kami sedang menciptakan hal-hal, pengaturan atribut pada hal-hal, menghapus hal-hal.
>> Sekarang, di sinilah mulai menarik.
Jadi nanti dalam kode, kita masih bisa lihat lingkaran asli di sini.
Jadi mari kita ulang atribut untuk cx.
Katakanlah, x posisinya 400.
Dan aku akan transisi itu, jadi sudah jelas.
Di sana kami pergi.
>> Jadi kami menambahkan lingkaran.
Kami mengatur beberapa atribut.
Kami menambahkan lingkaran lain, dihapus.
Dan kemudian kita memodifikasi lingkaran asli.
>> Tapi di sini adalah di mana ia mendapat jauh lebih menarik.
Tidak hanya bisa kita mengatur atribut hanya sebagai nilai, kita dapat mengatakan,
hey, lingkaran, pergi ke posisi 200.
Kami juga dapat menetapkan mereka sebagai fungsi.
>> Jadi alih-alih memberikan 400 sini, kita dapat membuat beberapa perhitungan
on the fly untuk apa yang kita ingin atribut yang menjadi.
Jadi ini adalah bagaimana Anda akan menyatakan bahwa.
Kita mengatakan, bukan 400, biarkan aku memberikan fungsi sebagai gantinya.
Dan di sini, di dalam fungsi ini, kita bisa membuat perhitungan gila.
>> Kita bisa meluangkan waktu dan melihat beberapa hal lain
dan dinamis memutuskan untuk lingkaran apa nilai yang kita inginkan.
Bagaimana kalau kita hanya memberikan itu posisi x acak?
Jadi itu yang.
>> Jadi apa yang mengatakan, bagi setiap x, menjalankan fungsi ini.
Dan apa yang kita lakukan adalah menghitung beberapa hal, kali acak lebar
dan kembali itu.
Jadi setiap kali kita menjalankan itu, kita mendapatkan lingkaran yang masuk ke tempat acak.
Ini agak dingin.
Aku merasa seperti aku bisa melihat ini untuk sedikit.
Kami mulai untuk mendapatkan sesuatu yang menarik di sini.
Mari kita membuat data ini didorong sekarang.
Tidak ada data.
Mari kita mengubah itu.
>> Act II, Data Driven Documents-- Jadi mari kita kembali ke sini.
Dan mari kita menyingkirkan circle2, karena kita hanya menambahkan dan menghapus
saya t.
Jadi kita tidak benar-benar membutuhkannya.
Kita harus lebih banyak pintar di sini.
Katakanlah, kita memiliki beberapa data dari beberapa macam.
Satu moment-- katakanlah, kami memiliki data formulir ini.
Kami memiliki sebuah array, hanya sekelompok angka.
Kami memiliki tujuh angka di sini, apa ini jumlah represent--
dalam rekening bank rakyat, bagaimana banyak mereka menimbang, Tuhan tahu apa.
>> Ini adalah angka, dan kami ingin menggunakan lingkaran kami
untuk mewakili angka-angka entah bagaimana.
Kami ingin untuk mengikat kami lingkaran untuk angka-angka.
Jadi apa yang kita lakukan.
Katakanlah, kita ingin lingkaran untuk setiap nomor.
Kita bisa melakukan hal yang lama hal yang kita doing--
lingkaran append dan circle2 dan circle3.
Tapi ini keluar dari tangan, dan ada banyak mengulang logika.
>> Jadi mari kita lebih pintar dengan itu.
Alih-alih menggunakan lingkaran var svg.append bahwa kami hanya menggunakan,
kita akan menggunakan blok ini sedikit di sini.
Saya tidak ingin pergi mendalam ke dalam apa semua bagian ini lakukan.
Dan itu jenis topik yang canggih.
Dan aku berharap aku bisa.
>> Tetapi hal kunci untuk recognize-- dan Anda akan melihat sangat sering dalam kode D3.
Ini blok teks dasar menciptakan banyak kalangan
karena ada elemen data dalam array ini di sini.
Jadi ini menciptakan banyak lingkaran karena ada unsur.
Ini akan membuat kita tujuh lingkaran.
Dan itu hal yang benar-benar penting.
Jadi mari kita jalankan itu.
Mari kita menghapus lingkaran kami yang lain.
Mari kita komentar ini berpisah dan menjalankan ini lagi.
>> Di sana kami pergi.
Jadi lingkaran kami di sini adalah banyak gelap, karena kami
memiliki tujuh lingkaran, satu di atas yang lain.
Kami hanya menciptakan tujuh lingkaran, satu masing-masing untuk masing-masing elemen data tersebut.
Tapi ada hal penting yang terjadi dengan potongan ini di sini.
>> Ini data terikat.
Jadi setiap satu dari unsur-unsur data,
10, 45, 105, adalah terikat untuk lingkaran tertentu.
Jadi ini tidak hanya menciptakan sekelompok lingkaran
tetapi mengikat kedua hal bersama-sama.
>> Dan di masa depan, karena kita diciptakan lingkaran-lingkaran dengan fungsi D3 ini,
jika saya memberi Anda sebuah lingkaran, Anda dapat memberikan data yang terkait dengan itu.
Jadi kita bisa meminta D3.
Hei, D3, saya punya lingkaran ini.
Apa data bahwa lingkaran memiliki?
Dan D3 akan memberitahu kita 10 atau 45 atau 105.
>> Hal-hal ini terikat.
Itu konsep yang sangat, sangat mendasar.
Mari kita lihat itu.
>> Jadi cara kita akan bertanya D3-- sehingga ini tidak relevan untuk ini,
tapi hanya percaya padaku itu.
Ini adalah bagaimana kita meminta D3.
Hei, D3, beri aku yang pertama lingkaran yang dapat Anda temukan.
Beri aku lingkaran pertama Anda dapat menemukan.
Dan kemudian kita bisa meminta D3, apa data pada itu, seperti ini, 10.
>> Jadi kami hanya meminta D3, menemukan saya lingkaran pertama Anda dapat menemukan.
Apa datanya?
10, yang memang kami elemen data pertama.
Kita bisa menanyakannya, hei, D3, menemukan kami lingkaran ketiga.
105.
Mengapa ini sangat penting?
>> Jadi di sini, saya sebutkan bahwa kita bisa menggunakan fungsi.
Dan saya sebutkan itu hal yang sangat kuat.
Jadi tidak hanya bisa fungsi kita melakukan hal-hal seperti melakukan perhitungan, misalnya,
mengembalikan nomor acak, dapat juga melakukan hal-hal yang didasarkan pada data.
Inilah yang didorong data dokumen berarti.
Itulah yang D3 singkatan.
>> Jadi ini bukan x postition-- hanya mengatakan, semua kalangan,
mendapatkan posisi x 200, kami bisa memberikan fungsi.
Dan di sini, kita bisa membuat beberapa perhitungan.
dan d sini berdiri di tempat untuk data.
Jadi setiap kali kita memiliki lingkaran, pada dasarnya,
D3 akan membuat tujuh lingkaran tersebut.
Dan kemudian untuk setiap
>> lingkaran, itu akan pergi, hei, circle1 apa posisi x Anda.
Sebelumnya, kami selalu menjawab 200.
Tapi sekarang, setiap kali D3 meminta apa posisi x Anda,
itu akan memberikan us-- kami lingkaran itu, sehingga kita memiliki data.
Ini akan memberi kita data dan berkata, apa yang Anda inginkan eksposisi menjadi,
berdasarkan data tersebut.
>> Mari kita mengembalikan data aktual.
Jadi jika kita menjalankan ini, ini memberikan Data kami didorong dokumen.
Lingkaran ini didasarkan sehubungan position--
mereka basis sebagai fungsi dari data.
>> Jadi untuk lingkaran pertama, D3 menempatkan lingkaran.
Dan kemudian D3 meminta kita, apa yang Anda ingin eksposisi menjadi.
Dan kita hanya mengatakan, apa pun data yang.
Membuat eksposisi 10.
>> Kemudian bertanya, apa yang Anda ingin eksposisi menjadi untuk lingkaran kedua.
Dan kita menjawab, 45.
Dan kami, tentu saja, bisa membuat beberapa perhitungan di sini.
Saya menemukan bahwa orang-orang lingkaran adalah jenis squished up.
>> Jadi kalikan dengan 3, kalikan data dengan 3.
Lingkaran kami baru saja diperluas keluar.
Nilai kami tiga kali lipat.
>> Lingkaran ini benar-benar di tepi, jadi mari kita mungkin jenis mengimbangi itu.
Katakanlah, 20.
Di sini Anda pergi.
>> Ini adalah visualisasi data.
Ini adalah salah satu yang sangat dasar, tapi ini memberi kita wawasan tentang data kami.
Ini memberitahu kita bahwa, misalnya, kita memiliki kelompok kecil elemen.
Dan kami memiliki outlier besar di sini.
Ini memberikan kita beberapa informasi tentang distribusi.
>> Jika kita, misalnya, untuk mengubah data sampai 150 di sini dan refresh,
visualisasi kita berubah.
Dokumen ini adalah data didorong.
>> Jadi tentu saja, semua elemen, semua atribut ini di sini,
kita dapat menggunakan fungsi, tidak hanya nomor, bukan hanya
x dan y posisi.
Jadi kita bisa menggunakan fungsi untuk warna.
Jadi kita akan melakukan hal yang sama.
Kami akan memberikan fungsi.
>> Dan katakanlah, kita bisa memiliki conditional dalam fungsi kita.
Fungsi ini dapat ratusan garis panjang.
Hal ini dapat melakukan hal-hal yang sangat, sangat rumit.
>> Jadi mari kita jika pernyataan di sini.
Katakanlah, jika data kami kurang dari 50, itu beberapa ambang
bahwa kami tertarik di untuk beberapa alasan.
Mari kita membuatnya hijau.
Jika tidak, mari kita membuatnya merah.
Bagaimana?
Nice.
>> Jadi visualisasi data kami mulai untuk menyampaikan informasi yang lebih menarik
pada banyak saluran.
Jadi sekarang kita tahu sedikit tentang distribusi.
Dan kita tahu bahwa ada beberapa jenis memotong di 50 yang kita tertarik.
Kita tahu bahwa ada dua titik data di bawah ambang batas itu dan sebagian besar dari mereka
di atas.
>> Jadi sebagai langkah terakhir, data ini di sini, itu sangat jarang untuk melihat ini seperti itu.
Jadi mari kita bergerak ke variabel karena itulah bersih, seperti ini.
Dan kemudian kita menggunakan variabel itu di sini.
Ini hal yang sama persis.
Ini hanya sedikit lebih bersih.
>> Berikutnya, Babak III, Scales-- Jadi satu masalah yang tepat
di sini adalah, jika kita mengubah kami Data di 200 value-- ini
jika kita mengubahnya ke 400 atau sesuatu dan refresh,
maka nilai ini hanya pergi offscreen.
Jadi logika kita di sini bagaimana kita melakukan kali 3
dan 20, untuk menyebar keluar dan kemudian mengimbangi sedikit benar-benar kikuk.
>> Apa artinya angka-angka?
Mereka hanya sulit kode di sana.
Dan mereka sangat terikat dengan data.
Kami ingin dokumen didorong data.
Kami ingin dokumen yang sangat fleksibel, bahwa data yang diberikan, menyesuaikan dengan itu
dan mewakili itu.
>> Apa yang kita butuhkan adalah pada dasarnya, kita memiliki rentang angka 10.
45, 105.
Dan kami ingin memetakan bahwa keluar ke lebar, lebar penuh di sini.
Jadi kita memiliki kisaran nomor akan dari 0 sampai 100.
Dan kami memiliki kampus ini saya pergi 20-700, dalam hal ini.
>> Kami semacam ingin memetakan bahwa pada.
Kami ingin skala yang dan kemudian diimbangi itu sedikit.
Ternyata D3 memiliki ini.
Ini disebut skala.
Jadi mari kita menggunakannya.
>> Cara yang works-- aku akan ketik ini dan kemudian menjelaskannya.
Ini adalah skala.
Apa yang akan Anda lakukan adalah, ia akan memetakan nilai 1-200 pada 20-600.
Kita bisa memeriksa itu.
Kita bisa melihat bahwa di sini.
>> Jadi jika saya makan itu 1-- satu saat.
Beri aku satu detik.
Aku pasti salah tulis itu.
Ini dia.
Aku minta maaf soal itu.
>> Jadi apa skala akan melakukan adalah, ia akan mengambil nilai
dan kemudian mengubah itu, memperluas hal itu, sehingga
mengisi berbagai yang Anda minta.
Jadi dalam hal ini, jika kita memberikan satu, itu akan memetakan bahwa keluar ke 20.
Dan jika kita memberikan 200, itu akan memetakan bahwa pada 600.
Dan di suatu tempat di antara, jika kita mendapatkan 100, itu
akan berada di suatu tempat di antara 20 dan 600.
>> Dan tentu saja, sekarang ini adalah apa yang kita perlu untuk menghapus dikode
hal yang harus kita di sana.
Jadi apa yang ingin kita lakukan adalah mengambil data yang kita
mengingat, bahwa data individu elemen, dan menyebarkannya untuk skala pertama.
Jadi skala akan skala itu.
>> Well-- Oh, kami memiliki kesalahan kecil di sini.
Kita kehilangan data.
Ini dia.
Dan yang memperluas keluar.
>> Yang memberi kita sama Hasil yang kami miliki sebelumnya,
tapi bukannya memiliki mereka sulit kode kendala.
Dan jika ukuran kami perubahan kanvas, misalnya,
jika kita ingin memiliki lebih dari ini 400 piksel dan squishes keluar,
kita dapat memilikinya over-- kita dapat memperluas, atau kita
dapat mengurangi marjin kiri ini sesuatu yang kurang atau lebih dari 20.
Angka-angka ini, ini dikode angka sekarang masuk akal bagi kita.
>> Dan kita bisa melakukan lebih banyak hal yang menarik juga.
Jadi, bukannya memiliki linear skala, kita mungkin ingin log skala.
Dan itu akan memberi kita skala log.
>> Jadi sekarang skala kita, bukan hanya memperluas jangkauan keluar itu,
itu melakukan hal-hal yang lebih canggih.
Alih-alih memiliki kisaran ini sulit kode, dan alih-alih memiliki yang 600,
kita mungkin ingin hanya menggunakan lebar, sehingga dari 20 sampai lebar minus 40,
2 kali margin di sisi lain.
Dan ini membuat lebih banyak akal untuk seseorang yang mungkin melihat kode.
>> Menariknya, timbangan mendapatkan sangat, sangat canggih juga.
Mereka melakukan banyak hal yang menarik.
Jadi sisik tidak perlu harus untuk beroperasi hanya dengan angka.
Mari kita membuat skala warna.
>> Jadi jangkauan kami bisa be-- domain kami adalah 1 sampai 200.
Itulah hal masukan.
Tapi kita mungkin ingin untuk memetakan dari hijau ke merah, misalnya.
Dan sekarang, jika kita lulus 1, kita akan mendapatkan hijau.
Jika kita memberikan 200, kita akan mendapatkan merah.
Dan jika kita melewati sesuatu di antara, itu akan ada beberapa campuran itu,
di suatu tempat di gradien antara hijau dan merah.
>> Dan bukannya memiliki semacam ini logika kikuk
kita miliki di sini dengan bersyarat di sana,
kita bisa memiliki sebuah something-- skala linier antara mereka.
Jadi kita akan menggunakan skala kita hanya dibuat, yang kami sebut warna.
Dan kami akan memberikan d, yang adalah elemen data kami.
Dan di sana kita pergi.
Kami memiliki skala warna.
>> Jadi ini adalah pemetaan.
Jadi paling kiri benar-benar hijau.
Paling kanan benar-benar merah.
Dan segala sesuatu di antara adalah fungsi dari d.
Kami memiliki menarik visualisasi di sini.
Tapi data kami agak membosankan.
Mari kita lihat apa yang bisa kita lakukan jika kami memiliki data yang lebih menarik.
>> Undang-Undang IV, Dengan Kerja Data-- hal pertama
kita akan ingin lakukan untuk membuat kita visualisasi lebih menarik
adalah untuk memindahkan data di tempat lain.
Ini sangat kikuk untuk memiliki data sulit kode sini.
Dan umumnya, kami akan meminta orang lain untuk data.
Kami akan mungkin meminta pemerintah, Biro Sensus, apa data Anda
dan kemudian merencanakan itu atau meminta beberapa entitas pihak ketiga untuk beberapa data
dan kemudian membangun visualisasi itu.
>> Jadi hal pertama yang kita ingin lakukan adalah langkah yang ke tempat lain.
Jadi aku akan membuat mengajukan sini disebut data.json.
JSON adalah format data.
Anda tidak perlu tahu banyak tentang itu.
Dan kita akan menyalin sedikit data yang kita miliki di sana,
paste di sana verbatim, pergi kembali ke kode visualisasi kami
di sini, dan menggunakan fungsi ini di sini.
Anda tidak perlu tahu rincian.
Tapi apa ini akan lakukan adalah, ia akan menemukan file tersebut,
mengambilnya, dan mengembalikannya kepada kami.
Jadi apa yang dilakukan adalah, ia pergi dan mendapatkan file data.json.
Dan kemudian semua kode yang menjorok inside-- dasarnya,
semua kode yang kita miliki besar-- akan menjalankan hanya ketika kita mendapatkan data kembali.
Dan kemudian itu akan menjalankan bahwa kode dengan data yang kita miliki.
Besar, kita memiliki visualisasi yang query
untuk beberapa kode di suatu tempat lain, yang biasanya
dimana query beberapa data dari di tempat lain, yang biasanya
bagaimana visualisasi bekerja.
>> Tapi aku ingin kembali ke data.
Jadi data fundamental di D3-- D3 mengkonsumsi data yang adalah daftar hal-hal.
D3 mengharapkan data hanya menjadi daftar hal, berbagai hal.
Tidak peduli apa hal-hal adalah, asalkan itu array dari mereka.
>> Jadi di sini, misalnya, kita bisa dari Tentu saja telah floating point nilai.
Kita bisa negatif.
D3 tidak peduli, asalkan seperti itu adalah daftar hal-hal.
>> Hal-hal sebagaimana yang menarik kami bisa, kita bisa juga
memiliki daftar string seperti itu.
Jadi ini adalah berita Crimson Aku mengambil beberapa hari yang lalu.
Dan mungkin Anda dapat menemukan beberapa menarik hal tentang ini sebuah berita.
>> Jadi sekali lagi, ini adalah daftar hal-hal.
D3 tidak peduli.
Ini kebetulan string.
Kami telah mengubah data kami.
>> Mari kita kembali ke visualisasi kita.
Sekarang, visualisasi kami mengharapkan input menjadi angka.
Jadi kita akan memiliki untuk membuat beberapa perubahan.
Jadi misalnya, pertama-tama, mungkin kita ingin menempatkan lingkaran ini bersama
dengan panjang judul, yang jumlah karakter dalam judul.
>> Jadi apa yang akan kita lakukan is-- setiap kali kita Fungsi ini disebut dengan string,
kita akan menemukan itu panjang dan kemudian mengirimkannya ke skala.
Warna, saya akan kembali yang menjadi biru baja.
Dan di sana kita pergi.
Kami memiliki visualisasi headline dari Crimson.
>> Skala kami adalah sedikit off.
Mari kita berasumsi bahwa terpanjang headline adalah 100 karakter,
sehingga rentang yang keluar sedikit.
Dan kami memiliki visualisasi.
Jadi sepertinya bahwa sebagian besar berita utama cukup dekat bersama-sama,
dalam hal baris karakter.
Tapi satu benar-benar menonjol.
>> Kita bisa membangun beberapa alat untuk mengeksplorasi bahwa lebih.
Tapi ketika saya sedang mengerjakan ini, saya penasaran apakah, dalam kumpulan data ini,
headline dengan titik dua di dalamnya akan lebih lama.
Saya menganggap mereka akan.
>> Jadi mari kita cari tahu.
Mari kita gunakan warna channel seperti yang kami lakukan sebelumnya,
untuk mengkodekan beberapa tentang apakah ada usus besar atau tidak.
Jadi kita akan menggunakan kondisional lagi.
Anda tidak harus tahu rincian ini,
tapi ini adalah bagaimana kita memeriksa string untuk karakter tertentu
dalam JavaScript, sekali lagi, tidak relevan.
>> Tetapi jika kita tidak menemukan usus besar, kami akan kembali hijau.
Dan jika kita lakukan, kita akan kembali merah.
Jadi sekali lagi, berita utama bahwa telah usus besar akan merah.
Inilah yang ini means-- bagus.
>> Jadi sepertinya bahwa saya hipotesis terbentur.
Hanya ada dua.
Kami hanya memiliki enam titik data dan hanya dua memiliki titik dua.
Tapi tampaknya sedikit lebih di ujung bawah, pada kenyataannya.
Headline dengan titik dua tampak secara umum lebih pendek,
setidaknya dalam data kami set-- menarik.
>> Mari kita kembali bahwa untuk baja biru dan kemudian melihat
apa yang bisa kita buat dengan bahkan Data lebih menarik.
Jadi sekali lagi, saya menyebutkan bahwa Data di D3 adalah daftar hal-hal.
Kami telah melihat jumlah banyak jenis.
Kami telah melihat string.
Namun hal ini juga bisa menjadi objek.
>> Mereka bisa menjadi hal yang rumit yang mencakup banyak hal.
Untuk mengatakan bahwa lebih jelas, dalam banyak kasus, kita
ingin membangun setiap titik data lebih rumit dari sekedar satu nilai.
Jika Anda akan membayangkan Database tentang siswa,
mungkin ada mahasiswa nama, ID mahasiswa,
dan banyak hal yang berhubungan dengan catatan tertentu,
bukan hanya string atau nomor.
Jadi mari kita lihat itu.
>> Ini adalah salah satu data tersebut ditetapkan.
Ini adalah kumpulan data tentang gempa bumi.
Jadi semuanya di sini pada daftar atau array kami hal mengandung banyak hal sendiri.
Jadi setiap titik data memiliki besarnya dan koordinat.
Dan koordinat sendiri mengandung dua hal.
>> Jadi setiap hari sekarang lebih banyak rumit dan jauh lebih menarik
dan mengandung lebih banyak Informasi yang menarik.
Mari kita lihat kita bisa membangun dari itu.
Kembali kembali ke sini, sekali lagi, menggunakan visualisasi histogram lingkaran kami
kami telah membangun, mari kita lihat apakah kita bisa membangun visualisasi distribusi besarnya
di set data kami.
>> Jadi di sini, itu adalah konsep yang sama.
Tapi sekarang, d mengandung lebih banyak hal.
d mengandung banyak elemen data.
Jadi kita bisa d kembali.
D3 memberi kita d.
Dan kita menanggapi dengan mencari besarnya d dan kemudian melewati bahwa untuk skala.
>> Dan kemudian kita perlu mengubah skala kami, tentu saja.
Jadi besaran hanya tidak pergi lebih dari 10.
Sebenarnya, ada tidak pernah gempa berkekuatan 10.
Tapi itu semacam atas kami end, spektrum atas kami.
>> Mari kita menyegarkan.
Bagus, kami memiliki visualisasi.
Sungguh menarik untuk note-- sehingga ada dua titik data yang
hampir persis di atas satu sama lainnya, dalam hal besarnya.
Anda melihat ini dengan opacity yang kita gunakan.
>> Kami memiliki data geografis sekarang.
Kami memiliki lintang dan bujur.
Mungkin kita bisa melakukan sesuatu yang jauh lebih menarik dengan itu.
Mari kita cari lagi cara yang menarik untuk memvisualisasikan
ini lebih rumit Data kita memiliki akses ke.
>> Undang-Undang V, Mapping-- fundamental, kita ingin menempatkan ini pada peta.
Maksudku, ini adalah di mana hal ini terjadi.
Kami ingin mengkodekan informasi tentang posisi pembacaan gempa tersebut,
serta besarnya mereka, karena kita memiliki itu sekarang.
Kami memahami bagaimana mengkonsumsi Data lebih rumit.
>> Hal pertama yang akan kita lakukan adalah membuat peta, peta latar belakang.
Aku akan pergi melalui ini sangat cepat.
Ini adalah kode rumit.
Ini salah satu dari mereka resep Anda tidak benar-benar
harus memahami sepenuhnya untuk Anda gunakan.
Tapi ini adalah kode.
Kode ini di sini menciptakan peta.
>> Kami tidak akan pergi secara rinci.
Tapi dangkal, apa yang dilakukannya adalah, itu permintaan berkas us.json ini, yang
adalah data file seperti yang kita miliki sebelumnya.
Ini lebih kompleks, tentu saja.
Tapi dalam kasus ini, segala sesuatu, setiap titik data negara ini
dan memiliki daftar lintang dan bujur
yang mendefinisikan poligon, bentuk yang, negara itu.
>> Jadi apa D3 akan melakukan mirip dengan apa yang kita lakukan sebelumnya.
Ini akan meminta dan mengikat bahwa untuk sebuah elemen.
Dan ada fungsi yang akan memetakan elemen yang keluar,
berdasarkan garis lintang dan bujur.
Anda dapat membaca lebih lanjut tentang itu.
Dan saya sarankan itu.
>> Ada link di akhir kode ini diposting.
Dan kode berkomentar.
Dalam ada link untuk lebih lanjut tentang ini.
Saya sarankan Anda mencarinya.
Tapi apa yang kita pedulikan adalah Fungsi proyeksi ini.
Aku ingin pergi melalui itu.
>> Pertama-tama, mari saya tunjukkan Anda bahwa, ya, kita memiliki peta.
Maps yang keren.
Jadi mari kita lihat ini fungsi produksi.
>> Proyeksi sangat banyak seperti skala, skala lagi.
Jadi apa yang produksi Fungsi proyeksi ini
tidak adalah, kita bisa melewatinya bujur dan latitudes-- dalam hal ini,
nilai-nilai di sini adalah lat-rindu bangunan
Kami sedang duduk di sebelah kanan sekarang-- untuk proyeksi.
Dan proyeksi akan mengkonversi yang menjadi nilai-nilai x dan y pixel.
>> Jadi apa proyeksi yang dilakukan sangat mirip dengan skala kita.
Ini mengambil lintang dan bujur yang mewakili seluruh dunia
dan menyusut dan ukuran yang ke alun-alun yang kita inginkan,
bahwa kita telah diberikan itu.
Dalam hal ini, kami melewati nilai-nilai ini.
Dan itu memberi kita, baik, bahwa pada layar Anda berarti 640 piksel.
Seluruh layar ini adalah 700 piksel lebar, sehingga membuat kita di sini,
dan 154 piksel ke bawah, yang saya akan Perkiraan ini cukup banyak di sini.
>> Jadi mengambil orang-orang lat-rindu, yang mewakili sesuatu di seluruh dunia
dan pemampatan dan bergerak bahwa sekitar untuk memberikan nilai x dan y pixel,
ini adalah hal pertama yang dilakukan dalam kode pemetaan ini.
Dan kemudian sisa kode mengkonsumsi data
dan kemudian peta mereka lat-rindu ke sesuatu di layar Anda.
>> Tapi kita akan menggunakan proyeksi ini fungsi, karena ternyata
kami memiliki lat-rindu rindu juga.
Melihat kembali data kami, kami memiliki lintang dan bujur
untuk setiap pengamatan.
Jadi mari kita gunakan proyeksi.
>> Jadi melihat eksposisi kami, kami ingin exposition-- kami
kami memiliki lintang dan bujur a.
Tapi kami ingin nilai-nilai pixel.
Dan ternyata, kita memiliki tepat apa yang kita want-- proyeksi.
Sangat banyak seperti kami menggunakan skala di sini,
kita sekarang akan menggunakan proyeksi dan menyebarkannya koordinat.
Jadi hal pertama kita doing-- jadi kita
mendapatkan d, yang merupakan data individu unsur gempa individu
sedang membaca.
Hal pertama yang kita lakukan adalah mendapatkan koordinat.
Baiklah, kita memiliki koordinat.
>> Hal kedua yang kita lakukan adalah menyampaikan bahwa pada proyeksi.
Proyeksi mengkonversi koordinat dalam nilai-nilai piksel, x dan y.
Dan kemudian hal terakhir yang kita ingin lakukan adalah hanya mendapatkan x,
hal ini adalah yang pertama.
Ini adalah pertama dari dua hal yang dikembalikan oleh proyeksi.
>> Kami akan melakukan hal yang sama untuk y.
Tapi sebaliknya, kita akan kembali elemen kedua, y.
Bersiap-siap untuk me-refresh.
Ooh, karakter tambahan sini-baik, kita memiliki
didorong data dokumen yang menyembunyikan file ini JSON objek,
membuat peta, dan mengubah atribut dalam kaitannya dengan data
untuk proyek itu pada peta.
Ini benar-benar menarik.
Ini keren.
>> Mari kita itu membuat takik.
Maksudku, kita memiliki dua buah informasi dengan setiap titik data.
Maksudku, tiga.
Kami memiliki koordinat, yang merupakan x dan y.
Dan kami memiliki besarnya.
>> Kita perlu untuk mengkodekan besarnya entah bagaimana.
Kami memiliki banyak saluran.
Kita bisa menggunakan warna.
Kita bisa menggunakan jari-jari.
Kita bisa menggunakan opacity.
Kita bisa menggunakan banyak hal dalam kode.
Setiap atribut ini dan banyak lebih yang tidak terdaftar di sana,
karena mereka opsional, kita bisa digunakan untuk mengkodekan data ini, stroke
dan semua hal-hal ini yang telah saya sebutkan.
>> Mari kita lakukan radius.
Saya pikir radius adalah yang paling intuitif.
Jadi sekali lagi, kami akan mengganti yang keras-kode 40 dan membuat beberapa perhitungan.
Kami akan menggunakan skala favorit kami lagi.
Dan kami melewati d.
Tapi tidak d karena kami ingin besarnya d. d hanyalah titik data.
Kami akan melewati besarnya untuk skala.
>> Mari kita coba lagi.
Ooh, itu tidak bekerja.
Mengapa tidak bekerja?
>> Jadi ingat apa yang skala tidak.
Mari kita lihat skala lagi.
Peta skala 1 sampai 10 pada untuk 22-600, lebih atau kurang.
600 sangat besar.
Inilah sebabnya mengapa kita mendapatkan ini.
>> Jadi kita ingin mengubah skala kami untuk sesuatu yang lebih masuk akal.
Katakanlah, kita ingin 0-60.
60 besar, namun gempa bumi 10 yang sangat langka.
Bahkan, mereka tidak pernah terjadi.
>> Jadi apa yang akan Anda lakukan adalah, itu akan membawa besarnya kami yang berlangsung dari 1 sampai 10
dan peta itu untuk memperluas itu.
Dan peta itu ke 0 hingga 60.
Mari kita menyegarkan.
>> Bagus, kami memiliki visualisasi.
Ini bagus.
Ini adalah data yang sebenarnya.
Anda akan melihat, dalam mainan kecilku Misalnya, gempa terbesar
tepat di atas kita.
Tapi hanya itu.
Kami memiliki visualisasi tanggal didorong yang mengkonsumsi data
dan memberi kita benar-benar Informasi yang menarik.
Ya, mari kita tambahkan beberapa interaktivitas untuk itu.
Saya sebutkan itu kekuatan yang kuat dari D3.
>> Jadi di sini, untuk setiap elemen, kami menggambarkan sekelompok atribut.
Tapi kita juga bisa menggambarkan apa yang kita inginkan terjadi dengan unsur-unsur interaktivitas.
Sebagai contoh, kita bisa menggambarkan apa yang terjadi ketika kita mouse.
Dan sangat mirip itu, yang akan mengambil fungsi,
sangat mirip dengan atribut kita miliki sebelumnya,
di mana kita melakukan sesuatu untuk Unsur ketika kita membawa lebih dari itu.
>> Jadi hal pertama yang perlu kita lakukan adalah memilih elemen itu,
menemukannya pada dasarnya, dalam browser.
dan kemudian kita bisa mengatur atribut untuk itu.
Jadi apa yang saya lakukan di sini adalah, ketika kita membawa atas sesuatu, kita akan mendapatkan elemen yang
dan kemudian mengatur opacity kembali 1, untuk benar-benar buram.
Mari kita lihat apa yang terlihat seperti.
>> Tampaknya kita memiliki koma tambahan di sini.
Jadi jika kita membawa lebih dari sini, itu akan penuh.
Tapi sekarang, tentu saja, tetap penuh, karena kita
harus menjelaskan apa yang terjadi ketika menghapus kursor kita.
Jadi mari kita melakukan hal itu pada mouseout, sebagai lawan Gunaka mouse.
>> Dan kita akan me-reset ke apa yang kita miliki before-- 0,5.
Dan sekarang, setiap kali kita hover, kita mendapatkan lingkaran penuh.
Ini membantu kita melihat apa yang kita kita memilih dasarnya.
>> Dan sekarang mari kita membuat ini benar-benar hebat.
Mari kita menghubungkan ini ke data real.
Jadi mari kita bertanya bisa USGS tentang data mereka.
Jadi US Geological Survey memiliki data tentang gempa bumi.
Mereka memiliki API publik yang mampu untuk dikonsumsi dalam format JSON.
Jadi mari kita lakukan itu.
>> Jadi ini adalah sedikit kode yang menghubungkan ke USGS API.
Dan ada sedikit pengolahan di atasnya.
Hal ini tidak relevan tetapi menyederhanakan itu ke format data sederhana seperti yang
kita miliki sebelumnya.
Jadi saya menyingkirkan panggilan kita untuk data.json palsu kami pada file.
Dan sebagai gantinya, aku menelepon USGS dasarnya.
>> Mari kita menyegarkan, bagus.
Hal ini sebenarnya, data real-hidup dari minggu ini untuk gempa bumi.
Ini benar-benar menarik.
Hal ini tidak mengherankan bagi kita, tetapi ada
banyak gempa bumi di Pantai Barat di California.
Tapi saya pikir itu sangat menarik bahwa ada begitu banyak gempa bumi
di Alaska, dan tampaknya, di sini di Midwest.
Maksudku, menarik, dan kita baik.
Itulah kesimpulan.
>> Tapi pada dasarnya, ini adalah apa D3 membantu kita lakukan.
Ini membantu kita mengambil data, mengikat untuk elemen dalam DOM,
dan memiliki unsur-unsur berubah sebagai fungsi dari data,
memiliki atribut, semua banyak atribut elemen,
semua akan berguna untuk saluran untuk menyampaikan informasi.
>> D3 adalah sangat kuat Perpustakaan dan luar biasa dikelola dengan baik.
Ini adalah beberapa hal yang kuat.
Visualisasi data adalah alat yang sangat kuat
untuk menyampaikan kepada orang-orang yang mendalam wawasan yang sampai ke inti mereka
dan membantu mereka memahami, di secara mendalam dan intuitif,
bagaimana data bekerja dan bagaimana Data mengubah hidup kita.