[MUZIKO Ludante] 

DAVIDO Chouinard: Mi estas Davido Chouinard, kaj tiu estas D3. Bonvenon. Ni intencas lerni pri D3 hodiaŭ. D3 estas JavaScript kadro por konstrui alta kvalito interagajn visualizaciones por la reto. Aĵoj kiel kio ni estas vidante en dorso de mi, ni tuj lernos al fari tiuj aĵoj, speco de la basics de ĝi. Sed tuj estos genia. Ni starti farante belajn bildojn. Ni havas pli donas de perspektivoj havebla. Ni faru tion. 

Akto I, DOM manipulation-- ni iras komenci tuj farante malvarmeta aĵoj. Unue, sur la maldekstra, ni havas kodon. Dekstre, ni havas la rezulto de nia kodo. Ni iru tra gxi. 

Ni faru cirklon. Kiel funkcias tiu sono? svg.append circle-- ni ĵus faris rondon. Vi ne kredas min, ĉu ne? Ĝi ne estas tie. 

Do kion ni faris ĉi tie estas, SVG estas skalebla vektora grafiko. Tiu estas la vojo kiun ni rakontas la retumilo al fari vektora grafikaĵo en la retumilo. Kion ni ĵus faris nun aldonas cirklo por foliumi. 

La promeso estas, ke la rondo postulas iom de bazaj atributoj antaŭ ni efektive povas vidi gxin. Ni devas diri ĝin lia x pozicio, lia y pozicio, ĝia radiuso. Ni ne sciigus tion ajn de tiu, tial ni ne vidante gxin nun. Sed ni diris gxin ajxoj. 

Do unue: vi mem havigis doni nian rondon nomon. Do ni nomas ĝin rondon. Nia cirklo havas nomon nun. Kaj ni donu gxin kelkaj atributoj. Kion pri cx estus centri x, do la centro de la x pozicio. Diru, 200 por 200 rastrumeroj. 

Ni donu al ĝi y el 200 rastrumeroj ankaŭ. Kaj r, radioaparato, de ĉirkaŭ 40 rastrumeroj. Nun ni vidu. Mi ne povas literumi. 

Tie vi iru. Ni havas cirklon je pozicio 200 pixeles, 200 rastrumeroj, radiuso de 40 rastrumeroj. Speco de frideta dekstra? Ni havas rondon. Yeah. 

Do ne bezonas sekvi kune. Ĉiuj ĉi tiuj ekzemploj, ĉiuj la kodo mi faras hodiaŭ estos provizita linio fine en formo de interaga ekzemploj kun kontrolpunktoj je ĉiu ago, kaj tiel plu. 

Ni faru pli aĵoj. Tiu nigra cirklo estas vere malbela. Mi bedaŭras pro tiu eraro mesaĝojn dekstra tie. Tie ni marŝos. 

Ni donu al ĝi koloron. Kiom estas tio? Mi ŝatas ŝtalon blua. Nu, nia rondo ŝanĝiĝis koloro. Tio estas granda. Ni faru ĝin semi-travidebla too-- semi-travidebla. 

Tiuj estas atributoj ni difinanta en la rondo. La unua afero, kiun ni faris estas ni metu cirklo sur la paĝo. Kaj tiam ni difinas faskon da atributoj. Kelkaj el tiuj estas postulataj, kiel cx, CY, kaj radiuso. Kaj aliaj estas laŭvolaj. 

Ekzistas multe pli da atributoj. Restas multa el ili. Ekzemple, ni povus havi stroke tiel, bato de ruĝa. Sed ni forigu tion. Ni estas reen al rondo, blua rondo. 

Do ni faras pli rondoj. Kiom estas tio? Ni faru alian rondon. Tio estas ekscita, dekstra? 

Do diru simple Copy-batitaj kion ni havis jam. Ni nomas ĝin circle2. Kaj ni faru la ĝusta samon kaj donu atributoj, donita x pozicio de 300. Yay, ni havas du cirkloj nun. 

Kaj kompreneble, ni povis ĝisdatigi tiujn valorojn. Mi povus meti ĝin en 400, kaj nun ĝi moviĝas. Kaj ĉar ĝi estas ĝena, ni forigi ĝin, do circle2.remove. Ĝi estas irita nun. 

Do kion ni faras kaj Estas nur tre, very-- ĉi Estas tre simila al kion vin agu en jQuery, ekzemple. Ni nur manipulanta la DOM, ĝi nomiĝas. Vi eble aŭdis tiun vorton antaŭe. Ni kreas stuff, fiksante atributoj en stuff, removiendo ajxoj. 

Nun, tie estas kie metas interesa. Do poste en la kodo, ni povus ankoraŭ referi al la originala rondo tie. Do ni reset lia atributo al cx. Diru, lia x pozicio 400. Kaj mi tuj transiron ke, tuj kiam estas evidenta. Tie ni marŝos. 

