[MÜZİK OYUN] 

DAVID Chouinard: David değilim Chouinard ve bu D3. Hoşgeldiniz. Bugün D3 hakkında bilgi edinmek için gidiyoruz. D3 bir JavaScript çerçeve yüksek kalitede oluşturmak için web için etkileşimli görselleştirme. Biz ne konum gibi şeyler Arkamda görerek, Biz bu hale öğrenmek için gidiyoruz şeyler, bunun temelleri tür. Ama serin olacak. Haydi başlayalım güzel resimler yapmak. Biz daha fazla demolar var Mevcut umutları. Hadi yapalım. 

Yasası Ben, DOM manipulation-- biz gidiyoruz güzel şeyler yapma hemen başlamak için. Her şeyden önce, solda, biz kodu var. Sağda, biz var Bizim kod sonucu. En içinden gidelim. 

En bir daire yapalım. Bu nasıl ses yapar? svg.append circle-- biz sadece bir daire yaptı. Haklısınız, bana inanmıyor musun? Orada değil. 

Peki ne isimli burada yaptım, SVG ölçeklenebilir vektör grafik. Bu biz tarayıcı söylemek yoludur Tarayıcıda vektör grafik yapmak. Ne biz sadece şu anda yaptım göz atmak için bir daire ilave edilir. 

Söz daire olmasıdır temel özelliklerinden biraz gerektirir biz aslında onu görmeden önce. Biz, onun x konumunu anlatmak gerekir kendi y konumu, onun yarıçapı. Biz herhangi bir söylemek vermedi, bu yüzden şimdi biz bunu görmüyoruz. Ama şeyler onu söyleyeyim. 

Yani her şeyden önce, sen var Bizim daireyi bir ad vermek için. Yani daire diyelim. Bizim daire artık bir adı vardır. Ve en doğru birkaç özelliklerini verelim. Nasıl cx hakkında çok, x merkezi olur x konumu merkezi. 200 piksel için, 200 diyelim. 

En de o 200 piksel y vereyim. Ve yaklaşık 40 piksel bir r, bir yarıçapı. Şimdi bakalım. Ben büyü değil. 

Orada gitmek. Biz pozisyon 200 bir daire var piksel, 200 piksel, 40 piksel yarıçapı. Tür serin, değil mi? Biz bir daire var. Evet. 

Yani gerek boyunca takip etmek. Tüm bu örnekler, her Ben bugün yapıyorum kod sonunda çevrimiçi sağlanacaktır Etkileşimli örnekler halinde En noktalarıyla Her hareket, vb. 

En fazla şeyler yapalım. Bu siyah daire gerçekten çirkin. Ben bu hata için özür dilerim Orada mesajlar. Biz oraya gitmek. 

Hadi bir renk vereyim. Bu nasıl? Ben çelik mavisi gibi. Peki, bizim daire rengi değişti. Bu harika. En yarı-saydam yapalım too-- yarı saydam. 

Peki bu niteliklerdir Biz daireyi tanımlayan ediyoruz. Yaptığımız ilk şey Biz sayfada bir daire koymak. Ve sonra tanımlayan ediyoruz niteliklerin bir demet. Bunlardan bazıları gerekmektedir, CX, CY, ve Radius gibi. Ve diğerleri isteğe bağlıdır. 

Çok daha fazla özellikleri vardır. Onlardan bir sürü var. Örneğin, bir olabilir inme yanı sıra, kırmızı bir vuruş. Ama bu kaldırmak edelim. Biz geri daire, mavi bir daire için konum. 

Yani daha fazla daireler yapalım. Bu nasıl? En baska bir çember yapalım. Bu hak, heyecan verici? 

Ben sadece Kopyala-yapıştırılan demek ne biz zaten vardı. Haydi circle2 diyelim. Ve kesin yapalım Aynı şey ve vermek 300 x pozisyonu verilir, bağlıyor. Yay, şimdi iki daire var. 

Ve tabii ki, biz olabilir Bu değerleri güncelleştirmek. Ben 400 de koyabilirsiniz, ve şimdi hareket eder. Rahatsız edici beri Ve, diyelim o kadar circle2.remove, çıkarın. Şimdi gitti. 

Peki biz ne yapıyoruz ve Bu very--, sadece çok, Size ne çok benzer Örneğin, jQuery yapabilir. Biz sadece manipüle ediyoruz DOM, denir. Daha önce bu kelimeyi duymuş olabilir. Biz ayarı, şeyler yaratıyorsunuz şeyler kaldırarak, malzeme üzerinde bağlıyor. Ilginç alır nerede 

Şimdi, burada. Yani, daha sonra kodu, biz hala olabilir Burada orijinal daire bakın. Yani cx onun niteliğini sıfırlamak edelim. 400 olan x konumu, diyelim. Ve ben geçiş gidiyorum Bu, çok açık yani. Biz oraya gitmek. 

