[CHWARAE CERDDORIAETH] 

DAVID Chouinard: Rwy'n David Chouinard, ac mae hyn yn D3. Croeso. Rydym yn mynd i ddysgu am D3 heddiw. D3 yn fframwaith JavaScript ar gyfer adeiladu o ansawdd uchel visualizations rhyngweithiol ar gyfer y we. Pethau fel hyn yr ydym ni'n gweld mewn nghefn y fi, rydyn ni'n mynd i ddysgu sut i wneud rhai pethau, math o hanfodion iddo. Ond mae'n mynd i fod yn oer. Gadewch i ni ddechrau arni gwneud lluniau 'n bert. Mae gennym fwy o demos o ragolygon sydd ar gael. Gadewch i ni wneud hynny. 

Deddf I, DOM manipulation-- rydym yn mynd i ddechrau ar unwaith yn gwneud pethau cŵl. Yn gyntaf oll, ar y chwith, mae gennym cod. Ar y dde, mae gennym y canlyniad ein cod. Gadewch i ni fynd drwyddo. 

Gadewch i ni wneud cylch. Sut mae hynny'n gadarn? svg.append circle-- rydym yn unig yn gwneud cylch. Nid ydych yn credu i mi, dde? Dyw hi ddim yno. 

Felly yr hyn a wnaethom iawn yma yw, SVG yn graffeg fector scalable. Mae hyn yn y ffordd yr ydym yn dweud wrth y porwr i gwneud graffeg fector yn y porwr. Yr hyn rydym yn unig yn gwneud ar hyn o bryd cael ei ychwanegu gylch i bori. 

Mae'r addewid yw bod y cylch yn gofyn ychydig o briodoleddau sylfaenol cyn y gallwn mewn gwirionedd yn ei weld. Mae angen i ni ddweud iddo ei sefyllfa x, ei sefyllfa y, ei radiws. Doedden ni ddim yn dweud ei fod dim o hynny, felly nid ydym yn gweld ei fod ar hyn o bryd. Ond gadewch i ni yn dweud ei stwff. 

Felly, yn gyntaf oll, oes gennych chi i roi enw ein cylch. Felly, gadewch i ni alw cylch. Mae ein cylch wedi enw erbyn hyn. A gadewch i ni roi ychydig o briodoleddau. Beth am CX fyddai canolfan x, felly canol y sefyllfa x. Gadewch i ni ddweud, 200 ar gyfer 200 o picsel. 

Gadewch i ni roi cynnig y o'r 200 o picsel hefyd. Ac mae r, radiws, o tua 40 picsel. Nawr, gadewch i ni weld. Nid wyf yn gallu sillafu. 

Dyna ni. Mae gennym cylch ar safle 200 picsel, 200 o picsel, radiws o 40 picsel. Math o oer, dde? Mae gennym gylch. Yeah. 

Felly, nid oes angen i ddilyn ar hyd. Mae'r holl enghreifftiau hyn, sydd i gyd y cod Dwi'n gwneud heddiw Bydd yn cael ei ddarparu ar-lein ar y diwedd ar ffurf enghreifftiau rhyngweithiol gyda rheolfeydd ar pob gweithred, ac yn y blaen. 

Gadewch i ni wneud mwy o bethau. Mae hyn cylch du yn wirioneddol hyll. Mae'n ddrwg gen i am y gwall negeseuon iawn yno. Dyna ni. 

Gadewch i ni roi cynnig lliw. Sut mae bod? Rwy'n hoffi glas dur. Wel, newid ein cylch lliw. Mae hynny'n wych. Gadewch i ni ei gwneud yn lled-dryloyw too-- lled-dryloyw. 

Felly, mae'r rhain yn nodweddion rydym yn diffinio ar y cylch. Y peth cyntaf a wnaethom yn rydym yn rhoi cylch ar y dudalen. Ac yna rydym yn diffinio bagad o nodweddion. Mae rhai o'r rhain yn cael eu hangen, fel CX, CY, a Radiws. Ac mae eraill yn ddewisol. 

Mae llawer mwy o nodweddion. Mae llawer ohonyn nhw. Er enghraifft, gallem gael strôc hefyd, strôc o goch. Ond gadewch i ni gael gwared ar hynny. Rydym yn ôl at gylch, cylch glas. 

Felly, gadewch i ni wneud mwy cylchoedd. Sut mae bod? Gadewch i ni wneud cylch arall. Mae hyn yn gyffrous, dde? 

Felly, yn dweud Fi jyst Copi-Pasted yr hyn a oedd gennym yn barod. Gadewch i ni alw circle2. A gadewch i ni wneud yr union un peth a rhoi iddo priodoleddau, rhoi x sefyllfa o 300. Yay, mae gennym ddau cylchoedd nawr. 

Ac wrth gwrs, gallem diweddaru'r gwerthoedd hyn. Gallwn roi ar 400, ac yn awr mae'n symud. Ac ers ei fod yn blino, gadewch i ni ddileu, felly circle2.remove. Mae wedi mynd yn awr. 

Felly yr hyn yr ydym yn ei wneud ac yn unig iawn, very-- hyn yn debyg iawn i'r hyn yr ydych Efallai ei wneud yn jQuery, er enghraifft. Rydym yn unig yn trin y DOM, fe'i gelwir. Efallai eich bod wedi clywed y gair hwnnw o'r blaen. Rydym yn creu pethau, gan osod briodoleddau ar bethau, gan gael gwared stwff. 

Yn awr, dyma lle mae'n mynd yn ddiddorol. Felly, yn ddiweddarach yn y cod, gallem o hyd cyfeirio at y cylch gwreiddiol yma. Felly, gadewch i ailosod ei priodoledd i CX. Gadewch i ni ddweud, ei sefyllfa x i 400. Ac yr wyf i'n mynd i pontio hynny, felly mae'n amlwg. Dyna ni. 