Do ni aldonis rondon. Ni starigu kelkajn ecojn. Ni aldonis alian rondon, eltiris. Kaj tiam ni modifi la originala rondo. 

Sed ĉi tie estas kie metas multe pli interesa. Ne nur povas ni aro atributoj kiel ĝuste valoroj, ni povas diri, hey, rondo, iru al posicionar 200. Ni povas ankaŭ agordi ilin kiel funkciojn. 

Do anstataŭ doni 400 tie, ni povas fari iujn kalkulo sur la muŝo por kio ni volas tiun atributon por esti. Do jen kiel oni kredus esprimi tion. Ni diru, anstataŭ 400, lasu min doni al vi funkcion anstataŭe. Kaj tie, ene tiu funkcio, Ni povas fari neniun frenezan kalkulo. 

Ni povus preni la tempo kaj rigardi iun alia afero kaj dinamike decidi por la rondo kia valoro ni volas. Kion pri ni simple donu ĝi hazarda x pozicion? Do tio estas ke. 

Do kion tio diras estas, por ĉiu x, kuri ĉi funkcio. Kaj kion ni faras estas kalkulanta iuj aĵoj, hazarda fojoj la larĝa kaj revenante tio. Do ĉiufoje ni kuris ke, rezultiĝas rondo kiu iras al hazarda loko. Estas speco de malvarmeta. Mi sentas ke mi povus rigardi en ĉi antaux momento. Ni komencas atingi ion interesan ĉi tie. Ni faru ĉi datumoj pelita nun. Mankas datumojn tie. Ni ŝanĝu tion. 

Akto II, Datumoj Driven Documents-- Do ni revenu ĉi tien. Kaj ni nur forigi circle2, ĉar ni simple aldonante kaj demetante ĝin. Do ni ne vere bezonas ĝin. Ni bezonas esti multa pli ruza tie. Diru, ni havas iuj datumoj de iu tipo. Unu moment-- diru, ni havis datumojn de ĉi tiu formo. Ni havis tabelo, nur faskon da nombroj. Ni havas sep numerojn tie, ajn tiuj represent-- kvanto en Popola bankokonto, kiom multe pesas, dio scias kion. 

Tiuj estas nombroj, kaj ni volos uzi nian rondoj reprezenti tiujn numerojn iel. Ni volas ligi niajn rondoj por tiuj nombroj. Do kion ni faros. Diru, ni bezona rondo por ĉiu nombro. Ni povus fari la malnova afero ni doing-- rondo append kaj circle2 kaj circle3. Sed ĉi eliras de mano, kaj tie estas multa ripetante logiko. 

Do ni ricevas pli ruza kun tiu. Anstataŭ uzi la var rondo svg.append ke ni simple uzante, ni iras al uzi tiu malgranda bloko tie. Mi ne volas iri en-profundo en kio ĉiuj tiuj partoj fari. Kaj estas speco de progresinta temo. Kaj se mi povus. 

Sed la ŝlosilo afero recognize-- kaj vi vidos estas tre ofte en D3 kodo. Tiu bloko de teksto baza kreas kiel multaj rondoj kiel estas datumoj elementoj en tiu tabelo dekstra tie. Do ĉi tio kreas tiom da rondoj kiel estas elementoj. Iĝos krei ni sep rondoj. Kaj ĝi faras lin vere, vere ŝlosila afero. Do ni kuris ke. Ni forigu niaj aliaj rondo. Ni simple komenti ĉi disiĝi el kaj kuri ĉi denove. 

Tie ni marŝos. Do nia rondo ĉi tie estas multe pli malhela, ĉar ni havas sep rondoj, unu supre sur la aliajn. Ni ĵus kreita sep rondoj, unu ĉiu por ĉiu de ĉi tiuj datumoj elementoj. Sed estas ŝlosila afero kiu okazis kun tiu cxi dekstre tie. 

Estas ke datumoj estis malliberigita. Do ĉiu ununura unu el tiuj datumoj elementoj, 10, 45, 105, estis baro al aparta rondo. Do tiuj ne nur kreis faskon da rondoj sed ligas tiujn du aĵojn kune. 

Kaj en la estonteco, ĉar ni kreis tiuj rondoj kun ĉi D3 funkcio, se mi al vi rondo, vi povas donu al mi la datumojn asociitaj kun ĝi. Do ni povas demandi D3. Hej, D3, mi havas ĉi rondo. Kio estas la datumo kiu la cirklo havas? Kaj D3 dirus al ni 10 aŭ 45 aŭ 105. 

Tion ligitajn. Tio estas tre, tre fundamenta koncepto. Ni rigardu tion. 

