[MUSIC kucheza] 

DAVID CHOUINARD: Mimi nina David Chouinard, na hii ni D3. Karibu. Sisi ni kwenda kujifunza kuhusu D3 leo. D3 ni mfumo JavaScript kwa ajili ya kujenga high quality interactive visualizations kwa ajili ya mtandao. Mambo kama nini tuko kuona nyuma ya mimi, tunakwenda kujifunza kufanya wale mambo, aina ya msingi ya hiyo. Lakini ni kwenda kuwa baridi. Tuanze kufanya pretty picha. Sisi tumepewa demos zaidi ya matarajio inapatikana. Hebu kufanya hivyo. 

Sheria I, DOM manipulation-- tunakwenda kuanza haki mbali na kufanya mambo ya baridi. Awali ya yote, upande wa kushoto, tuna code. Juu ya haki, tuna matokeo ya kanuni zetu. Hebu kwenda kwa njia hiyo. 

Hebu kufanya mduara. Jinsi gani kwamba sauti? svg.append circle-- sisi tu alifanya mduara. Huwezi kuamini mimi, haki? Ni huko. 

Hivyo tulichokifanya haki hapa ni, Faili ni scalable vector graphics. Hii ni njia sisi tunasema browser kwa kufanya vector graphics katika browser. Nini sisi tu alifanya hivi sasa ni aliongeza mduara kuvinjari. 

Ahadi ni kwamba mzunguko inahitaji kidogo ya sifa ya msingi kabla tunaweza kweli kuona. Tunahitaji kuwaambia ni x msimamo wake, y msimamo wake, radius yake. Sisi hawakuwa kuwaambia ni yoyote ya kwamba, hivyo sisi siyo kuona ni haki ya sasa. Lakini hebu kuwaambia ni mambo ya ajabu. 

Hivyo kwanza ya yote, nimepata kutoa mduara yetu jina. Basi hebu kuiita mduara. Mduara yetu ina jina sasa. Na hebu kuwapa sifa chache. Vipi kuhusu cx bila kituo cha x, hivyo katikati ya x msimamo. Hebu kusema, 200 kwa 200 saizi. 

Hebu kuwapa y ya pikseli 200 pia. Na r, radius, ya juu ya 40 saizi. Sasa hebu angalia. Siwezi Spell. 

Kuna kwenda. Tuna mduara katika nafasi 200 saizi, 200, saizi radius ya 40 saizi. Aina ya baridi, haki? Tuna mduara. Yeah. 

Hivyo hakuna haja ya kufuata pamoja. Mifano yote hii, wote wa code mimi nina kufanya leo zitatolewa online mwishoni katika mfumo wa mifano interactive na vituo vya ukaguzi katika kila tendo, na kadhalika. 

Hebu kufanya mambo zaidi. Mzunguko huu nyeusi ni kweli mbaya. Mimi nina pole kwa makosa ambayo ujumbe papo hapo. Kuna sisi kwenda. 

Hebu kutoa ni rangi. Jinsi hiyo? Mimi kama chuma bluu. Naam, mduara yetu imebadilika rangi. Hiyo ni kubwa. Hebu kufanya hivyo nusu ya uwazi too-- nusu ya uwazi. 

Basi hizi ni sifa tuko kufafanua juu ya mduara. Jambo la kwanza sisi alifanya ni sisi kuweka mduara juu ya ukurasa. Na kisha sisi ni kufafanua rundo la sifa. Baadhi ya hizi ni required, kama CX, CY, na Radius. Na wengine ni hiari. 

Kuna sifa mengi zaidi. Kuna mengi ya kwao. Kwa mfano, tunaweza kuwa na kiharusi pia, kiharusi ya nyekundu. Lakini hebu kuondoa hiyo. Tuko nyuma na mzunguko, mzunguko rangi ya bluu. 

Basi hebu kufanya duru zaidi. Jinsi hiyo? Hebu kufanya mduara mwingine. Hii ni ya kusisimua, haki? 

Hivyo kusema mimi tu Copy-pasted nini tulikuwa tayari. Hebu simu yake circle2. Na hebu kufanya halisi kitu kimoja na kuwapa sifa, kutokana na x nafasi ya 300. Yay, tuna duru mbili sasa. 

Na bila shaka, tunaweza update maadili haya. Mimi naweza kuiweka katika 400, na sasa ni hatua. Na tangu ni annoying, hebu kuondoa hiyo, hivyo circle2.remove. Ni gone sasa. 

Hivyo kile sisi ni kufanya na ni tu sana, very-- hii ni sawa na nini anaweza kufanya katika jQuery, kwa mfano. Sisi ni kufanyia tu DOM, ni kuitwa. Unaweza kuwa na habari kwamba neno kabla. Sisi ni kujenga mambo, kuweka sifa juu ya mambo, kuondoa mambo ya ajabu. 

Sasa, hapa ambapo anapata kuvutia. Hivyo baadaye katika kanuni, sisi bado anaweza rejea mduara awali hapa. Basi hebu upya sifa yake ya cx. Hebu kusema, wake x nafasi ya 400. Na mimi nina kwenda mpito kwamba, hivyo ni dhahiri. Kuna sisi kwenda. 