Felly rydym yn ychwanegu cylch. Rydym yn gosod rhai priodoleddau. Rydym yn ychwanegu cylch arall, tynnu ef. Ac yna rydym yn addasu y cylch gwreiddiol. 

Ond dyma ble mae'n mynd yn llawer mwy diddorol. Nid yn unig y gallwn osod priodoleddau fel dim ond gwerthfawrogi, gallwn ddweud, hey, cylch, ewch i leoli 200. Gallwn hefyd yn eu gosod fel swyddogaethau. 

Felly, yn hytrach na rhoi 400 o fan hyn, gallwn wneud rhywfaint cyfrifiad ar y hedfan am yr hyn rydym am i'r nodwedd fod. Felly dyma sut y byddech yn mynegi hynny. Yr ydym yn dweud, yn hytrach na 400, gadewch i mi rhoi swyddogaeth i chi yn lle hynny. Ac yma, y ​​tu mewn swyddogaeth hon, gallwn wneud unrhyw gyfrifiad crazy. 

Gallem gymryd yr amser a edrych ar rai peth arall ac yn ddeinamig benderfynu drostynt y cylch pa werth yr ydym ei eisiau. Beth am rydym yn unig yn rhoi ei fod yn x sefyllfa ar hap? Felly dyna hynny. 

Felly beth sy'n dweud yw, ar gyfer pob x, yn rhedeg y swyddogaeth hon. A beth rydym yn ei wneud yw cyfrifo rhai pethau, o weithiau ar hap lled a dychwelyd hynny. Felly, bob tro rydym yn cynnal hynny, cawn cylch sy'n mynd i le ar hap. Mae'n fath o oer. Rwy'n teimlo fy mod gallai edrych ar hyn am ychydig. Rydym yn dechrau i gyrraedd rhywbeth diddorol yma. Gadewch i ni wneud y data hwn ei yrru nawr. Does dim data yma. Gadewch i ni newid hynny. 

Documents-- Deddf II, Driven Data Felly gadewch i ni ddychwelyd i'r fan hyn. A gadewch i ni dim ond cael gwared ar circle2, oherwydd ein bod yn jyst ychwanegu a dileu hynny. Felly peidiwch wir ei angen arnom. Mae angen i ni fod yn llawer mwy clyfar yma. Gadewch i ni ddweud, mae gennym rhywfaint o ddata o ryw fath. Moment-- Un gadewch i ni ddweud, cawsom data o'r ffurflen hon. Cawsom amrywiaeth, dim ond criw o rifau. Mae gennym saith o rifau yma, beth bynnag mae'r rhain swm represent-- mewn cyfrif banc pobl, sut llawer eu bod yn pwyso, duw a ŵyr beth. 

Mae'r rhain yn rhifau, ac yr ydym yn am ddefnyddio ein cylchoedd i gynrychioli niferoedd hynny rywsut. Rydym am glymu ein cylchoedd i'r niferoedd hynny. Felly yr hyn yr ydym yn ei wneud. Gadewch i ni ddweud, yr ydym am gael cylch ar gyfer pob rhif. Gallem wneud yr hen beth yr oeddem yn doing-- atodi cylch a circle2 a circle3. Ond mae hyn yn mynd allan o law, a mae llawer o ailadrodd rhesymeg. 

Felly gadewch i ni gael mwy clyfar â hynny. Yn hytrach na defnyddio'r cylch var svg.append ein bod yn unig gan ddefnyddio, rydym yn mynd i ddefnyddio bloc bach hyn yma. Dydw i ddim eisiau mynd manwl i mewn i'r hyn bob rhan hyn yn ei wneud. Ac mae'n fath o bwnc uwch. Ac yr wyf yn dymuno gallwn. 

Ond y peth allweddol i'w recognize-- a byddwch yn gweld yn aml iawn mewn cod D3. Mae hyn yn bloc o destun sylfaenol yn creu cymaint o gylchoedd gan fod elfennau data yn y arae hwn yn iawn yma. Felly, mae hyn yn creu cymaint o cylchoedd gan fod elfennau. Mae'n mynd i greu saith cylchoedd ni. Ac mae'n ei wneud yn beth iawn, iawn allweddol. Felly, gadewch i ni redeg hynny. Gadewch i ni gael gwared ar ein cylch arall. Gadewch i ni jyst sylwadau hyn rhannol allan a rhedeg hyn eto. 

Dyna ni. Felly, mae ein cylch yma yw dywyllach llawer, oherwydd ein saith gylchoedd, un ar ben y llall. Rydym yn unig greu saith cylchoedd, un yr un ar gyfer pob un o'r elfennau data. Ond mae 'na beth allweddol a ddigwyddodd gyda snippet hwn yn iawn yma. 

Mae'n bod data ei rhwymo. Felly bob un o elfennau data hynny, 10, 45, 105, roedd yn rhwymo i gylch penodol. Felly, mae'r rhain nid yn unig yn creu criw o gylchoedd ond yn clymu y ddau beth gyda'i gilydd. 

Ac yn y dyfodol, oherwydd ein bod creu cylchoedd rhai sydd â swyddogaeth hon D3, os wyf yn rhoi cylch i chi, gallwch rhoi data sy'n gysylltiedig ag ef mi. Felly, gallwn ofyn i D3. Hey, D3, mae gennyf cylch hwn. Beth yw'r ddata y mae'r cylch wedi? A byddai D3 yn dweud wrthym o 10 neu 45 neu 105. 

Mae'r pethau hyn yn cael eu rhwymo. Mae hynny'n gysyniad iawn, yn sylfaenol iawn. Gadewch i ni edrych ar hynny. 