Yani biz bir daire ekledi. Biz bazı özelliklerini ayarlayın. Biz, başka bir daire ekledi kaldırılır. Ve sonra modifiye ediyoruz Orijinal daire. O gets nerede 

Ama burada çok daha ilginç. Sadece biz özelliklerini ayarlayabilirsiniz Sadece değerleri gibi, biz, diyebiliriz Hey, daire, 200, pozisyon gidin. Biz de fonksiyon olarak ayarlayabilirsiniz. 

Peki yerine burada 400 verilmesi, bazı hesaplama yapabilirsiniz Ne için anında biz Bu özellik olmak istiyorum. Yani bu o ifade ediyorum nasıl. Biz yerine 400, let me, demek bunun yerine bir işlev vermek. Ve burada, bu işlevin içinde, biz herhangi bir çılgın hesaplama yapabilirsiniz. 

Biz zaman alabilir ve verebilir Bazı başka bir şey bakmak ve dinamik karar ne istediğimizi değer daire. Nasıl biz sadece vermek hakkında Bir rastgele x pozisyonu? Yani bu. 

Peki söylüyor için, bir her x, bu işlevi çalıştırmak. Ve ne yapıyoruz hesaplanması olduğunu Bazı şeyler, rastgele bir kere genişliği ve o dönen. Yani biz koşmak her zaman, biz bir olsun rastgele bir yere gider daire. Bu serin tür. Ben bakmak gibi hissediyorum Biraz için bu bir. Biz almak için başlıyoruz Burada ilginç bir şey. Şimdi tahrik bu verileri yapalım. Burada hiçbir veri yok. En değiştirmek edelim. 

Act II, Data Driven Documents-- Yani burada dönelim. Ve, Sadece circle2 kurtulmak izin biz sadece ekleme ve çıkarma çünkü o. Yani biz gerçekten ihtiyacımız yok. Biz burada çok daha zeki olması gerekir. Biz, diyelim çeşit bazı veriler. Bir, diyelim moment-- Bu formun verileri vardı. Biz sadece, bir dizi vardı sayıların bir demet. Biz, burada yedi numara var ne olursa olsun bu represent-- miktarı insanların banka hesabına, nasıl çok onlar tanrı bilir ne, tartın. 

Bu numaralar ve biz Bizim daireler kullanmak istiyorum nasılsa bu numaraları temsil etmek. Biz bizim, kravat istiyorum Bu sayılara çevreler. Yani biz ne. Diyelim, biz istediğiniz bir Her numara için daire. Biz eski yapabilirdi Biz doing-- edildi şey daire ekleme ve circle2 ve circle3. Ama bu Sokmama, ve mantığı yinelenen bir çok şey var. 

Yani bu daha zeki başlayalım. Bunun yerine var daire kullanarak Biz sadece kullanmakta olduğunuz svg.append biz kullanmak için gidiyoruz Burada bu küçük blok. Ben derinlemesine gitmek istemiyorum ne içine tüm bu parçalar yapmak. Ve gelişmiş bir konu tür. Ve keşke. 

Ama önemli şey recognize-- ve Eğer D3 kodu çok sık görürsünüz. Metin basic Bu blok gibi birçok çevreler yaratır veri elemanları var gibi Burada bu dizide. Yani bu kadar çok yaratır Orada gibi daireler unsurlardır. Bize yedi çevreleri oluşturmak için gidiyor. Ve bu gerçekten önemli bir şey yok. Yani bu çalışmasına izin. En diğer daire kaldırmak edelim. Sadece bu belirtmeme izin verin dışarı ayrılmak ve tekrar çalıştırın. 

Orada gidiyoruz. Yani burada bizim daire bir çok koyu, çünkü biz Yedi daireler var, bir üst üste. Biz sadece yedi çevrelerinde, birini oluşturdu Bu veri elemanlarının her biri için her. Ama oldu bir anahtar şey var Burada bu pasajı ile. 

Bu veriler bağlı olduğunu var. Yani her biri bu veri elemanları, 10, 45, 105, bağlı olduğu Belirli bir daire. Yani bunlar sadece oluşturulmadı çevrelerin bir demet ama birlikte bu iki şeyi bağlar. 

Ve gelecekte, biz yarattı çünkü Bu D3 fonksiyonu olan çevreler, Sana bir daire verirsem, sen can Bana onunla ilişkili verileri verir. Bu yüzden D3 sorabilirsiniz. Hey, D3, ben bu daireyi var. Daire vardır veri nedir? Ve D3 bize 10 veya 45 veya 105 söylerdim. 

Bunlar bağlı. Bu çok, çok temel bir kavram. Şuna bakalım. 