Hivyo sisi aliongeza mduara. Sisi kuweka baadhi ya sifa. Sisi aliongeza mduara mwingine, kuondolewa yake. Na kisha sisi ni kubadilisha awali ya mduara. 

Lakini hapa ni ambapo anapata mengi zaidi ya kuvutia. Si tu tunaweza kuweka sifa kama maadili tu, tunaweza kusema, hey, mduara, kwenda kwa nafasi ya 200. Sisi pia unaweza kuweka yao kama kazi. 

Hivyo badala ya kutoa 400 hapa, tunaweza kufanya baadhi ya hesabu juu ya kuruka kwa nini sisi wanataka kuwa sifa kuwa. Hivyo hii ni jinsi wewe d kueleza kwamba. Sisi tunasema, badala ya 400, napenda kukupa kazi badala yake. Na hapa, ndani ya kazi hii, tunaweza kufanya hesabu yoyote mambo. 

Tunaweza kuchukua muda na tuangalie baadhi kitu kingine na dynamically kuamua kwa mzunguko nini thamani tunataka. Vipi kuhusu sisi tu kutoa ni random x nafasi? Hivyo hiyo ni kwamba. 

Hivyo kile kwamba anasema, kwa ajili ya kila x, kukimbia kazi hii. Na nini sisi ni kufanya ni kuhesabu baadhi ya mambo, mara random upana na kurudi hiyo. Hivyo kila wakati sisi kukimbia kwamba, sisi kupata mduara kwamba huenda kwa nafasi random. Ni aina ya baridi. Najisikia kama mimi naweza kuangalia wakati huu kwa muda kidogo. Sisi ni mapya ya kupata jambo la kuvutia hapa. Hebu kufanya data hii inaendeshwa sasa. Hakuna data hapa. Hebu mabadiliko hayo. 

Sheria II, Data Inaendeshwa Documents-- Basi hebu kurudi hapa. Na hebu tu kujikwamua circle2, kwa sababu sisi ni kuongeza na kuondoa tu yake. Hivyo hatuna kweli haja yake. Tunahitaji kuwa mengi zaidi wajanja hapa. Hebu kusema, tuna baadhi data ya aina fulani. Moja moment-- hebu sema, tulikuwa data ya fomu hii. Tulikuwa safu, tu rundo la idadi. Tuna idadi saba hapa, kiasi chochote hizi represent-- katika akaunti ya benki ya watu, jinsi wao kiasi kupima, mungu anajua. 

Hizi ni namba, na sisi wanataka kutumia duru yetu kuwakilisha idadi ya wale kwa namna fulani. Tunataka kufunga wetu duru ya namba hizo. Hivyo kile sisi kufanya. Hebu kusema, tunataka mduara kwa kila idadi. Tunaweza kufanya umri Jambo tulikuwa doing-- mzunguko append na circle2 na circle3. Lakini hii anapata nje ya mkono, na kuna mengi ya kurudia mantiki. 

Basi hebu kupata wajanja zaidi na kwamba. Badala ya kutumia var mduara svg.append kwamba tulikuwa kutumia tu, tunakwenda kutumia block hii kidogo hapa. Sitaki kwenda katika kina katika sehemu gani haya yote kufanya. Na ni aina ya mada ya juu. Ningependa mimi naweza. 

Lakini jambo muhimu kwa recognize-- na utaona ni mara nyingi sana katika D3 code. Hii kuzuia wa maandishi ya msingi inajenga mzunguko kama wengi kama kuna mambo data katika hii safu haki hapa. Hivyo hii inajenga kama wengi duru kama kuna mambo. Ni kwenda kujenga us duru saba. Na kitu gani kweli, kweli muhimu. Basi hebu kukimbia kwamba. Hebu kuondoa mduara wetu wengine. Hebu tu maoni hii sehemu nje na kukimbia hii tena. 

Kuna sisi kwenda. Hivyo mzunguko wetu hapa ni mengi nyeusi, kwa sababu sisi kuwa duru saba, mmoja juu ya nyingine. Sisi tu kuundwa duru saba, mmoja kila mmoja kwa kila moja ya haya mambo data. Lakini kuna jambo muhimu yaliyotokea ni na hii snippet haki hapa. 

Ni kwamba data alikuwa amefungwa. Hivyo kila mmoja wale vipengele data, 10, 45, 105, alikuwa amefungwa kwa mzunguko fulani. Basi hao si tu umba rundo la duru lakini mahusiano mambo hayo mawili kwa pamoja. 

Na katika siku zijazo, kwa sababu sisi aliumba duru wale walio na kazi hii D3, kama mimi kukupa mzunguko, unaweza nipe data yanayohusiana na hayo. Hivyo tunaweza kuuliza D3. Hey, D3, nina mduara huu. Nini data kwamba mzunguko ana? Na D3 bila kutuambia 10 au 45 au 105. 

Mambo haya ni amefungwa. Hiyo ni dhana sana, msingi sana. Hebu tuangalie hiyo. 