Felly, y ffordd y byddem yn gofyn D3-- felly mae hyn yn amherthnasol ar gyfer hyn, ond dim ond ymddiried ynof arno. Dyma sut yr ydym yn gofyn D3. Hey, D3, yn rhoi i mi y cyntaf cylch y gallwch ddod o hyd. Rhowch y cylch cyntaf gallwch ddod o hyd i mi. Ac yna gallem ofyn i D3, beth sydd mae'r data ar hynny, fel hyn, 10. 

Felly rydym yn unig yn gofyn D3, dod o hyd i mi y cylch cyntaf gallwch ddod o hyd. Beth yw ei data? 10, mae hynny'n wir ein elfen hon data cyntaf. Gallem ofyn iddo, hey, D3, ddod o hyd i ni ein trydydd cylch. 105.. Pam fod hyn yn wirioneddol bwysig? 

Felly dde yma, soniais y gallem ddefnyddio swyddogaethau. Ac yr wyf yn sôn bod yn yn beth pwerus iawn. Felly, nid yn unig y gall ein swyddogaethau wneud pethau fel gwneud rhywfaint o gyfrifiannu, er enghraifft, yn dychwelyd rhif ar hap, gall hefyd yn gwneud pethau sy'n seiliedig ar y data. Dyma beth ddogfennau data ei yrru yn ei olygu. Dyna beth D3 yn sefyll am. 

Felly, mae hyn x postition-- yn lle hynny o ddim ond dweud, yr holl gylchoedd, cael x sefyllfa 200, rydym yn gallai roi cynnig swyddogaeth. Ac yma, gallwn wneud rhai cyfrifiad. a ch yma yn sefyll yn ei le ar gyfer y data. Felly, bob tro yr ydym wedi cylch, yn y bôn, Bydd D3 yn creu y saith cylchoedd. Ac yna ar gyfer pob 

cylch, mae'n mynd i fynd, hey, circle1 beth yw eich sefyllfa x. Yn flaenorol, roeddem ateb bob amser yn 200. Ond yn awr, bob D3 tro yn gofyn ni beth yw eich sefyllfa x, mae'n mynd i roi us-- gennym y cylch, felly mae gennym y data. Mae'n mynd i roi'r data inni a dweud, beth ydych chi eisiau y dangosiad fod, seiliedig ar y data hwnnw. 

Gadewch i ni dim ond yn dychwelyd y data gwirioneddol. Felly, os ydym yn rhedeg hyn, mae hyn yn rhoi gyrru data ni dogfennau. Mae'r rhain cylchoedd hyn yn seiliedig mewn perthynas position-- eu bod canolfannau fel swyddogaeth o'r data. 

Felly, ar gyfer y cylch cyntaf, D3 rhoi cylch. Ac yna D3 yn gofyn i ni, yr hyn yn ei wneud ydych am i'r dangosiad fod. Ac rydym yn unig yn dweud, beth bynnag yw'r data. Gwnewch y dangosiad 10. 

Yna, mae'n gofyn, beth ydych chi am i'r esboniad i fod ar gyfer yr ail gylch. Ac rydym yn ateb, 45. Ac yr ydym, wrth gwrs, gall gwneud rhywfaint o gyfrifiannu yma. Rwy'n gweld bod y rhai cylchoedd yn fath o squished i fyny. 

Felly luosi iddo gan 3, lluoswch data 3. Mae ein cylch jyst got ehangu allan. Mae ein gwerth yn treblu. 

Mae'r cylch yn wirioneddol ar yr ymyl, felly gadewch i ni efallai fath o wneud iawn am hynny. Gadewch i ni ddweud, erbyn 20. Yma byddwch yn mynd. 

Mae hwn yn delweddu data. Mae'n un sylfaenol iawn, ond mae hyn yn rhoi rhyw syniad i ni ein data. Mae'n dweud wrthym fod, er enghraifft, yr ydym yn ag ychydig clwstwr o elfennau. Ac mae gennym allgraig mawr yma. Mae hyn yn rhoi rhywfaint o wybodaeth i ni am y dosbarthiad. 

Pe baem yn, er enghraifft, i newid data i 150 o yma ac adnewyddu, ein delweddu yn cael ei newid. Mae'r ddogfen hon data ei yrru. 

Felly, wrth gwrs, yr holl elfennau hyn, yr holl nodweddion hyn yma, gallwn ddefnyddio swyddogaeth, nid dim ond y rhifau, nid dim ond y x a swyddi y. Felly, gallwn ddefnyddio swyddogaeth ar gyfer y lliw. Felly, byddwn yn gwneud yr un peth. Byddwn yn rhoi swyddogaeth. 

A gadewch i ni ddweud, gallem gael conditionals yn ein swyddogaeth. Gall y swyddogaeth hon fod yn cant o linellau hir. Gall wneud pethau iawn, yn gymhleth iawn. 

Felly, gadewch i ni roi os yw'r datganiad yma. Gadewch i ni ddweud, os ein data yn llai na 50, dyna peth trothwy ein bod yn ddiddordeb mewn am ryw reswm. Gadewch i ni wneud yn wyrdd. Fel arall, gadewch i ni ei gwneud yn goch. Sut mae bod? Nice. 

Felly mae ein delweddu data yn dechrau i gyfleu gwybodaeth yn fwy diddorol ar lawer o sianeli. Felly nawr rydym yn gwybod ychydig am y dosbarthiad. A gwyddom fod yna rhyw fath o torri i ffwrdd ar 50 yr ydym yn ddiddordeb ynddo. Rydym yn gwybod bod yna ddau bwynt data is na'r trothwy hwnnw ac mae'r rhan fwyaf ohonynt uchod. 