Yani yol böylece D3-- sormak istiyorum Bu, bu için alakasız ama sadece bana güven. Biz D3 sormak nasıl olduğunu. Hey, D3, bana ilk ver Eğer bulabilirsiniz daire. Bana bulabilirsiniz ilk daire verin. Ve sonra D3 sorabilirsiniz, ne Böyle olduğu veri, 10. 

Yani biz sadece D3 sormak, beni bulmak bulabileceğiniz ilk daire. Veri nedir? 10, bu gerçekten bizim, bir birinci veri öğesi. Biz, hey, D3 bunu sorabilirsiniz bize üçüncü daire bulmak. 105. Neden bu gerçekten önemli mi? 

Yani burada, bahsettiğim biz işlevlerini kullanabilirsiniz. Ve ben o olduğunu belirtmiş çok güçlü bir şey. Yani sadece fonksiyonları şeyler edemez gibi örneğin, bazı hesaplama yapmak, , rastgele bir sayı o yapabilirsiniz dönüş Ayrıca verilere dayalı şeyler. Bu veriler tahrik belgelerin ne anlama olduğunu. Bu D3 açılımı budur. 

Peki bu x postition-- yerine sadece, tüm çevreler söyleyerek, x konumunu 200 olsun, biz bunu bir işlev verebilir. Ve burada, bazı hesaplama yapabilirsiniz. d burada veri yer almaktadır. Yani her zaman biz var Bir daire, temelde, D3 bu yedi çevrelerin yaratacaktır. Sonra her 

Daire, o gidecek, hey, circle1 sizin x konumu ne. Daha önce, biz Her zaman 200 yanıtlayan. Ama şimdi, her zaman D3 sorar Bize x konumu ne, biz var us-- vermek için gidiyor Bu daire, bu yüzden veri var. Bu, bize veri vermek ve söylemek için gidiyor ne fuar olmak istiyorsun, Bu verilere dayanarak. 

Sadece gerçek verileri dönelim. Bu çalıştırırsanız Yani, bu verir Bizi veri belgeleri tahrik. Bu çevreler dayanır ilişki pozisyonumuzdan içinde bu verilerin bir fonksiyonu olarak bazlar konum. 

İlk daire Yani, D3 daire koyar. Ve sonra D3 ne, bize soruyor Eğer fuar olmak istiyorum. Ve biz sadece veri ne olursa olsun, demek. Fuar 10 olun. 

Sonra ne istiyorsun, sorar fuar, ikinci daire için olmak. Ve biz 45 cevap. Ve biz, elbette, can Burada bazı hesaplama yapmak. Ben bu çevrelerin bulmak tür kadar ezilmiş vardır. 

Yani 3 verileri çarpın, 3 ile çarpın. Bizim daire sadece dışarı genişletilmiş var. Bizim değer üçe edildi. 

Daire, gerçekten kenarında olduğunu bu yüzden belki biraz bunu telafi edelim. En 20 ile, diyelim. Hadi bakalım. 

Bu veri görselleştirme. Bu çok temel bir biri, ama bu bize veri içine biraz fikir verir. Bu bize, bu örneğin, biz elementlerin küçük bir küme var. Ve biz burada büyük bir aykırı değer var. Bu bize biraz bilgi verir dağılımı hakkında. 

Biz durumunda, örneğin, değiştirme Burada 150 ve yenileme veri, Bizim görselleştirme değiştirilir. Bu belge verileri tahrik. 

Yani tabii, bütün bu unsurlar, Burada tüm bu özellikler, Biz bir işlev değil kullanabilirsiniz Sadece sayılar, sadece x ve y pozisyonlar. Bu yüzden renk için bir işlevi kullanabilirsiniz. Yani biz de aynısını yapacağım. Biz bunu bir işlev vereceğiz. 

Ve biz olabilir, diyelim Bizim fonksiyonu koşul. Bu işlev olabilir Uzun çizgiler yüz. Çok, çok karmaşık şeyler yapabilirsiniz. 

Yani burada bir if deyimi koyalım. Bizim veri az ise, diyelim 50'den, bazı eşik var biz ilgi olduğunu Herhangi bir nedenle de. En yeşil yapalım. Aksi takdirde, en kırmızı yapalım. Bu nasıl? Güzel. 

Yani bizim veri görselleştirme başlıyor daha ilginç bilgileri iletmek için Birçok kanallarda. Yani şimdi biz biraz biliyorum dağılımı hakkında. Ve biz bir çeşit olduğunu biliyoruz biz ilgileniyoruz, 50 kesiliyor. Biz iki veri noktaları olduğunu biliyoruz çoğu bu eşiğin altında ve Yukarıdaki. 

Son adım olarak Yani, burada bu veriler, böyle bu görmek çok nadirdir. Yani sadece bir değişkene dışarı geçelim bu gibi temiz çünkü. Ve sonra biz burada bu değişkeni kullanın. Bu aynı şey. Sadece biraz temiz olduğunu. 