Hivyo njia tunatarajia kuuliza D3-- hivyo hii ni lisilo kwa ajili ya hii, lakini tu matumaini yangu juu yake. Hii ni jinsi sisi kuuliza D3. Hey, D3, nipe kwanza mzunguko kwamba unaweza kupata. Nipe mduara kwanza unaweza kupata. Na kisha tunaweza kuuliza D3, nini data juu ya kwamba, kama hii, 10. 

Hivyo sisi tu kuuliza D3, kupata mimi mzunguko wa kwanza unaweza kupata. Nini data yake? 10, kwamba ni kweli yetu data kwanza kipengele. Tunaweza kuuliza, hey, D3, kupata yetu mzunguko wetu wa tatu. 105. Kwa nini hii ni muhimu? 

Hivyo haki hapa, mimi zilizotajwa kwamba tunaweza kutumia kazi. Na mimi alieleza kuwa alikuwa kitu chenye nguvu sana. Hivyo si tu inaweza kazi zetu kufanya mambo kama kufanya baadhi ya computation, kwa mfano, kurudi idadi random, inaweza pia kufanya mambo kulingana na data. Hii ni nini data inaendeshwa nyaraka maana. Hiyo ni nini D3 anasimama kwa. 

Hivyo hii x postition-- badala ya kusema tu, duru zote, kupata x nafasi 200, sisi inaweza kuwapa kazi. Na hapa, tunaweza kufanya baadhi ya hesabu. na d hapa anasimama katika nafasi kwa data. Hivyo kila wakati tuna mduara, kimsingi, D3 kujenga duru hizi saba. Na kisha kwa kila 

mduara, ni kwenda, hey, circle1 nini yako x msimamo. Hapo awali, tulikuwa daima kujibu 200. Lakini sasa, kila wakati D3 anauliza sisi nini yako x nafasi, ni kwenda kutoa us-- tuna mzunguko kwamba, hivyo tuna data. Ni kwenda kutupa data na kusema, unataka nini ufafanuzi kuwa, kulingana na data hiyo. 

Hebu tu kurudi data halisi. Hivyo kama sisi kukimbia hii, hii inatoa sisi data inaendeshwa nyaraka. Duru haya yanatokana kuhusiana position-- wao uko besi kama kazi ya data. 

Hivyo kwa ajili ya mzunguko wa kwanza, D3 unaweka mduara. Na kisha D3 anatutaka, nini kufanya unataka ufafanuzi kuwa. Na sisi tu kusema, chochote data ni. Kufanya ufafanuzi 10. 

Kisha anauliza, unataka nini ufafanuzi kuwa kwa ajili ya mzunguko wa pili. Na sisi kujibu, 45. Na sisi, bila shaka, unaweza kufanya baadhi ya computation hapa. Mimi sioni kwamba duru wale ni aina ya squished up. 

Hivyo kuzidisha ni kwa 3, kuzidisha data na 3. Mzunguko wetu tu got kupanua nje. Thamani yetu ilikuwa mara tatu. 

mduara ni kweli makali, hivyo hebu labda aina ya kukabiliana nayo. Hebu kusema, kwa 20. Hapa kwenda. 

Hii ni data visualization. Ni moja ya msingi sana, lakini hii inatupa baadhi ya ufahamu katika takwimu zetu. Inatuambia kwamba, kwa mfano, sisi kuwa nguzo kidogo ya vipengele. Na tuna outlier kubwa hapa. Hii inatupa baadhi ya habari kuhusu usambazaji. 

Kama tulikuwa, kwa mfano, mabadiliko ya data ya 150 hapa na mahitaji, taswira yetu ni iliyopita. Waraka huu ni data inaendeshwa. 

Hivyo bila shaka, mambo haya yote, sifa hizi zote hapa, tunaweza kutumia kazi, si tu idadi, si tu x na nafasi y. Hivyo tunaweza kutumia kazi kwa ajili ya Michezo. Hivyo tutaweza kufanya hivyo. Tutaweza kuwapa kazi. 

Na hebu sema, tunaweza kuwa na conditionals katika kazi yetu. Kazi hii inaweza kuwa mia ya mistari ya muda mrefu. Ni wanaweza kufanya mambo sana, ngumu sana. 

Basi hebu kuweka An kama taarifa hapa. Hebu kusema, kama data yetu ni chini ya 50, kwamba baadhi ya kizingiti kwamba sisi ni nia ya katika kwa sababu fulani. Hebu kufanya hivyo kijani. Vinginevyo, hebu kufanya hivyo nyekundu. Jinsi hiyo? Nice. 

Hivyo data visualization yetu ni kuanzia kufikisha habari zaidi ya kuvutia juu ya njia nyingi. Hivyo sasa sisi kujua kidogo kuhusu usambazaji. Tunajua kwamba kuna baadhi ya aina ya kukatwa saa 50 kwamba sisi ni nia ya. Tunajua kwamba kuna pointi mbili data chini kuwa kizingiti na wengi wao hapo juu. 