Felly, fel cam olaf, mae'r data hwn yma, mae'n anghyffredin iawn i weld hyn fel 'na. Felly gadewch i ni dim ond symud y tu allan i'r newidyn oherwydd dyna glanach, fel hyn. Ac yna rydym yn defnyddio hwnnw newidyn yma. Mae yr un peth yn union. Dim ond ychydig yn lanach. 

Nesaf i fyny, Deddf III, Scales-- Felly, un broblem yn iawn yma yw, os byddwn yn newid ein data yn y 200 o value-- os byddwn yn newid i 400 neu rywbeth a adnewyddu, Yna, y gwerth hwn yn unig yn mynd offscreen. Felly mae ein rhesymeg dde yma o'r ffordd yr ydym yn gwneud yr amseroedd 3 a 20, i ledaenu allan ac yna wrthbwyso ei fod braidd yn wirioneddol clunky. 

Beth mae niferoedd hynny yn ei olygu? Maent yn unig codio galed yno. Ac maen nhw'n clymu yn fawr iawn at y data. Rydym am ddogfen data ei yrru. Rydym am ddogfen hyblyg iawn, bod data a roddir, yn addasu iddo ac mae'n cynrychioli ei. 

Yr hyn yr ydym yn y bôn angen yw, rydym yn cael ystod hon o rifau 10. 45, 105 o. Ac rydym am i fapio bod allan ar y lled, lled llawn yma. Felly, mae gennym yr ystod o rhifau yn mynd 0-100. Ac rydym wedi campws hwn rwyf yn mynd 20-700, yn yr achos hwn. 

Rydym fath o awyddus i fapio hwnnw ar. Rydym am i raddfa bod i fyny ac i Yna, gwrthbwyso ei fod ychydig bach. Mae'n ymddangos bod D3 Mae gan hyn. Mae'n cael ei alw graddfa. Felly, gadewch i ni ei ddefnyddio. 

Mae'r ffordd y works-- fy mod i'n mynd i teipio hyn i fyny ac yna ei egluro. Mae hwn yn raddfa. Beth fydd yn ei wneud yw, bydd yn mapio allan gwerthoedd 1-200 ar 20 i 600. Gallwn wirio bod. Gallwn weld hynny yma. 

Felly, os wyf yn bwydo ei 1-- un eiliad. Rhowch un eiliad i mi. Rhaid i mi gamdeipio'r enw. Dyna ni. Mae'n ddrwg gen i am hynny. 

Felly beth fydd graddfa yn ei wneud yw, bydd yn cymryd gwerth ac yna troi hynny, ehangu hynny allan, felly mae'n yn llenwi'r ystod lawn rydych yn gofyn amdano. Felly, yn yr achos hwn, os byddwn yn rhoi un, mae'n mynd i fapio bod allan ar 20. Ac os ydym yn rhoi 200, 'i' mynd i fapio bod ar i 600. Ac yn rhywle yn y canol, os cawn 100, 'i' mynd i fod yn rhywle mewn rhwng 20 a 600. 

Ac wrth gwrs, yn awr mae hyn yn beth mae angen i ni gael gwared ar y rhai codio galed pethau sydd gennym yn iawn yno. Felly yr hyn yr ydym am ei wneud yw cymryd y data ein bod o gofio, bod data unigol elfen, ac yn ei throsglwyddo i raddfa yn gyntaf. Felly bydd graddfa raddfa i fyny. 

Well-- O, mae gennym ychydig o wall yma. Ein bod ar goll data. Dyna ni. A bod yn ehangu ei wneud. 

Mae hynny'n rhoi i ni yr un fath canlyniad oedd gennym o'r blaen, ond yn hytrach na chael rhai codio cyfyngiadau caled. Ac os y maint ein newidiadau gynfas, er enghraifft, os ydym am gael dros y 400 picsel ac mae'n squishes allan, gallwn gael ei over-- gallwn ehangu ei, neu yr ydym Gall leihau hyn ymyl chwith i'r rhywbeth yn llai neu'n fwy na 20. Mae'r niferoedd hyn, mae'r rhain yn codio galed rhifau awr yn gwneud synnwyr i ni. 

A gallem wneud llawer mwy bethau diddorol hefyd. Felly, yn lle cael llinellol graddfa, efallai y byddwn eisiau mewngofnodi graddfa. A fydd yn rhoi graddfa log i ni. 

Felly nawr ein graddfa, yn hytrach na dim ond ehangu nodi bod amrediad, mae'n gwneud pethau yn fwy soffistigedig. Yn hytrach na chael amrediad hwn galed codio, ac yn hytrach na chael bod 600, efallai y byddwn yn dymuno jyst arfer y lled, felly o 20 i y lled minws 40, 2 waith yr ymyl ar yr ochr arall. Ac mae hyn yn gwneud llawer mwy o synnwyr i rhywun a allai edrych ar y cod. 

Yn ddiddorol, mae'r graddfeydd yn cael iawn, yn soffistigedig iawn hefyd. Maent yn gwneud llawer o bethau diddorol. Felly, nid yw graddfeydd reidrwydd gael i weithredu yn unig gyda rhifau. Gadewch i ni wneud raddfa lliw. 

Felly gallai ein amrediad be-- ein parth yn 1-200. Dyna'r peth mewnbwn. Ond efallai y byddwn yn dymuno map o wyrdd i goch, er enghraifft. Ac yn awr, os byddwn yn ei throsglwyddo 1, rydym yn mynd i gael wyrdd. Os byddwn yn rhoi 200, byddwn yn cael goch. Ac os ydym yn ei throsglwyddo rhywbeth yn y canol, mae'n mynd i fod yn rhyw gymysgedd o hynny, rhywle ar y graddiant rhwng gwyrdd a choch. 