Sonraki kadar, Act III, Scales-- Yani bir sorun sağ Biz değiştirirseniz burada olduğunu bizim Bu 200 value-- veri Biz 400 değiştirirseniz ya da bir şey ve yenileme, Daha sonra bu değer sadece offscreen gitti. Burada bizim mantık Yani nasıl yaptığımız zamanlar 3 ve 20, sonra dışarı yaymak ve Bunun ofset biraz gerçekten aksak. Bu numaraları 

ne demek? Onlar sadece sabit orada kodlanmış ediyoruz. Ve onlar çok verilere bağlı ediyoruz. Biz bir veri odaklı bir belgeyi istiyorum. Biz çok esnek bir belge istiyorum, verilerine ki, ona uyarlar ve onu temsil eder. 

Temelde ihtiyacımız Ne olduğunu sayılar 10 bu dizi var. 45, 105. Ve biz üzerine bu haritaya istiyorum genişlik, burada tam genişliği. Yani biz yelpazesi var 0'dan 100'e kadar gidiyor numaralar. Ve biz bu kampüs I gider var Bu durumda, 20-700. 

Biz tür bu haritaya istiyorum. Biz o büyütmek istiyoruz ve Sonra onu biraz ofset. Bu D3 bu olduğunu çıkıyor. Bir ölçek denir. Yani bunu kullanalım. Ben gidiyorum works-- 

yolu Bu kadar yazıp anlatmaya. Bu bir ölçektir. Nedir o yapacak, dışarı haritası olacak için 20-600 ile 1-200 değerleri. Bunu kontrol edebilirsiniz. Biz burada görebilirsiniz. 

Ben onu beslemek Yani eğer 1-- bir an. Bana bir saniye ver. Ben bunu yanlış yazmış olmalı. Orada gitmek. Ben bu konuda özür dilerim. 

Yani ölçek ne yapacağını , bir değer alacak olan ve o dönüştürmek, dışarı genişletmek, bu yüzden için soruyorsun dizi doldurur. Bu durumda Yani, biz bir verirseniz, bu 20 üzerine bu haritaya gidiyor. Biz 200 verirseniz Ve, bu kadar 600 o haritaya oluyor. Ve bir yerde arasında, Biz 100 alırsanız, bu kadar yere olacak 20 ve 600 arasında. 

Ve tabii ki, artık bu ne olduğu Biz bu sabit kodlanmış kaldırmak gerekir şeyler biz orada var. Yani biz yapmak istiyoruz ne Biz konum verileri almak göz önüne alındığında, bu tek tek veri eleman, ilk ölçek geçmek. Yani ölçek o kadar dönüşebilecek. 

Şey-- Ah, burada küçük bir hata var. Biz eksik verileri ediyoruz. Orada gitmek. Ve bu onu genişletir. 

Bu bize aynı verir Sonuç olarak biz, daha önce vardı ancak bunun yerine sahip olanlar Sert kısıtlamaları kodlanmış. Ve eğer boyutu bizim Tuval değişikliği, örneğin, Bu over olmasını istiyorsanız 400 piksel ve dışarı squishes, biz çakışık olabilir biz genişletmek, ya da biz yapabilirsiniz Bu sol marjı azaltabilir az veya daha fazla 20 şey. Bu numaralar, bu sabit kodlanmış sayılar artık bize mantıklı. 

Ve biz çok fazla yapabileceği de ilginç şeyler. Bunun yerine bir doğrusal olan ölçek, bir ölçek oturum isteyebilirsiniz. Ve bu bize bir günlük ölçeği verecektir. 

Peki şimdi bizim ölçek, yerine sadece bu aralığını genişleterek, daha sofistike şeyler yapıyor. Bunun yerine zor bu dizi sahip ve bunun yerine 600 sahip kodlu, biz sadece genişliğini kullanmak isteyebilirsiniz, böylece genişliği eksi 40 20, 2 kez, diğer tarafta marjı. Ve bu çok daha mantıklı koduna bakmak olabilir biri. 

İlginçtir, terazi olsun Çok, çok sofistike hem de. Bunlar ilginç bir çok şey yapın. Yani ölçekler mutlaka yok Sadece numaraları ile faaliyet. En bir renk skalası yapalım. 

Yelpazemizi göre-- olabilir Yani Bizim etki 1-200 olduğunu. Bu giriş bir şey. Ama biz eşler isteyebilirsiniz Örneğin, kırmızı, yeşil. Ve şimdi, biz bunu 1 geçirirseniz, yeşil almak için gidiyoruz. Biz 200 verirsek, biz kırmızı alırsınız. Ve biz arasında o şey geçmesi durumunda, o bazı karışımı olacak, yere degrade yeşil ve kırmızı arasında. 