Do la vojo ni volas demandi D3-- tiel ĉi estas palaj por ĉi, sed nur fidi min sur gxin. Tiel estas kiel ni petas D3. Hej, D3, donu al mi la unuan rondo kiu vi povas trovi. Donu al mi la unua rondo vi povas trovi. Kaj tiam ni povus demandi D3, kio estas la datumoj sur kiuj, kiel tiu, 10. 

Tial ni petas D3, trovu min la unua rondo vi povas trovi. Kio estas liaj datumoj? 10, tio estas ja nia unuaj datumoj elemento. Ni povus demandi ŝin, hej, D3, trovi nin nia tria rondo. 105. Kial estas ĉi tio vere gravas? 

Do ĉi tie mi mencias ke ni povus uzi funkciojn. Kaj mi menciis ke estis tre potenca afero. Do ne nur povas niaj funkcioj fari aferojn kiel faras iom da kalkulado, ekzemple, resendas hazarda numero, ĝi eblas ankaux fari tion surbaze de la datumoj. Jen kion datumoj pelita dokumentoj signifi. Tion D3 signifas. 

Do ĉi x postition-- anstataŭe de nur diras, ĉiuj cirkloj, akiri x pozicio 200, ni povus doni al ĝi funkcion. Kaj tie, ni povas fari iujn kalkulo. kaj d Jen staras en loko por la datumoj. Do ĉiufoje ni havas cirklo, esence, D3 kreos tiujn sep rondoj. Kaj tiam por ĉiu 

rondo, ĝi estas ironta, hey, circle1 kio estas via x pozicio. Antaŭe, ni estis ĉiam respondante 200. Sed nun, ĉiufoje D3 demandas ni kio estas via x pozicio, ĝi tuj donu us-- ni havas ke cirklo, do ni havas la datumon. Ĝi estas tuj donos al ni la datumojn kaj diru: Kion vi volas, ke la ekspozicio esti, surbaze de tiu datumo. 

Ni simple reveni la reala datumo. Do se ni kuras ĉi, ĉi tiu donas ni datumoj pelita dokumentoj. Tiuj rondoj estas bazitaj rilate position-- ili estas bazoj kiel funkcio de la datumoj. 

Do por la unua rondo, D3 metas rondon. Kaj tiam D3 demandas nin, kion fari Vi volas la ekspozicio estos. Kaj ni simple diru, kion ajn la datumoj estas. Faru la ekspozicio 10. 

Tiam demandas, kion vi volas ke la ekzegezo esti por la dua rondo. Kaj ni respondos, 45. Kaj ni, kompreneble, povas fari iujn kalkulado tie. Mi trovas ke tiuj rondoj estas speco de squished supren. 

Do multipliki ĝin per 3, multipliki datumojn per 3. Nia cirklo ĵus ekspansiiĝis ekstere. Nia valoro triobligis. 

La rondo estas vere rande, do ni eble ia kompensi ĝin. Diru, per 20. Ĉi tie vi iras. 

Tiu estas datumo visualización. Ĝi estas tre baza, sed ĉi donas al ni kelkajn informojn pri nia datumoj. Ĝi diras al ni, ke, ekzemple, ni havi iom peniko da elementoj. Kaj ni havas grandajn _outlier_ tie. Tio donas al ni iun informon pri la distribuo. 

Se ni estus, ekzemple, ŝanĝi la datumoj al 150 tie kaj refreŝigon, nia videbligo estas ŝanĝita. Tiu dokumento estas datumoj pelataj. 

Do kompreneble, ĉiuj ĉi tiuj elementoj, ĉiuj tiuj atributoj tie, ni povas uzi la funkcio, ne nur la nombroj, ne nur la x kaj y pozicioj. Do ni povas uzi funkcio por la koloro. Do ni faros la saman. Ni donos gxin funkcio. 

Kaj ni diru, ni povus havi conditionals en nia funkcio. Tiu funkcio povas esti cento de linioj longaj. Ĝi povas fari tre, tre komplika aferojn. 

Do ni enmetu se aserto tie. Diru, se nia datumoj estas malpli ol 50, tio estas iuj sojlo ke ni interesiĝas en ial. Ni faru ĝin verda. Alie, ni faru gxin ruĝa. Kiom estas tio? Nice. 

Do niaj datumoj videbligo komenciĝas transdoni pli interesa informo sur multaj kanaloj. Do nun ni scias iom pri la distribuo. Kaj ni scias, ke ekzistas ia ekstermigxu cxe 50 kiu ni interesas. Ni scias ke estas du datumaj punktoj sub tiu sojlo kaj plejparte ili supre. 