Ac yn hytrach na chael y math hwn o resymeg clunky sydd gennym yma gyda'r amodol iawn yno, gallem gael something-- â graddfa linol rhwng y rhai. Felly, byddem yn defnyddio'r raddfa rydym yn unig creu, yr ydym elwir lliw. A byddem yn rhoi d, a oedd yn yw ein elfen hon data. Ac dyna ni. Mae gennym raddfa lliw. 

Felly mae hwn yn mapio. Felly, y pellaf ar y chwith yn gwbl wyrdd. Mae'r hawl yn hyn yn hollol goch. A phopeth yn y canol yn un o swyddogaethau o d. Mae gennym diddorol visualizations yma. Ond mae ein data yn fath o ddiflas. Gadewch i ni weld beth y gallem ei wneud os cawsom data mwy diddorol. 

Deddf IV, Gyda Gwaith Data-- y peth cyntaf byddwn am ei wneud i wneud ein delweddu yn fwy diddorol yw symud data i rywle arall. Mae'n clunky iawn i gael y data a chodio caled yma. Ac yn gyffredinol, byddwn yn gofyn rhywun arall ar gyfer y data. Byddwn yn gofyn efallai y llywodraeth, y Biwro Cyfrifiad, beth yw eich data ac yna plotio hynny neu ofyn rhywfaint o endid trydydd-parti ar gyfer rhywfaint o ddata ac yna adeiladu delweddu ar hynny. 

Felly, y peth cyntaf yr ydym am ei wneud yw symud hynny i rywle arall. Felly dw i'n mynd i greu ffeil o'r enw yma data.json. JSON yn y fformat data. Nid oes rhaid i chi ei wybod llawer am hynny. Ac rydym yn mynd i gopïo'r ychydig iawn o ddata sydd gennym yno, bastio i mewn yno air am air, ewch yn ôl at ein cod delweddu yma, ac yn defnyddio'r swyddogaeth hon yn iawn yma. Nid oes rhaid i chi wybod y manylion. Ond beth fydd hyn yn ei wneud yw, bydd yn canfod bod ffeil, nôl iddo, a'i dychwelyd atom. Felly beth mae hyn yn ei wneud yw, mae'n mynd a chael y ffeil data.json. Ac yna yr holl cod sy'n mewnoli inside-- yn y bôn, yr holl cod gennym there-- fydd rhedeg dim ond pan gawn y data yn ôl. Ac yna mae'n mynd i redeg y Cod gyda'r data sydd gennym. Great, mae gennym delweddu sy'n Ymholiadau ar gyfer rhai cod yn rhywle arall, sydd fel arfer yn lle mae'n ymholiadau rhywfaint o ddata o rhywle arall, sydd fel arfer yn sut visualizations yn gweithio. 

Ond yr wyf am fynd yn ôl i'r data. Felly mae'r data sylfaenol yn D3-- D3 yn defnyddio data sy'n restr o bethau. D3 yn disgwyl i'r data yn unig fod yn rhestr o bethau, amrywiaeth o bethau. Does dim ots pa pethau hynny chi, ar yr amod ei fod yn amrywiaeth ohonynt. 

Felly dyma, er enghraifft, gallem o cwrs wedi arnofio gwerthoedd pwynt. Gallem gael negyddol. Nid yw D3 yn poeni, cyhyd gan ei fod yn rhestr o bethau. 

Pethau mor ddiddorol i ni Gallai gael, gallem hefyd restr o linynnau fel 'na. Felly, mae'r rhain yn y penawdau Crimson Yr wyf yn codi i fyny ychydig ddiwrnodau yn ôl. Ac efallai y gallwch ddod o hyd i diddorol pethau am y rhain yn penawdau. 

Felly eto, mae hwn yn rhestr o bethau. Nid yw D3 ddim yn poeni. Mae'r rhain yn digwydd i fod yn llinyn. Rydym wedi newid ein data. 

Gadewch i ni ddychwelyd at ein delweddu. Yn awr, mae ein delweddu yn disgwyl mewnbwn i fod yn rhifau. Felly, rydym yn mynd i gael i wneud ychydig o newidiadau. Felly, er enghraifft, yn gyntaf oll, efallai rydym eisiau rhoi cylchoedd hyn ynghyd gan hyd y pennawd, mae'r nifer o gymeriadau yn y pennawd. 

Felly beth y byddwn yn ei wneud yw-- bob tro mae ein yn cael ei alw'n swyddogaeth gyda llinyn, byddwn yn dod o hyd ei fod yn hyd A Yna, pasio hynny i raddfa. Mae'r lliw, 'n annhymerus' yn ôl bod i las dur. Ac dyna ni. Mae gennym delweddu penawdau o Crimson. 

Mae ein graddfa yn ychydig yn ffwrdd. Gadewch i ni dybio bod y hiraf pennawd yn 100 nod o hyd, felly rhychwantu bod allan ychydig. Ac mae gennym delweddu. Felly, mae'n ymddangos bod y rhan fwyaf penawdau yn eithaf agos at ei gilydd, o ran llinell gymeriad. Ond mae un yno mewn gwirionedd yn sefyll allan. 

Gallem adeiladu rhai offer i archwilio bod mwy. Ond pan oeddwn yn gweithio ar hyn, roeddwn yn chwilfrydig boed, yn y set ddata, penawdau gyda colon ynddynt fyddai fod yn hirach. Rwy'n cymryd yn ganiataol y byddent. 

Felly, gadewch i ni gael gwybod. Gadewch i ni ddefnyddio'r lliw sianel fel y gwnaethom o'r blaen, i amgodio rhai ynghylch a mae 'na colon neu ddim. Felly, byddwn yn defnyddio amodol eto. Nid oes rhaid i chi ei wybod manylion o hyn, ond mae hyn yn sut yr ydym wirio llinyn ar gyfer cymeriad neilltuol yn JavaScript, unwaith eto, nad ydynt yn berthnasol. 