Ve yerine sahip aksak mantığı bu tür biz burada var orada koşullu, Biz şey-- bir olabilir arasındaki doğrusal ölçek. Bu yüzden ölçek kullanmak istiyorum sadece , oluşturulan biz renk denilen hangi. Ve biz, bu d verirdim hangi Verilerimiz elemanıdır. Ve oraya gitmek. Biz bir renk skalası var. 

Peki bu eşleme. Şimdiye kadar sol tamamen yeşil. aşırı sağ tamamen kırmızı. Ve arasındaki her şeyi d bir fonksiyonudur. Biz bir ilginç var Burada görsel. Ama bizim veri tür sıkıcı oldu. En biz eğer neler yapabileceğini görelim daha ilginç veriler vardı. 

Yasası IV, Çalışma İlk şey verilerinin-- Biz yapmak için yapmak isteyeceksiniz bizim daha ilginç görselleştirme başka bir yere veri taşımak için. Bu sahip çok aksak var Veri sert burada kodlanmış. Ve genellikle, biz soran olacak veri başkası. Biz belki hükümet isteyeceğiz Sayım Bürosu, veri ne ve o komplo ya soran Bazı veriler için bazı üçüncü taraf varlık ve daha sonra, bir bina Bu konuda görselleştirme. 

Istediğimiz ilk şey yapmak Yani başka bir yere bu hareket olduğunu. Yani bir oluşturmak için gidiyorum Burada adlandırılan Data.JSON dosya. JSON veri biçimidir. Bu konuda çok şey bilmek zorunda değilsiniz. Ve biz kopyalamak için gidiyoruz Biz orada var az veri, Orada birebir yapıştırın, go geri görselleştirme kodu Burada, ve burada bu işlevi kullanın. Siz detayları bilmek zorunda değilsiniz. Ama ne yapacağız, bir bu dosyayı bulacaksınız, Onu getir, ve bize geri. Peki bu ne gidiyor, bir ve Data.JSON dosyasını almak. Ve sonra tüm kodu olduğunu esasen inside-- girintili, tüm kod, biz orada-- olacak var biz geri veri almak yalnızca çalışır. Ve sonra o çalıştırmak için gidiyor Elimizdeki verilerle kodu. Büyük, biz bir sorgular görselleştirme Bazı kod için bir yerde Başka hangi genellikle nereden bazı verileri sorgular Başka bir yerde, genellikle hangi görsel nasıl. 

Ama verilere geri dönmek istiyorum. D3-- D3 temelde Yani veri şeylerin bir listesi verileri tüketir. D3 veriler sadece bir liste bekliyor şeyler, şeylerin bir dizi. Bu ne böyle şeyler önemli değil çok uzun bunlardan bir dizi olduğu gibi, vardır. 

Yani burada, örneğin, biz olabilir Tabii nokta değerleri kayan var. Biz negatifleri olabilir. D3 çok uzun, umursamıyor şeylerin bir listesi olarak. 

Olarak ilginç şeyler biz olabilir, biz de olabilir Böyle dizeleri bir listesi var. Peki bu Crimson başlıkları vardır Ben bir kaç gün önce aldım. Ve belki bazı ilginç bulabilirsiniz Bu bir manşetlere ilgili şeyler. 

Yani yine, bu şeylerin bir listesi. D3 umursamıyor. Bunlar bir dize olur. Biz bizim veri değiştirdik. 

En Bizim görselleştirme dönelim. Şimdi, bizim görselleştirme bekliyor Giriş sayıları olmak. Yani biz gidiyoruz Birkaç değişiklik yapmak için. Yani, örneğin, her şeyden önce, belki de biz birlikte bu çevrelerin koymak istiyorum başlık uzunluğu, başlık karakter sayısı. 

Her zaman o-- yapacağız Peki bizim işlevi bir dize ile çağrılır, biz uzunluğu olduğunu göreceksiniz Ve Daha sonra ölçek bu geçmek. renk, ben dönersiniz Çelik mavi söyledi. Ve oraya gitmek. Biz bir görselleştirme var Crimson başlıkları. 

Bizim ölçek biraz kapalı. En uzun varsayalım başlık, 100 karakterden uzun yani biraz dışarı yayılan. Ve biz bir görselleştirme var. Bu yüzden çoğu manşetleri görünüyor birbirine oldukça yakın, karakter çizgisi açısından. Ama orada bir gerçekten sıyrılıyor. 

Biz bazı araçları inşa edebileceğini daha o keşfetmek için. Ben bu konuda çalışırken Ama oldu meraklı olsun, bu veri setinde, Bir nokta üst üste ile başlıkları onları daha uzun olacaktır. Ben onlar olur varsayar. 