Hivyo kama hatua ya mwisho, data hii hapa, ni nadra sana kuona hii kama hiyo. Basi hebu tu hoja hiyo kufanyika kwa variable kwa sababu hiyo safi, kama hii. Na kisha sisi kutumia variable hapa. Ni halisi kitu kimoja. Ni kidogo tu safi. 

Next up, Sheria ya III, Scales-- Hivyo tatizo moja haki hapa ni, kama sisi mabadiliko yetu data katika hii value-- 200 kama sisi mabadiliko hayo kwa 400 au kitu na mahitaji, basi thamani hii tu akaenda offscreen. Hivyo mantiki yetu hapa hapa ya jinsi ya kufanya mara 3 na 20, kueneza nje na kisha kukabiliana ni kidogo ni kweli clunky. 

Je, wale idadi maana yake nini? Wao ni tu ngumu coded huko. Na wao ni sana amefungwa na data. Tunataka data inaendeshwa hati. Tunataka hati rahisi sana, kwamba data aliyopewa, anpassas kwa ni na inawakilisha yake. 

Nini sisi kimsingi haja, sisi na hii mbalimbali ya namba 10. 45, 105. Na tunataka ramani kwamba nje kwenye upana, upana kamili hapa. Hivyo tuna mbalimbali ya namba kwenda 0-100. Na tuna hii mimi chuo huenda 20-700, katika kesi hii. 

Sisi aina ya kutaka ramani kwamba juu. Tunataka kuongeza kuwa juu na basi kukabiliana ni kidogo. Ni zinageuka kuwa D3 ina hizi. Ni wito wadogo. Basi hebu kuitumia. 

njia ambayo works-- mimi nina kwenda aina hii juu na kisha kueleza hayo. Hii ni wadogo. Nini itakuwa kufanya ni, itakuwa ramani nje maadili 1-200 juu ya 20-600. Tunaweza kuangalia kwamba. Tunaweza kuona kwamba hapa. 

Hivyo kama mimi kulisha ni 1-- wakati mmoja. Nipe moja ya pili. Mimi ni lazima kuwa mistyped yake. Kuna kwenda. Mimi nina pole juu ya hilo. 

Hivyo kile wadogo kufanya ni, itachukua thamani na kisha kubadili kwamba, kupanua nje, hivyo fyller mbalimbali kamili wewe ni kuuliza kwa. Hivyo katika kesi hii, kama sisi kuwapa moja, ni kwenda ramani kwamba nje kwenye 20. Na kama sisi kuwapa 200, ni kwenda ramani kwamba juu ya 600. Na mahali fulani katika kati, kama sisi kupata 100, ni kwenda kuwa mahali fulani katika kati ya 20 na 600. 

Na bila shaka, sasa hii ni nini tunahitaji kuondoa coded wale ngumu mambo tuna haki pale. Hivyo nini tunataka kufanya ni kuchukua data kwamba sisi ni pewa data binafsi kipengele, na kupita kwa wadogo kwanza. Hivyo wadogo wadogo it up. 

Well-- Oh, tuna makosa kidogo hapa. Sisi ni kukosa data. Kuna kwenda. Na kwamba expands nje. 

Hiyo inatupa huo matokeo tulikuwa kabla, lakini badala ya kuwa wale ngumu coded vikwazo. Na kama ukubwa wa wetu mabadiliko canvas, kwa mfano, kama tunataka kuwa na zaidi ya hii 400 saizi na squishes nje, tunaweza kuwa ni over-- tunaweza kupanua, au sisi unaweza kupunguza kiasi hii kushoto na kitu kidogo au zaidi ya 20. Hizi namba, hizi ngumu coded namba sasa mantiki kwetu. 

Na tunaweza kufanya mengi zaidi mambo ya kuvutia pia. Hivyo badala ya kuwa linear wadogo, sisi kutaka kuingia wadogo. Na hii itatupa wadogo logi. 

Hivyo sasa wadogo zetu, badala ya kupanua nje tu kwamba mbalimbali, ni kufanya mambo kisasa zaidi. Badala ya kuwa na aina hii ngumu coded, na badala ya kuwa na kwamba 600, sisi kutaka kutumia tu upana, hivyo kutoka 20 kwa upana minus 40, 2 mara margin upande mwingine. Na hii inafanya hisia mengi zaidi ya mtu ambaye anaweza kuangalia code. 

Jambo la kushangaza, mizani kupata sana, kisasa sana pia. Wao kufanya mambo mengi ya kuvutia. Hivyo mizani si lazima kuwa kuendesha tu na idadi. Hebu kufanya wadogo rangi. 

Hivyo mbalimbali yetu inaweza be-- uwanja wetu ni 1-200. Hiyo ni pembejeo kitu. Lakini sisi kutaka ramani kutoka kijani na nyekundu, kwa mfano. Na sasa, kama sisi kupita 1, tunakwenda kupata kijani. Kama sisi kuwapa 200, tutaweza kupata nyekundu. Na kama sisi kupita kitu katika kati, ni kwenda kuwa baadhi ya mchanganyiko wa kwamba, mahali fulani kwenye gradient kati ya kijani na nyekundu. 