Ond os nad ydym yn dod o hyd i colon, byddwn yn dychwelyd gwyrdd. Ac os ydym yn ei wneud, byddwn yn dychwelyd goch. Felly eto, benawdau bod wedi bydd colon yn goch. Dyma beth mae hyn yw-- 'n glws. 

Felly, mae'n ymddangos bod fy damcaniaeth yn cael ei bumped. Dim ond dau. Dim ond chwe phwynt data a dim ond dau oedd colon. Ond mae'n ymddangos ychydig yn fwy ar y pen isaf, mewn gwirionedd. Penawdau gyda colon yn ymddangos i fod yn fyrrach yn gyffredinol, o leiaf yn ein data set-- ddiddorol. 

Gadewch i ni ddychwelyd hynny i dur glas ac yna gweld hyn y gallwn ei wneud gyda hyd yn oed data mwy diddorol. Felly eto, yr wyf yn sôn bod data mewn D3 yn rhestr o bethau. Rydym wedi gweld nifer o sawl math. Rydym wedi gweld llinynnau. Ond gall y pethau hefyd fod gwrthrychau. 

Gallant fod yn bethau cymhleth sy'n cynnwys llawer o bethau. I ddweud y gliriach, yn y rhan fwyaf o achosion, rydym yn awyddus i adeiladu pob pwynt data fel yn fwy cymhleth na dim ond un gwerth. Os hoffech chi ddychmygu cronfa ddata am fyfyrwyr, gallai fod yn fyfyriwr enwi, ID myfyrwyr, ac mae llawer o bethau cysylltiedig gyda chofnod arbennig, nid dim ond llinyn neu rif. Felly, gadewch i ni edrych ar hynny. 

Mae hwn yn un data o'r fath a osodwyd. Mae hwn yn mynd ati i ddaeargrynfeydd data. Felly mae popeth yma ar ein rhestr neu amrywiaeth o bethau yn cynnwys llawer o bethau ei hun. Felly mae pob pwynt data yn ganddi maint a chydlynu. Ac yn cydlynu eu hunain yn cynnwys dau beth. 

Felly bob dydd yn awr yn llawer mwy gymhleth ac yn llawer mwy diddorol ac yn cynnwys llawer mwy gwybodaeth ddiddorol. Gadewch i ni weld y gallem adeiladu allan o hynny. Dychwelyd yn ôl i fan hyn, unwaith eto, gan ddefnyddio ein delweddu cylch histogram rydym wedi adeiladu, gadewch i ni weld os gallwn adeiladu delweddu o ddosbarthiad maint yn ein set data. 

Felly dyma, 'i' yr un cysyniad. Ond yn awr, d yn cynnwys mwy o bethau. d yn cynnwys llawer o elfennau data. Felly, rydym yn cael d yn ôl. D3 yn rhoi d i ni. Ac rydym yn ymateb drwy ddod o hyd y maint o d ac yna basio hynny i raddfa. 

Ac yna mae angen i ni newid ein graddfa, wrth gwrs. Felly meintiau nid yn unig yn ei wneud mynd yn llawer mwy na 10. A dweud y gwir, ni fu ddaeargryn o 10 maint. Ond dyna fath o o'n uchaf ben, mae ein sbectrwm uchaf. 

Gadewch i ni adnewyddu. Nice, mae gennym delweddu. Mae'n ddiddorol note-- hynny mae dau bwynt data a yn cael eu bron yn union ar ben pob eraill, o ran maint. Byddwch yn gweld hyn gan y didreiddedd rydym yn ei ddefnyddio. 

Mae gennym data daearyddol yn awr. Mae gennym lledredau a hydred. Efallai y gallem wneud rhywbeth yn llawer mwy diddorol gyda hynny. Gadewch i ni ddod o hyd i fwy ffordd ddiddorol i ddelweddu mae hyn yn fwy cymhleth data yr ydym yn cael mynediad at. 

Deddf V, Mapping-- yn sylfaenol, rydym am roi'r rhain ar fap. Yr wyf yn golygu, dyma lle mae hyn yn mynd. Rydym am i amgodio gwybodaeth am y sefyllfa o ddarlleniadau daeargryn hyn, yn ogystal â'u maint, am fod gennym yn awr. Rydym yn deall sut i yfed data mwy cymhleth. 

Y peth cyntaf y byddwn yn ei wneud yw greu map, map cefndir. Rydw i'n mynd i fynd drwy mae hyn yn gyflym iawn. Mae hyn yn cod anodd. Mae'n un arall o'r rhai a ryseitiau nad ydych yn wir yn rhaid i ddeall yn llawn i chi eu defnyddio. Ond mae hyn yn cod. Mae'r côd hwn dde yma yn creu map. 

Nid ydym yn mynd i fynd yn fanwl. Ond yr wyneb, yr hyn y mae'n ei wneud yw, mae'n ymholiadau ffeil us.json hwn, a yn ffeil ddata yn hoffi yr un oedd gennym o'r blaen. Mae'n fwy cymhleth, wrth gwrs. Ond yn yr achos hwn, mae popeth, pob pwynt data yn y cyflwr ac mae ganddo restr o lledredau a hydred sy'n diffinio'r polygon, y ffurflen honno, y wladwriaeth honno. 

Felly beth fydd D3 yn ei wneud yn debyg at yr hyn a wnaethom o'r blaen. Bydd yn gofyn am hynny ac rhwymo hynny i elfen. Ac mae swyddogaeth sy'n Bydd mapio elfen honno allan, yn seiliedig ar y lledredau a hydred. Gallwch ddarllen mwy am hynny. Ac yr wyf yn ei argymell. 

