1 00:00:00,000 --> 00:00:00,780 2 00:00:00,780 --> 00:00:11,880 >> [Tónlist spila] 3 00:00:11,880 --> 00:00:16,480 >> DAVID CHOUINARD: Ég er David Chouinard, og þetta er D3. 4 00:00:16,480 --> 00:00:17,700 Velkomin. 5 00:00:17,700 --> 00:00:21,270 Við erum að fara að læra um D3 dag. 6 00:00:21,270 --> 00:00:25,020 D3 er JavaScript ramma til að byggja upp hágæða 7 00:00:25,020 --> 00:00:28,110 gagnvirkt visualizations fyrir vefinn. 8 00:00:28,110 --> 00:00:30,870 Hluti eins hvað við erum að sjá í bak mér, 9 00:00:30,870 --> 00:00:34,230 við erum að fara að læra að gera þá hlutir, eins konar grunnatriði það. 10 00:00:34,230 --> 00:00:36,452 En það er að fara að vera kaldur. 11 00:00:36,452 --> 00:00:38,160 Við skulum byrja gera nokkuð myndir. 12 00:00:38,160 --> 00:00:41,108 13 00:00:41,108 --> 00:00:44,350 Við höfum fengið fleiri demo horfur í boði. 14 00:00:44,350 --> 00:00:48,040 15 00:00:48,040 --> 00:00:50,760 Við skulum gera það. 16 00:00:50,760 --> 00:00:58,700 >> Lög I, DOM manipulation-- við erum að fara að byrja strax að gera flott hluti. 17 00:00:58,700 --> 00:01:01,240 Fyrst af öllu, á vinstri, við höfum kóða. 18 00:01:01,240 --> 00:01:03,470 Á hægri, höfum við afleiðing af kóða. 19 00:01:03,470 --> 00:01:04,900 Förum í gegnum það. 20 00:01:04,900 --> 00:01:05,780 >> Við skulum gera hring. 21 00:01:05,780 --> 00:01:08,570 Hvernig virkar þessi hljóð? 22 00:01:08,570 --> 00:01:14,934 svg.append circle-- við gert bara hring. 23 00:01:14,934 --> 00:01:16,100 Þú trúir mér ekki, ekki satt? 24 00:01:16,100 --> 00:01:18,190 Það er ekki þar. 25 00:01:18,190 --> 00:01:21,830 >> Svo það sem við gerðum hérna er, SVG er stigstærð grafík vektor. 26 00:01:21,830 --> 00:01:27,530 Þetta er leiðin sem við segja að vafrinn gera vektor grafík í vafranum. 27 00:01:27,530 --> 00:01:30,740 Það sem við gerðum bara núna er bætt hring til að fletta. 28 00:01:30,740 --> 00:01:34,790 >> Loforðið er að hring þarf smá undirstöðu eiginleika 29 00:01:34,790 --> 00:01:36,850 áður en við getum í raun séð það. 30 00:01:36,850 --> 00:01:40,045 Við þurfum að segja það x stöðu sína, Y stöðu hennar, radíus hennar. 31 00:01:40,045 --> 00:01:43,310 Við vildum ekki segja það eitthvað af því, þannig að við erum ekki að sjá það núna. 32 00:01:43,310 --> 00:01:46,210 En við skulum segja það efni. 33 00:01:46,210 --> 00:01:49,510 >> Svo fyrst af öllu, hefur þú fengið að gefa hring okkar nafn. 34 00:01:49,510 --> 00:01:53,070 Svo við skulum kalla það hring. 35 00:01:53,070 --> 00:01:54,406 Hring okkar hefur nafn núna. 36 00:01:54,406 --> 00:01:57,230 37 00:01:57,230 --> 00:01:59,490 Og við skulum gefa það nokkrar eiginleika. 38 00:01:59,490 --> 00:02:03,690 Hvernig væri CX myndi miðju x, svo miðju x stöðu. 39 00:02:03,690 --> 00:02:06,730 Segjum, 200 fyrir 200 dílar. 40 00:02:06,730 --> 00:02:10,220 >> Við skulum gefa það a y 200 dílar eins og heilbrigður. 41 00:02:10,220 --> 00:02:16,032 Og R, A radíus, af um 40 punktar. 42 00:02:16,032 --> 00:02:16,950 Nú skulum sjá. 43 00:02:16,950 --> 00:02:21,740 44 00:02:21,740 --> 00:02:23,440 Ég get ekki stafsetningu. 45 00:02:23,440 --> 00:02:30,430 46 00:02:30,430 --> 00:02:31,520 >> There þú fara. 47 00:02:31,520 --> 00:02:37,330 Við höfum hring á stöðu 200 dílar, 200 dílar, radíus 40 punkta. 48 00:02:37,330 --> 00:02:38,280 Góður af kaldur, ekki satt? 49 00:02:38,280 --> 00:02:38,988 Við höfum hring. 50 00:02:38,988 --> 00:02:40,880 Já. 51 00:02:40,880 --> 00:02:42,670 >> Þannig að ekki þarf að fylgja með. 52 00:02:42,670 --> 00:02:45,790 Öll þessi dæmi, allt frá kóðinn ég er að gera í dag 53 00:02:45,790 --> 00:02:51,300 verða veittar á netinu í lok í formi gagnvirkum dæmum 54 00:02:51,300 --> 00:02:54,010 með checkpoints á hvert athöfn, og svo framvegis. 55 00:02:54,010 --> 00:02:55,160 >> Við skulum gera meira efni. 56 00:02:55,160 --> 00:02:58,901 Þetta svarta hring er virkilega ljót. 57 00:02:58,901 --> 00:03:01,541 Ég er því miður fyrir þá villu skilaboð þarna. 58 00:03:01,541 --> 00:03:05,340 Það sem við förum. 59 00:03:05,340 --> 00:03:06,350 >> Við skulum gefa það a litinn. 60 00:03:06,350 --> 00:03:07,170 Hvernig er það? 61 00:03:07,170 --> 00:03:08,340 Mér finnst gott að stál blár. 62 00:03:08,340 --> 00:03:13,280 63 00:03:13,280 --> 00:03:16,030 Jæja, hring okkar breytt lit. 64 00:03:16,030 --> 00:03:17,320 Það er frábært. 65 00:03:17,320 --> 00:03:31,330 Við skulum gera það hálf-transparent too-- hálf-transparent. 66 00:03:31,330 --> 00:03:33,670 >> Svo þetta eru eiginleikar við erum að skilgreina á hring. 67 00:03:33,670 --> 00:03:36,774 The fyrstur hlutur sem við gerðum er við að setja hring á síðunni. 68 00:03:36,774 --> 00:03:38,690 Og þá erum við að skilgreina fullt af eiginleikum. 69 00:03:38,690 --> 00:03:41,610 Sumir þeirra eru nauðsynleg, eins CX, Cy, og radíus. 70 00:03:41,610 --> 00:03:42,680 Og aðrir eru valfrjáls. 71 00:03:42,680 --> 00:03:44,730 >> There ert a einhver fjöldi fleiri eiginleika. 72 00:03:44,730 --> 00:03:46,760 There er a einhver fjöldi af þeim. 73 00:03:46,760 --> 00:03:53,070 Til dæmis gætum við hafa a heilablóðfall eins og heilbrigður, heilablóðfall af rauðu. 74 00:03:53,070 --> 00:03:55,630 En við skulum fjarlægja það. 75 00:03:55,630 --> 00:04:00,450 Við erum aftur í hring, bláum hring. 76 00:04:00,450 --> 00:04:01,600 >> Svo skulum gera fleiri hringi. 77 00:04:01,600 --> 00:04:02,810 Hvernig er það? 78 00:04:02,810 --> 00:04:04,665 Við skulum gera annað hring. 79 00:04:04,665 --> 00:04:05,985 Þetta er spennandi, ekki satt? 80 00:04:05,985 --> 00:04:09,630 81 00:04:09,630 --> 00:04:12,300 >> Svo segi ég bara Afritaðu Límt hvað við höfðum þegar. 82 00:04:12,300 --> 00:04:13,570 Við skulum kalla það circle2. 83 00:04:13,570 --> 00:04:15,840 Og við skulum gera nákvæmlega sama og gefa það 84 00:04:15,840 --> 00:04:20,450 eiginleika, gefinn x stöðu 300. 85 00:04:20,450 --> 00:04:24,140 Yay, höfum við tvær hringi núna. 86 00:04:24,140 --> 00:04:27,240 >> Og auðvitað, við gátum uppfæra þessi gildi. 87 00:04:27,240 --> 00:04:31,640 Ég gæti sett það á 400, og nú flytur það. 88 00:04:31,640 --> 00:04:35,470 Og þar sem það er pirrandi, við skulum fjarlægja það, svo circle2.remove. 89 00:04:35,470 --> 00:04:39,000 90 00:04:39,000 --> 00:04:40,730 Það er farið núna. 91 00:04:40,730 --> 00:04:43,170 >> Svo það sem við erum að gera og er bara mjög, very-- þetta 92 00:04:43,170 --> 00:04:46,030 er mjög svipað því sem þú gæti gert í jQuery, til dæmis. 93 00:04:46,030 --> 00:04:48,240 Við erum bara að notfæra DOM, það er kallað. 94 00:04:48,240 --> 00:04:50,040 Þú gætir hafa heyrt þessi orð áður. 95 00:04:50,040 --> 00:04:53,255 Við erum að búa til efni, setja eiginleika á efni, fjarlægja efni. 96 00:04:53,255 --> 00:04:58,950 97 00:04:58,950 --> 00:05:02,360 >> Nú, hér er þar sem það fær áhugavert. 98 00:05:02,360 --> 00:05:07,250 Svo seinna í kóðanum, við gátum samt vísa til upprunalegu hring hér. 99 00:05:07,250 --> 00:05:14,100 Svo skulum endurstilla eigindi þess að CX. 100 00:05:14,100 --> 00:05:18,260 Segjum, x stöðu til þess að 400. 101 00:05:18,260 --> 00:05:22,406 Og ég ætla að umskipti að, svo það er augljóst. 102 00:05:22,406 --> 00:05:23,360 Það sem við förum. 103 00:05:23,360 --> 00:05:24,780 >> Þannig að við bætt hring. 104 00:05:24,780 --> 00:05:26,440 Við settum nokkrar eiginleika. 105 00:05:26,440 --> 00:05:28,210 Við bætt öðru hring, fjarri því. 106 00:05:28,210 --> 00:05:31,650 Og þá erum við að breyta upprunalega hring. 107 00:05:31,650 --> 00:05:35,400 >> En hér er þar sem það fær a einhver fjöldi fleiri áhugaverður. 108 00:05:35,400 --> 00:05:39,070 Ekki aðeins er hægt að stilla eiginleika sem bara gildi, getum við sagt, 109 00:05:39,070 --> 00:05:41,610 hey, hring, fara í stöðu 200. 110 00:05:41,610 --> 00:05:44,540 Við getum einnig sett þá eins virka. 111 00:05:44,540 --> 00:05:48,850 >> Svo í stað þess að gefa 400 hér, við getum gert nokkrar útreikninga 112 00:05:48,850 --> 00:05:53,950 á flugu fyrir það sem við vilja að eigindi til að vera. 113 00:05:53,950 --> 00:05:56,580 Svo er þetta hvernig þú vilt tjá það. 114 00:05:56,580 --> 00:06:00,660 Við segjum, í stað þess að 400, láttu mig gefa þér virka í staðinn. 115 00:06:00,660 --> 00:06:04,180 Og hér, í þessari aðgerð, við getum gert neinar brjálaður útreikninga. 116 00:06:04,180 --> 00:06:06,820 >> Við gætum tekið tíma og líta á sumir annar hlutur 117 00:06:06,820 --> 00:06:11,230 og virk ákveða hringurinn hvaða gildi við viljum. 118 00:06:11,230 --> 00:06:15,266 Hvernig væri að við gefum bara það handahófi x stöðu? 119 00:06:15,266 --> 00:06:20,360 120 00:06:20,360 --> 00:06:21,120 Svo er það það. 121 00:06:21,120 --> 00:06:25,490 >> Svo hvað það segir er, fyrir fresti x, hlaupa þessa aðgerð. 122 00:06:25,490 --> 00:06:29,340 Og hvað við erum að gera er að reikna sumt af handahófi sinnum breidd 123 00:06:29,340 --> 00:06:30,410 og aftur það. 124 00:06:30,410 --> 00:06:34,765 Svo í hvert skipti sem við hlaupum að við fáum a hring sem fer til handahófi stað. 125 00:06:34,765 --> 00:06:36,394 Það er góður af kaldur. 126 00:06:36,394 --> 00:06:38,310 Mér finnst eins og ég gat að líta á þetta fyrir lítið. 127 00:06:38,310 --> 00:06:44,274 128 00:06:44,274 --> 00:06:46,440 Við erum farin að fá að eitthvað áhugavert hér. 129 00:06:46,440 --> 00:06:49,120 130 00:06:49,120 --> 00:06:51,390 Við skulum gera þessi gögn ekið núna. 131 00:06:51,390 --> 00:06:53,420 Það er engin gögn hér. 132 00:06:53,420 --> 00:06:54,482 Við skulum breyta því. 133 00:06:54,482 --> 00:06:57,440 134 00:06:57,440 --> 00:07:12,140 >> Lög II, Data Vindskafinn skjölum Svo skulum fara aftur til hér. 135 00:07:12,140 --> 00:07:15,340 Og við skulum bara fá losa af circle2, vegna þess að við erum bara að bæta við og fjarlægja 136 00:07:15,340 --> 00:07:15,840 það. 137 00:07:15,840 --> 00:07:17,382 Svo við gerum ekki raunverulega þörf það. 138 00:07:17,382 --> 00:07:21,421 Við þurfum að vera a einhver fjöldi fleiri snjall hér. 139 00:07:21,421 --> 00:07:23,170 Við skulum segja, að við höfum sumir gögn af einhverju tagi. 140 00:07:23,170 --> 00:07:31,540 141 00:07:31,540 --> 00:07:40,020 Einn moment-- skulum segja, við höfðum gögn af þessu formi. 142 00:07:40,020 --> 00:07:41,800 Við fengum array, bara fullt af tölum. 143 00:07:41,800 --> 00:07:45,750 Við höfum sjö tölur hér, hvað þessir represent-- upphæð 144 00:07:45,750 --> 00:07:48,810 á bankareikning fólks, hvernig mikið þeir vega, guð veit hvað. 145 00:07:48,810 --> 00:07:51,310 >> Þetta eru tölur, og við vilt nota hringina okkar 146 00:07:51,310 --> 00:07:53,240 að tákna þær tölur einhvern veginn. 147 00:07:53,240 --> 00:07:55,515 Við viljum að binda okkur hringi í þær tölur. 148 00:07:55,515 --> 00:07:58,750 149 00:07:58,750 --> 00:07:59,626 Svo það sem við gerum. 150 00:07:59,626 --> 00:08:01,500 Við skulum segja, við viljum a hring fyrir hvert númer. 151 00:08:01,500 --> 00:08:03,590 Við gætum gert gamla sem við vorum doing-- 152 00:08:03,590 --> 00:08:06,020 hring Append og circle2 og circle3. 153 00:08:06,020 --> 00:08:10,020 En þetta fær úr hendi, og það er mikið að endurtaka rökfræði. 154 00:08:10,020 --> 00:08:12,760 >> Svo skulum við fá meira snjall með það. 155 00:08:12,760 --> 00:08:17,810 Í stað þess að nota VAR-hring svg.append að við vorum bara að nota, 156 00:08:17,810 --> 00:08:21,580 við erum að fara að nota þetta litla blokk hér. 157 00:08:21,580 --> 00:08:24,510 Ég vil ekki að fara í-dýpt í það Allir þessir hlutir gera. 158 00:08:24,510 --> 00:08:26,020 Og það er góður af háþróuðum efni. 159 00:08:26,020 --> 00:08:27,830 Og ég vildi að ég gæti. 160 00:08:27,830 --> 00:08:31,370 >> En lykillinn hlutur til recognize-- og þú munt sjá er mjög oft í D3 kóða. 161 00:08:31,370 --> 00:08:36,840 Þessi texti undirstöðu skapar eins marga hringi 162 00:08:36,840 --> 00:08:41,360 þar sem það eru gögn þættir í þessu fylki hérna. 163 00:08:41,360 --> 00:08:53,420 164 00:08:53,420 --> 00:08:55,780 Svo skapar þetta eins og margir hringi og það eru þættir. 165 00:08:55,780 --> 00:08:58,520 Það er að fara að búa okkur sjö hringi. 166 00:08:58,520 --> 00:09:01,710 Og það er mjög, mjög lykill hlutur. 167 00:09:01,710 --> 00:09:02,460 Svo skulum hlaupa að. 168 00:09:02,460 --> 00:09:05,460 Við skulum fjarlægja önnur hring okkar. 169 00:09:05,460 --> 00:09:09,565 Við skulum tjá bara þetta skilja út og hlaupa þetta aftur. 170 00:09:09,565 --> 00:09:13,840 171 00:09:13,840 --> 00:09:15,260 >> Það sem við förum. 172 00:09:15,260 --> 00:09:18,030 Svo er hring okkar hér a mikið dekkri, vegna þess að við 173 00:09:18,030 --> 00:09:20,720 hafa sjö hringi, einn ofan á öðrum. 174 00:09:20,720 --> 00:09:25,425 Við bjuggum bara sjö hringi, einn hvor fyrir hvert þessara gagna þætti. 175 00:09:25,425 --> 00:09:28,860 En það er lykillinn hlutur sem gerðist með þessari runu hérna. 176 00:09:28,860 --> 00:09:31,030 >> Það er að gögn var bundinn. 177 00:09:31,030 --> 00:09:33,440 Svo hvert einasta einn af Þau gögn þætti, 178 00:09:33,440 --> 00:09:38,830 10, 45, 105, var bundin við ákveðna hring. 179 00:09:38,830 --> 00:09:40,960 Svo þetta er ekki aðeins búið fullt af hringjum 180 00:09:40,960 --> 00:09:43,420 en bindur þessir tveir hlutir saman. 181 00:09:43,420 --> 00:09:48,740 >> Og í framtíðinni, vegna þess að við bjuggum hringimir með þessa D3 virka, 182 00:09:48,740 --> 00:09:52,430 ef ég gef þér hring, þú getur gefa mér gögn sem tengjast við það. 183 00:09:52,430 --> 00:09:53,280 Þannig að við getum beðið D3. 184 00:09:53,280 --> 00:09:54,840 Hey, D3, ég hef þessa hring. 185 00:09:54,840 --> 00:09:57,350 Hvað er gögn sem hringurinn hefur? 186 00:09:57,350 --> 00:10:01,290 Og D3 myndi segja okkur 10 eða 45 eða 105. 187 00:10:01,290 --> 00:10:02,380 >> Þessir hlutir eru bundnir. 188 00:10:02,380 --> 00:10:04,490 Það er mjög, mjög grundvallaratriði hugtak. 189 00:10:04,490 --> 00:10:06,070 Við skulum líta á það. 190 00:10:06,070 --> 00:10:12,210 >> Svo hvernig við myndum spyrja D3-- svo þetta er óviðeigandi fyrir þetta, 191 00:10:12,210 --> 00:10:16,620 en bara treysta mér í það. 192 00:10:16,620 --> 00:10:17,620 Þetta er hvernig við biðjum D3. 193 00:10:17,620 --> 00:10:21,312 Hey, D3, gefa mér fyrsta hring sem þú getur fundið. 194 00:10:21,312 --> 00:10:23,580 Gefðu mér fyrsta hring sem þú getur fundið. 195 00:10:23,580 --> 00:10:29,660 Og þá gátum spurt D3, hvað er gögnin um það, eins og þetta, 10. 196 00:10:29,660 --> 00:10:33,380 >> Þannig að við biðjum bara D3, finna mig fyrsta hring sem þú getur fundið. 197 00:10:33,380 --> 00:10:34,400 Hvað er gögn þess? 198 00:10:34,400 --> 00:10:36,650 10, sem er örugglega Okkar Fyrsta þáttur upplýsinganna. 199 00:10:36,650 --> 00:10:42,150 Við gætum spurt hana, hey, D3, finna okkur þriðja hring okkar. 200 00:10:42,150 --> 00:10:44,450 105. 201 00:10:44,450 --> 00:10:45,740 Hvers vegna er þetta mjög mikilvægt? 202 00:10:45,740 --> 00:10:49,790 203 00:10:49,790 --> 00:10:52,250 >> Svo hérna, ég nefndi við gætum notað aðgerðir. 204 00:10:52,250 --> 00:10:54,910 Og ég nefndi að það var mjög öflugur hlutur. 205 00:10:54,910 --> 00:11:03,070 Svo ekki bara getur virka okkar gera hlutina eins og gera sumir útreikningur, til dæmis, 206 00:11:03,070 --> 00:11:09,170 skila slembitölu, það getur einnig gera hlutina byggt á gögnum. 207 00:11:09,170 --> 00:11:11,550 Þetta er það sem gögn ekið skjöl meina. 208 00:11:11,550 --> 00:11:13,750 Það er það sem D3 stendur fyrir. 209 00:11:13,750 --> 00:11:17,800 >> Þannig að þetta x postition-- stað af bara að segja, alla hringi, 210 00:11:17,800 --> 00:11:21,735 fá x stöðu 200, við gæti gefið það virka. 211 00:11:21,735 --> 00:11:26,140 212 00:11:26,140 --> 00:11:30,140 Og hér getum við gert nokkrar útreikninga. 213 00:11:30,140 --> 00:11:33,710 og d stendur hér í stað fyrir gögn. 214 00:11:33,710 --> 00:11:36,120 Svo í hvert skipti sem við höfum hring, í grundvallaratriðum, 215 00:11:36,120 --> 00:11:37,750 D3 mun skapa þessar sjö hringi. 216 00:11:37,750 --> 00:11:38,500 Og þá fyrir hvert 217 00:11:38,500 --> 00:11:41,920 >> hring, það er að fara að fara, hey, circle1 hvað er x stöðu þína. 218 00:11:41,920 --> 00:11:45,210 Áður vorum við alltaf svara 200. 219 00:11:45,210 --> 00:11:48,630 En nú, í hvert skipti D3 spyr okkur hvað er x stöðu þína, 220 00:11:48,630 --> 00:11:51,790 það er að fara að gefa us-- við höfum sem hring, þannig að við höfum gögn. 221 00:11:51,790 --> 00:11:55,290 Það er að fara að gefa okkur gögn og segja, hvað þú vilt að greinargerð að vera, 222 00:11:55,290 --> 00:11:57,120 byggt á þeim gögnum. 223 00:11:57,120 --> 00:11:59,590 >> Við skulum fara aftur bara raunveruleg gögn. 224 00:11:59,590 --> 00:12:04,910 Þannig að ef við hlaupa þetta, þetta gefur US gögn ekið skjöl. 225 00:12:04,910 --> 00:12:08,040 Þessar hringi eru byggðar , í tengslum position-- 226 00:12:08,040 --> 00:12:11,120 þeir eru bækistöðvar sem fall af gögnum. 227 00:12:11,120 --> 00:12:13,100 >> Svo í fyrsta hring, D3 leggur hring. 228 00:12:13,100 --> 00:12:16,770 Og þá D3 spyr okkur, hvað gera þú vilt að greinargerð til að vera. 229 00:12:16,770 --> 00:12:19,620 Og við segjum bara, hvað sem gögn er. 230 00:12:19,620 --> 00:12:21,185 Gerðu greinargerð 10. 231 00:12:21,185 --> 00:12:26,320 >> Þá spyr það, hvað þú vilt að Greinargerð til að vera í annað hring. 232 00:12:26,320 --> 00:12:27,270 Og við að svara, 45. 233 00:12:27,270 --> 00:12:30,000 234 00:12:30,000 --> 00:12:32,230 Og við, auðvitað, getur gera sumir útreikningur hér. 235 00:12:32,230 --> 00:12:35,510 Mér finnst að þeim hringjum eru eins konar varla snúið upp. 236 00:12:35,510 --> 00:12:38,965 >> Svo margfalda það með 3, margfalda gögn um 3. 237 00:12:38,965 --> 00:12:41,870 238 00:12:41,870 --> 00:12:43,840 Hring okkar bara stækkað út. 239 00:12:43,840 --> 00:12:46,730 Gildi okkar var þrefaldast. 240 00:12:46,730 --> 00:12:51,010 >> Hringurinn er í raun á jaðri, þannig að við skulum kannski konar móti henni. 241 00:12:51,010 --> 00:12:53,632 Við skulum segja, um 20. 242 00:12:53,632 --> 00:12:56,070 Hér þú fara. 243 00:12:56,070 --> 00:12:57,590 >> Þetta er gögn visualization. 244 00:12:57,590 --> 00:13:01,767 Það er mjög einfalt einn, en þetta gefur okkur innsýn inn gögn okkar. 245 00:13:01,767 --> 00:13:04,600 Það segir okkur að, til dæmis, við hafa smá safn af þáttum. 246 00:13:04,600 --> 00:13:06,340 Og við höfum stóra outlier hér. 247 00:13:06,340 --> 00:13:10,830 Þetta gefur okkur einhverjar upplýsingar um dreifingu. 248 00:13:10,830 --> 00:13:20,830 >> Ef við vorum, til dæmis, til að breyta gögn til 150 hér og hressa, 249 00:13:20,830 --> 00:13:22,630 visualization okkar er breytt. 250 00:13:22,630 --> 00:13:24,285 Þetta skjal er gögn rekinn. 251 00:13:24,285 --> 00:13:32,640 252 00:13:32,640 --> 00:13:36,180 >> Svo auðvitað öll þessi atriði, allar þessar eiginleika hér, 253 00:13:36,180 --> 00:13:38,430 við getum notað virka, ekki bara tölurnar, ekki bara 254 00:13:38,430 --> 00:13:39,900 x og y stöðu. 255 00:13:39,900 --> 00:13:42,120 Svo við getum notað aðgerð fyrir litinn. 256 00:13:42,120 --> 00:13:45,260 257 00:13:45,260 --> 00:13:46,360 Þannig að við munum gera það sama. 258 00:13:46,360 --> 00:13:49,360 Við munum gefa það aðgerð. 259 00:13:49,360 --> 00:13:52,320 >> Og við skulum segja, að við gætum haft conditionals í virka okkar. 260 00:13:52,320 --> 00:13:54,770 Þessi aðgerð getur verið hundrað línur á lengd. 261 00:13:54,770 --> 00:13:57,150 Það getur gert mjög, mjög flókið hluti. 262 00:13:57,150 --> 00:13:59,080 >> Svo skulum binda ef yfirlýsingu hér. 263 00:13:59,080 --> 00:14:03,420 Við skulum segja, ef gögn okkar er minna en 50, það er sumir þröskuldur 264 00:14:03,420 --> 00:14:05,817 að við erum áhuga í fyrir sumir ástæða. 265 00:14:05,817 --> 00:14:06,650 Við skulum gera það grænt. 266 00:14:06,650 --> 00:14:09,830 267 00:14:09,830 --> 00:14:15,320 Annars, við skulum gera það rautt. 268 00:14:15,320 --> 00:14:16,110 Hvernig er það? 269 00:14:16,110 --> 00:14:19,630 270 00:14:19,630 --> 00:14:21,220 Nice. 271 00:14:21,220 --> 00:14:24,860 >> Svo gögn visualization okkar er að byrja að flytja fleiri áhugaverðar upplýsingar 272 00:14:24,860 --> 00:14:26,727 á mörgum rásum. 273 00:14:26,727 --> 00:14:28,560 Svo nú vitum við svolítið um dreifingu. 274 00:14:28,560 --> 00:14:31,768 Og við vitum að það er einhvers konar skera burt á 50 að við erum áhuga á. 275 00:14:31,768 --> 00:14:35,630 Við vitum að það eru tveir gagnapunktar undir því þröskuld og flestir 276 00:14:35,630 --> 00:14:36,130 hér að framan. 277 00:14:36,130 --> 00:14:41,510 278 00:14:41,510 --> 00:14:46,160 >> Svo sem lokaskref, þessi gögn hér, það er mjög sjaldgæft að sjá þetta svona. 279 00:14:46,160 --> 00:14:52,610 Svo skulum fara bara það út breytu því það er hreinni, eins og þetta. 280 00:14:52,610 --> 00:15:02,980 281 00:15:02,980 --> 00:15:05,197 Og þá erum við að nota þá breytu hér. 282 00:15:05,197 --> 00:15:06,280 Það er nákvæmlega það sama. 283 00:15:06,280 --> 00:15:07,280 Það er bara svolítið hreinni. 284 00:15:07,280 --> 00:15:25,300 285 00:15:25,300 --> 00:15:35,300 >> Next upp lög III, Scales-- Svo eitt vandamál rétt 286 00:15:35,300 --> 00:15:38,920 hér er, ef við breyta okkar gögn í þessu 200 value-- 287 00:15:38,920 --> 00:15:41,685 ef við breyta því að 400 eða eitthvað og hressa, 288 00:15:41,685 --> 00:15:44,540 þá er þetta gildi bara fór offscreen. 289 00:15:44,540 --> 00:15:49,040 Svo rökfræði okkar hérna um hvernig við tímum 3 290 00:15:49,040 --> 00:15:52,570 og 20, til að breiða það út og þá móti það svolítið er mjög clunky. 291 00:15:52,570 --> 00:15:54,150 >> Hvað gera þær tölur þýða? 292 00:15:54,150 --> 00:15:55,400 Þeir eru bara erfitt dulmáli þar. 293 00:15:55,400 --> 00:15:58,830 Og þeir eru mjög mikið bundinn við gögn. 294 00:15:58,830 --> 00:16:00,550 Við viljum gögn ekið skjal. 295 00:16:00,550 --> 00:16:05,460 Við viljum mjög sveigjanlegur skjal, að gefin gögn, lagar sig að henni 296 00:16:05,460 --> 00:16:07,900 og táknar það. 297 00:16:07,900 --> 00:16:11,330 >> Það sem við þurfum í rauninni er, við hafa þetta úrval af tölum 10. 298 00:16:11,330 --> 00:16:12,640 45, 105. 299 00:16:12,640 --> 00:16:17,630 Og við viljum að kortleggja það út á breidd, fullt breidd hér. 300 00:16:17,630 --> 00:16:20,620 Þannig að við höfum úrval af tölur fara frá 0 til 100. 301 00:16:20,620 --> 00:16:24,980 Og við höfum þetta háskólasvæðinu I fer 20-700, í þessu tilfelli. 302 00:16:24,980 --> 00:16:26,515 >> Við viljum konar að kortleggja það á. 303 00:16:26,515 --> 00:16:30,002 Við viljum að skala það upp og þá á móti henni svolítið. 304 00:16:30,002 --> 00:16:33,165 Það kemur í ljós að D3 hefur þessi. 305 00:16:33,165 --> 00:16:34,220 Það er kallað mælikvarða. 306 00:16:34,220 --> 00:16:37,410 307 00:16:37,410 --> 00:16:38,250 Svo skulum við nota það. 308 00:16:38,250 --> 00:16:46,300 309 00:16:46,300 --> 00:16:49,670 >> Leiðin sem works-- ég ætla að skrifar þetta upp og þá útskýra það. 310 00:16:49,670 --> 00:17:01,530 311 00:17:01,530 --> 00:17:02,450 Þetta er mælikvarði. 312 00:17:02,450 --> 00:17:08,670 Hvað það mun gera er, það mun kortleggja gildi frá 1 til 200 um til 20 í 600. 313 00:17:08,670 --> 00:17:10,990 Við getum athugað það. 314 00:17:10,990 --> 00:17:13,329 Við sjáum að hér. 315 00:17:13,329 --> 00:17:21,704 >> Svo ef ég fæða það 1-- eitt augnablik. 316 00:17:21,704 --> 00:17:47,764 317 00:17:47,764 --> 00:17:48,555 Gefðu mér eina sekúndu. 318 00:17:48,555 --> 00:17:53,680 319 00:17:53,680 --> 00:17:55,080 Ég hlýt að hafa slegið hana. 320 00:17:55,080 --> 00:18:15,320 321 00:18:15,320 --> 00:18:15,990 There þú fara. 322 00:18:15,990 --> 00:18:17,930 Ég er hryggur óður í þessi. 323 00:18:17,930 --> 00:18:22,050 >> Svo hvað mælikvarða mun gera er, það mun taka gildi 324 00:18:22,050 --> 00:18:24,930 og þá umbreyta það, auka það út, svo það 325 00:18:24,930 --> 00:18:27,320 fyllir alhliða þú ert að biðja um. 326 00:18:27,320 --> 00:18:32,910 Þannig að í þessu tilfelli, ef við gefum það einn, það er að fara að kortleggja það út á 20. 327 00:18:32,910 --> 00:18:37,750 Og ef við gefum það 200, það er fara að kortleggja það á 600. 328 00:18:37,750 --> 00:18:40,460 Og einhvers staðar á milli, ef við fáum 100, það er 329 00:18:40,460 --> 00:18:44,610 að fara að vera einhvers staðar í á milli 20 og 600. 330 00:18:44,610 --> 00:18:51,480 >> Og auðvitað, nú er þetta hvað við þurfum að fjarlægja þá harður á dulmáli 331 00:18:51,480 --> 00:18:53,402 hlutir sem við höfum hérna. 332 00:18:53,402 --> 00:18:55,950 Svo það sem við viljum gera er taka gögn sem við erum 333 00:18:55,950 --> 00:19:00,950 gefið, að einstaklingur gögn þáttur, og gefa það til skala fyrst. 334 00:19:00,950 --> 00:19:02,635 Svo mælikvarða mun hækka það upp. 335 00:19:02,635 --> 00:19:27,020 336 00:19:27,020 --> 00:19:48,880 >> Well-- Oh, höfum við smá villa hér. 337 00:19:48,880 --> 00:19:50,120 Við erum vantar gögn. 338 00:19:50,120 --> 00:19:51,290 There þú fara. 339 00:19:51,290 --> 00:19:58,550 340 00:19:58,550 --> 00:19:59,550 Og það stækkar það út. 341 00:19:59,550 --> 00:20:01,383 >> Það gefur okkur sömu Niðurstaðan sem við höfðum áður, 342 00:20:01,383 --> 00:20:04,030 en í stað þess að hafa þá harður dulmáli þvingun. 343 00:20:04,030 --> 00:20:07,790 Og ef stærð af okkar striga breytingar, til dæmis, 344 00:20:07,790 --> 00:20:11,790 ef við viljum hafa þetta aftur 400 pixlar og það squishes út, 345 00:20:11,790 --> 00:20:15,440 við getum haft það over-- við getum aukið það, eða við 346 00:20:15,440 --> 00:20:21,890 getur dregið þessa vinstri framlegð eitthvað minna eða meira en 20. 347 00:20:21,890 --> 00:20:25,470 Þessar tölur, þessar erfitt dulmáli tölur gera nú vit fyrir okkur. 348 00:20:25,470 --> 00:20:28,110 349 00:20:28,110 --> 00:20:30,520 >> Og við gætum gert miklu meira áhugavert eins og heilbrigður. 350 00:20:30,520 --> 00:20:35,990 Svo í stað þess að hafa línulegan mælikvarða, gætum við viljum að skrá þig mælikvarða. 351 00:20:35,990 --> 00:20:37,840 Og það mun gefa okkur log skala. 352 00:20:37,840 --> 00:20:41,269 >> Svo nú mælikvarða okkar, í stað þess að bara vaxandi út fyrir þau mörk, 353 00:20:41,269 --> 00:20:42,810 það er að gera flóknari hluti. 354 00:20:42,810 --> 00:20:48,790 355 00:20:48,790 --> 00:20:53,790 Í stað þess að hafa þetta svið erfitt dulmáli, og í stað þess að þurfa að 600, 356 00:20:53,790 --> 00:20:58,465 við gætum vilt bara nota breidd, svo frá 20 til breidd mínus 40, 357 00:20:58,465 --> 00:21:02,392 2 sinnum framlegð á hinni hliðinni. 358 00:21:02,392 --> 00:21:05,350 Og þetta gerir miklu meira vit í að einhver sem gæti líta á kóðann. 359 00:21:05,350 --> 00:21:08,080 360 00:21:08,080 --> 00:21:11,850 >> Athyglisvert fá vog mjög, mjög háþróuð eins og heilbrigður. 361 00:21:11,850 --> 00:21:13,350 Þeir gera a einhver fjöldi af áhugaverðum hlutum. 362 00:21:13,350 --> 00:21:17,620 Svo vog ekki endilega að ganga bara með tölum. 363 00:21:17,620 --> 00:21:18,955 Við skulum gera lit mælikvarða. 364 00:21:18,955 --> 00:21:23,120 365 00:21:23,120 --> 00:21:26,120 >> Svo allt okkar gæti be-- ríki okkar er 1 til 200. 366 00:21:26,120 --> 00:21:28,220 Það er inntak hlutur. 367 00:21:28,220 --> 00:21:33,793 En við might vilja til að kortleggja frá grænt rautt, til dæmis. 368 00:21:33,793 --> 00:21:39,710 369 00:21:39,710 --> 00:21:42,910 Og nú, ef við gefa það 1, við erum að fara að fá grænt. 370 00:21:42,910 --> 00:21:45,110 Ef við gefum henni 200, munum við fá rautt. 371 00:21:45,110 --> 00:21:49,480 Og ef við framhjá það eitthvað á milli, það er að fara að vera einhvers blanda af því, 372 00:21:49,480 --> 00:21:52,520 einhvers staðar á halla milli grænu og rauðu. 373 00:21:52,520 --> 00:21:55,210 >> Og í stað þess að þurfa af þessu tagi clunky rökfræði 374 00:21:55,210 --> 00:21:58,550 við höfum hér með skilyrt rétt þar, 375 00:21:58,550 --> 00:22:03,250 við gætum haft something-- a línuleg mælikvarða milli þeirra. 376 00:22:03,250 --> 00:22:07,100 Þannig að við myndum nota mælikvarða við bara búin, sem við kölluð litur. 377 00:22:07,100 --> 00:22:09,060 Og við myndum gefa það d, sem gögn þáttur okkar. 378 00:22:09,060 --> 00:22:14,250 379 00:22:14,250 --> 00:22:15,060 Og þar sem við förum. 380 00:22:15,060 --> 00:22:18,070 Við höfum lit mælikvarða. 381 00:22:18,070 --> 00:22:18,940 >> Þannig að þetta er kortlagning. 382 00:22:18,940 --> 00:22:20,960 Svo lengst til vinstri er alveg grænn. 383 00:22:20,960 --> 00:22:22,560 Lengst til hægri er alveg rauður. 384 00:22:22,560 --> 00:22:24,828 Og allt þar á milli er fall af d. 385 00:22:24,828 --> 00:22:33,369 386 00:22:33,369 --> 00:22:35,160 Við höfum áhugaverð visualizations hér. 387 00:22:35,160 --> 00:22:36,952 En gögn okkar var voða leiðinlegt. 388 00:22:36,952 --> 00:22:39,410 Við skulum sjá hvað við gætum gert ef við höfðum meira áhugavert gögn. 389 00:22:39,410 --> 00:22:44,420 390 00:22:44,420 --> 00:22:50,500 >> Lög IV, vinna með Data-- fyrsta hlutur 391 00:22:50,500 --> 00:22:53,560 við munum vilja til gera til að gera okkar visualization meira áhugavert 392 00:22:53,560 --> 00:22:56,140 er að færa gögn annars staðar. 393 00:22:56,140 --> 00:22:58,310 Það er mjög clunky að hafa gögnin harður á dulmáli hér. 394 00:22:58,310 --> 00:23:01,220 Og almennt, munum við vera að spyrja einhver annar fyrir gögn. 395 00:23:01,220 --> 00:23:05,400 Við munum vera kannski að spyrja stjórnvöld, Census Bureau, hvað er gögn 396 00:23:05,400 --> 00:23:10,170 og þá ætlar það eða spyrja sumir þriðja aðila aðili fyrir sumum gögnum 397 00:23:10,170 --> 00:23:13,330 og síðan að byggja a visualization á það. 398 00:23:13,330 --> 00:23:17,170 >> Svo það fyrsta sem við viljum gera er að færa það til annars staðar. 399 00:23:17,170 --> 00:23:24,130 Þannig að ég ætla að búa til a skrá hér kallast data.json. 400 00:23:24,130 --> 00:23:25,600 JSON er gögn snið. 401 00:23:25,600 --> 00:23:29,210 Þú þarft ekki að vita mikið um það. 402 00:23:29,210 --> 00:23:33,210 Og við erum að fara að afrita litla gögn sem við höfum þarna, 403 00:23:33,210 --> 00:23:40,330 líma það þar orðrétt, fara aftur til visualization númerið okkar 404 00:23:40,330 --> 00:23:45,362 hér, og nota þessa aðgerð hérna. 405 00:23:45,362 --> 00:23:46,820 Þú þarft ekki að vita upplýsingar. 406 00:23:46,820 --> 00:23:49,800 En hvað þetta mun gera er, það verður að finna þessa skrá, 407 00:23:49,800 --> 00:23:51,780 sækja það, og aftur það til okkar. 408 00:23:51,780 --> 00:24:11,660 409 00:24:11,660 --> 00:24:15,220 Svo hvað þetta gerir er, það fer og fá data.json skrá. 410 00:24:15,220 --> 00:24:18,570 Og þá er allt kóðinn inndregin inside-- meginatriðum, 411 00:24:18,570 --> 00:24:21,800 allt kóðinn við höfum there-- mun hlaupa aðeins þegar við fáum gögnin aftur. 412 00:24:21,800 --> 00:24:25,760 Og þá er það að fara að keyra að númer með þau gögn sem við höfum. 413 00:24:25,760 --> 00:24:28,870 Great, höfum við visualization sem fyrirspurnir 414 00:24:28,870 --> 00:24:31,390 um nokkurt kóða einhversstaðar annars, sem er venjulega 415 00:24:31,390 --> 00:24:36,110 þar sem það spyrst einhverjum gögnum frá annars staðar, sem er venjulega 416 00:24:36,110 --> 00:24:38,656 hvernig visualizations vinna. 417 00:24:38,656 --> 00:24:41,400 >> En ég vil fara aftur að gögnum. 418 00:24:41,400 --> 00:24:48,030 Svo gögnin grundvallaratriðum í D3-- D3 eyðir gögn sem er listi af hlutum. 419 00:24:48,030 --> 00:24:53,000 D3 ráð gögn bara að vera listi af hlutum, fylki af hlutum. 420 00:24:53,000 --> 00:24:58,780 Það skiptir ekki máli hvað þessir hlutir eru, svo lengi sem það er fylki af þeim. 421 00:24:58,780 --> 00:25:02,460 >> Svo hér, til dæmis gætum við af Auðvitað hafa fleytitölum. 422 00:25:02,460 --> 00:25:04,830 Við gætum hafa neikvæður. 423 00:25:04,830 --> 00:25:09,400 D3 er ekki sama, svo lengi eins og það er a listi af hlutur. 424 00:25:09,400 --> 00:25:13,270 >> Eins áhugavert sem við gæti hafa, gætum við einnig 425 00:25:13,270 --> 00:25:19,410 hafa a listi af strengi eins og þessi. 426 00:25:19,410 --> 00:25:25,440 Svo þetta eru Crimson fyrirsagnir Ég tók upp fyrir nokkrum dögum. 427 00:25:25,440 --> 00:25:29,220 Og kannski þú getur fundið nokkrar áhugaverðar atriði um þessi a fyrirsagnir. 428 00:25:29,220 --> 00:25:30,970 >> Svo aftur, þetta er listi af hlutum. 429 00:25:30,970 --> 00:25:32,360 D3 er ekki sama. 430 00:25:32,360 --> 00:25:35,572 Þetta verður að vera a band. 431 00:25:35,572 --> 00:25:36,530 Við höfum breytt gögn okkar. 432 00:25:36,530 --> 00:25:38,210 >> Við skulum fara aftur til visualization okkar. 433 00:25:38,210 --> 00:25:42,495 Nú, visualization okkar gerir ráð fyrir inntak að vera tölur. 434 00:25:42,495 --> 00:25:44,370 Þannig að við erum að fara að hafa að gera nokkrar breytingar. 435 00:25:44,370 --> 00:25:47,180 436 00:25:47,180 --> 00:25:52,180 Svo til dæmis, fyrst af öllu, kannski við viljum setja þessa hringi eftir 437 00:25:52,180 --> 00:25:56,870 af lengd fyrirsögn, sem Fjöldi stafa í fyrirsögn. 438 00:25:56,870 --> 00:26:03,600 >> Svo það sem við munum gera is-- hvert skipti okkar virka er kallað með a band, 439 00:26:03,600 --> 00:26:09,095 við munum finna það lengd og þá fara að skalinn. 440 00:26:09,095 --> 00:26:11,550 Liturinn, ég aftur að til þess að stál blár. 441 00:26:11,550 --> 00:26:19,060 442 00:26:19,060 --> 00:26:20,420 Og þar sem við förum. 443 00:26:20,420 --> 00:26:23,190 Við höfum grafíska af Crimson fyrirsagnir. 444 00:26:23,190 --> 00:26:25,500 >> Mælikvarða okkar er svolítið burt. 445 00:26:25,500 --> 00:26:29,680 Við skulum gera ráð fyrir að lengsta Fyrirsögn er 100 stafir að lengd, 446 00:26:29,680 --> 00:26:32,244 svo haf að út a hluti. 447 00:26:32,244 --> 00:26:33,410 Og við höfum visualization. 448 00:26:33,410 --> 00:26:36,710 Svo virðist sem flestir fyrirsagnir eru nokkuð þétt saman, 449 00:26:36,710 --> 00:26:38,750 hvað varðar eðli línu. 450 00:26:38,750 --> 00:26:41,200 En eitt það raunverulega stendur upp úr. 451 00:26:41,200 --> 00:26:46,660 >> Við gætum byggja verkfæri að kanna það meira. 452 00:26:46,660 --> 00:26:50,710 En þegar ég var að vinna á þessu, ég var forvitinn hvort í þessum gögnum, 453 00:26:50,710 --> 00:26:53,880 fyrirsagnir með tvípunkti í þeim væri lengur. 454 00:26:53,880 --> 00:26:55,770 Ég er gert ráð fyrir að þeir myndu. 455 00:26:55,770 --> 00:26:56,660 >> Svo skulum finna út. 456 00:26:56,660 --> 00:27:00,650 Við skulum nota lit rás eins og við gerðum áður, 457 00:27:00,650 --> 00:27:04,540 að umrita sumir um hvort það er ristill eða ekki. 458 00:27:04,540 --> 00:27:07,220 Þannig að við munum nota skilyrt aftur. 459 00:27:07,220 --> 00:27:09,350 Þú þarft ekki að vita upplýsingar um þetta, 460 00:27:09,350 --> 00:27:14,260 en þetta er hvernig við athuga a band fyrir tiltekna persónu 461 00:27:14,260 --> 00:27:16,355 JavaScript, aftur, ekki við. 462 00:27:16,355 --> 00:27:18,910 463 00:27:18,910 --> 00:27:23,270 >> En ef við finn ekki ristli, munum við aftur grænn. 464 00:27:23,270 --> 00:27:26,100 Og ef við gerum, munum við aftur rautt. 465 00:27:26,100 --> 00:27:29,010 Svo aftur, fyrirsagnir sem hafa a ristill verður rautt. 466 00:27:29,010 --> 00:27:34,980 Þetta er það sem þetta means-- gott. 467 00:27:34,980 --> 00:27:38,040 >> Svo virðist sem minn tilgáta er höggdeyfir. 468 00:27:38,040 --> 00:27:39,360 Það er aðeins tvær. 469 00:27:39,360 --> 00:27:42,380 Við höfum aðeins sex gagnapunkta og aðeins tveir voru ristill. 470 00:27:42,380 --> 00:27:45,510 En það virðist svolítið meira á neðri enda, í raun. 471 00:27:45,510 --> 00:27:47,830 Fyrirsagnir með tvípunkti virðast að almennt vera styttri, 472 00:27:47,830 --> 00:27:52,370 að minnsta kosti í gögnum okkar set-- áhugavert. 473 00:27:52,370 --> 00:27:55,830 >> Við skulum fara aftur að til stál blár og þá sjá 474 00:27:55,830 --> 00:28:00,601 hvað við getum gert með jafnvel meira áhugaverðar upplýsingar. 475 00:28:00,601 --> 00:28:04,370 476 00:28:04,370 --> 00:28:09,070 Svo aftur, ég nefndi að gögn í D3 er listi af hlutum. 477 00:28:09,070 --> 00:28:11,080 Við höfum séð fjölda mörgum gerðum. 478 00:28:11,080 --> 00:28:12,810 Við höfum séð strengi. 479 00:28:12,810 --> 00:28:15,700 En það getur líka verið hluti. 480 00:28:15,700 --> 00:28:20,080 >> Þeir geta verið flóknar hlutir sem fela í sér mikið af hlutum. 481 00:28:20,080 --> 00:28:24,510 Að segja að betur, í flestum tilfellum, við 482 00:28:24,510 --> 00:28:28,384 vilja til að byggja hvert gögn benda eins flóknari en bara eitt gildi. 483 00:28:28,384 --> 00:28:30,175 Ef þú vilt ímynda sér gagnagrunnur um nemendur, 484 00:28:30,175 --> 00:28:32,470 það gæti verið nemandi nafn, nemandi ID, 485 00:28:32,470 --> 00:28:36,370 og a einhver fjöldi af hlutur sem tengist með sérstakri skrá, 486 00:28:36,370 --> 00:28:39,834 ekki bara band eða tala. 487 00:28:39,834 --> 00:28:40,750 Svo skulum líta á það. 488 00:28:40,750 --> 00:28:55,180 489 00:28:55,180 --> 00:28:56,760 >> Þetta er eitt slíkt gögnum. 490 00:28:56,760 --> 00:28:59,090 Þetta er gögnum um jarðskjálfta. 491 00:28:59,090 --> 00:29:01,910 492 00:29:01,910 --> 00:29:08,430 Svo allt hér á listanum okkar eða array af hlutum inniheldur margt sig. 493 00:29:08,430 --> 00:29:11,380 Svo hefur hvert gagnapunktur a Umfang og samræma. 494 00:29:11,380 --> 00:29:13,425 Og hnit sig innihalda tvennt. 495 00:29:13,425 --> 00:29:15,960 496 00:29:15,960 --> 00:29:20,450 >> Svo er nú mikið meira á hverjum degi flókið og margt fleira áhugavert 497 00:29:20,450 --> 00:29:22,700 og inniheldur margt fleira áhugaverðar upplýsingar. 498 00:29:22,700 --> 00:29:26,730 Við skulum sjá að við gætum byggja út úr því. 499 00:29:26,730 --> 00:29:36,130 Reglulegur aftur hingað, aftur, með því að nota súlurit hring okkar visualization 500 00:29:36,130 --> 00:29:42,110 við höfum byggt, við skulum sjá hvort við getum byggt a visualization af stærðargráðu dreifingu 501 00:29:42,110 --> 00:29:43,305 í gögnum okkar. 502 00:29:43,305 --> 00:29:45,850 503 00:29:45,850 --> 00:29:48,660 >> Svo hér er það sama hugtak. 504 00:29:48,660 --> 00:29:51,920 En nú, d inniheldur fleiri hlutum. 505 00:29:51,920 --> 00:29:54,780 d inniheldur mörg gögn þætti. 506 00:29:54,780 --> 00:29:57,946 Þannig að við fá d aftur. 507 00:29:57,946 --> 00:29:59,670 D3 gefur okkur d. 508 00:29:59,670 --> 00:30:06,080 Og við bregðast með því að finna stærð af d og þá liggur það í mælikvarða. 509 00:30:06,080 --> 00:30:08,490 >> Og þá þurfum við að breyta mælikvarða okkar, auðvitað. 510 00:30:08,490 --> 00:30:12,980 Svo magnitudes gera einfaldlega ekki fara miklu meira en 10. 511 00:30:12,980 --> 00:30:15,485 Raunverulega, there er aldrei verið 10 stærð jarðskjálfta. 512 00:30:15,485 --> 00:30:19,360 En það er góður af efri okkar enda, efri litróf okkar. 513 00:30:19,360 --> 00:30:20,240 >> Við skulum hressa. 514 00:30:20,240 --> 00:30:22,990 Nice, höfum við visualization. 515 00:30:22,990 --> 00:30:25,490 Það er áhugavert að note-- svo það eru tveir gagnapunktar sem 516 00:30:25,490 --> 00:30:29,010 eru næstum nákvæmlega ofan á hvern Annað, hvað varðar stærðargráðu. 517 00:30:29,010 --> 00:30:31,350 Þú sérð þetta með ógagnsæi við erum að nota. 518 00:30:31,350 --> 00:30:40,810 519 00:30:40,810 --> 00:30:42,690 >> Við höfum landfræðileg gögn núna. 520 00:30:42,690 --> 00:30:44,710 Við höfum breiddargráðum og lengdargráðu. 521 00:30:44,710 --> 00:30:47,549 Kannski við gætum gert eitthvað mikið meira áhugavert með það. 522 00:30:47,549 --> 00:30:49,590 Við skulum finna meira áhugaverð leið til að sjón 523 00:30:49,590 --> 00:30:53,500 þetta flóknara gögn sem við höfum aðgang að. 524 00:30:53,500 --> 00:31:04,950 >> Lög V, Mapping-- grundvallaratriðum, við viljum að setja þetta á korti. 525 00:31:04,950 --> 00:31:07,690 Ég meina, þetta er þar sem þetta er að fara. 526 00:31:07,690 --> 00:31:13,130 Við viljum að umrita upplýsingar um staða þessara jarðskjálfta lestur, 527 00:31:13,130 --> 00:31:16,350 auk stærð þeirra, vegna þess að við höfum það núna. 528 00:31:16,350 --> 00:31:21,310 Við skiljum hvernig neyta flóknari gögn. 529 00:31:21,310 --> 00:31:26,200 >> The fyrstur hlutur sem við munum gera er búa til kort, bakgrunnur kort. 530 00:31:26,200 --> 00:31:29,360 Ég ætla að fara í gegnum þetta mjög fljótt. 531 00:31:29,360 --> 00:31:30,560 Þetta er erfiður númer. 532 00:31:30,560 --> 00:31:33,110 Það er annar einn af þeim uppskriftir sem þú í raun ekki 533 00:31:33,110 --> 00:31:35,690 verða að skilja að fullu fyrir þig að nota. 534 00:31:35,690 --> 00:31:38,510 535 00:31:38,510 --> 00:31:39,740 En þetta er númer. 536 00:31:39,740 --> 00:31:43,580 Þessi kóði skapar hérna kort. 537 00:31:43,580 --> 00:31:45,730 >> Við erum ekki að fara að fara í smáatriðum. 538 00:31:45,730 --> 00:31:54,210 En á yfirborðinu, hvað það gerir er, það spyrst þetta us.json skrá sem 539 00:31:54,210 --> 00:31:57,150 er a gögn skrá eins sá sem við höfðum áður. 540 00:31:57,150 --> 00:31:59,150 Það er flóknara, auðvitað. 541 00:31:59,150 --> 00:32:02,920 En í þessu tilfelli, allt, hvert gögn benda er þetta ástand 542 00:32:02,920 --> 00:32:05,420 og hefur a listi af breiddargráðum og lengdargráðu 543 00:32:05,420 --> 00:32:10,500 að skilgreina marghyrning að formi, sem ríkið. 544 00:32:10,500 --> 00:32:13,280 >> Svo hvað D3 mun gera er svipað að það sem við gerðum áður. 545 00:32:13,280 --> 00:32:18,140 Það mun óska ​​eftir því og binda það í frumefni. 546 00:32:18,140 --> 00:32:20,890 Og það er fall sem mun kortleggja þessi þáttur út, 547 00:32:20,890 --> 00:32:23,410 byggt á breiddargráðum og lengdargráðu. 548 00:32:23,410 --> 00:32:24,580 Þú getur lesið meira um það. 549 00:32:24,580 --> 00:32:27,385 Og ég mæli með því. 550 00:32:27,385 --> 00:32:30,090 >> Það eru tenglar á að lok þessa kóða staða. 551 00:32:30,090 --> 00:32:31,570 Og kóðinn er athugasemd. 552 00:32:31,570 --> 00:32:34,050 Þar eru tenglar fyrir frekari á þetta. 553 00:32:34,050 --> 00:32:36,590 Ég mæli með að þú lítur hann upp. 554 00:32:36,590 --> 00:32:39,460 En það sem við þykir vænt um er þessi spá virka. 555 00:32:39,460 --> 00:32:41,210 Ég vil fara í gegnum það. 556 00:32:41,210 --> 00:32:43,522 >> Fyrst af öllu, láta mig sýna þú að, ​​já, við höfum kort. 557 00:32:43,522 --> 00:32:47,300 558 00:32:47,300 --> 00:32:49,970 Kortin eru flott. 559 00:32:49,970 --> 00:32:52,330 Svo skulum líta á þetta framleiðslu virka. 560 00:32:52,330 --> 00:32:56,481 >> Vörpun er mjög mikið eins mælikvarða, vog aftur. 561 00:32:56,481 --> 00:32:59,210 Svo hvaða framleiðsla fyrir þessi spá virka 562 00:32:59,210 --> 00:33:06,610 gerir er, gætum við framhjá henni lengdargráðu og latitudes-- í þessu tilfelli, 563 00:33:06,610 --> 00:33:09,590 þessi gildi hér eru Lat-þráir hússins 564 00:33:09,590 --> 00:33:13,990 við erum að sitja í hægri now-- til framreiknings. 565 00:33:13,990 --> 00:33:20,560 Og vörpun mun umbreyta að í x og y dílum. 566 00:33:20,560 --> 00:33:23,300 >> Svo hvað vörpun er að gera er mjög svipuð mælikvarða okkar. 567 00:33:23,300 --> 00:33:27,270 Það tekur breiddargráðum okkar og lengdargráðu sem táknar allan heiminn 568 00:33:27,270 --> 00:33:31,390 og minnkandi og límvatn sem niður á torginu sem við viljum, 569 00:33:31,390 --> 00:33:33,510 að við höfum gefið henni. 570 00:33:33,510 --> 00:33:35,220 Í þessu tilfelli erum við liggur þessi gildi. 571 00:33:35,220 --> 00:33:41,370 Og það er að gefa okkur og vel, það á skjánum þýðir 640 dílar. 572 00:33:41,370 --> 00:33:46,250 Þetta allt skjár er 700 punktar breiður, svo sem gerir okkur um hér, 573 00:33:46,250 --> 00:33:53,310 og 154 punktar niður, sem ég vildi áætlun er ansi mikið hérna. 574 00:33:53,310 --> 00:33:57,250 >> Svo taka þau Lat-Longs, sem tákna eitthvað á allan heiminn 575 00:33:57,250 --> 00:34:02,850 og squishing og færa það í kring að gefa okkur x og y dílum, 576 00:34:02,850 --> 00:34:05,450 þetta er það fyrsta sem er gert í þessu kortlagning kóða. 577 00:34:05,450 --> 00:34:07,920 Og þá restin af númer eyðir gögn 578 00:34:07,920 --> 00:34:14,310 og þá kort þá Lat-Longs á eitthvað á skjánum. 579 00:34:14,310 --> 00:34:18,380 >> En við erum að fara að nota þessa vörpun virka, vegna þess að það kemur í ljós 580 00:34:18,380 --> 00:34:20,270 við höfum Lat-Longs þráir eins og heilbrigður. 581 00:34:20,270 --> 00:34:24,509 Útlit bak á gögn okkar höfum við breiddargráðum og lengdargráðu hnit 582 00:34:24,509 --> 00:34:25,425 fyrir hvert athugun. 583 00:34:25,425 --> 00:34:28,131 584 00:34:28,131 --> 00:34:29,130 Svo skulum við nota vörpun. 585 00:34:29,130 --> 00:34:33,250 586 00:34:33,250 --> 00:34:37,639 >> Svo horfa á greinargerð okkar, við viljum exposition-- okkar 587 00:34:37,639 --> 00:34:39,590 við höfum breiddar og lengdargráðu. 588 00:34:39,590 --> 00:34:40,770 En við viljum dílum. 589 00:34:40,770 --> 00:34:43,510 Og það kemur í ljós, við höfum nákvæmlega hvað við want-- vörpun. 590 00:34:43,510 --> 00:34:46,239 Mjög mikið eins og við værum með kvarða hérna, 591 00:34:46,239 --> 00:34:52,075 við erum nú að fara að nota vörpun og gefa það hnit. 592 00:34:52,075 --> 00:34:55,241 593 00:34:55,241 --> 00:34:56,949 Svo það fyrsta sem við erum doing-- þannig að við erum 594 00:34:56,949 --> 00:35:01,520 fá d, sem er einstaklingur gögn þáttur í einstaka jarðskjálfta 595 00:35:01,520 --> 00:35:02,370 lestur. 596 00:35:02,370 --> 00:35:04,640 The fyrstur hlutur sem við gerum er að finna hnit. 597 00:35:04,640 --> 00:35:06,150 Allt í lagi, við höfum hnit. 598 00:35:06,150 --> 00:35:09,160 >> The second hlutur sem við gerum er fara að á til framreiknings. 599 00:35:09,160 --> 00:35:13,440 Projection breytir þeim hnit í dílum, x og y. 600 00:35:13,440 --> 00:35:16,680 Og þá síðasta sem við langar að gera er bara að fá x, 601 00:35:16,680 --> 00:35:19,342 sem þetta mál er sá fyrsti. 602 00:35:19,342 --> 00:35:22,050 Það er fyrsta af tveimur hlutum sem skilað er af vörpun. 603 00:35:22,050 --> 00:35:27,840 604 00:35:27,840 --> 00:35:29,630 >> Við munum gera það sama fyrir y. 605 00:35:29,630 --> 00:35:34,960 En í staðinn munum við aftur annar þáttur, y. 606 00:35:34,960 --> 00:35:35,980 Fá tilbúinn til að hressa. 607 00:35:35,980 --> 00:35:39,830 608 00:35:39,830 --> 00:35:46,450 Ooh, auka karakter here-- gott, höfum við 609 00:35:46,450 --> 00:35:51,730 gögn ekið skjal sem er leyna þessa JSON skrá af hlutum, 610 00:35:51,730 --> 00:35:57,560 gera kort, og breytast í eiginleiki í tengslum við gögnum 611 00:35:57,560 --> 00:35:59,600 að verkefni það á korti. 612 00:35:59,600 --> 00:36:00,840 Þetta er mjög áhugavert. 613 00:36:00,840 --> 00:36:03,770 Þetta er flott. 614 00:36:03,770 --> 00:36:05,640 >> Við skulum taka það upp hak. 615 00:36:05,640 --> 00:36:08,795 Ég meina, við höfum tvo stykki af upplýsingar með hverjum gögn benda. 616 00:36:08,795 --> 00:36:10,000 Ég meina, þrír. 617 00:36:10,000 --> 00:36:12,540 Við höfum hnit, sem er x og y. 618 00:36:12,540 --> 00:36:15,700 Og við höfum stærðargráðu. 619 00:36:15,700 --> 00:36:17,420 >> Við þurfum að umrita stærðargráðu einhvern veginn. 620 00:36:17,420 --> 00:36:18,920 Við höfum mikið af rásum. 621 00:36:18,920 --> 00:36:20,370 Við getum notað litinn. 622 00:36:20,370 --> 00:36:21,890 Við getum notað radíus. 623 00:36:21,890 --> 00:36:23,040 Við gætum notað ógagnsæi. 624 00:36:23,040 --> 00:36:25,540 Við gætum notað margt í kóða. 625 00:36:25,540 --> 00:36:29,180 Allir þessir eiginleikar og margir meira sem ekki eru skráð þar, 626 00:36:29,180 --> 00:36:33,065 því þeir eru valfrjáls, við gátum nota til að umrita þessi gögn, slaglengd 627 00:36:33,065 --> 00:36:35,670 og allt þetta sem ég hef nefnt. 628 00:36:35,670 --> 00:36:36,690 >> Við skulum gera radíus. 629 00:36:36,690 --> 00:36:38,830 Ég held radíus er mest leiðandi. 630 00:36:38,830 --> 00:36:46,210 Svo aftur, munum við skipta að harður-dulmáli 40 og gera sumir útreikninga. 631 00:36:46,210 --> 00:36:48,810 Við munum nota uppáhalds mælikvarða okkar aftur. 632 00:36:48,810 --> 00:36:50,290 Og við erum framhjá d. 633 00:36:50,290 --> 00:36:55,850 En ekki d vegna þess að við viljum að stærð af d. d er bara gagnapunktur. 634 00:36:55,850 --> 00:36:57,430 Við munum fara umfang skala. 635 00:36:57,430 --> 00:36:58,470 >> Við skulum reyna aftur. 636 00:36:58,470 --> 00:37:00,230 Ooh, það virkar ekki. 637 00:37:00,230 --> 00:37:02,940 Hvers vegna er það ekki? 638 00:37:02,940 --> 00:37:04,387 >> Svo muna hvað mælikvarði gerir. 639 00:37:04,387 --> 00:37:05,470 Við skulum líta á mælikvarða aftur. 640 00:37:05,470 --> 00:37:10,800 Scale kort frá 1 til 10 á til 22-600, meira eða minna. 641 00:37:10,800 --> 00:37:12,030 600 er mikil. 642 00:37:12,030 --> 00:37:14,730 Þetta er ástæða þess að við erum að fá þetta. 643 00:37:14,730 --> 00:37:18,420 >> Þannig að við viljum breyta mælikvarða okkar að eitthvað meira sanngjarnt. 644 00:37:18,420 --> 00:37:22,610 Við skulum segja, við viljum 0-60. 645 00:37:22,610 --> 00:37:25,340 60 er stórt en 10 jarðskjálftar eru ótrúlega sjaldgæf. 646 00:37:25,340 --> 00:37:27,880 Í raun, þeir aldrei gerst. 647 00:37:27,880 --> 00:37:31,830 >> Svo hvað þetta mun gera er, verður það að taka Umfang okkar sem fer frá 1 til 10 648 00:37:31,830 --> 00:37:34,490 og kortleggja það á að auka það út. 649 00:37:34,490 --> 00:37:37,370 Og kortleggja það á 0 til 60. 650 00:37:37,370 --> 00:37:38,840 Við skulum hressa. 651 00:37:38,840 --> 00:37:41,850 >> Nice, höfum við visualization. 652 00:37:41,850 --> 00:37:42,500 Þetta er frábært. 653 00:37:42,500 --> 00:37:43,736 Þetta er raun gögn. 654 00:37:43,736 --> 00:37:46,360 Þú munt taka eftir, í smá leikfangið mitt dæmi, stærsta jarðskjálfta 655 00:37:46,360 --> 00:37:49,417 er rétt ofan á okkur. 656 00:37:49,417 --> 00:37:50,000 En það er það. 657 00:37:50,000 --> 00:37:54,422 Við höfum dagsetningu ekið visualization sem eyðir gögnum 658 00:37:54,422 --> 00:37:56,255 og gefur okkur í raun áhugaverðar upplýsingar. 659 00:37:56,255 --> 00:38:02,600 660 00:38:02,600 --> 00:38:06,420 Já, við skulum bæta nokkrum gagnvirkni við það. 661 00:38:06,420 --> 00:38:08,675 Ég nefndi það var sterka gildi D3. 662 00:38:08,675 --> 00:38:11,490 663 00:38:11,490 --> 00:38:15,060 >> Svo hér, fyrir hvert frumefni, erum við lýsa fullt af eiginleikum. 664 00:38:15,060 --> 00:38:20,230 En við getum líka lýsa það sem við viljum að gerast með gagnvirkni þætti. 665 00:38:20,230 --> 00:38:26,190 Til dæmis má lýsa hvað gerist þegar við mús yfir. 666 00:38:26,190 --> 00:38:28,740 667 00:38:28,740 --> 00:38:33,640 Og mjög svipuð að sem mun taka virka, 668 00:38:33,640 --> 00:38:36,700 mjög svipað eiginleika sem við höfðum áður, 669 00:38:36,700 --> 00:38:44,650 þar sem við gerum eitthvað við þáttur þegar við sveima yfir það. 670 00:38:44,650 --> 00:38:47,100 >> Svo fyrsta sem við þurfum að gera er að velja að sá hluti, 671 00:38:47,100 --> 00:38:49,435 að finna það í grundvallaratriðum, í vafranum. 672 00:38:49,435 --> 00:38:57,090 673 00:38:57,090 --> 00:39:00,920 og þá gátum við sett eiginleiki til þess. 674 00:39:00,920 --> 00:39:06,870 Svo það sem ég er að gera hér er, þegar við sveima yfir eitthvað, munum við fá að sá hluti 675 00:39:06,870 --> 00:39:11,197 og þá setja ógagnsæi sína aftur til 1, til fullkomlega ógagnsæ. 676 00:39:11,197 --> 00:39:12,488 Við skulum sjá hvað það lítur út. 677 00:39:12,488 --> 00:39:29,430 678 00:39:29,430 --> 00:39:39,080 >> Það virðist sem við höfum að auka semíkommu hér. 679 00:39:39,080 --> 00:39:42,420 Svo ef við sveima hérna, fær það fullt. 680 00:39:42,420 --> 00:39:46,530 681 00:39:46,530 --> 00:39:48,960 En nú, auðvitað, það dvöl fullt, vegna þess að við 682 00:39:48,960 --> 00:39:53,240 að lýsa því sem gerist þegar fjarlægja bendilinn okkar. 683 00:39:53,240 --> 00:39:59,990 Svo skulum gera einmitt það á mouseout, öfugt við myndastækkun. 684 00:39:59,990 --> 00:40:06,399 >> Og við munum endurstilla það til það sem við þurftum before-- 0.5. 685 00:40:06,399 --> 00:40:10,260 Og nú, í hvert skipti sem við sveima, fáum við heilan hring. 686 00:40:10,260 --> 00:40:13,468 Það hjálpar okkur að sjá hvað við við erum að velja í raun. 687 00:40:13,468 --> 00:40:19,210 688 00:40:19,210 --> 00:40:22,860 >> Og nú skulum gera þetta mjög mikill. 689 00:40:22,860 --> 00:40:26,210 Við skulum tengja þetta alvöru gögnum. 690 00:40:26,210 --> 00:40:30,890 Svo skulum spyrja gat USGS um gögn þeirra. 691 00:40:30,890 --> 00:40:35,630 Svo US Geological Survey hefur gögn um jarðskjálfta. 692 00:40:35,630 --> 00:40:41,460 Þeir hafa opinber API sem er fær að vera neytt í JSON sniði. 693 00:40:41,460 --> 00:40:42,548 Svo skulum gera það. 694 00:40:42,548 --> 00:40:49,730 695 00:40:49,730 --> 00:40:55,900 >> Þannig að þetta er hluti af kóða sem tengist USGS API. 696 00:40:55,900 --> 00:40:57,990 Og það er hluti af vinnslu á það. 697 00:40:57,990 --> 00:41:02,200 Þetta er ekki viðeigandi, en einfaldar það að einfalda gögn snið eins og einn 698 00:41:02,200 --> 00:41:03,800 við höfðum áður. 699 00:41:03,800 --> 00:41:08,140 Svo ég losna af símtali okkar að falsa data.json okkar á skrá. 700 00:41:08,140 --> 00:41:13,110 Og í staðinn, ég kalla sem USGS meginatriðum. 701 00:41:13,110 --> 00:41:16,700 >> Við skulum hressa, ágætur. 702 00:41:16,700 --> 00:41:21,260 Þetta er raun, alvöru gögn í þessari viku fyrir jarðskjálfta. 703 00:41:21,260 --> 00:41:23,217 Þetta er mjög áhugavert. 704 00:41:23,217 --> 00:41:25,050 Þetta er ekki á óvart fyrir okkur, en það eru 705 00:41:25,050 --> 00:41:27,909 a einhver fjöldi af jarðskjálftum á West Coast í Kaliforníu. 706 00:41:27,909 --> 00:41:30,950 En ég hélt að það væri mjög áhugavert að það voru svo margir jarðskjálftar 707 00:41:30,950 --> 00:41:34,350 í Alaska, og virðist, hér í Midwest. 708 00:41:34,350 --> 00:41:37,630 Ég meina, áhugavert, og við erum góðar. 709 00:41:37,630 --> 00:41:40,410 Það er niðurstaða. 710 00:41:40,410 --> 00:41:43,760 >> En í grundvallaratriðum, þetta er það D3 hjálpar okkur að gera. 711 00:41:43,760 --> 00:41:48,030 Það hjálpar okkur að taka gögn, binda það þætti í DOM, 712 00:41:48,030 --> 00:41:51,620 og hafa þessir þættir breytast sem fall af gögnum, 713 00:41:51,620 --> 00:41:54,780 hafa þessir eiginleika, allar margir eiginleika þætti, 714 00:41:54,780 --> 00:41:57,393 allt að vera gagnlegt fyrir sund til að flytja upplýsingar. 715 00:41:57,393 --> 00:42:05,440 716 00:42:05,440 --> 00:42:09,290 >> D3 er ótrúlega öflugur bókasafn og ótrúlega vel að keyra. 717 00:42:09,290 --> 00:42:12,260 Þetta er einhver öflugur efni. 718 00:42:12,260 --> 00:42:15,960 Gögn visualization er ótrúlega öflugur tól 719 00:42:15,960 --> 00:42:21,530 til að flytja fólki djúpt innsýn sem fær að kjarna þeirra 720 00:42:21,530 --> 00:42:25,430 og hjálpar þeim að skilja, í þetta mikil og leiðandi leið, 721 00:42:25,430 --> 00:42:29,760 hvernig gögn virkar og hvernig gögn breytingar líf okkar. 722 00:42:29,760 --> 00:42:31,019