Yani bulalım. Rengini kullanmak edelim Kanal biz daha önce yaptığımız gibi olup olmadığı hakkında bir kodlamak Bir kolon veya yok. Yani biz yine bir koşullu kullanacağız. Sen bilmek zorunda değilsiniz Bu bilgilerini ama bu bir kontrol nasıl Belirli bir karakter dizesi JavaScript, yine ilgili değil. 

Ama biz bulmak yoksa bir kolon, yeşil dönersiniz. Ve eğer bunu yaparsak, biz kırmızı dönersiniz. Yani yine, bu başlıkları Bir kolon kırmızı olacaktır oylandı. Bu, bu güzel means-- budur. 

Peki o görünüyor benim hipotez çarptı edilir. Sadece iki var. Biz sadece altı veri noktaları var ve sadece iki nokta üst üste vardı. Ama biraz daha görünüyor alt ucunda, aslında. Kolonlarla Başlıkları görünüyor genellikle daha kısa olduğu, Bizim verilerimize en az ilginç set--. 

En bu dönelim çelik mavisi ve sonra bakın biz bile yapabileceğiniz ne daha ilginç veriler. Yani yine, ben o sözü D3 veri şeylerin bir listesini. Biz birçok türde numaraları gördüm. Biz dizeleri gördüm. Ancak işler de nesneler olabilir. 

Onlar şeyler karmaşık olabilir Bu bir çok şey vardır. Daha açık söylemek için, çoğu durumda, biz gibi her veri noktasını inşa etmek istiyor daha adil bir değerden daha karmaşık. Bir hayal ederseniz Öğrenciler hakkında veritabanı, Bir öğrenci olabilir isim, öğrenci kimliği, ve bir çok şey ilişkili Belirli bir kayıt ile, sadece bir dize veya bir sayı. Yani o bakalım. 

Bu böyle bir veri kümesidir. Bu depremler hakkında ayarlanmış bir veridir. Bizim liste veya dizi burada her şey Yani şeyler çok şey kendisini içerir. Yani her veri noktası olan bir büyüklüğü ve koordinat. Ve kendilerini koordinatları iki şey içerir. 

Yani her gün artık çok daha fazla olduğunu karmaşık ve çok daha ilginç ve çok daha fazlasını içerir ilginç bilgiler. En biz dışarı inşa edebileceğini görelim. Yine, buraya dönersek kullanarak Bizim Histogram daire görselleştirme Biz inşa ettik, biz inşa edebilirsiniz bakalım büyüklük dağılımının görselleştirme Bizim veri kümesi. 

Yani burada, aynı kavram. Ama şimdi d daha fazla şeyler içeriyor. d birçok veri öğelerini içeriyor. Bu yüzden geri d olsun. D3 bize d veriyor. Ve biz büyüklüğünü bularak cevap d ve sonra ölçeğine bu geçen. 

Ve sonra değiştirmek gerekir Bizim ölçek, tabii. Büyüklükleri, sadece yok Yani çok fazla 10 gidin. Aslında, orada olmamıştı 10 büyüklüğünde deprem. Ama bu bizim üst tür sonunda, bizim üst spektrum. 

En tazeleyelim. Güzel, bir görselleştirme var. Öyle note-- ilginç Bu iki veri noktasının olduğu neredeyse tam her üstüne olan Diğer, büyüklük açısından. Biz kullanıyorsanız donukluk bu bkz. 

Şimdi coğrafi veri var. Biz enlemleri ve boylam var. Belki bir şey a yapabiliriz çok o daha ilginç. Biraz daha bulalım görselleştirmek için ilginç bir yol bu daha karmaşık veri biz erişebilirsiniz. 

Yasası V, Mapping-- temelde, biz bir harita üzerinde bu koymak istiyorum. Ben bu nereye gittiğini bu demek. Biz ilgili bilgi kodlamak istiyorum Bu deprem okumaların pozisyonu, yanı sıra kendi büyüklüğü, şimdi o var çünkü. Biz tüketmek anlamak daha karmaşık veri. 

Biz yapacağız ilk şey bir harita, bir arka plan haritası oluşturabilirsiniz. Ben geçmesi için gidiyorum Bu çok hızlı. Bu zor kodudur. Bu o başka biri yemek tarifleri gerçekten yok Kullanmak için tam olarak anlamak zorundayız. Ama bu kodu. Bu kod burada bir harita oluşturur. 

Ayrıntılı olarak gidecek değiliz. Ama yüzeysel, ne yaptığını, bir Bu us.json dosyası, hangi sorguların Bir veri dosyası gibi Daha önce vardı bir tane. Elbette, daha karmaşık olduğunu. Ancak bu durumda, her şeyi, Her veri noktası bu devlet ve bir listesi vardır enlemler ve boylam Bu çokgen tanımlamak, Bu formu, devlet. 