Mae cysylltiadau yn y diwedd y cod hwn postio. Ac mae'r cod yn cael ei sylwadau. Yn yna gysylltiadau am pellach ar hyn. Yr wyf yn argymell i chi edrych i fyny. Ond yr hyn yr ydym yn gofalu amdano yw swyddogaeth amcanestyniad hwn. Dw i eisiau mynd drwy'r hynny. 

Yn gyntaf oll, gadewch i mi ddangos eich bod, ie, mae gennym map. Mapiau yn oer. Felly, gadewch i ni edrych ar hyn swyddogaeth cynhyrchu. 

Rhagamcaniad yn fawr iawn fel graddfa, graddfeydd eto. Felly beth cynhyrchu ar gyfer swyddogaeth amcanestyniad hwn Nid yw, gallem basio hydred ac latitudes-- yn yr achos hwn, gwerthoedd hyn dyma yw'r lat-longs o'r adeilad rydym yn eistedd yn gywir now-- i amcanestyniad. A bydd amcanestyniad trosi bod i mewn x ac y gwerthoedd picsel. 

Felly beth amcanestyniad yn ei wneud yn debyg iawn i'n graddfa. Mae wedi cymryd ein lledredau a hydred sy'n cynrychioli glôb cyfan ac yn crebachu a sizing bod i lawr at y sgwâr yr ydym am, ein bod wedi rhoi iddo. Yn yr achos hwn, rydym yn pasio gwerthoedd hyn. Ac mae'n rhoi i ni, yn dda, bod ar eich sgrîn yn golygu 640 o picsel. Mae'r sgrin hon yn gyfan yn 700 o picsel eang, fel bod ein gwneud amdanynt yma, a 154 o bicseli i lawr, yr wyf byddai amcangyfrif yn 'n bert lawer yma. 

Felly cymryd rhai lat-longs, a oedd yn yn cynrychioli rhywbeth ar y byd cyfan a squishing a symud o gwmpas y i roi i ni x a gwerthoedd y picsel, mae hyn yw'r peth cyntaf sy'n wneud yn y cod mapio. Ac yna weddill y Cod yn defnyddio data ac yna mapiau rhai sy'n lat-longs ar rywbeth ar eich sgrîn. 

Ond rydym yn mynd i ddefnyddio amcanestyniad hwn swyddogaethau, gan ei fod yn troi allan rydym wedi ysu lat-longs hefyd. Wrth edrych yn ôl ar ein data, rydym wedi lledredau a hydred gyfesurynnau ar gyfer pob arsylwi. Felly, gadewch i ni ddefnyddio amcanestyniad. 

Felly, edrych ar ein dangosiad, rydym am i'n exposition-- mae gennym lledred a hydred yn. Ond rydym am i werthoedd picsel. Ac mae'n troi allan, mae gennym yn union yr hyn yr ydym want-- amcanestyniad. Llawer iawn fel ein bod yn gan ddefnyddio graddfa dde yma, rydym yn awr yn mynd i ddefnyddio amcanestyniad ac yn ei throsglwyddo cyfesurynnau. Felly, y peth cyntaf rydym yn doing-- felly rydym yn cael d, sef ddata unigol elfen o daeargryn unigol darllen. Y peth cyntaf rydym yn ei wneud yw cael y cyfesurynnau. Mae pob hawl, mae gennym y cyfesurynnau. 

Yr ail beth yr ydym yn ei wneud yw pasio hynny ymlaen i amcanestyniad. Rhagamcaniad yn trosi cyfesurynnau y rhai i mewn i werthoedd picsel, x ac y. Ac yna y peth olaf yr ydym yn am ei wneud yn unig yw cael y x, sef yr achos hwn yw'r un cyntaf. Mae'n y cyntaf o'r ddau beth sy'n cael eu dychwelyd gan amcanestyniad. 

Byddwn yn gwneud yr un peth ar gyfer y. Ond yn lle hynny, byddwn yn dychwelyd yr ail elfen, yr y. Byddwch yn barod i adnewyddu. Www, cymeriad ychwanegol Yma-- 'n glws, rydym wedi dogfen gyrru ddata sy'n cuddio y ffeil JSON o wrthrychau, gan wneud map, ac yn newid y priodoli mewn perthynas â'r data i brosiect iddo ar fap. Mae hyn yn ddiddorol iawn. Mae hyn yn cŵl. 

Gadewch i ni fynd ag ef i fyny hollt. Yr wyf yn golygu, mae gennym ddau ddarn o gwybodaeth gyda phob pwynt data. Yr wyf yn golygu, tri. Mae gennym y cyfesurynnau, sydd yn x ac y. Ac mae gennym y maint. 

Mae angen i amgodio maint rhywsut. Mae gennym lawer o sianeli. Gallwn ddefnyddio lliw. Gallwn ddefnyddio radiws. Gallai Rydym yn defnyddio didreiddedd. Gallai Rydym yn defnyddio llawer o bethau yn y cod. Unrhyw un o'r priodoleddau hyn a llawer mwy nad ydynt wedi eu rhestru yno, am eu bod yn ddewisol, gallem defnyddio i amgodio data hwn, mae'r strôc a'r holl bethau hyn rwyf wedi crybwyll. 

Gadewch i ni wneud radiws. Rwy'n credu radiws yw'r mwyaf sythweledol. Felly eto, byddwn yn cymryd lle hynny galed-godio 40 a gwneud rhai cyfrifiadau. Byddwn yn defnyddio ein hoff raddfa eto. Ac rydym yn y gorffennol d. Ond nid d am ein bod am i'r maint o d. d yn unig yw man data. Byddwn yn pasio maint i raddfa. 