Do kiel fina paŝo, ĉi datumoj tie, ĝi estas tre malofte vidi ĉi tiel. Do ni simple movi ĝin al variablo ĉar tiu estas pli pura, kiel tiu ĉi. Kaj tiam ni uzas tiun variablon tie. Estas la ĝusta sama afero. Estas nur iom pli pura. 

Sekva supren, Akto III, Scales-- Do unu problemo dekstra tie estas, se ni ŝanĝas niajn data 200 value-- se ni ŝanĝus ĝin al 400 aŭ io kaj refreŝigon, tiam tiu valoro nur iris offscreen. Do nia logiko tie ĉi de kiel ni faros la fojojn 3 kaj 20, diskonigi ĝin kaj tiam ofseto gxi iom estas vere clunky. 

Kion tiuj nombroj signifas? Ili estas nur malfacile kodita tie. Kaj ili estas tre multe ligita al la datumoj. Ni volas datumoj pelita dokumenton. Ni volas tre fleksebla dokumento, ke donitaj datumoj, adaptas al ĝi kaj reprezentas ĝin. 

Kion ni esence bezonas estas, ni havas ĉi limigo de nombroj 10. 45, 105. Kaj ni volas mapaj ke eliris sur la larĝa, la plena larĝo tie. Do ni havas la rangon de nombroj iras de 0 al 100. Kaj ni havas ĉi campus mi iras de 20 al 700, en ĉi tiu kazo. 

Ni speco de voli mapo kiu plu. Ni volas skali ke supren kaj tiam kompensi ŝin iomete. Ĝi rezultas ke D3 havas tiujn. Ĝi nomas skalo. Do ni uzu ĝin. 

La vojo kiu works-- Mi iras al tajpi ĉi tien kaj tiam klarigi ĝin. Jen skalo. Kio faros estas, ĝi estos mapo el valoroj de 1 al 200 en 20 al 600. Ni povas kontroli tion. Ni povas vidi ke ĉi tie. 

Do se mi manĝigas ŝin 1-- unu momento. Donu al mi unu sekundo. Mi certe mistajpis ĝin. Tie vi iru. Mi bedaŭras pri tio. 

Do kia skalo faros estas, ĝi prenos valoron kaj tiam konverti tiu, pligrandigi tion diveni, do plenigas la tutan amplekson vi petante. Do en ĉi tiu kazo, se ni donas lin unu, ĝi tuj mapaj ke eliris sur 20. Kaj se ni donas lin 200, estas tuj mapaj ke sur 600. Kaj ie en inter, se ni preni 100, estas tuj estos ie en inter 20 kaj 600. 

Kaj kompreneble, nun tiu estas kio ni bezonas forigi tiujn malfacile kodita tion ni rajtus tie. Do kion ni volas fari estas preni la datumojn kiuj ni estas donita, por ke individuaj datumoj elemento, kaj fordoni grimpi unue. Do skalo grimpi ĝin. 

Well-- Ho, ni havas iom eraro tie. Ni mankas datumojn. Tie vi iru. Kaj kiu ekspansiiĝas ĝin. 

Tio donas al ni la saman rezulto ni havis antaŭe, sed anstataŭ havi tiujn malfacile kodita devigojn. Kaj se la grandeco de nia kanvaso ŝanĝoj, ekzemple, se ni volas havi ĉi super 400 pixeles kaj ĝi squishes ekstere, ni povas havi ĝin over-- ni povas ekspansiiĝi ​​ĝin, aŭ ni povas redukti ĉi maldekstra rando al io malpli aŭ pli ol 20. Tiuj nombroj, tiuj malmolaj coded nombroj nun sencon por ni. 

Kaj ni povus fari multe pli interesajn aferojn tiel. Do anstataŭ havanta lineara skalo, ni eble volas log skalo. Kaj kiu donos al ni log skalo. 

Do nun nia skalo, anstataŭ nur ekspansiiĝas ekstere de tiu rango, ĝi estas fari pli kompleksajn aferojn. Anstataŭ devi tiu gamo malmolan coded, kaj anstataŭ havi ke 600, ni eble volas nur uzi la larĝa, tial de 20 al la larĝa minus 40, 2 fojoj la randon sur la alia flanko. Kaj tiu faras multe pli sentita iu kiu povus rigardi la kodon. 

Interese, la skaloj akiri tre tre kompleksa tiel. Ili fari multajn interesajn aferojn. Do skvamoj ne nepre havas funkcii nur kun numeroj. Ni faru koloro skalo. 

Do nia gamo povus be-- nia domajno estas 1 al 200. Tio estas la eniga afero. Sed ni eble volas mapi el verda al ruĝa, ekzemple. Kaj nun, se ni pasas ŝin 1, ni iras por kolekti verdajxon. Se ni donos gxin 200, ni akiros ruĝan. Kaj se ni pasas iun en inter, ĝi tuj estos iu miksaĵo de tiu, ie sur la gradiento inter verdo kaj ruĝa. 