Peki D3 ne yapacak benzer Daha önce yaptığımız ne. Bu talep edecek ve bir elemanın bu bağlanır. Ve bir işlev var ki Bu eleman haritasını olacak, enlem ve boylam dayalı. Sen bu konuda daha fazla bilgi edinebilirsiniz. Ve ben bunu tavsiye ederiz. 

En bağlantılar vardır Bu kodun sonuna yayınlanmıştır. Ve kod yorumladı edilir. Bu konuda daha fazla için bağlantılar vardır. Bunu bakmak öneririz. Ama biz ne hakkında olduğunu bakım Bu projeksiyon işlevi. Ben gitmek istiyorum. 

Öncelikle, göstermeme izin ver Bunu, evet, biz bir harita var. Haritalar serin. Yani bu bakalım üretim fonksiyonu. 

Projeksiyon çok olduğunu Bir ölçek gibi, yine ölçekler. Peki üretim için Bu projeksiyon işlevi , biz boylam geçebileceği does ve bu durumda latitudes--, Burada bu değerler Binanın enlem-boylam Biz sağ oturuyorsun şimdi-- projeksiyonuna. Ve projeksiyon dönüştürme x ve y piksel değerleri içine. 

Peki projeksiyon yapıyor cetvelimize çok benzer. Bizim enlemleri alıyor ve bütün dünya temsil boylam ve daralma ve boyutlandırma İstediğimiz meydanın aşağı, biz bunu verdik ki. Bu durumda, konum Bu değerleri geçen. Ve o, iyi, bize veriyor Ekranda 640 piksel anlamına gelir. Bu, tüm ekran 700 piksel Geniş, burada bize yapar yani, Aşağı ve 154 piksel, yapardım tahmini hemen hemen burada. 

Peki bu lat-uzun ürünler alarak hangi Bütün dünya üzerinde bir şey temsil ve squishing ve etrafında hareket Bize x ve y piksel değerlerini vermek için, Bu var ilk şey Bu eşleştirme kodu yapılır. Ve daha sonra geri kalanı kodu verileri tüketir ve sonra bu lat-uzun mamul harita Ekranda bir şey üzerine. 

Ama biz bu projeksiyon kullanmak için gidiyoruz fonksiyonlar, çıkıyor, çünkü biz de enlem-boylam uzun ürünler var. Bizim verilere baktığımızda, biz var enlemler ve boylam koordinatları Her gözlem için. Yani projeksiyon kullanalım. 

Yani bizim fuar bakarak, bizim exposition-- istiyoruz Biz enlem ve boylamını bir var. Ama biz piksel değerlerini istiyoruz. Ve çıkıyor, biz tam olarak var ne projeksiyon want--. Biz çok gibi Burada ölçek kullanılarak, şimdi projeksiyon kullanmak için gidiyoruz ve koordinatları geçmektedir. İlk şey Yani biz konum böylece doing-- konum bireysel veri alma d bağımsız bir deprem elemanı okuma. Yaptığımız ilk şey Koordinatları olsun. Pekala, biz koordinatları var. 

Yaptığımız ikinci şey projeksiyon o geçmek. Projeksiyon bu koordinatları dönüştürür piksel değerleri, x ve y içine. Ve ardından son şey sadece x olsun yapmak istiyorum, bu bu durumda ilk biridir. Bu iki şey ilk değil Bu projeksiyon tarafından döndürülür. 

Biz y için aynı yapacağız. Ama bunun yerine, biz dönersiniz İkinci unsur, y. Yenilemek için hazır olun. Ooh, ekstra karakter ötürü-- güzel, biz var bu veri odaklı bir belge nesnelerin bu JSON dosyasını gizlemek, bir harita yapma ve değiştirme verilerle ilgili öznitelik Bir harita üzerinde proje. Bu gerçekten ilginç. Bu serin. 

En bir çentik yukarı alalım. Ben biz iki adet var, demek Her veri noktası ile bilgi. Üç, demek. Biz koordinatlarını var, olan bir x ve y. Ve biz büyüklüğünü var. 

Biz bir şekilde büyüklüğünü kodlamak gerekir. Biz kanalları bir sürü var. Biz renk kullanabilirsiniz. Biz yarıçapı kullanabilirsiniz. Biz donukluk kullanabilirsiniz. Biz kod birçok şeyi kullanabilirsiniz. Bu özellikleri ve birçok Herhangi , burada listelenen olmadığını daha onlar isteğe çünkü, biz olabilir Bu verileri kodlamak için kullanın, inme ve tüm bunları bahsettiğim ettik. 

En yarıçapı yapalım. Ben yarıçapı en kolay olduğunu düşünüyorum. Yani yine, biz sabit kodlanmış değiştiririz 40 ve bazı hesaplamalar yapmak. Biz yine bizim favori ölçek kullanacağız. Ve biz d geçtik. Biz büyüklüğünü istiyorum çünkü Ama d değil d. d sadece veri noktasıdır. Biz büyüklüğü ölçekli geçmek gerekir. 