Na badala ya kuwa aina hii ya mantiki clunky sisi hapa na masharti haki pale, tunaweza kuwa na something-- a wadogo linear kati ya hizo. Hivyo tunatarajia kutumia wadogo sisi tu kuundwa, ambayo sisi kuitwa Michezo. Na tunatarajia kuwapa d, ambayo ni data kipengele yetu. Na kuna sisi kwenda. Tuna wadogo rangi. 

Hivyo hii ni ramani. Hadi sasa kushoto ni kijani kabisa. mbali haki ni nyekundu kabisa. Na kila kitu katika kati ni kazi ya d. Tuna kuvutia visualizations hapa. Lakini takwimu zetu ilikuwa ni aina ya boring. Hebu kuona nini tunaweza kufanya kama tulikuwa data ya kuvutia zaidi. 

Sheria IV, Kazi Pamoja na Data-- Jambo la kwanza tutaweza wanataka kufanya kufanya yetu taswira zaidi ya kuvutia ni hoja data mahali pengine. Ni clunky sana kuwa na data ngumu coded hapa. Na kwa ujumla, tutaweza kuwa kuuliza mtu mwingine kwa ajili ya data. Tutaweza kuwa labda kuuliza serikali, Ofisi ya sensa, nini data yako na kisha kupanga njama hiyo au kuuliza baadhi chombo tatu kwa baadhi ya data na kisha kujenga taswira juu ya hilo. 

Hivyo jambo la kwanza tunataka kufanya ni hoja kwamba kwa mahali pengine. Hivyo nina kwenda kujenga faili hapa aitwaye data.json. JSON ni format data. Huna kujua mengi juu ya hilo. Na tunakwenda nakala data kidogo tuna huko, kuuweka katika huko verbatim, kwenda nyuma visualization kanuni zetu hapa, na kutumia kazi haki hii hapa. Huna kujua maelezo. Lakini nini hii kufanya ni, itakuwa kupata faili kwamba, kuleta, na kurudi kwetu. Hivyo nini hii ni, unaendelea na kupata data.json file. Na kisha code yote yale indented inside-- kimsingi, code wote tuna there-- mapenzi kukimbia tu wakati sisi kupata data nyuma. Na basi ni kwenda kukimbia kwamba kificho na data tuna. Mkuu, tuna taswira kwamba maswali kwa baadhi ya kanuni mahali fulani mwingine, ambayo ni kawaida ambapo maswali baadhi data kutoka mahali pengine, ambayo ni kawaida jinsi visualizations kazi. 

Lakini nataka kwenda nyuma ya data. Hivyo data kimsingi katika D3-- D3 hutumia data kwamba orodha ya mambo. D3 anatarajia data tu kuwa orodha wa mambo, safu ya mambo. Haijalishi nini mambo hayo ni, hivyo muda mrefu kama ni safu yao. 

Hivyo hapa, kwa mfano, tunaweza ya Bila shaka kuwa yaliyo maadili uhakika. Tunaweza kuwa na negatives. D3 haina huduma, hivyo muda mrefu kama ni orodha ya mambo. 

Mambo kama kuvutia sisi inaweza kuwa, tunaweza pia kuwa na orodha ya masharti kama hayo. Basi hizi ni vichwa Crimson Mimi ilichukua siku chache zilizopita. Na labda unaweza kupata baadhi ya kuvutia mambo kuhusu hizi vichwa vya habari. 

Hivyo tena, hii ni orodha ya mambo. D3 haina huduma. Hizi kutokea kwa kuwa kamba. Tumekuwa iliyopita takwimu zetu. 

Hebu kurudi visualization yetu. Sasa, visualization wetu anatarajia pembejeo kuwa idadi. Hivyo sisi ni kwenda kuwa na kufanya mabadiliko machache. Hivyo kwa mfano, kwanza ya yote, labda tunataka kuweka duru hizi pamoja na urefu wa kichwa cha habari, idadi ya wahusika katika kichwa cha habari. 

Hivyo kile tutaweza kufanya is-- kila wakati wetu kazi inaitwa kwa kamba, tutaweza kupata ni urefu Na kisha kupita kwamba wadogo. Michezo, mimi itabidi kurudi kwamba kwa chuma bluu. Na kuna sisi kwenda. Tuna visualization ya Crimson vichwa vya habari. 

Wadogo zetu ni kidogo mbali. Hebu kudhani kuwa ndefu kichwa cha habari ni wahusika 100 kwa muda mrefu, hivyo span kwamba nje kidogo. Na tuna visualization. Basi inaonekana kwamba vichwa vya habari zaidi ni pretty karibu pamoja, katika suala la line tabia. Lakini moja kweli kuna anasimama nje. 

Tunaweza kujenga baadhi ya zana kuchunguza kwamba zaidi. Lakini wakati mimi alikuwa akifanya kazi juu ya hili, nilikuwa curious kama, katika kuweka hii data, vichwa vya habari na koloni katika yao itakuwa tena. Mimi akubali walivyotaka. 