Kaj anstataŭ havi tiu speco de clunky logiko ni havas ĉi tie kun la kondiĉa dekstra tie, ni povus havi something-- oni lineara skalo inter tiuj. Do ni uzus la skalo ni ĵus kreita, kion ni nomas koloroj. Kaj ni donus ŝin D, kiu Estas niaj datumoj elemento. Kaj tie ni iru. Ni havas koloro skalo. 

Do tiu estas surĵeto. Do la ekstrema maldekstra estas tute verda. La ekstremdekstro estas tute ruĝa. Kaj ĉio en inter estas funkcio de d. Ni havas interesan visualizaciones tie. Sed niaj datumoj estis speco de enuiga. Tuj Vidos kion ni povus fari, se ni havis pli interesaj datumoj. 

Akto IV, laborante per Data-- la unua horo ni volas fari fari nian visualización pli interesa estas movi la datumojn aliloke. Estas tre clunky havi la datumoj malfacile kodita tie. Kaj ĝenerale, ni estos petante iu alia por la datumoj. Ni estos eble petante la registaron, la Censo Buroo, kio estas via datumoj kaj tiam komplotas ke aŭ petante iuj triaj ento por iuj datumoj kaj tiam konstruanta videbligo sur tio. 

Do la unua afero, kiun ni volas fari estas movi tiun al alia loko. Do mi iros por krei file tie nomita data.json. JSON estas la datumoj formato. Vi ne bezonas scii multon pri tio. Kaj ni tuj kopiu la iom datumojn ni havas tie, algluu ĝin en tie verbatim, iru reen al nia videbligo kodo tie, kaj uzu tiun funkcion gxuste cxi tie. Vi ne devas scii la detalojn. Sed kio estas tiu faros estas, trovos ke dosiero, prenu gxin, kaj redoni ĝin al ni. Do kio estas tiu faras estas, ĝi iras kaj akiri la data.json dosiero. Kaj tiam la tuta kodo tio marĝeno inside-- esence, tuta kodo ni havas there-- volo kuri nur kiam ni atingos la datumojn reen. Kaj tiam tuj kuris ke kodo kun la datumoj kiujn ni havas. Granda, ni havas videbligo ke pridemandojn por iu kodo ie alie, kiu ĝenerale montras kie pridemandojn iuj datumoj de alie, kiu ĝenerale montras kiom visualizaciones labori. 

Sed mi volas reiri al la datumoj. Do la datumoj fundamente en D3-- D3 konsumas datumoj jen listo de aĵoj. D3 atendas la datumojn esti simple lerta de aĵoj, tabelo de aĵoj. Negrave kio tiuj aferoj estas, tiel longe kiel ĝi estas tabelo de ili. 

Do jen, ekzemple, ni povis de Kompreneble ili glitpunktaj valoroj. Ni povis esti negativaj. D3 ne gravas, tiom longe kiel ĝi estas lerta de aĵoj. 

Kiel interesaj aferoj ni povus havi, ni povus ankaŭ havas liston de ŝnuroj tiel. Do jen estas la Crimson fraplinioj Mi reprenita kelkaj tagoj. Kaj eble vi povas trovi iujn interesajn aferoj pri tiuj oni titolis. 

Do denove, ĉi tiu estas lerta de aĵoj. D3 ne zorgas. Tiuj okazi esti kordo. Ni ŝanĝis niajn datumojn. 

Ni revenu al nia visualización. Nun, nia videbligo atendas enmeta esti ciferoj. Do ni tuj devos fari kelkajn ŝanĝojn. Do ekzemple, antaŭ ĉio, eble ni volas enmeti tiujn rondojn kune per la longo de la subtitolo, la numeron de karakteroj en la subtitolo. 

Do kion ni faros is-- ĉiufoje nian Funkcio estas kun ŝnureto, ni trovos estas longo Kaj tiam preterpasonta al skalo. La koloro, mi revenos ke al ŝtalo blua. Kaj tie ni iru. Ni havas videbligo de Crimson titolis. 

Nia skalo estas iom malproksime. Supozu ke la plej longa ĉeftitolo estas 100 signojn longa, tiom ampleksas, ke ekstere iom. Kaj ni havas visualización. Ŝajne do plej fraplinioj estas sufiĉe plej proksime en terminoj de karaktero linio. Sed unu vere elstaras. 

Ni povis konstrui iuj iloj esplori kiuj pli. Sed kiam mi laboris en tiu, mi estis scivolis se, en tiu ĉi datumaro, titularaj kun dupunkto en ili estus pli longa. Mi supozas ke ili deziris. 