Tekrar deneyelim. Ooh, bu çalışmıyor. Neden çalışmıyor? 

Peki ne ölçek hatırlıyorum. Tekrar ölçekte bakalım. 1'den 10'a kadar Ölçek harita üzerinde 22-600 arasında, daha az ya da. 600 büyük. Bu alıyoruz nedeni budur. 

Yani bizim ölçeğini değiştirmek istiyorum daha makul bir şey. Biz 0-60 istiyorum, diyelim. 60 büyük, ama 10 deprem inanılmaz nadirdir. Aslında, onlar asla ettik. 

Peki yapacak bu ne, bu alacağım 1-10 gider eden büyüklük ve bunu genişletmek için haritaya. Ve 0-60 onu haritaya. En tazeleyelim. 

Güzel, biz bir görselleştirme var. Bu harika. Bu gerçek verilerdir. Sen benim küçük oyuncak, fark edeceksiniz örneğin, büyük bir deprem bize doğru üstünde olduğunu. Ama o kadar. Biz bir tarih tahrik görselleştirme var verileri tüketir ve gerçekten bize verir ilginç bilgiler. Evet, biraz ekleyelim buna etkileşim. Ben o olduğunu belirtmiş D3 güçlü kuvveti. 

Yani burada her eleman için, biz konum niteliklerin bir demet anlatan. Ama biz de istediğimiz tanımlayabiliriz etkileşim unsurları ile gerçekleşmesi. Örneğin, biz anlatabilir misiniz ne zaman biz fare üzerinde olur. Ve çok benzer, bir işlev götüreceğiz, çok benzer Biz daha önce vardı nitelikleri Nerede biz bir şey yapmak biz üzerinde eleman getirdiğinizde. 

Yani ilk şey gerekiyor Bu öğeyi seçin yapmak, Tarayıcıda, temelde bulmak için. ve sonra ayarlayabilirsiniz buna bir nitelik. Biz getirdiğinizde Peki ben burada yapıyorum, bir bir şey üzerinde, o eleman alırsınız ve sonra geri opacity 1, tamamen opak. En benziyor bakalım. 

Biz bir var görünür Burada ekstra noktalı virgül. Biz buraya getirdiğinizde Yani, tam olur. Ama şimdi, tabii, o tam kalır çünkü biz ne açıklamak zorunda bizim imleci kaldırın. Yani bu tam olarak yapalım mouseout, mouseover karşı. 

Ve biz bunu sıfırlamak gerekir ne 0.5 before-- vardı. Ve şimdi, her zaman biz hover, biz tam daire almak. Bize ne görmenize yardımcı olur biz biz aslında seçerek ediyoruz. 

Ve şimdi bu gerçekten harika yapalım. Gerçek verilere bu bağlantı edelim. Yani soralım olabilir USGS kendi verileri hakkında. ABD Jeolojik Araştırmalar Yani deprem hakkında veri vardır. Onlar yapabilen bir kamu API JSON biçiminde tüketilmesi. O yüzden bu yapalım. 

Yani bu kod biraz olduğunu USGS API bağlanır. Ve bunun üzerine işleme biraz var. Bu alakalı değil ama basitleştiren gibi basit bir veri formatına Daha önce vardı. Yani bizim çağrı kurtulmak dosya üzerinde bizim sahte Data.JSON. Ve bunun yerine, ben arıyorum Aslında USGS. 

En güzel, yenileme olsun. Bu gerçek, gerçek hayat verileri deprem için bu hafta. Bu gerçekten ilginç. Bu şaşırtıcı değildir Bizim için, ama vardır Depremlerin bir sürü Kaliforniya West Coast. Ama çok ilginç olduğunu düşündüm çok deprem olduğunu Alaska, ve görünüşe göre, Burada Midwest. Ben, ilginç demek, ve biz iyiyiz. Bu sonuç bu. 

Ama temelde, bu D3 yapmamızı yardımcı budur. Bize verileri almaya yardımcı olur, bağlama DOM elemanları o, ve bu unsurlar değiştirmek zorunda datanın bir fonksiyonu olarak, bu nitelikleri, hepsi var elementlerin pek çok özellikleri, Tüm kanallar için yararlı bilgi iletmek için. 

D3 inanılmaz güçlü Kütüphane ve şaşırtıcı derecede iyi çalışır. Bu, bazı güçlü şeyler. Veri görselleştirme bir inanılmaz güçlü bir araç Derin insanlara iletmek için kendi çekirdek alır anlayışlar ve onları içinde, anlamak yardımcı olur Bu derin ve sezgisel bir şekilde, nasıl veri çalışır ve nasıl veri hayatımızı değiştirir.