Basi hebu kujua. Hebu kutumia rangi channel kama tulivyofanya kabla, encode baadhi kuhusu kama kuna COLON au hakuna. Hivyo tutaweza kutumia masharti tena. Huna kujua maelezo ya hii, lakini hii ni jinsi sisi kuangalia kamba kwa ajili ya tabia fulani katika JavaScript, tena, si sahihi. 

Lakini kama hatuwezi kupata koloni, tutaweza kurudi kijani. Na kama sisi kufanya, sisi itabidi kurudi nyekundu. Hivyo tena, inadhihirisha kwamba kuwa koloni itakuwa nyekundu. Hii ni nini hii means-- nice. 

Basi inaonekana kwamba yangu hypothesis ni bumped. Kuna mbili tu. Sisi tu kuwa na pointi sita data na mbili tu alikuwa colons. Lakini inaonekana kidogo zaidi juu ya mwisho chini, kwa kweli. Idadi ya habari na colons kuonekana kwa ujumla kuwa mfupi, angalau katika takwimu zetu set-- kuvutia. 

Hebu kurudi kwamba chuma bluu na kisha kuona nini tunaweza kufanya na hata data ya kuvutia zaidi. Hivyo tena, Mimi alieleza kuwa data katika D3 ni orodha ya mambo. Tumeona idadi ya aina nyingi. Tumeona masharti. Lakini mambo inaweza pia kuwa vitu. 

Wanaweza kuwa mambo ngumu kuwa ni pamoja na mambo mengi. Kusema kwamba wazi zaidi, katika kesi nyingi, sisi wanataka kujenga kila hatua data kama ngumu zaidi kuliko thamani moja tu. Kama wewe d kufikiria database kuhusu wanafunzi, huenda kuna mwanafunzi jina, mwanafunzi ID, na mambo mengi yanayohusiana na rekodi fulani, si tu kamba au idadi. Hivyo hebu tuangalie hiyo. 

Hii ni moja data kama kuweka. Hii ni data kuweka kuhusu matetemeko ya ardhi. Kwa hiyo kila kitu hapa katika orodha yetu au safu ya mambo ina mambo mengi yenyewe. Hivyo kila hatua data ina ukubwa na kuratibu. Na kuratibu wenyewe vyenye mambo mawili. 

Hivyo kila siku ni sasa mengi zaidi ngumu na mengi ya kuvutia zaidi na ina mengi zaidi kuvutia habari. Hebu angalia tunaweza kujenga nje ya hiyo. Kurudi nyuma hapa, tena, kwa kutumia histogram mduara wetu visualization tumekuwa kujengwa, hebu angalia kama tunaweza kujenga taswira ya usambazaji ukubwa katika kuweka wetu data. 

Hivyo hapa, ni dhana hiyo. Lakini sasa, d ina mambo zaidi. d ina data nyingi vipengele. Hivyo sisi kupata d nyuma. D3 inatupa d. Na sisi kujibu kwa kutafuta ukubwa ya d na kisha kupita kwamba kwa wadogo. 

Na kisha sisi haja ya kubadili wadogo zetu, bila shaka. Hivyo magnitudes hawana kwenda mengi zaidi ya 10. Kwa kweli, kuna kamwe kuwa 10 ukubwa tetemeko. Lakini hiyo ni aina ya juu yetu mwisho, wigo wetu juu. 

Hebu mahitaji. Nice, tuna visualization. Ni jambo la kushangaza note-- hivyo kuna pointi mbili data kwamba ni karibu hasa juu ya kila mengine, katika suala la ukubwa. Unaweza kuona hii kwa opacity tunavyotumia. 

Tuna data kijiografia sasa. Tuna latitudo na longitudo. Labda tunaweza kufanya kitu a mengi zaidi ya kuvutia na kwamba. Hebu kupata baadhi zaidi kuvutia njia ya taswira hii ngumu zaidi data sisi kupata. 

Sheria V, Mapping-- kimsingi, tunataka kuweka haya kwenye ramani. I mean, hii ni mahali ambapo hii ni kwenda. Tunataka encode habari kuhusu nafasi ya masomo haya tetemeko la ardhi, pamoja na ukubwa wao, kwa sababu tuna kwamba sasa. Sisi kuelewa jinsi kuwaondoa data ngumu zaidi. 

Jambo la kwanza tutaweza kufanya ni kujenga ramani, ramani background. Mimi nina kwenda kwa njia ya hii kwa haraka sana. Hii ni suala gumu code. Ni mwingine mmoja wa wale maelekezo wewe si kweli kuelewa kikamilifu kwa ajili ya wewe kutumia. Lakini hii ni code. Kanuni hii hapa hapa inajenga ramani. 

Sisi siyo kwenda kwa undani zaidi. Lakini hivi hivi, kile yake ni, ni maswali faili hii us.json, ambayo ni data faili kama moja tulikuwa kabla. Ni ngumu zaidi, bila shaka. Lakini katika kesi hii, kila kitu, kila hatua data ni hali hii na ina orodha ya latitudo na longitudo kwamba kufafanua poligoni, kwamba fomu, hali hiyo. 