Do ni ekscias. Ni uzos la koloro kanalo kiel ni faris antaŭe, kodi iujn sur se ekzistas dupunkto aŭ ne. Do ni uzos kondiĉa denove. Vi ne devas scii la detalojn de tiu, sed jen kiel ni kontrolu oni kordo por ia specifa karaktero en JavaScript, denove, ne estas grava. 

Sed se ni ne trovos dupunkto, ni revenos verda. Kaj se ni faras, ni devos reveni ruĝa. Do denove, Headlines ke esti dupunkto estos ruĝa. Jen kion ĉi means-- bela. 

Do ŝajnas, ke mia hipotezo estas batita. Estas nur du. Ni nur havas ses datumaj punktoj kaj nur du havis dupunktoj. Sed ŝajnas iom pli sur la malsupra fino, fakte. Headlines kun dupunktoj ŝajnas al ĝenerale pli mallonga, almenaŭ en nia datumoj set-- interesa. 

Ni revenu ke al ŝtalo blua kaj tiam vidi kion ni povas fari kun eĉ pli interesaj datumoj. Do denove mi menciis ke datumojn en D3 estas listo de aĵoj. Ni vidis nombroj de multaj tipoj. Ni vidis kordoj. Sed tio povas ankaŭ esti celoj. 

Ili povas esti komplikaj aferoj kiuj inkludas multajn aferojn. Diri ke pli klare, Plejofte, ni volas konstrui ĉiu datumoj punkto kiel pli komplikas ol nur unu valoron. Se vi ŝatus imagi datumbazo pri lernantoj, povus esti studento enoficigos, studento IRU, kaj multajn aferojn asociita kun aparta rekordo, Ne nur kordo aŭ nombro. Do, ni rigardu tion. 

Tio estas unu tia datuma aro. Tiu estas datumo cxirkauxita tertremoj. Do ĉio ĉi tie sur nia listo aŭ tabelo de aferoj enhavas multajn aferojn mem. Do ĉiu datumoj punkto havas grando kaj koordinata. Kaj kunordigas sin enhavas du aĵojn. 

Do ĉiu tago estas nun multe pli komplikitaj kaj multe pli interesa kaj enhavas multe pli interesa informo. Vidu ni povus konstrui el tiu. Revenante reen al tie, denove, uzante nia histogramon cirklo videbligo ni konstruis, vidu se ni povas konstrui videbligo de grando distribuo en nia datumaro. 

Do jen, ĝi estas la sama koncepto. Sed nun, d enhavas pli aĵoj. d enhavas multajn datumojn elementoj. Do ni get d reen. D3 donas ni d. Kaj ni respondos per trovanta la grando de d kaj tiam pasante tiu de skalo. 

Kaj tiam ni devas ŝanĝi nia skalo, kompreneble. Do grandoj simple ne iri multe pli ol 10. Efektive, neniam estis 10 grando tertremo. Sed tio speco de nia supra Fine, nia supra spektro. 

Ni fortigu. Nice, ni havas visualización. Estas interese note-- tiel estas du datumaj punktoj kiuj estas preskaŭ ĝuste sur supro de ĉiu aliaj, en terminoj de grando. Vi vidos tion per la opakecon ni uzas. 

Ni havas geografiajn datumojn nun. Ni havas latitudoj kaj longitudo. Eble ni povus fari ion al multe pli interesa kun tiu. Ni trovu iun pli Interesa maniero bildigi tiu pli komplika datumojn ni havas aliron al. 

Akto V, Mapping-- fundamente, ni volas enmeti tiujn en mapo. Mi volas diri, estas tie kie ĉi iras. Ni volas kodi informo pri la pozicio de tiuj tertremo legadoj, tiel ilia grando, ĉar ni havas tion nun. Ni komprenas kiel konsumi pli komplika datumo. 

La unua afero ni devos fari estas krei mapon, fona mapo. Mi estas ironta tra ĉi tre rapide. Tiu havas lertaĵon kodo. Estas alia de tiuj receptoj vi ne vere devas kompreni plene por vi uzi. Sed tio estas kodo. Tiu kodo dekstra tie kreas mapon. 

Ni ne tuj iru en detalo. Sed malprofunde, kio faras estas, ĝi pridemandojn ĉi us.json dosieron, kiu Estas datumoj dosieron kiel la unu ni havis antaŭe. Ĝi estas pli kompleksa, kompreneble. Sed en ĉi tiu kazo, ĉiu, ĉiu datumoj punkto estas tiu stato kaj havas liston de latitudoj kaj longitudo kiuj difinas la plurlatero, ke formo, tiu stato. 

Do kio D3 faros estas similaj al kion ni faris antaŭe. Ĝi petos al kaj ligos ke al elemento. Kaj estas funkcio kiu estos mapo tiu elemento ekstere, bazita sur la latitudoj kaj longitudo. Vi povas legi pli pri tio. Kaj mi rekomendas gxin. 