Gadewch i ni geisio hynny eto. Www, nid yw'n gweithio. Pam nad yw'n gweithio? 

Felly cofiwch pa raddfa yn ei wneud. Gadewch i ni edrych ar raddfa eto. Mapiau ar raddfa o 1 i 10 ar i 22-600, mwy neu lai. 600 yn enfawr. Dyma pam rydym yn cael hyn. 

Felly, rydym am newid ein graddfa i rywbeth mwy rhesymol. Gadewch i ni ddweud, rydym am 0-60. 60 yn fawr, ond mae 10 o daeargrynfeydd yn hynod brin. Yn wir, nad ydynt erioed wedi digwydd. 

Felly beth mae hyn yn gwneud yw, bydd yn cymryd mae ein maint sy'n mynd o 1 i 10 a map ar ehangu 'ii maes. A map ar i 0-60. Gadewch i ni adnewyddu. 

Nice, mae gennym delweddu. Mae hyn yn wych. Mae hyn yn y data gwirioneddol. Byddwch yn sylwi, yn fy tegan bach enghraifft, y daeargryn mwyaf yn iawn ar ben un ohonom. Ond dyna ni. Mae gennym delweddu gyrru dyddiad sy'n defnyddio data ac yn rhoi i ni 'n sylweddol gwybodaeth ddiddorol. Yeah, gadewch i ni ychwanegu ychydig rhyngweithio ag ef. Soniais am hynny yn y grym cryf o D3. 

Felly dyma, ar gyfer pob elfen, rydym yn disgrifio bagad o nodweddion. Ond gallwn hefyd yn disgrifio yr hyn yr ydym ei eisiau i ddigwydd gydag elfennau rhyngweithio. Er enghraifft, gallai rydym yn disgrifio beth sy'n digwydd pan fyddwn llygoden dros. Ac yn debyg iawn, bydd yn cymryd swyddogaeth, debyg iawn i'r briodoleddau oedd gennym o'r blaen, lle rydym yn gwneud rhywbeth i'r Elfen pan fyddwn yn hofran drosto. 

Felly peth cyntaf mae angen i ni wneud yw dewis yr elfen honno, i ddod o hyd iddo yn y bôn, yn y porwr. ac yna gallem osod nodwedd iddo. Felly beth rwy'n ei wneud yma yw, pan fyddwn yn hofran dros rywbeth, byddwn yn cael yr elfen honno ac yna osod ei didreiddedd yn ôl i 1, i hollol di-draidd. Gadewch i ni weld beth sy'n edrych fel. 

Mae'n ymddangos mae gennym hanner colon ychwanegol yma. Felly, os ydym yn hofran dros yma, mae'n mynd yn llawn. Ond yn awr, wrth gwrs, mae'n aros llawn, oherwydd ein bod rhaid i ddisgrifio beth sy'n digwydd pan gwared ein cyrchwr. Felly, gadewch i ni wneud yn union hynny ar mouseout, yn hytrach na mouseover. 

A byddwn yn ailosod i yr hyn a oedd gennym before-- 0.5. Ac yn awr, yr ydym bob amser hofran, rydym yn cael cylch llawn. Mae'n ein helpu yn gweld yr hyn yr ydym rydym yn dewis y bôn. 

Ac yn awr gadewch i ni wneud hyn yn wirioneddol wych. Gadewch i ni gysylltu hyn â data gwirioneddol. Felly, gadewch i ni ofyn y gallai USGS am eu data. Felly, yr Arolwg Daearegol Unol Daleithiau Mae data am daeargrynfeydd. Mae ganddynt API cyhoeddus sy'n gallu i gael ei fwyta mewn fformat JSON. Felly, gadewch i ni wneud hynny. 

Felly, mae hyn yn dipyn o cod sy'n cysylltu i'r API USGS. Ac mae 'na ychydig o brosesu arno. Nid yw hyn yn berthnasol ond yn symleiddio ei i fformat data syml fel yr un oedd gennym o'r blaen. Felly yr wyf yn cael gwared ar ein galwad i ein data.json ffug ar ffeil. Ac yn lle hynny, rwy'n galw y USGS yn y bôn. 

Gadewch i adnewyddu, 'n glws. Mae hyn yn y data gwirioneddol, bywyd go iawn- o wythnos hon ar gyfer daeargrynfeydd. Mae hyn yn ddiddorol iawn. Nid yw hyn yn syndod i ni, ond mae llawer o ddaeargrynfeydd ar y West Coast yng Nghaliffornia. Ond yr wyf yn meddwl ei fod yn ddiddorol iawn bod cymaint o daeargrynfeydd yn Alaska, ac i bob golwg, yma yn y Midwest. Yr wyf yn golygu, yn ddiddorol, ac rydym yn dda. Dyna gasgliad. 

Ond yn y bôn, mae hyn yn yw'r hyn D3 yn ein helpu i wneud. Mae'n ein helpu cymryd data, rhwymo i elfennau yn y DOM, ac mae ganddynt elfennau hynny yn newid fel swyddogaeth o'r data, rhaid i priodoleddau hynny, yr holl llawer o nodweddion y elfennau, i gyd fod yn ddefnyddiol i sianeli i gyfleu gwybodaeth. 

D3 yn hynod o bwerus llyfrgell ac yn rhyfeddol rhedeg yn dda. Mae hyn yn rhai pethau pwerus. Delweddu data yn offeryn hynod bwerus ar gyfer cyfleu i bobl dwfn mewnwelediadau sy'n cael eu craidd ac yn eu helpu i ddeall, yn y ffordd hon dwys a sythweledol, sut mae data yn gweithio a sut data yn newid ein bywyd.