Hivyo kile D3 kufanya ni sawa kwa nini tulifanya kabla. Ni ombi hilo na nguvuni kwa kipengele. Na kuna kazi ambayo itakuwa ramani kwamba kipengele nje, kulingana na latitudo na longitudo. Unaweza kusoma zaidi juu ya hilo. Na mimi kupendekeza hivyo. 

Kuna viungo katika mwisho wa kanuni hii posted. Na kanuni ya maoni. Katika kuna viungo kwa zaidi juu ya hili. Mimi kupendekeza kuangalia ni up. Lakini nini sisi huduma ya juu ni hii kazi makadirio. Nataka kwenda kwa njia ya kwamba. 

Awali ya yote, napenda kuonyesha kwamba, ndiyo, tuna ramani. Ramani ni cool. Hivyo hebu tuangalie hii uzalishaji kazi. 

Makadirio ni mengi sana kama wadogo, mizani tena. Hivyo kile kwa ajili ya uzalishaji hii kazi makadirio haina ni, tunaweza kupita longitude na latitudes-- katika kesi hii, maadili haya hapa ni lat-anatamani wa jengo sisi ni kukaa katika haki now-- kwa makadirio. Na makadirio kubadilisha kwamba katika x na y pixel maadili. 

Hivyo kile makadirio ni kufanya ni sawa na wadogo zetu. Ni kuchukua latitudo yetu na longitude kwamba inawakilisha dunia nzima na kushuka na sizing kwamba chini ya mraba kwamba tunataka, kwamba tumekuwa aliyopewa yake. Katika kesi hiyo, tuko kupita maadili haya. Na ni anatupa, vizuri, kwamba juu ya screen yako maana 640 saizi. Screen hii yote ni 700 saizi mbalimbali, hivyo kwamba inafanya sisi kuhusu hapa, na 154 saizi chini, ambayo napenda makisio ni pretty much hapa. 

Hivyo kuchukua wale lat-anatamani, ambayo kuwakilisha kitu juu ya dunia nzima na squishing na kusonga kwamba karibu kutupatia x na y pixel maadili, hili ni jambo la kwanza kwamba kufanyika katika kanuni hii ramani. Na kisha wengine wa code hutumia data na kisha ramani wale lat-anatamani kwenye kitu juu ya screen yako. 

Lakini sisi ni kwenda kutumia makadirio hii kazi, kwa sababu ni zamu nje tuna lat-anatamani anatamani pia. Kuangalia nyuma katika data zetu, tuna latitudo na longitudo kwa kila uchunguzi. Basi hebu kutumia makadirio. 

Hivyo kuangalia ufafanuzi wetu, tunataka exposition-- wetu tuna latitude na longitude. Lakini tunataka pixel maadili. Na zinageuka, tuna hasa nini sisi want-- makadirio. Sana kama tulikuwa kutumia wadogo haki hapa, tuko sasa kwenda kutumia makadirio na kuupitisha kuratibu. Hivyo jambo la kwanza tuko doing-- hivyo sisi ni kupata d, ambayo ni data binafsi kipengele cha tetemeko binafsi kusoma. Jambo la kwanza sisi kufanya ni kupata kuratibu. Haki wote, tuna kuratibu. 

Jambo la pili sisi kufanya ni kupita kwamba juu ya makadirio. Makadirio waongofu wale kuratibu ndani ya pixel maadili, x na y. Na kisha jambo la mwisho sisi wanataka kufanya ni kupata tu x, kesi ambayo hii ni moja ya kwanza. Ni mara ya kwanza ya mambo mawili kwamba ni kurejea na makadirio. 

Tutaweza kufanya hivyo kwa ajili y. Lakini badala yake, tutaweza kurudi Sehemu ya pili, y. Kupata tayari kwa ajili ya kujikumbusha. Ooh, tabia ya ziada here-- nzuri, tuna data inayotokana hati hiyo ni kuficha faili hili JSON ya vitu, kutengeneza ramani, na mabadiliko ya sifa kuhusiana na data mradi kwenye ramani. Hii ni kweli ya kuvutia. Hii ni baridi. 

Hebu kuchukua it up notch. I mean, tuna vipande viwili vya habari na kila hatua data. I mean, watu watatu. Tuna kuratibu, ambayo ni x na y. Na tuna ukuu. 

Tunahitaji encode ukubwa fulani. Tuna mengi ya njia. Tunaweza kutumia rangi. Tunaweza kutumia radius. Tunaweza kutumia opacity. Tunaweza kutumia mambo mengi katika kanuni. Yoyote ya sifa hizi na wengi zaidi kwamba si waliotajwa hapo, kwa sababu wao ni hiari, tunaweza kutumia encode data hii, kiharusi na hayo yote nimekuwa zilizotajwa. 

Hebu kufanya radius. Nadhani radius ni Intuitive zaidi. Hivyo tena, tutaweza kuchukua nafasi ya kuwa ngumu-coded 40 na kufanya baadhi ya mahesabu. Tutaweza kutumia favorite wadogo zetu tena. Na sisi ni nyuma d. Lakini si d kwa sababu tunataka ukubwa ya d. d ni tu uhakika data. Sisi itabidi kupita ukubwa kwa wadogo. 