Ekzistas ligiloj fino de ĉi tiu kodo poŝtita. Kaj la kodo diras. En tie estas ligiloj por pli tie ĉi. Mi rekomendas vin rigardi ĝin. Sed kion ni interesas estas tiu projekcio funkcio. Mi volas iri tra tio. 

Antaŭ nenio, lasu min montri vi, ke, jes, ni havas mapon. Mapoj estas malvarmeta. Do ni rigardu ĉi produktado funkcio. 

Projekcio estas tre multe kiel skalo, skvamojn denove. Do kio produktado por tiu projekcio funkcio tio estas, ni povus pasi ĝin longitudo kaj latitudes-- tiukaze tiuj valoroj tie estas la lat-sopiras de la konstruaĵo ni sidis en dekstra now-- al projekcio. Kaj projekcio igos ke en x kaj y rastrumero valoroj. 

Do kio projekcio faras Estas tre simila al nia skalo. Ĝi estas prenante niaj latitudoj kaj Longitudo ke reprezentas tutaj globo kaj kuntiriĝanta kaj dimensionamiento ke malsupren al la casilla kiu ni volas, ke ni donis gxin. En ĉi tiu kazo, ni estas pasante ĉi tiuj valoroj. Kaj ĝi donos al ni, nu, ke sur via ekrano signifas 640 rastrumeroj. Ĉi tuta ekrano estas 700 rastrumeroj larĝa, tiel ke nin faras proksimume tie, kaj 154 rastrumeroj malsupren, kiun mi pritakso estas preskaux tie. 

Do prenante tiujn lat-sopiras, kiu reprezentas ion entute globo kaj squishing kaj movante ke ĉirkaŭ doni al ni x kaj y rastrumero valoroj, tiu estas la unua kiu estas farita en tiu surĵeto kodo. Kaj tiam la resto de la kodo konsumas datumoj kaj tiam mapas tiujn lat-sopiras en iu sur via ekrano. 

Sed ni tuj uzi ĉi projekcio funkcioj, ĉar ĝi rezultas ni havos lat-sopiras sopiras tiel. Rerigardante al niaj datumoj, ni havas latitudoj kaj longitudaj koordinatoj por ĉiu observo. Do ni uzu projekcio. 

Do rigardante nia ekspozicio, ni volas nian exposition-- ni havas latitudon kaj longitudon. Sed ni volas rastrumero valoroj. Kaj ĝi rezultas, ni havas precize kion ni want-- projekcio. Tre multe kiel ni estis uzante skalon dekstra tie, ni nun tuj uzos projekcio kaj fordoni koordinatoj. Do la unua afero ni doing-- tial ni estas akirante d, kiu estas individua datumoj elemento de individuo tertremo legado. La unua aĵo kiun ni faras estas akiri la koordinatojn. Bone, ni havas la koordinatojn. 

La dua afero, kiun ni faras estas preterpasonta al projekcio. Projekcio konvertas tiuj koordinatoj en rastrumero valoroj, x kaj y. Kaj tiam la lasta kiu volas fari estas simple akiri la x, kiu ĉi tiu kazo estas la unua unu. Estas la unua de la du aferoj kiuj revenis de projekcio. 

Ni faros la saman por y. Sed anstataŭe, ni revenos la dua elemento, la y. Pretiĝu por refreŝigi. Ooh, ekstra karaktero here-- bela, ni havas datuma pelataj dokumenton tio kaŝi ĉi JSON dosiero de objektoj, farante mapon, kaj ŝanĝante la atribui en rilato al la datumoj projekti ĝin sur mapo. Tiu estas vere interesa. Tio estas malvarmeta. 

Ni prenu ĝin muesca. Mi volas diri, ni havas du pecojn de informo kun ĉiu datumoj punkto. Mi volas diri, tri. Ni havas la koordinatojn, kio estas x kaj y. Kaj ni havas la grando. 

Ni bezonas kodi grando iel. Ni havas multajn kanalojn. Ni povas uzi koloron. Ni povas uzi radiuso. Ni povus uzi opakecon. Ni povus uzi multon en kodo. Ajna el tiuj atributoj kaj multaj pli ke ili ne listigitaj tie, ĉar ili estas laŭvola, ni povis uzi kodi ĉi datumoj, frapante kaj cxion tion mi menciis. 

Ni faru radiuso. Mi kredas radiuso estas la plej intuicia. Do denove, ni devos anstataŭi tiel malfacila-kodita 40 kaj faru kelkajn kalkulojn. Ni uzos nian preferataj skalo denove. Kaj ni estas pasinteco d. Sed ne d ĉar ni volas ke la grando de d. d estas ĝuste la datumoj punkto. Ni pasos la grando grimpi. 

