>> [Musika nagpe-play]
>> David CHOUINARD: Ako David Chouinard, at ito ay D3.
Maligayang pagdating.
Kami ay pagpunta upang malaman ang tungkol D3 ngayon.
D3 ay isang JavaScript framework para sa pagbuo ng isang mataas na kalidad
interactive na visualization para sa web.
Mga bagay tulad ng kung ano ang hindi namin makita sa likod ng akin,
kami ay pagpunta upang matuto upang gumawa ng mga mga bagay, uri ng mga pangunahing kaalaman ng ito.
Ngunit ito ay magiging cool.
Magsimula na tayo paggawa ng kaakit-akit na mga larawan.
Mayroon kaming higit pang mga demo ng mga prospects magagamit.
Gawin natin ito Hayaan.
>> Batas ko, DOM manipulation-- kami ng pagpunta upang simulan agad ang paggawa ng mga cool na bagay.
Una sa lahat, sa kaliwa, mayroon kaming code.
Sa kanang, mayroon kaming ang resulta ng aming mga code.
Tara sa pamamagitan nito.
>> Gumawa ng isang lupon Hayaan.
Paano gumagana ang tunog?
svg.append circle-- ginawa lang namin isang lupon.
Hindi ka naniniwala sa akin, tama?
Hindi ito doon.
>> Kaya kung ano ang ginawa namin dito mismo ay, SVG ay nasusukat vector graphics.
Ito ang paraan para sa sabihin namin ang mga browser sa gumawa ng mga vector graphics sa browser.
Ang ginawa lang namin sa ngayon ay nagdagdag ng isang lupon upang mag-browse.
>> Ang pangako ay na ang mga lupon ay nangangailangan ng isang bit ng mga pangunahing katangian
bago aktwal na namin makita ito.
Kailangan namin upang sabihin dito na posisyon x nito, ang posisyon nito y, radius nito.
Hindi namin sabihin dito ang anuman sa na, kaya hindi ito namin nakikita sa ngayon.
Ngunit sabihin natin ito bagay-bagay ipaalam.
>> Kaya una sa lahat, mayroon ka upang bigyan ang aming lupon ng pangalan.
Kaya ipaalam tawagan natin ito bilog.
Ang aming lupon ay mayroon na ngayong pangalan.
At bibigyan natin ito ng ilang mga katangian ipaalam.
Paano ang tungkol sa cx ay nakasentro x, kaya sa gitna ng posisyon x.
Sabihin nating, 200 para sa 200 pixels.
>> Bigyan natin ito ng y ng 200 pixels pati na rin ipaalam sa.
At isang r, isang radius, ng tungkol sa 40 pixels.
Ngayon tingnan natin.
Hindi ko ma-spell.
>> Mayroon kang pumunta.
Mayroon kaming isang lupon sa posisyon 200 mga pixel, 200 mga pixel, radius na 40 pixels.
Uri ng mga cool na, i-right?
Mayroon kaming isang lupon.
Oo.
>> Kaya hindi na kailangang sundin kasama.
Ang lahat ng mga halimbawang ito, ang lahat ng mga ang code ako paggawa ngayon
Ibibigay online sa dulo sa anyo ng mga interactive na mga halimbawa
may checkpoints sa bawat batas, at iba pa.
>> Gawin ang mga bagay-bagay nang higit pa Hayaan.
Ang itim na bilog ay talagang hindi mabuti.
Ikinalulungkot kong para sa error na mga mensahe mula doon.
May pumunta namin.
>> Bigyan natin ito ng isang kulay Hayaan.
Paano iyan?
Gusto kong bakal asul.
Well, ang aming lupon ay nagbago ng kulay.
Mabuti iyan.
Ay gawin itong semi-transparent Hayaan too-- semi-transparent.
>> Kaya ito ay mga katangian kami ay pagtukoy sa lupon.
Ang unang bagay na ginawa namin ay inilalagay namin ang isang lupon sa pahina.
At pagkatapos kami ay pagtukoy sa isang bungkos ng mga katangian.
Ang ilan sa mga ito ay kailangan, tulad ng cx, .cy, at Radius.
At iba pa ay opsyonal.
>> Maraming higit pang mga katangian.
Marami sa mga ito.
Halimbawa, maaari kaming magkaroon ng stroke pati na rin, isang stroke ng pula.
Ngunit ng alisin na ipaalam.
Humihingi kami pabalik sa isang lupon, ang isang asul na bilog.
>> Kaya ipaalam gumawa ng higit pang mga lupon.
Paano iyan?
Gumawa ng isa pang lupon Hayaan.
Ito ay kapana-panabik, tama?
>> Kaya sabihin ko lang Kopyahin-paste kung ano ang namin ay may mga naka.
Tawagan natin ito circle2 Hayaan.
At ni gawin ang eksaktong ipaalam parehong bagay at bigyan ito ng
katangian, na ibinigay ng x posisyon ng 300.
Ayos, mayroon kaming dalawang mga lupon ngayon.
>> At siyempre, maaari naming -update ang mga halaga.
Maaari ko itong ilagay sa 400, at ngayon ay gumagalaw ito.
At dahil ito ay nakakainis na, sabihin alisin ito, kaya circle2.remove.
Ito ay wala na ngayon.
>> Kaya kung anong ginagawa namin at Lubos na lang, very-- ito
ay lubos na katulad sa kung ano ang maaaring gawin sa jQuery, halimbawa.
Lamang kami ng pagpapatakbo DOM, ito ay tinatawag na.
Maaaring narinig mo na ang salitang iyon dati.
Kami ay lumilikha ng mga bagay-bagay, ang pagtatakda mga katangian sa bagay, pag-aalis ng mga bagay-bagay.
>> Ngayon, narito ang kung saan kagiliw-giliw na ito ay nakakakuha.
Kaya sa huling bahagi ng code, maaari naming pa rin sumangguni sa orihinal na bilog dito.
Kaya ipaalam reset ng katangian nito sa cx.
Sabihin nating, nitong posisyon x 400.
At Pupunta ako sa transition iyon, kaya halata.
May pumunta namin.
>> Kaya nagdagdag kami ng isang lupon.
Itinakda namin ang ilang mga katangian.
Nagdagdag kami ng isa pang lupon, inalis ito.
At pagkatapos ay namin ang pagbabago ang orihinal na bilog.
>> Ngunit narito ang kung saan ito ay makakakuha ng Marami pang mga kagiliw-giliw.
Hindi lamang maaari naming itakda ang mga katangian bilang pinahahalagahan lamang, maaari naming sabihin,
hey, bilog, pumunta sa iposisyon 200.
Maaari din naming itakda ang mga ito bilang mga pag-andar.
>> Kaya sa halip na nagbibigay sa 400 dito, maaari naming gumawa ng ilang mga kalkulasyon
sa mabilisang para sa kung ano tayo Gusto katangiang iyon upang maging.
Kaya ito ay kung paano mo nais ipahayag iyon.
Sabihin namin, sa halip na 400, ipaalam sa akin magbibigay sa iyo ng isang function sa halip.
At dito, sa loob ng function na ito, maaari naming gumawa ng anumang mga nakatutuwang pagkalkula.
>> Maaari naming maglaan ng oras at tingnan natin ang ilang iba pang mga bagay
at dynamic na magpasya para sa ang lupon kung ano ang halaga na gusto namin.
Paano ang tungkol sa bigyan kami lamang ito ng random na x posisyon?
Kaya na iyon.
>> Kaya kung ano na nagsasabing ay, para sa bawat x, patakbuhin ang function na ito.
At kung ano ang aming ginagawa ay pagkalkula ilang mga bagay, ang isang random na beses ang lapad
at bumabalik na iyon.
Kaya sa tuwing nagsasagawa kami na, makakakuha tayo ng isang bilog na napupunta sa isang random na lugar.
Ito ay uri ng cool.
Pakiramdam ko ay tulad ng maaari ko bang tingnan sa ito para sa isang maliit na.
Kami ay nagsisimula upang makapunta sa isang bagay na kawili-wiling dito.
Gumawa ng hinimok na ngayon ang data na ito Hayaan.
Walang data dito.
Ay baguhin natin iyon.
>> Act II, pinapaandar ng data Documents-- Kaya sabihin bumalik sa dito.
At sabihin lamang makakuha ng pawalan ng circle2, dahil lamang namin ang pagdaragdag at pag-aalis
ito.
Kaya huwag talagang kailangan namin ito.
Kailangan ba naming maging ng maraming higit matalino dito.
Sabihin nating, mayroon kaming ilang data ng uri.
Isa moment-- sabihin nating, namin ay may data ng form na ito.
Nagkaroon kami ng isang array, lamang isang bungkos ng mga numero.
Mayroon kaming pitong mga numero dito, kahit anong mga represent-- halaga
sa bank account ng mga tao, kung paano magkano ang timbangin nila, alam ng diyos kung ano.
>> Ito ang mga numero, at kami nais na gamitin ang aming mga lupon
upang katawanin ang mga numero kahit papaano.
Gusto naming itali ang aming lupon ng mga numero.
Kaya kung ano ang ginagawa namin.
Sabihin nating, gusto namin ng isang bilog para sa bawat numero.
Maaari naming gawin ang mga lumang bagay tayo ay doing--
bilog na Magkabit at circle2 at circle3.
Ngunit ito nakakaabala kamay, at maraming ng paulit-ulit na lohika.
>> Kaya sabihin makakuha ng higit pang matalino na may mga iyon.
Sa halip na gamitin ang var lupon svg.append tayo ay lamang ang ginagamit,
kami ay pagpunta upang gamitin ang ito maliit na bloke dito.
Hindi ko nais upang pumunta sa malalim sa kung anong gagawin ang lahat ng mga bahagi.
At ito ay uri ng isang advanced na paksa.
At gusto ko ma ko.
>> Ngunit ang mga pangunahing bagay na dapat recognize-- at makikita mo ay napakadalas sa D3 code.
Ang bloke ng teksto ng mga pangunahing lumilikha ng maraming mga lupon
bilang mayroong mga elemento ng data sa array dito mismo.
Kaya ito ay lumilikha ng maraming mga lupon bilang mayroong mga elemento.
Ito ay pagpunta sa lumikha sa amin ng pitong mga lupon.
At ito ang isang talagang, talagang pangunahing bagay.
Ay tumakbo na Kaya ipaalam.
Mag-alis ng aming iba pang mga lupon Hayaan.
Hayaan magkomento ni lamang ito Bahagi out at magpatakbo ng mga ito muli.
>> May pumunta namin.
Kaya aming lupon dito ay isang maraming mas madilim, dahil kami
may pitong mga lupon, isa sa tuktok ng isa.
Nilikha namin lamang pitong mga lupon, isa bawat isa para sa bawat isa sa mga elemento ng data.
Ngunit mayroong isang mahalagang bagay na nangyari sa ang snippet na ito dito mismo.
>> Ito ay ang data na iyon ay masaklawan.
Kaya bawat solong isa sa mga elemento ng data,
10, 45, 105, ay nakagapos sa isang partikular na lupon.
Kaya ito ay hindi lamang nilikha ng grupo ng mga lupon
ngunit Tie ang dalawang bagay-bagay.
>> At sa hinaharap, dahil nilikha namin mga lupon na may ganitong D3 function,
kung bibigyan ko kayo ng isang lupon, maaari kang bigyan mo ako ng data na nauugnay dito.
Kaya maaari naming hilingin sa D3.
Uy, D3, mayroon akong lupong ito.
Ano ang data na ang mga bilog ay may?
At D3 ay sabihin sa amin 10 o 45 o 105.
>> Mga bagay na ito ay napapailalim.
Iyon ay isang napaka, napaka pangunahing mga konsepto.
Tingnan natin natin iyon.
>> Kaya ang paraan na gusto naming hilingin sa D3-- kaya ito ay walang-katuturang para sa,
ngunit pinagkakatiwalaan lang ako dito.
Ito ay kung paano namin magtanong D3.
Uy, D3, ibigay ang unang sa akin bilog na maaari mong mahanap.
Bigyan mo ako ng unang bilog maaari mong mahanap.
At pagkatapos ay maaari naming hilingin sa D3, kung ano ang ang data sa na, tulad nito, 10.
>> Kaya tanungin lang namin D3, mahanap ako unang bilog maaari mong mahanap.
Ano ang data nito?
10, na talaga ang aming unang elemento ng data.
Maaari naming hilingin ito, hey, D3, hanapin sa amin sa aming third lupon.
105.
Bakit ito talagang mahalaga?
>> Kaya dito mismo, nabanggit ko na maaaring namin ang mga pag-andar.
At nabanggit ko na noon ay isang napaka-makapangyarihang bagay.
Kaya hindi lamang ay maaaring ang aming mga pag-andar gumawa ng mga bagay tulad ng ilang mga pag-compute, halimbawa,
bumalik ng random na numero, maaari itong ring gawin ang mga bagay batay sa data.
Ito ay kung ano ang ibig sabihin ng data hinihimok ng mga dokumento.
Iyon ay kung ano ang ibig sabihin D3 para sa.
>> Sa halip Kaya ito x postition-- ng lang ang sinasabi, ang lahat ng mga lupon,
makakuha ng mga x 200 posisyon, namin Maaaring bigyan ito ng isang function.
At dito, maaari kaming magsagawa ng ilang mga kalkulasyon.
at d dito nakatayo sa lugar para sa data.
Kaya sa tuwing mayroon kaming isang lupon, talaga,
D3 ay lumikha ng mga pitong mga lupon.
At pagkatapos ay para sa bawat
>> bilog, ito ay pagpunta sa pumunta, hey, circle1 kung ano ang iyong posisyon x.
Sa nakaraan, hindi namin laging pagsagot 200.
Ngunit ngayon, itatanong sa tuwing D3 amin kung ano ang iyong posisyon x,
ito ay pagpunta sa magbibigay sa us-- mayroon kami bilog na iyon, kaya may namin ang data.
Ito ay pagpunta sa bigyan kami ng data at sabihin, kung ano ang gusto ng pagsasaysay maging,
batay sa data na iyon.
>> Hayaan bumalik ni lamang ang aktwal na data.
Kaya kung nagpapatakbo namin ito, nagbibigay ito amin data hinihimok ng mga dokumento.
Ang mga lupon ay batay kaugnay position--
ang mga ito ay bases bilang isang katangian ng data.
>> Kaya para sa unang bilog, D3 naglalagay ng isang lupon.
At pagkatapos ay nagtatanong sa amin D3, kung ano ang ginagawa Gusto mo ang paglalahad upang maging.
At kami lang sabihin, anuman ang data ay.
Gawin ang pagsasaysay 10.
>> Pagkatapos ay humihingi ito, kung ano ang gusto mong ang pagsasaysay na para sa pangalawang bilog.
At namin masagot, 45.
At kami, siyempre, maaari gumawa ng ilang mga pag-compute dito.
Tingin ko na ang mga lupon mga uri ng squished up.
>> Kaya i-multiply ito sa pamamagitan ng 3, i-multiply ang data sa pamamagitan ng 3.
Ang aming mga bilog lamang Kaka pinalawak out.
Ang aming mga halaga ay triple.
>> Ang lupon ay talagang sa dulo, kaya siguro ng uri ng offset ito ipaalam.
Sabihin nating, sa pamamagitan 20.
Narito kang pumunta.
>> Ito ay isang visualization ng data.
Ito ay isang napaka-basic na isa, ngunit ito Binibigyan kami ng ilang pananaw sa aming mga data.
Sinasabi ito sa amin na, halimbawa, namin magkaroon ng isang maliit na kumpol ng mga elemento.
At mayroon kaming isang malaking outlier dito.
Ito ay nagbibigay sa amin ng ilang impormasyon tungkol sa pamamahagi.
>> Kung kami ay, halimbawa, upang baguhin ang data sa 150 dito at refresh,
ang aming mga visualization ay nagbago.
Ang dokumentong ito ay pinapaandar ng data.
>> Kaya siyempre, ang lahat ng mga sangkap na ito, lahat ng mga katangian dito,
Maaari kaming gumamit ng isang function, hindi lamang ang mga numero, hindi lamang
ang x at y mga posisyon.
Kaya maaari naming gamitin ang isang pagpapaandar para sa kulay.
Kaya kami na ang parehong.
Susubukan naming bigyan ito ng isang function.
>> At maaari kaming magkaroon sabihin nating, conditionals sa aming function.
Function na ito ay maaaring maging daan ng mga linya mahaba.
Maaari itong gawin sa lalong, napaka-komplikadong bagay.
>> Kaya ilagay ang isang pahayag kung dito ipaalam.
Sabihin natin, kung ang aming data ay mas mababa sa 50, na ang ilang limitasyon
na hindi kami interesado sa para sa ilang mga kadahilanan.
Ay gawin itong green Hayaan.
Kung hindi man, na gawin itong pula ipaalam.
Paano iyan?
Nice.
>> Kaya aming mga visualization data ay nagsisimula ihatid mas kawili-wiling impormasyon
sa maraming mga channel.
Kaya ngayon alam namin ng kaunti tungkol sa pamamahagi.
At alam natin na mayroong ilang mga uri ng cut off sa 50 na kami interesado.
Alam namin na may dalawang mga punto ng data sa ibaba na hangganan at karamihan sa mga ito
sa itaas.
>> Kaya bilang panghuling hakbang, ang data na ito dito, ito ay lubhang bibihirang upang makita ito tulad na.
Kaya ipaalam ilipat lamang ng ito sa isang variable dahil iyon ang mas malinis, tulad nito.
At pagkatapos ay gamitin ang aming variable na dito.
Ito ay ang eksaktong parehong bagay.
Ito ay lamang ng kaunti mas malinis.
>> Susunod, Act III, Scales-- Kaya isa problema sa
dito ay, kung babaguhin namin ang aming data ng mga ito 200 value--
kung babaguhin namin ito sa 400 o isang bagay at refresh,
pagkatapos ay ang halaga na ito lamang nagpunta sa labas ng puting-tabing.
Kaya aming logic dito mismo kung paano gawin namin ang mga oras 3
at 20, upang ipakalat ito out at pagkatapos ay offset ito ng kaunti ay talagang clunky.
>> Ano ang ibig sabihin ng mga numero?
Lang nila hard code doon.
At sila talaga ay nakatali sa data.
Gusto naming ng isang hinimok ng data ng dokumento.
Gusto naming isang napaka-kakayahang umangkop na dokumento, na ibinigay ng data, adapts upang ito
at kinakatawan nito.
>> Ano ang kailangan namin talaga ay, namin mayroon sa hanay ng mga numero 10.
45, 105.
At gusto naming upang i-map na papunta ang lapad, ang buong lapad dito.
Kaya mayroon namin ang saklaw ng pagpunta 0-100 numero.
At mayroon kaming pumupunta ito campus ko 20-700, sa kasong ito.
>> Uri ng namin nais upang i-map na sa.
Gusto naming masukat na pataas at pagkatapos ay i-offset ito nang kaunti.
Ito ay lumiliko out na D3 ay may mga ito.
Ito ay tinatawag na isang sukat.
Kaya gamitin natin ito ipaalam.
>> Ang paraan na works-- pupuntahan ko -type ito up at pagkatapos ay ipaliwanag ito.
Ito ay isang sukatan.
Ano ito ay gawin ay, ito ay i-map out mga halaga ng 1-200 sa sa 20-600.
Maaari naming suriin na.
Maaari naming makita na dito.
>> Kaya kung feed ko ito 1-- isang sandali.
Bigyan mo ako ng isang segundo.
Dapat na namali ang pagkakapasok ko ito.
Mayroon kang pumunta.
Ikinalulungkot kong tungkol iyon.
>> Kaya kung ano ang gagawin ng isang sukat ay, tatagal ng isang halaga
at pagkatapos ay convert na, palawakin na out, kaya
punan ang buong hanay ka humihingi.
Kaya sa kasong ito, kung paano namin ibinigay ito sa isa, ito ang nangyayari upang i-map na papunta 20.
At kung paano namin ibinigay ito sa 200, ito ay pagpunta sa map na sa sa 600.
At sa isang lugar sa pagitan ng, kung makuha namin 100, ito ay
magiging isang lugar sa pagitan ng 20 at 600.
>> At siyempre, ngayon ito ay kung ano ang kailangan namin upang alisin ang matapang na mga naka-code
mga bagay na mayroon kami doon.
Kaya kung ano ang gusto naming gawin ay kunin ang data na hindi namin
ibinigay, na ang mga indibidwal na data elemento, at pumasa ito sa unang scale.
Kaya scale ay scale up ito.
>> Well-- Oh, mayroon kaming maliit na error dito.
Kami ay ang mga nawawalang data.
Mayroon kang pumunta.
At na lumalaki ito.
>> Iyon ay nagbibigay sa amin ng parehong resulta namin ay may bago,
ngunit sa halip ng pagkakaroon ng mga hard code mga hadlang.
At kung ang laki ng aming mga canvas pagbabago, halimbawa,
kung gusto naming magkaroon ng ito sa paglipas ng 400 pixels at ito squishes out,
maaari kaming magkaroon ito over-- maaari naming palawakin ito, o namin
Maaaring mabawasan ang natitira upang margin isang bagay na mas mababa o higit pa kaysa sa 20.
Ang mga numerong ito, ang mga hard code mga numero ngayong magkaroon ng kahulugan sa amin.
>> At maaari naming gawin ng maraming higit pa pati na rin ang mga kawili-wiling mga bagay.
Kaya sa halip ng pagkakaroon ng linear Scale, maaari naming nais na mag-log isang sukat.
At iyon ay magbibigay sa amin ng isang sukat ng log.
>> Kaya ngayon ang aming sukat, sa halip na lamang pagpapalawak out ang saklaw na iyon,
ito ang ginagawa mas sopistikadong mga bagay.
Sa halip ng pagkakaroon ng hanay na ito mahirap -code, at sa halip ng pagkakaroon na 600,
maaari naming nais na gumamit lang ang lapad, kaya mula 20 hanggang ang lapad minus 40,
2 beses ang margin sa kabilang panig.
At ito ay gumagawa ng maraming higit pang mga kahulugan upang isang tao na maaaring tumingin sa ang code.
>> Nang kawili-wili, ang mga antas makakuha ng napaka, napaka-sopistikadong pati na rin.
Gawin ang mga ito ng maraming kawili-wiling bagay.
Kaya mga antas ay hindi kinakailangang magkaroon upang patakbuhin lamang na may mga numero.
Gumawa ng isang sukat ng kulay Hayaan.
>> Kaya maaari be-- ang aming hanay ang aming mga domain ay 1-200.
Iyan ang input bagay.
Ngunit maaari naming gusto upang i-map mula sa berde sa pula, halimbawa.
At ngayon, kung pumasa namin ito 1, kami ay pagpunta upang makakuha ng berde.
Kung bigyan namin ito 200, magpapadala kami makakuha ng pula.
At kung pumasa namin ito ng isang bagay sa pagitan, ito ay pagpunta sa ilang mga kumbinasyon ng mga iyon,
pang lugar sa gradient sa pagitan ng berde at pulang.
>> At sa halip ng pagkakaroon ang ganitong uri ng clunky logic
mayroon kaming dito sa kondisyong doon,
maaari kaming magkaroon ng isang something-- linear na sukat sa pagitan ng mga iyon.
Kaya gusto naming gamitin ang sukatan namin lamang nilikha, na tinatawag naming kulay.
At gusto namin bigyan D ito, na ay ang aming elemento ng data.
At doon pumunta namin.
Mayroon kaming isang sukat ng kulay.
>> Kaya ito ay pagma-map.
Kaya dulong kaliwa ay ganap na berde.
Ang dulong kanan ay lubos na pula.
At lahat ng nasa pagitan ng ay isang katangian ng d.
Mayroon kaming isang kawili-wiling visualization dito.
Ngunit ang aming data ay uri ng pagbubutas.
Tingnan natin kung ano ang namin gawin kung Ipaalam namin ay may higit pang mga kagiliw-giliw na data.
>> Act IV, Pagtatrabaho Sa Data-- ang unang bagay na
Makikita gusto naming gawin upang gumawa ng aming mga visualization mas kawili-wiling
ay upang ilipat ang data sa ibang lugar.
Ito ay napaka-clunky na magkaroon matigas ang data naka-code dito.
At sa pangkalahatan, kami ay magiging nagtatanong ibang tao para sa data.
Kami mag-i-siguro na humihiling sa pamahalaan, ang Census Bureau, kung ano ang iyong data
at pagkatapos ay paglalagay na iyon o na nagtatanong ang ilang mga third-party na entity para sa ilang data
at pagkatapos ay pagbuo ng isang visualization sa iyon.
>> Kaya ang unang bagay na gusto naming gawin ay lumipat na sa ibang lugar.
Kaya ako pupunta upang lumikha ng isang -file dito na tinatawag na data.json.
JSON ay ang format ng data.
Hindi mo na kailangang magkano ang tungkol na alam.
At kami ay pagpunta upang kopyahin ang mga kaunting data na mayroon kami doon,
-paste ito sa may verbatim, pumunta pabalik sa aming mga visualization code
dito, at gamitin ang function na ito dito mismo.
Hindi mo na kailangang malaman ang mga detalye.
Ngunit kung ano ito ay gawin ay, ito ay mahanap ang file na iyon,
kunin ang mga ito, at ibalik ito sa amin.
Kaya kung ano ang ginagawa ay, ito mapupunta at makuha ang data.json file.
At pagkatapos ay ang lahat ng mga code na naka-indent inside-- tunay,
lahat ng code na mayroon kami habilin there-- tumakbo lamang kapag makuha namin ang data pabalik.
At pagkatapos ito ay pagpunta sa magpatakbo na code na may data na mayroon kami.
Mahusay, mayroon kaming visualization na query
para sa ilang mga code sa isang lugar iba pa, na kung saan ay karaniwang
kung saan ito query sa ilang mga data mula sa sa isang lugar ng iba pa, na kung saan ay karaniwang
kung paano gumagana ang mga visualization.
>> Pero gusto kong bumalik sa data.
Kaya ang data sa panimula sa D3-- D3 consumes data na ang isang listahan ng mga bagay.
D3 inaasahan ang data ay lamang ng isang listahan ng mga bagay, ang isang hanay ng mga bagay.
Hindi mahalaga kung ano ang mga bagay ay, kaya hangga't ito ay isang hanay ng mga ito.
>> Kaya dito, halimbawa, maaari naming ng Siyempre pa lumulutang na halaga ng point.
Maaari kaming may mga negatibo.
Hindi mahalaga D3, kaya mahaba bilang ito ay isang listahan ng mga bagay.
>> Tulad ng kawili-wiling mga bagay na aming ay maaaring magkaroon, maaari rin naming
May isang listahan ng mga string tulad na.
Kaya ito ay ang Crimson mga headline Ako kinuha ang ilang mga araw na nakalipas.
At marahil maaari mong mahanap ang ilang mga kawili-wiling bagay tungkol sa mga ito ng mga ulo ng balita.
>> Kaya muli, ito ay isang listahan ng mga bagay.
Hindi mahalaga D3.
Mangyari ang mga ito upang maging isang string.
Binago namin ang aming data.
>> Ay bumalik sa aming mga visualization Hayaan.
Ngayon, ang aming mga visualization inaasahan ang pag-input na numero.
Kaya kami ay pagpunta sa may upang gumawa ng ilang pagbabago.
Kaya halimbawa, una sa lahat, siguro gusto naming ilagay ang mga lupon kasama
sa pamamagitan ng haba ng ulo ng ad, ang bilang ng mga character sa ulo ng ad.
>> Kaya kung ano ang gagawin namin is-- sa bawat oras na aming function ay tinatawag na may isang string,
ipapakita namin mahanap ito ay haba At pagkatapos ay pumasa na sa scale.
Kulay ng, magpapadala ako bumalik na sa bakal asul.
At doon pumunta namin.
Mayroon kaming visualization ng Crimson mga headline.
>> Ang aming scale ay isang bit off.
Ipagpalagay na ang pinakamahabang Hayaan headline ay 100 mga character ang haba,
kaya span na ang isang bit.
At mayroon kaming visualization.
Kaya tila na ang karamihan ng mga ulo ay malapit sa katangian nang magkasama,
sa mga tuntunin ng karakter linya.
Ngunit isa doon talaga ay nakatayo sa labas.
>> Maaari naming bumuo ng ilang mga tool upang galugarin ang higit pa.
Ngunit kapag ako ay nagtatrabaho sa ito, ako ay malaman kung, sa data na ito set,
mga ulo ng tutuldok sa kanila ay mas mahaba.
Ipinapalagay ko gagawin nila.
>> Kaya ng malaman ipaalam.
Gamitin ang mga kulay Hayaan channel tulad ng ginawa namin bago,
upang i-encode ang ilan tungkol sa kung ang mayroong isang tutuldok o hindi.
Kaya gagamitin namin ang isang may-kondisyong muli.
Hindi mo na kailangang malaman ang mga detalye ng ito,
ngunit ito ay kung paano namin ang isang string para sa isang partikular na karakter
sa JavaScript, muli, hindi katuturan.
>> Ngunit kung hindi kami makahanap ng isang tutuldok, babalik kami berde.
At kung ang ginagawa namin, babalik kami pula.
Kaya muli, mga ulo ng balita na na tutuldok ay magiging pula.
Ito ay kung ano ang means-- mabait.
>> Kaya tila na ang aking teorya ay Uusog.
Mayroong dalawang lamang.
Lamang mayroon kaming anim na puntos ng data at dalawang lamang ay nagkaroon ng colon.
Ngunit ito ay tila ng kaunti pang sa ibabang dulo, sa katunayan.
Mga pamagat sa colon mukhang sa pangkalahatan ay mas maikli,
hindi bababa sa aming mga data set-- kawili-wili.
>> Sabihin bumalik na sa bakal asul at pagkatapos ay makita
kung ano ang maaari naming gawin sa kahit mas kawili-wiling data.
Kaya muli, nabanggit ko na data sa D3 ay isang listahan ng mga bagay.
Nakita namin ang mga numero ng maraming uri.
Nakita namin ang mga string.
Ngunit maaari ring bagay ang mga bagay.
>> Maaari silang maging kumplikado ng mga bagay na kasama ang maraming mga bagay.
Upang sabihin na higit na malinaw, sa karamihan ng mga kaso, namin
Gusto upang bumuo ng bawat punto ng data bilang higit pang kumplikado kaysa sa isang halaga lamang.
Kung nais mong isipin na ang isang database ng tungkol sa mga mag-aaral,
Maaaring mayroong isang mag-aaral pangalanan, isang mag-aaral ID,
at maraming bagay na nauugnay sa isang partikular na talaan,
hindi lamang isang string o numero.
Kaya tingnan natin na ipaalam.
>> Ito ay isa tulad ng data set.
Ito ay isang data-set tungkol sa lindol.
Kaya lahat ng bagay dito sa aming listahan o array ng mga bagay ay naglalaman ng maraming mga bagay mismo.
Kaya ang bawat punto ng data ay may magnitude at coordinate.
At coordinate ang kanilang mga sarili maglaman ng dalawang mga bagay.
>> Kaya araw-araw na ngayon ng maraming higit pa kumplikado at mas kawili-wiling marami
at naglalaman ng higit pa kawili-wiling impormasyon.
Tingnan natin na maaari kaming bumuo out sa natin iyon.
Bumabalik pabalik sa dito, muli, gamit ang aming histogram lupon visualization
na binuo namin, sabihin makita kung maaari naming bumuo ng isang visualization ng magnitude na pamamahagi
sa aming mga hanay ng data.
>> Kaya dito, ito ay ang parehong konsepto.
Ngunit ngayon, d naglalaman ng higit pang mga bagay.
d ay naglalaman ng maraming mga elemento ng data.
Kaya natin d pabalik.
D3 ay nagbibigay sa amin d.
At sumagot namin sa pamamagitan ng paghahanap ng magnitude ng d at pagkatapos ng pagpasa na sa scale.
>> At pagkatapos ay kailangan namin upang baguhin ang aming scale, siyempre.
Kaya huwag lamang magnitudes pumunta higit pa sa 10.
Sa totoo lang, mayroong ay hindi kailanman naging 10 magnitude na lindol.
Ngunit iyon lamang ang uri ng aming itaas pagtatapos, aming itaas na spectrum.
>> Ni-refresh Hayaan.
Nice, mayroon kaming visualization.
Ito ay kawili-wili sa note-- kaya mayroong dalawang mga punto ng data na
ay halos eksakto sa tuktok ng bawat isa, sa mga tuntunin ng magnitude.
Ang makikita mo ito sa pamamagitan ng opacity na aming ginagamit.
>> Mayroon kaming geographic data ngayon.
Mayroon kaming mga latitude at longitude.
Siguro maaari naming gawin ang isang bagay ng Marami pang mga kagiliw-giliw na may iyon.
Sa tingin ng ilang higit Hayaan kawili-wiling paraan upang maisalarawan
ito mas komplikado data na mayroon kami ng access.
>> Batas V, Mapping-- sa panimula, gusto naming ilagay ang mga sa isang mapa.
Ibig kong sabihin, ito ay kung saan ito ay pagpunta.
Gusto naming upang i-encode ang impormasyon tungkol sa posisyon sa mga pagbabasa lindol,
pati na rin ang kanilang magnitude, dahil mayroon kaming na ngayon.
Nauunawaan namin kung paano sa pagkonsumo mas komplikado data.
>> Ang unang bagay na gagawin namin ay lumikha ng isang mapa, isang background mapa.
Pupunta ako sa pumunta sa pamamagitan ng ito masyadong mabilis.
Ito ay nakakalito code.
Ito ay isa pang isa sa mga mga recipe hindi mo talaga
Mayroon upang maunawaan ang ganap na para sa iyo upang gamitin.
Ngunit ito ay code.
Ang code na ito dito mismo ay lumilikha ng isang mapa.
>> Hindi namin pagpunta sa pumunta sa detalye.
Ngunit sa mababaw, ano ang ginagawa nito ay, ito query na ito us.json file, na
ay isang file ng data tulad ng ang isa namin ay may mga bago.
Ito ay mas kumplikado, siyempre.
Ngunit sa kasong ito, ang lahat ng bagay, bawat punto ng data ay estadong ito
at may isang listahan ng mga latitude at longitude
na tukuyin ang mga polygon, na form, na estado.
>> Kaya kung ano D3 ang gagawin ay katulad sa kung ano ang ginawa namin bago.
Ito ay hilingin na at isailalim na sa isang elemento.
At mayroong isang function na ay map elemento na out,
batay sa mga latitude at longitude.
Maaari mong basahin ang higit pa sa na.
At inirerekumenda ko ito.
>> May mga link sa pagtatapos ng code na ito na nai-post.
At ang code ay nagkomento.
Sa may mga link para sa karagdagang dito.
Inirerekomenda ko kang tumingin up ito.
Ngunit kung ano ang mahalaga sa kami tungkol sa ay ito projection function.
Gusto kong pumunta sa pamamagitan na iyon.
>> Una sa lahat, hayaan mo akong ipakita mo iyon, oo, mayroon kaming isang mapa.
Mga mapa ay cool.
Kaya tingnan natin ito ipaalam produksyon function.
>> Projection ay napaka tulad ng isang antas, ang mga antas muli.
Kaya kung ano ang produksyon para sa ito projection ng function
ay ay, maaari naming ipasa ito longitude at latitudes-- sa kasong ito,
ang mga halagang ito narito ang mga lat-longs ng gusali
kami ay nakaupo sa kanang now-- sa projection.
At magko-convert ang projection na sa x at y mga halaga ng pixel.
>> Kaya kung ano projection ay ang magawa ay halos kapareho sa aming sukat.
Tumatagal ito sa aming mga latitude at longitude na kumakatawan sa isang buong mundo
at pag-urong at pagpapalaki na pababa sa parisukat na gusto namin,
na binigyan namin ito.
Sa kasong ito, hindi namin pagpasa sa mga halagang ito.
At ito ay nagbibigay sa amin, na rin, na sa iyong screen ay nangangahulugang 640 pixels.
Ang buong screen ay 700 pixels malawak, kaya na gumagawa sa amin ang tungkol dito,
at 154 pixels pababa, na nais ko pagtatantya ay halos dito.
>> Kaya pagkuha ng mga lat-longs, na kinakatawan ng isang bagay sa buong mundo
at squishing at paggalaw sa paligid na upang bigyan kami ng x at halaga y pixel,
ito ay ang unang bagay na tapos sa code na ito sa pagmamapa.
At pagkatapos ay ang natitirang bahagi ng code consumes ang data
at pagkatapos ay i-mapa ang mga lat-longs sa isang bagay sa iyong screen.
>> Ngunit kami ay pagpunta sa gamitin ang projection -andar, dahil ito ay lumiliko out
mayroon kaming lat-longs longs pati na rin.
Naghahanap pabalik sa aming mga data, mayroon kaming latitude at longitude na mga coordinate
para sa bawat obserbasyon.
Kaya gamitin ang projection ipaalam.
>> Kaya ng pagtingin sa aming pagsasaysay, Gusto namin ang aming exposition--
mayroon kaming latitude at longitude ng.
Pero gusto naming mga halaga ng pixel.
At ito ay lumiliko out, mayroon kaming eksakto ano want-- namin projection.
Tunay na halos tulad namin gamit scale dito mismo,
ngayon kami ay pagpunta upang gamitin ang projection at pumasa ito coordinate.
Kaya ang unang bagay na kami ay doing-- kaya kami ay
pagkuha d, kung saan ay isang indibidwal na data elemento ng isang indibidwal na lindol
sa pagbabasa.
Ang unang bagay na aming ginagawa ay makuha ang mga coordinate.
Ang lahat ng mga karapatan, mayroon kaming ang mga coordinate.
>> Ang ikalawang bagay na ginagawa namin ay pumasa na sa pag-project sa.
Projection-convert ang mga coordinate ng sa mga halaga ng pixel, x at y.
At pagkatapos ay ang huling bagay namin gusto lang gawin ay makuha ang x,
kung saan ito ay ang unang isa.
Ito ay ang unang ng dalawang bagay na ibinalik ng mga projection.
>> Susubukan naming gawin ang pareho sa y.
Ngunit sa halip, babalik kami ang pangalawang elemento, y.
Maghanda upang i-refresh.
Ooh, dagdag na karakter here-- magaling, mayroon kaming
isang data hinihimok ng dokumento na concealing ito JSON na file ng mga bagay,
paggawa ng isang mapa, at pagbabago sa katangian na may kaugnayan sa data
upang i-project ito sa isang mapa.
Ito ay talagang kawili-wiling.
Ito ay cool.
>> Tingnan natin ang isang bingas ito pataas.
Ibig kong sabihin, mayroon kaming dalawang piraso ng impormasyon sa bawat punto ng data.
Ibig kong sabihin, tatlo.
Mayroon kaming ang mga coordinate, kung saan ay isang x at y.
At mayroon kaming ang magnitude.
>> Kailangan naming i-e-encode ng magnitude kahit papaano.
Mayroon kaming maraming mga channel.
Maaari naming gamitin ang kulay.
Maaari naming gamitin ang radius.
Maaari naming gamitin ang opacity.
Maaari naming gamitin ang maraming bagay sa code.
Alinman sa mga katangian at marami higit na hindi nakalista doon,
dahil ang mga ito ay opsyonal, maaari naming gamitin upang i-encode ang data na ito, ang stroke
at ang lahat ng mga bagay na nabanggit ko.
>> Gawin ang radius Hayaan.
Sa tingin ko radius ay ang pinaka-intuitive.
Kaya muli, ipapakita namin palitan na hard-code 40 at gumawa ng ilang mga kalkulasyon.
Gagamitin namin muli ang aming mga paboritong scale.
At kami ay nakalipas na d.
Ngunit hindi d dahil gusto naming ang magnitude ng d. d lamang ang punto ng data.
Susubukan naming ipasa ang magnitude-scale.
>> Subukan muli natin iyon.
Ooh, hindi ito gumana.
Bakit hindi ito gumagana?
>> Kaya tandaan kung ano ang ginagawa scale.
Ating tingnan muli sa scale Hayaan.
Scale mapa 1-10 sa sa 22-600, higit pa o mas mababa.
600 ay malaking.
Ito ay kung bakit namin nakukuha mo ito.
>> Kaya gusto naming baguhin ang aming mga sukat sa isang bagay na mas makatwirang.
Sabihin nating, nais naming 0-60.
60 ay malaki, subalit 10 lindol ay hindi mapaniniwalaan o kapani-paniwala bihirang.
Sa katunayan, hindi na nila ang nangyari.
>> Kaya kung ano ito ay gawin ay, makikita itong tumagal ang aming magnitude na napupunta 1-10
at i-map ito sa upang palawakin ito.
At map ito sa sa 0-60.
Ni-refresh Hayaan.
>> Nice, mayroon kaming visualization.
Mahusay ito.
Ito ay aktwal na data.
Mapapansin mo, sa aking maliit na laruan Halimbawa, ang pinakamalaking lindol
ang tama sa tuktok ng sa amin.
Ngunit iyon dito.
Mayroon kaming hinimok petsa visualization na consumes ang data
at nagbibigay sa amin talaga kawili-wiling impormasyon.
Oo, sabihin magdagdag ng ilang interactivity dito.
Nabanggit ko na noon ay sa malakas na puwersa ng D3.
>> Kaya dito, para sa bawat elemento, hindi namin naglalarawan ng isang bungkos ng mga katangian.
Ngunit maaari rin naming ilarawan kung ano ang gusto namin mangyari na may mga elemento ng interactivity.
Halimbawa, maaari naming ilarawan kung ano ang mangyayari kapag kami mouse sa ibabaw.
At halos katulad na, na makikita tumagal ng isang function,
na halos kapareho sa mga katangian namin ay may bago,
kung saan ang ginagawa namin ng isang bagay sa elemento kapag mag-hover sa ibabaw namin ito.
>> Kaya ang unang bagay na kailangan namin upang gawin ay piliin ang elemento na,
upang hanapin ito talaga, sa browser.
at pagkatapos ay maaari kaming magtakda isang katangian na ito.
Kaya kung ano ang ako paggawa dito ay, kapag mag-hover namin sa ibabaw ng isang bagay, susuriin namin elemento na
at pagkatapos ay itakda ang opacity nito pabalik 1, upang ganap na hindi lampasan ng liwanag.
Tingnan natin kung ano na kamukha Hayaan.
>> Mukhang mayroon kaming isang dagdag na tuldok-kuwit dito.
Kaya kung mag-hover sa ibabaw namin dito, ganap na ito ay nakakakuha.
Ngunit ngayon, siyempre, ito mananatiling buo, dahil kami
Mayroon upang ilarawan kung ano ang mangyayari kapag alisin ang aming cursor.
Kaya sabihin gawin eksakto na sa mouseout, bilang kabaligtaran sa mouseover.
>> At kami i-reset ito sa kung ano ang namin ay may before-- 0.5.
At ngayon, sa tuwing namin mag-agaw-buhay, makakakuha tayo ng isang buong lupon.
Tinutulungan kami makita kung ano ang namin pumipili ka namin talaga.
>> At sa gawing ito ay talagang mahusay na ngayon hayaan.
Ni kumonekta ito sa totoong data Hayaan.
Kaya ng tanungin ipaalam ng dati USGS tungkol sa kanilang data.
Kaya ang US Geological Survey may data tungkol sa lindol.
Ang mga ito ay isang pampublikong API na nagagawa na natupok sa JSON format.
Kaya sabihin gawin iyon.
>> Kaya ito ay isang bit ng code na kumokonekta sa USGS API.
At mayroong isang bit ng processing dito.
Ito ay walang kaugnayan ngunit pinapasimple ito sa isang simpleng format ng data tulad ng
namin ay may mga bago.
Kaya makakuha ng ko mapupuksa ang aming tawag sa ang aming mga pekeng data.json sa file.
At sa halip, ako pagtawag ang USGS mahalagang.
>> Ni-refresh Hayaan, mabait.
Ito ay aktwal na, ang data ng real-buhay mula sa linggong ito para sa lindol.
Ito ay talagang kawili-wiling.
Hindi ito kagulat-gulat para sa atin, ngunit may mga
ng maraming mga lindol sa West Coast sa California.
Ngunit naisip ko na ito ay napaka-interesante na mayroong napakaraming lindol
sa Alaska, at tila, dito sa Gitnang-kanluran.
Ibig kong sabihin, kawili-wili, at nagpapaumanhin kami mabuti.
Iyon ang konklusyon.
>> Ngunit sa panimula, ito ay kung ano ang tumutulong sa D3 sa amin gawin.
Tinutulungan kami kumuha ng data, magbigkis ito sa mga elemento sa DOM,
at may mga baguhin ang mga elemento bilang isang katangian ng data,
May mga katangian, ang lahat ng mga maraming mga katangian ng elemento,
maging kapaki-pakinabang para sa mga channel sa lahat ihatid impormasyon.
>> D3 ay isang hindi kapani-paniwalang makapangyarihan library at amazingly na rin tumakbo.
Ito ay ilang mga makapangyarihang mga bagay-bagay.
Visualization ng data ay isang hindi kapani-paniwalang napakalakas na tool
para sa conveying sa mga taong malalim mga pananaw na hindi nakakaabala sa kanilang mga core
at ang mga ito ay makakatulong na maunawaan, sa ito malalim at madaling gamitin na paraan,
kung paano gumagana ang data at kung paano nagbabago ang data ng ating buhay.