Hebu jaribu tena. Ooh, haifanyi kazi. Kwa nini ni si kazi? 

Hivyo kumbuka kile kiwango gani. Hebu tuangalie wadogo tena. Ramani Scale 1-10 juu ya kwa 22-600, zaidi au chini. 600 ni kubwa. Hii ni kwa nini sisi ni kupata hii. 

Hivyo tunataka kubadilisha wadogo zetu na kitu zaidi ya kuridhisha. Hebu kusema, tunataka 0-60. 60 ni kubwa, lakini 10 matetemeko ni incredibly nadra. Kwa kweli, wameweza kamwe kilichotokea. 

Hivyo kile hii kufanya ni, itabidi kuchukua ukubwa yetu kwamba huenda 1-10 na ramani kwenye kupanua nje. Na ramani ni juu ya kwa 0 60. Hebu mahitaji. 

Nice, tuna visualization. Hii ni kubwa. Hii ni data halisi. Utagundua, katika toy mdogo wangu mfano, kubwa tetemeko ni haki juu yetu. Lakini hiyo ni yake. Tuna tarehe inaendeshwa visualization kwamba hutumia data na inatupa kweli kuvutia habari. Yeah, hebu kuongeza baadhi interactivity yake. Mimi alieleza kuwa alikuwa nguvu kubwa ya D3. 

Hivyo hapa, kwa kila kipengele, tuko kuelezea kundi la sifa. Lakini tunaweza pia kuelezea nini tunataka kutokea na mambo interactivity. Kwa mfano, tunaweza kuelezea kile kinachotokea wakati sisi panya juu. Na kama sana kwamba, kwamba itabidi kuchukua kazi, sawa na sifa tulikuwa kabla, ambapo sisi kufanya kitu kwa kipengele wakati sisi hover juu yake. 

Kwa hivyo jambo la kwanza tunahitaji kufanya ni kuchagua kwamba kipengele, kupata hiyo kimsingi, katika browser. na kisha sisi inaweza kuweka sifa yake. Hivyo nini mimi kufanya hapa ni, wakati sisi hover juu ya jambo fulani, tutaweza kupata kwamba kipengele na kisha kuweka opacity yake ya nyuma 1, kwa opaque kabisa. Hebu kuona nini kwamba inaonekana kama. 

Inaonekana tuna semicolon ziada hapa. Hivyo kama sisi hover juu hapa, anapata full. Lakini sasa, bila shaka, ni anakaa kamili, kwa sababu sisi na kueleza kile kinachotokea wakati kuondoa mshale yetu. Basi hebu kufanya hasa kwamba juu ya mouseout, kinyume na mouseover. 

Na tutaweza upya kwa nini tulikuwa before-- 0.5. Na sasa, kila wakati sisi hover, sisi kupata mzunguko kamili. Inatusaidia kuona nini sisi tuko kuchagua kimsingi. 

Na sasa hebu kufanya hili kubwa kweli kweli. Hebu kuunganisha hii data halisi. Basi hebu kuuliza inaweza USGS kuhusu data zao. Hivyo Marekani Geological Survey ina data kuhusu matetemeko ya ardhi. Wana API umma ambayo ina uwezo kuliwa katika JSON format. Basi hebu kufanya hivyo. 

Hivyo hii ni kidogo ya kificho kwamba unajumuisha na USGS API. Na kuna kidogo ya usindikaji juu yake. Hii si muhimu lakini simplifies ni kwa data format rahisi kama moja sisi alikuwa mbele. Hivyo, mimi kujikwamua mwito wetu data.json wetu bandia kwenye faili. Na badala yake, mimi nina wito USGS kimsingi. 

Hebu mahitaji, nice. Hii ni halisi, halisi ya maisha data kutoka wiki hii kwa ajili ya matetemeko ya ardhi. Hii ni kweli ya kuvutia. Hii si ajabu kwa ajili yetu, lakini kuna mengi ya matetemeko ya West Coast katika California. Lakini nilifikiri ilikuwa ni ya kuvutia sana kuwa kulikuwa na matetemeko mengi katika Alaska, na inaonekana, hapa katika Midwest. I mean, ya kuvutia, na sisi ni nzuri. Hiyo ni hitimisho. 

Lakini kimsingi, hii ni nini D3 inatusaidia kufanya. Inatusaidia kuchukua data, kumfunga kwa vipengele katika DOM, na kuwa na mambo hayo mabadiliko kama kazi ya data, kuwa wale sifa, kila sifa wengi wa mambo, wote kuwa na manufaa kwa njia kufikisha habari. 

D3 ni nguvu incredibly maktaba na pia kushangaza kukimbia. Hii ni baadhi ya mambo ya nguvu. Takwimu visualization ni incredibly chombo nguvu kwa kuwasilisha kwa watu kina ufahamu kwamba anapata msingi yao na husaidia waelewe, katika njia hii ya kushangaza na Intuitive, jinsi data linafanya kazi na jinsi data mabadiliko ya maisha yetu.