Ni provu tion denove. Ooh, ĝi ne funkcias. Kial ĝi ne funkcias? 

Do memoru kion skalo faras. Ni rigardu skalo denove. Skalo mapoj de 1 al 10 en al 22 al 600, pli aŭ malpli. 600 estas grandegaj. Jen kial ni atingi ĉi. 

Do ni volas ŝanĝi nia skalo al io pli akceptebla. Diru, ni deziras 0 al 60. 60 estas granda, sed 10 tertremoj Estas nekredeble malofta. Fakte, ili neniam okazis. 

Do kio estas tiu faros estas, ĝi prenos nia grando kiu iras de 1 al 10 kaj mapi ĝin sur ekspansiiĝi ​​ĝin. Kaj mapi ĝin al 0 al 60. Ni fortigu. 

Nice, ni havas visualización. Tiu estas granda. Tio estas reala datumo. Vi rimarkos, en mia malgranda ludilo Ekzemple, la plej granda tertremo estas dekstra sur ni. Sed tio estas ĝi. Ni havas daton pelataj videbligo kiu plenumas la datumoj kaj donas al ni vere interesa informo. Yeah, ni aldonas iujn interactividad al ĝi. Mi menciis ke estis la forta forto de D3. 

Do jen, por ĉiu elemento, ni estas priskribante faskon da atributoj. Sed ni povas ankaŭ priskribi kion ni volas okazos kun interactividad elementoj. Ekzemple, ni povus priparoli Kio okazas kiam ni muso super. Kaj tre similaj ke, ke prenos funkcio, tre simila al la atributoj ni havis antaŭe, kie ni faru ion por la elemento kiam ni ŝvebi super ĝi. 

Do ni unue bezonas por fari estas elekti tiun eron, trovi ĝin esence, en la retumilo. kaj tiam ni povus agordi atributo al ĝi. Do kion mi faras ĉi tie estas, kiam ni ŝvebi super io, ni akiros tiun elementon kaj tiam starigis lian opakecon reen al 1, al tute opaka. Vidu kion tio aspektas. 

Ŝajnas ni havas ekstraj punktokomo tie. Do se ni ŝvebi super tie, ĝi prenas plena. Sed nun, certe, restas plena, ĉar ni devas priskribi kio okazas kiam forigu nia kursoro. Do ni faru ĝuste ke sur mouseout, kontraste al mouseover. 

Kaj ni reagordi ĝin al kion ni havis before-- 0.5. Kaj nun, ĉiufoje ni ŝvebado, ni preni plenan cirklon. Ĝi helpas nin vidi kion ni ni elektanta esence. 

Kaj nun ni faru ĉi vere granda. Ni konekti tiu al reala datumo. Do ni petu povis USGS pri iliaj datumoj. Do Usono Geologia Enketo havas datumojn pri tertremoj. Ili havas publikan API kiu estas kapabla esti konsumitaj en JSON-formato. Do ni faru tion. 

Do ĉi tiu estas iom da kodo ke Ligo al la USGS API. Kaj tie estas iom de prilaborado sur ĝi. Tiu ne estas grava sed simpligas ĝi al simpla datumoj formato kiel la ni havis antaŭe. Do mi forigi nian alvokon al niaj falsaj data.json sur dosiero. Kaj anstataŭe, mi vokas la USGS esence. 

Ni fortigu, agrabla. Tiu estas efektiva, reala-vivo datumoj de tiu semajno por tertremoj. Tiu estas vere interesa. Ĉi tio ne estas mirinda por ni, sed estas multaj tertremoj en la Okcidenta Marbordo en Kalifornio. Sed mi pensis ke estis tre interesa ke estis tiel multaj tertremoj en Alasko, kaj ŝajne, tie en la Midwest. Mi volas diri, interesaj, kaj ni estas bonaj. Tio estas la konkludo. 

Sed fundamente, ĉi Estas kion D3 helpas nin fari. Ĝi helpas nin preni datumojn, ligos tio al elementoj en la DOM, kaj havas tiuj elementoj ŝanĝi Kiel funkcio de la datumoj, havas tiujn atributojn, ĉiuj multaj atributoj de la elementoj, ĉiuj estos utila por kanaloj transdoni informon. 

D3 estas nekredeble potenca biblioteko kaj mirinde bone kuri. Jen iuj potencaj ajxoj. Datumoj videbligo estas nekredeble potenca ilo por transdoni al homoj profunda enrigardoj kiu alvenas al lia kerno kaj helpas ilin kompreni, en tiu profunda kaj intuicia vojo, kiom datumoj verkoj kaj kiel datumoj ŝanĝas nian vivon.