1 00:00:00,000 --> 00:00:00,780 2 00:00:00,780 --> 00:00:11,880 >> [Музички] 3 00:00:11,880 --> 00:00:16,480 >> ДАВИД CHOUINARD: Јас сум Давид Chouinard, а тоа е Д3. 4 00:00:16,480 --> 00:00:17,700 Добредојдовте. 5 00:00:17,700 --> 00:00:21,270 Ние ќе се запознаат со Д3 денес. 6 00:00:21,270 --> 00:00:25,020 D3 е да го вклучите Javascript рамка за изградба на висок квалитет 7 00:00:25,020 --> 00:00:28,110 интерактивна визуелизација за веб. 8 00:00:28,110 --> 00:00:30,870 Работи како она што ние сме гледајќи во задниот дел од мене, 9 00:00:30,870 --> 00:00:34,230 ние ќе треба да научат да прават оние работи, вид на основите на неа. 10 00:00:34,230 --> 00:00:36,452 Но, тоа се случува да биде кул. 11 00:00:36,452 --> 00:00:38,160 Ајде да започнеме правење убави слики. 12 00:00:38,160 --> 00:00:41,108 13 00:00:41,108 --> 00:00:44,350 Имаме повеќе демонстрации од перспектива на располагање. 14 00:00:44,350 --> 00:00:48,040 15 00:00:48,040 --> 00:00:50,760 Ајде да го прават тоа. 16 00:00:50,760 --> 00:00:58,700 >> ЧИН I, ДОМ manipulation-- ние ќе за да започнете веднаш правење интересни нешта. 17 00:00:58,700 --> 00:01:01,240 Прво на сите, на левата страна, имаме код. 18 00:01:01,240 --> 00:01:03,470 На десната страна, имаме резултат на нашиот код. 19 00:01:03,470 --> 00:01:04,900 Ајде да одиме низ него. 20 00:01:04,900 --> 00:01:05,780 >> Да се ​​направи круг. 21 00:01:05,780 --> 00:01:08,570 Како прави тоа звук? 22 00:01:08,570 --> 00:01:14,934 svg.append circle-- ние само го направија еден круг. 23 00:01:14,934 --> 00:01:16,100 Вие не ми верувате, нели? 24 00:01:16,100 --> 00:01:18,190 Тоа не е таму. 25 00:01:18,190 --> 00:01:21,830 >> Значи она што го правевме токму тука е, SVG е скалабилни векторска графика. 26 00:01:21,830 --> 00:01:27,530 Ова е начинот на кој ние се каже на прелистувачот да направи вектор графика во прелистувачот. 27 00:01:27,530 --> 00:01:30,740 Она што го направија во моментов се додава круг да ги пребарувате. 28 00:01:30,740 --> 00:01:34,790 >> Ветувањето е дека кругот бара малку на основните атрибути 29 00:01:34,790 --> 00:01:36,850 пред ние всушност може да се види тоа. 30 00:01:36,850 --> 00:01:40,045 Ние треба да го кажам својот x позиција, нејзините y позиција, нејзиниот радиус. 31 00:01:40,045 --> 00:01:43,310 Ние не го каже некој од тоа, па ние не го гледаме сега. 32 00:01:43,310 --> 00:01:46,210 Но, ајде да го кажам нешто. 33 00:01:46,210 --> 00:01:49,510 >> Значи прво на сите, имаш да им дадеме на нашите круг име. 34 00:01:49,510 --> 00:01:53,070 Значи, ајде да го наречеме круг. 35 00:01:53,070 --> 00:01:54,406 Нашите круг има име сега. 36 00:01:54,406 --> 00:01:57,230 37 00:01:57,230 --> 00:01:59,490 И ајде да се даде неколку атрибути. 38 00:01:59,490 --> 00:02:03,690 Како за CX би центар x, па центарот на x позиција. 39 00:02:03,690 --> 00:02:06,730 Да речеме, 200 за 200 пиксели. 40 00:02:06,730 --> 00:02:10,220 >> Ајде да го даде Y од 200 пиксели, како и. 41 00:02:10,220 --> 00:02:16,032 И r, радиус, од околу 40 пиксели. 42 00:02:16,032 --> 00:02:16,950 Сега да видиме. 43 00:02:16,950 --> 00:02:21,740 44 00:02:21,740 --> 00:02:23,440 Јас не може да се опишат. 45 00:02:23,440 --> 00:02:30,430 46 00:02:30,430 --> 00:02:31,520 >> Таму да одите. 47 00:02:31,520 --> 00:02:37,330 Имаме круг на позиција 200 пиксели, од 200 пиксели, радиус од 40 пиксели. 48 00:02:37,330 --> 00:02:38,280 Вид на кул, нели? 49 00:02:38,280 --> 00:02:38,988 Имаме круг. 50 00:02:38,988 --> 00:02:40,880 Да. 51 00:02:40,880 --> 00:02:42,670 >> Значи нема потреба да го следат заедно. 52 00:02:42,670 --> 00:02:45,790 Сите овие примери, сите кодот јас го правам денес 53 00:02:45,790 --> 00:02:51,300 ќе бидат обезбедени онлајн на крајот во форма на интерактивна примери 54 00:02:51,300 --> 00:02:54,010 со контролни пунктови на секој акт, и така натаму. 55 00:02:54,010 --> 00:02:55,160 >> Ајде да направиме повеќе нешта. 56 00:02:55,160 --> 00:02:58,901 Оваа црна круг е навистина грди. 57 00:02:58,901 --> 00:03:01,541 Жал ми е за таа грешка пораки во право таму. 58 00:03:01,541 --> 00:03:05,340 Не одиме. 59 00:03:05,340 --> 00:03:06,350 >> Ајде да го даде боја. 60 00:03:06,350 --> 00:03:07,170 Како е тоа? 61 00:03:07,170 --> 00:03:08,340 Ми се допаѓа да го челик сина боја. 62 00:03:08,340 --> 00:03:13,280 63 00:03:13,280 --> 00:03:16,030 Па, нашите круг промени на бојата. 64 00:03:16,030 --> 00:03:17,320 Тоа е одлично. 65 00:03:17,320 --> 00:03:31,330 Да се ​​направи тоа полу-транспарентен too-- полу-транспарентен. 66 00:03:31,330 --> 00:03:33,670 >> Значи ова се атрибути ние сме дефинирање на кругот. 67 00:03:33,670 --> 00:03:36,774 Првото нешто што ние го сторивме е ние се стави круг на оваа страница. 68 00:03:36,774 --> 00:03:38,690 И тогаш ние сме дефинирање еден куп на атрибути. 69 00:03:38,690 --> 00:03:41,610 Некои од нив се бара, како CX, CY, и радиус. 70 00:03:41,610 --> 00:03:42,680 И другите се опционални. 71 00:03:42,680 --> 00:03:44,730 >> Постојат многу повеќе атрибути. 72 00:03:44,730 --> 00:03:46,760 Има многу од нив. 73 00:03:46,760 --> 00:03:53,070 На пример, ние би можеле да имаат мозочниот удар, мозочен удар на црвено. 74 00:03:53,070 --> 00:03:55,630 Но, ајде да ја отстрани. 75 00:03:55,630 --> 00:04:00,450 Ние сме назад во круг, син круг. 76 00:04:00,450 --> 00:04:01,600 >> Значи, да се направи повеќе кругови. 77 00:04:01,600 --> 00:04:02,810 Како е тоа? 78 00:04:02,810 --> 00:04:04,665 Да се ​​направи уште еден круг. 79 00:04:04,665 --> 00:04:05,985 Ова е возбудлив, нели? 80 00:04:05,985 --> 00:04:09,630 81 00:04:09,630 --> 00:04:12,300 >> Така велат Јас само копи-пејст она што веќе го имале. 82 00:04:12,300 --> 00:04:13,570 Ајде да го наречеме circle2. 83 00:04:13,570 --> 00:04:15,840 И ајде да го стори токму истото и го даде 84 00:04:15,840 --> 00:04:20,450 атрибути, со оглед на х позицијата на 300. 85 00:04:20,450 --> 00:04:24,140 Yay, имаме две кружници сега. 86 00:04:24,140 --> 00:04:27,240 >> И, се разбира, ние би можеле да ажурирање на овие вредности. 87 00:04:27,240 --> 00:04:31,640 Јас може да го стави на 400, а сега таа се движи. 88 00:04:31,640 --> 00:04:35,470 И бидејќи тоа е досадно, ајде извадете го, па circle2.remove. 89 00:04:35,470 --> 00:04:39,000 90 00:04:39,000 --> 00:04:40,730 Тоа е нема сега. 91 00:04:40,730 --> 00:04:43,170 >> Значи она што го правиш и е само многу, very-- ова 92 00:04:43,170 --> 00:04:46,030 е многу слично на она што можел да направи во jQuery, на пример. 93 00:04:46,030 --> 00:04:48,240 Ние сме само манипулирање ДОМ, се вика. 94 00:04:48,240 --> 00:04:50,040 Можеби сте слушнале дека пред зборот. 95 00:04:50,040 --> 00:04:53,255 Ние сме создавање работи, поставување атрибути на работи, отстранување нешта. 96 00:04:53,255 --> 00:04:58,950 97 00:04:58,950 --> 00:05:02,360 >> Сега, тука е местото каде што станува интересно. 98 00:05:02,360 --> 00:05:07,250 Така подоцна во кодот, ние би можеле уште се однесува на оригиналната круг тука. 99 00:05:07,250 --> 00:05:14,100 Значи, да ги ресетирате својот атрибут на CX. 100 00:05:14,100 --> 00:05:18,260 Да речеме, нејзината позиција х 400. 101 00:05:18,260 --> 00:05:22,406 И јас одам да транзиција тоа, па тоа е очигледно. 102 00:05:22,406 --> 00:05:23,360 Не одиме. 103 00:05:23,360 --> 00:05:24,780 >> Значи ние додаде круг. 104 00:05:24,780 --> 00:05:26,440 Ние го поставите на некои атрибути. 105 00:05:26,440 --> 00:05:28,210 Додадовме уште еден круг, ја извади. 106 00:05:28,210 --> 00:05:31,650 И тогаш ние сме менување оригинални круг. 107 00:05:31,650 --> 00:05:35,400 >> Но, тука е местото каде што станува многу поинтересна. 108 00:05:35,400 --> 00:05:39,070 Не само што може да се постави атрибути како само вредности, може да се каже, 109 00:05:39,070 --> 00:05:41,610 Еј, круг, оди во позиција 200. 110 00:05:41,610 --> 00:05:44,540 Ние, исто така може да ги поставите како функции. 111 00:05:44,540 --> 00:05:48,850 >> Така, наместо да даваат 400 овде, можеме да направиме некои пресметка 112 00:05:48,850 --> 00:05:53,950 во лет за она што ние сакам тоа атрибут за да биде. 113 00:05:53,950 --> 00:05:56,580 Значи ова е како што би го изразат тоа. 114 00:05:56,580 --> 00:06:00,660 Велиме, наместо 400, дозволете ми ви даде функцијата, наместо. 115 00:06:00,660 --> 00:06:04,180 И тука, во внатрешноста на оваа функција, ние може да направи било луд пресметка. 116 00:06:04,180 --> 00:06:06,820 >> Ние би можеле да се преземат на време и гледам во некои други нешто 117 00:06:06,820 --> 00:06:11,230 и динамично се одлучи за кругот што вредност сакаме. 118 00:06:11,230 --> 00:06:15,266 Како за ние само се откажат тоа случаен x позиција? 119 00:06:15,266 --> 00:06:20,360 120 00:06:20,360 --> 00:06:21,120 Значи тоа е тоа. 121 00:06:21,120 --> 00:06:25,490 >> Значи она што вели дека е, за Секој Х, ја извршите оваа функција. 122 00:06:25,490 --> 00:06:29,340 И она што го правиш е пресметување некои работи, по случаен избор пати ширина 123 00:06:29,340 --> 00:06:30,410 и да се врати тоа. 124 00:06:30,410 --> 00:06:34,765 Значи, секој пат кога ние се кандидира тоа, ние се добие круг што оди на случаен место. 125 00:06:34,765 --> 00:06:36,394 Тоа е вид на кул. 126 00:06:36,394 --> 00:06:38,310 Се чувствувам како да може да се погледне во ова за малку. 127 00:06:38,310 --> 00:06:44,274 128 00:06:44,274 --> 00:06:46,440 Ние сме почнуваат да се дојде до нешто интересно овде. 129 00:06:46,440 --> 00:06:49,120 130 00:06:49,120 --> 00:06:51,390 Да се ​​направи ова на податоци управувано сега. 131 00:06:51,390 --> 00:06:53,420 Нема податоци овде. 132 00:06:53,420 --> 00:06:54,482 Ајде да го промени тоа. 133 00:06:54,482 --> 00:06:57,440 134 00:06:57,440 --> 00:07:12,140 >> ЧИН II, податоци Управувано Documents-- Значи, да се вратиме тука. 135 00:07:12,140 --> 00:07:15,340 И ајде да се ослободи од circle2, бидејќи ние сме само додавање и отстранување на 136 00:07:15,340 --> 00:07:15,840 тоа. 137 00:07:15,840 --> 00:07:17,382 Значи ние навистина не е потребно. 138 00:07:17,382 --> 00:07:21,421 Ние треба да се биде многу умен тука. 139 00:07:21,421 --> 00:07:23,170 Да речеме, имаме некои податоци на некој вид. 140 00:07:23,170 --> 00:07:31,540 141 00:07:31,540 --> 00:07:40,020 Еден moment-- да речеме, имавме податоци на оваа форма. 142 00:07:40,020 --> 00:07:41,800 Ние имавме низа, само еден куп на броеви. 143 00:07:41,800 --> 00:07:45,750 Имаме седум броеви, без оглед на овие represent-- износ 144 00:07:45,750 --> 00:07:48,810 во банкарска сметка на луѓето, како колку тие тежат, бог знае што. 145 00:07:48,810 --> 00:07:51,310 >> Овие се броеви, и ние сакате да го користите нашите кругови 146 00:07:51,310 --> 00:07:53,240 да ги претставуваат оние броеви некако. 147 00:07:53,240 --> 00:07:55,515 Ние сакаме да се врзуваат за нашите кругови на оние броеви. 148 00:07:55,515 --> 00:07:58,750 149 00:07:58,750 --> 00:07:59,626 Значи она што го правиме. 150 00:07:59,626 --> 00:08:01,500 Да речеме, сакаме круг за секој број. 151 00:08:01,500 --> 00:08:03,590 Ние може да направи стариот нешто што се doing-- 152 00:08:03,590 --> 00:08:06,020 круг додавај и circle2 и circle3. 153 00:08:06,020 --> 00:08:10,020 Но, ова излегува од рака, и има многу на повторување логика. 154 00:08:10,020 --> 00:08:12,760 >> Значи, да се попаметниот со тоа. 155 00:08:12,760 --> 00:08:17,810 Наместо да се користи var круг svg.append дека бевме само користи, 156 00:08:17,810 --> 00:08:21,580 ние сме случува да се користи овој мал блок тука. 157 00:08:21,580 --> 00:08:24,510 Не сакам да одам во-длабочината на во она што сите овие делови се направи. 158 00:08:24,510 --> 00:08:26,020 И тоа е вид на напредна тема. 159 00:08:26,020 --> 00:08:27,830 И посакувам да можев. 160 00:08:27,830 --> 00:08:31,370 >> Но, клучна работа е да recognize-- и ќе видите многу често е во Д3 код. 161 00:08:31,370 --> 00:08:36,840 Овој блок од текст основните создава како многу кругови 162 00:08:36,840 --> 00:08:41,360 колку што има елементи на податоците во оваа низа, токму тука. 163 00:08:41,360 --> 00:08:53,420 164 00:08:53,420 --> 00:08:55,780 Значи ова создава толку многу кругови постојат елементи. 165 00:08:55,780 --> 00:08:58,520 Тоа се случува да ни создаде седум кругови. 166 00:08:58,520 --> 00:09:01,710 И тоа го прави навистина, навистина клучна работа. 167 00:09:01,710 --> 00:09:02,460 Значи, да се кандидира тоа. 168 00:09:02,460 --> 00:09:05,460 Да се ​​отстранат другите наши круг. 169 00:09:05,460 --> 00:09:09,565 Ајде само коментираше овој скратено надвор и да ја стартувате тоа повторно. 170 00:09:09,565 --> 00:09:13,840 171 00:09:13,840 --> 00:09:15,260 >> Не одиме. 172 00:09:15,260 --> 00:09:18,030 Така, нашето круг тука е многу потемна, бидејќи ние 173 00:09:18,030 --> 00:09:20,720 имаат седум кругови, еден на врвот на друга. 174 00:09:20,720 --> 00:09:25,425 Ние само се создаде седум кругови, еден секој за секоја од овие податоци елементи. 175 00:09:25,425 --> 00:09:28,860 Но, има една клучна работа што се случи со овој фрагмент, токму тука. 176 00:09:28,860 --> 00:09:31,030 >> Тоа е дека податоците биле врзани. 177 00:09:31,030 --> 00:09:33,440 Значи секој еден од тие податоци елементи, 178 00:09:33,440 --> 00:09:38,830 10, 45, 105, е обврзан на одреден круг. 179 00:09:38,830 --> 00:09:40,960 Затоа, не само овие создаден еден куп на кругови 180 00:09:40,960 --> 00:09:43,420 но ги врзува овие две работи заедно. 181 00:09:43,420 --> 00:09:48,740 >> И во иднина, бидејќи ние создадовме тие кругови со оваа Д3 функција, 182 00:09:48,740 --> 00:09:52,430 ако јас ви даде круг, можете да ми даде податоците поврзани со неа. 183 00:09:52,430 --> 00:09:53,280 Значи можеме да поставиме Д3. 184 00:09:53,280 --> 00:09:54,840 Еј, Д3, имам овој круг. 185 00:09:54,840 --> 00:09:57,350 Што е податокот дека кругот? 186 00:09:57,350 --> 00:10:01,290 И Д3 ќе ни каже 10 или 45 или 105. 187 00:10:01,290 --> 00:10:02,380 >> Овие нешта се врзани. 188 00:10:02,380 --> 00:10:04,490 Тоа е многу, многу фундаментален концепт. 189 00:10:04,490 --> 00:10:06,070 Да ги погледнеме на тоа. 190 00:10:06,070 --> 00:10:12,210 >> Значи начинот на кој ние ќе побара D3-- така ова е ирелевантно за ова, 191 00:10:12,210 --> 00:10:16,620 но само ми верувате на неа. 192 00:10:16,620 --> 00:10:17,620 Ова е како ние бараме Д3. 193 00:10:17,620 --> 00:10:21,312 Еј, Д3, дај ми прв круг што може да се најдат. 194 00:10:21,312 --> 00:10:23,580 Дај ми првиот круг може да се најдат. 195 00:10:23,580 --> 00:10:29,660 И тогаш ние би можеле да побараат Д3, она што е податоците за тоа, како оваа, 10. 196 00:10:29,660 --> 00:10:33,380 >> Значи ние само побарајте Д3, најдете ме првиот круг може да се најдат. 197 00:10:33,380 --> 00:10:34,400 Што има своите податоци? 198 00:10:34,400 --> 00:10:36,650 10, кој е навистина нашата Првиот елемент на податок. 199 00:10:36,650 --> 00:10:42,150 Можевме да го прашам, еј, Д3, ни се најде нашиот трет круг. 200 00:10:42,150 --> 00:10:44,450 105. 201 00:10:44,450 --> 00:10:45,740 Зошто е ова важно? 202 00:10:45,740 --> 00:10:49,790 203 00:10:49,790 --> 00:10:52,250 >> Значи, токму тука, јас спомнав кои би можеле да се користат функции. 204 00:10:52,250 --> 00:10:54,910 И јас спомнав дека беше многу моќна работа. 205 00:10:54,910 --> 00:11:03,070 Затоа, не само што може да функционира нашето прават работите како што прават некои пресметка, на пример, 206 00:11:03,070 --> 00:11:09,170 се врати на случаен број, може да исто така, се прават работите врз основа на податоците. 207 00:11:09,170 --> 00:11:11,550 Тоа е она што значи податоци управувано документи. 208 00:11:11,550 --> 00:11:13,750 Тоа е она што Д3 застапува. 209 00:11:13,750 --> 00:11:17,800 >> Значи ова x postition-- наместо на само велејќи, сите кругови, 210 00:11:17,800 --> 00:11:21,735 добие x 200 позиција, ние може да го даде во функција. 211 00:11:21,735 --> 00:11:26,140 212 00:11:26,140 --> 00:11:30,140 И тука, можеме да направиме некои пресметка. 213 00:11:30,140 --> 00:11:33,710 и d тука стои во место за податоци. 214 00:11:33,710 --> 00:11:36,120 Така што секој пат имаме круг, во основа, 215 00:11:36,120 --> 00:11:37,750 Д3 ќе се создадат овие седум кругови. 216 00:11:37,750 --> 00:11:38,500 И тогаш за секој 217 00:11:38,500 --> 00:11:41,920 >> круг, тоа се случува да одам, еј, circle1 она што е вашата x позиција. 218 00:11:41,920 --> 00:11:45,210 Претходно, ние бевме секогаш одговарање 200. 219 00:11:45,210 --> 00:11:48,630 Но, сега, во секое време Д3 прашува Што има вашиот x позиција, 220 00:11:48,630 --> 00:11:51,790 тоа се случува да им даде us-- имаме тој круг, па ние имаме податоците. 221 00:11:51,790 --> 00:11:55,290 Тоа се случува да ни даде податоци и да каже, што сакаш изложбата да биде, 222 00:11:55,290 --> 00:11:57,120 врз основа на тие податоци. 223 00:11:57,120 --> 00:11:59,590 >> Ајде само да се вратат вистинските податоци. 224 00:11:59,590 --> 00:12:04,910 Значи, ако ние ја извршите оваа, ова му дава ни податоци управувано документи. 225 00:12:04,910 --> 00:12:08,040 Овие кругови се базираат во однос position-- 226 00:12:08,040 --> 00:12:11,120 тие се основа како функција на податоците. 227 00:12:11,120 --> 00:12:13,100 >> Значи за прв круг, Д3 става круг. 228 00:12:13,100 --> 00:12:16,770 И тогаш Д3 бара од нас, што прават сакате изложбата да биде. 229 00:12:16,770 --> 00:12:19,620 А ние само се каже, без разлика на податоци. 230 00:12:19,620 --> 00:12:21,185 Направете експозиција 10. 231 00:12:21,185 --> 00:12:26,320 >> Потоа го прашува, што сакаш на Изложбата ќе биде за вториот круг. 232 00:12:26,320 --> 00:12:27,270 И ние се одговори, 45. 233 00:12:27,270 --> 00:12:30,000 234 00:12:30,000 --> 00:12:32,230 И ние, се разбира, може да направи некои пресметка тука. 235 00:12:32,230 --> 00:12:35,510 Сметам дека тие кругови се вид на squished до. 236 00:12:35,510 --> 00:12:38,965 >> Значи тоа се размножуваат со 3, помножи податоци од страна на 3. 237 00:12:38,965 --> 00:12:41,870 238 00:12:41,870 --> 00:12:43,840 Нашите круг само што влегов прошири надвор. 239 00:12:43,840 --> 00:12:46,730 Нашите вредност е трипати. 240 00:12:46,730 --> 00:12:51,010 >> Кругот е навистина на работ, па ајде можеби вид на тоа офсет. 241 00:12:51,010 --> 00:12:53,632 Да речеме, од 20. 242 00:12:53,632 --> 00:12:56,070 Овде и да одите. 243 00:12:56,070 --> 00:12:57,590 >> Ова е визуелизација на податоците. 244 00:12:57,590 --> 00:13:01,767 Тоа е многу основни, но овој ни дава увид во нашите податоци. 245 00:13:01,767 --> 00:13:04,600 Тоа ни кажува дека, на пример, ние имаат малку кластер на елементи. 246 00:13:04,600 --> 00:13:06,340 И ние имаме голем поодалечена тука. 247 00:13:06,340 --> 00:13:10,830 Ова ни дава некои информации за дистрибуција. 248 00:13:10,830 --> 00:13:20,830 >> Ако бевме, на пример, да се промени податоците до 150 тука и освежи, 249 00:13:20,830 --> 00:13:22,630 нашите визуелизација се менува. 250 00:13:22,630 --> 00:13:24,285 Овој документ е податоци управувано. 251 00:13:24,285 --> 00:13:32,640 252 00:13:32,640 --> 00:13:36,180 >> Па се разбира, сите овие елементи, сите овие атрибути тука, 253 00:13:36,180 --> 00:13:38,430 можеме да го користиме во функција, а не само со броеви, а не само 254 00:13:38,430 --> 00:13:39,900 на x и y позиции. 255 00:13:39,900 --> 00:13:42,120 Значи, можеме да го користиме функција за боја. 256 00:13:42,120 --> 00:13:45,260 257 00:13:45,260 --> 00:13:46,360 Затоа ние ќе го стори истото. 258 00:13:46,360 --> 00:13:49,360 Ние ќе го даде функција. 259 00:13:49,360 --> 00:13:52,320 >> И да речеме, ние би можеле да имаат conditionals во нашата функција. 260 00:13:52,320 --> 00:13:54,770 Оваа функција може да биде стотици линии долго. 261 00:13:54,770 --> 00:13:57,150 Што може да направи многу, многу комплицирани работи. 262 00:13:57,150 --> 00:13:59,080 >> Значи, да се стави ако изјавата тука. 263 00:13:59,080 --> 00:14:03,420 Да речеме, ако нашите податоци е помалку од 50, тоа е некое преодно 264 00:14:03,420 --> 00:14:05,817 дека ние сме заинтересирани во некоја причина. 265 00:14:05,817 --> 00:14:06,650 Да се ​​направи тоа зелени. 266 00:14:06,650 --> 00:14:09,830 267 00:14:09,830 --> 00:14:15,320 Инаку, ајде да се направи тоа во црвено. 268 00:14:15,320 --> 00:14:16,110 Како е тоа? 269 00:14:16,110 --> 00:14:19,630 270 00:14:19,630 --> 00:14:21,220 Ница. 271 00:14:21,220 --> 00:14:24,860 >> Значи, нашата визуелизација на податоците почнува да пренесе повеќе интересни информации 272 00:14:24,860 --> 00:14:26,727 на многу канали. 273 00:14:26,727 --> 00:14:28,560 Така, сега знаете малку за дистрибуција. 274 00:14:28,560 --> 00:14:31,768 И знаеме дека има некој вид на отсечени во 50, дека ние сме заинтересирани. 275 00:14:31,768 --> 00:14:35,630 Знаеме дека постојат две поени под прагот, а повеќето од нив 276 00:14:35,630 --> 00:14:36,130 погоре. 277 00:14:36,130 --> 00:14:41,510 278 00:14:41,510 --> 00:14:46,160 >> Значи, како последен чекор, овие податоци тука, тоа е многу ретко да се види ова како тоа. 279 00:14:46,160 --> 00:14:52,610 Значи, ајде да го исели на променлива затоа што тоа е почиста, вака. 280 00:14:52,610 --> 00:15:02,980 281 00:15:02,980 --> 00:15:05,197 И потоа ние ги користиме таа променлива тука. 282 00:15:05,197 --> 00:15:06,280 Тоа е иста работа. 283 00:15:06,280 --> 00:15:07,280 Тоа е само малку почист. 284 00:15:07,280 --> 00:15:25,300 285 00:15:25,300 --> 00:15:35,300 >> Потоа, акт III, Scales-- Значи еден проблем во право 286 00:15:35,300 --> 00:15:38,920 тука е, ако ги менуваме нашите Податоците во оваа 200 value-- 287 00:15:38,920 --> 00:15:41,685 ако го смените 400 или нешто и освежи, 288 00:15:41,685 --> 00:15:44,540 тогаш оваа вредност само отиде offscreen. 289 00:15:44,540 --> 00:15:49,040 Значи, нашата логика, токму тука за тоа како тоа го правиме на времето 3 290 00:15:49,040 --> 00:15:52,570 и 20, да го шират и потоа надомести тоа малку е навистина clunky. 291 00:15:52,570 --> 00:15:54,150 >> Што прават тие бројки значат? 292 00:15:54,150 --> 00:15:55,400 Тие се само хард кодирани таму. 293 00:15:55,400 --> 00:15:58,830 И тие се многу врзани за податоци. 294 00:15:58,830 --> 00:16:00,550 Сакаме податоци управувано документ. 295 00:16:00,550 --> 00:16:05,460 Ние сакаме многу флексибилен документ, дека со оглед на податоците, се прилагодува на него 296 00:16:05,460 --> 00:16:07,900 и тој претставува. 297 00:16:07,900 --> 00:16:11,330 >> Она што е потребно е во основа, ние имаат оваа спектар на броеви 10. 298 00:16:11,330 --> 00:16:12,640 45, 105. 299 00:16:12,640 --> 00:16:17,630 И ние сакаме да го мапираат дека излез ширина, по целата ширина тука. 300 00:16:17,630 --> 00:16:20,620 Значи имаме на опсегот на броеви и оди од 0 до 100. 301 00:16:20,620 --> 00:16:24,980 И ние имаме овој кампус Јас оди 20-700, во овој случај. 302 00:16:24,980 --> 00:16:26,515 >> Ние вид на сакаат да планирам што натаму. 303 00:16:26,515 --> 00:16:30,002 Ние сакаме да скала дека и тогаш тоа се надомести малку. 304 00:16:30,002 --> 00:16:33,165 Излегува дека Д3 има овие. 305 00:16:33,165 --> 00:16:34,220 Таа се вика скала. 306 00:16:34,220 --> 00:16:37,410 307 00:16:37,410 --> 00:16:38,250 Значи, да го користам. 308 00:16:38,250 --> 00:16:46,300 309 00:16:46,300 --> 00:16:49,670 >> Начинот на кој works-- Одам да тип овој, а потоа се објасни. 310 00:16:49,670 --> 00:17:01,530 311 00:17:01,530 --> 00:17:02,450 Ова е скала. 312 00:17:02,450 --> 00:17:08,670 Што да се направи, тоа ќе планирам вредности 1-200 на 20 до 600. 313 00:17:08,670 --> 00:17:10,990 Ние може да се провери тоа. 314 00:17:10,990 --> 00:17:13,329 Можеме да видиме дека тука. 315 00:17:13,329 --> 00:17:21,704 >> Значи, ако јас се хранат 1-- еден момент. 316 00:17:21,704 --> 00:17:47,764 317 00:17:47,764 --> 00:17:48,555 Дај ми една секунда. 318 00:17:48,555 --> 00:17:53,680 319 00:17:53,680 --> 00:17:55,080 Морам да го погрешиле. 320 00:17:55,080 --> 00:18:15,320 321 00:18:15,320 --> 00:18:15,990 Таму да одите. 322 00:18:15,990 --> 00:18:17,930 Жал ми е за тоа. 323 00:18:17,930 --> 00:18:22,050 >> Значи она што скала ќе направи е, тоа ќе потрае вредност 324 00:18:22,050 --> 00:18:24,930 а потоа се конвертира тоа, се прошири тоа надвор, така што 325 00:18:24,930 --> 00:18:27,320 го исполнува целиот спектар си бара. 326 00:18:27,320 --> 00:18:32,910 Значи во овој случај, ако ние го даде еден, тоа се случува да се на сајтот, кој излезе на 20. 327 00:18:32,910 --> 00:18:37,750 И ако ние го даде 200, тоа е одат за да на сајтот дека на 600. 328 00:18:37,750 --> 00:18:40,460 И некаде помеѓу, ако добиеме 100, тоа е 329 00:18:40,460 --> 00:18:44,610 ќе биде некаде меѓу 20 и 600. 330 00:18:44,610 --> 00:18:51,480 >> И, се разбира, сега тоа е она што ние треба да ги отстрани оние хард кодирани 331 00:18:51,480 --> 00:18:53,402 работите што ги имаат право таму. 332 00:18:53,402 --> 00:18:55,950 Значи она што сакате да го направите е ги податоците што сме 333 00:18:55,950 --> 00:19:00,950 со оглед дека индивидуалните податоци елемент, и го давате да скала во прв план. 334 00:19:00,950 --> 00:19:02,635 Значи обем ќе ја скала нагоре. 335 00:19:02,635 --> 00:19:27,020 336 00:19:27,020 --> 00:19:48,880 >> Well-- О, имаме малку грешка тука. 337 00:19:48,880 --> 00:19:50,120 Ние сме податоците кои недостасуваат. 338 00:19:50,120 --> 00:19:51,290 Таму да одите. 339 00:19:51,290 --> 00:19:58,550 340 00:19:58,550 --> 00:19:59,550 И тоа се проширува надвор. 341 00:19:59,550 --> 00:20:01,383 >> Тоа ни дава за истото Резултатот ги имале од порано, 342 00:20:01,383 --> 00:20:04,030 но наместо оние хард кодирани ограничувања. 343 00:20:04,030 --> 00:20:07,790 И ако големината на нашите платно промени, на пример, 344 00:20:07,790 --> 00:20:11,790 Ако сакаме да имаме повеќе од тоа 400 пиксели и тоа squishes надвор, 345 00:20:11,790 --> 00:20:15,440 можеме да го имаат over-- ние може да се прошири, или ние 346 00:20:15,440 --> 00:20:21,890 може да ја намали оваа левата маргина на нешто помалку или повеќе од 20. 347 00:20:21,890 --> 00:20:25,470 Овие броеви, овие хард кодирани броеви сега да има смисла за нас. 348 00:20:25,470 --> 00:20:28,110 349 00:20:28,110 --> 00:20:30,520 >> И ние може да направи многу повеќе интересни работи, како и. 350 00:20:30,520 --> 00:20:35,990 Така, наместо да има линеарна скала, ние можеби ќе сакате да се логирате скала. 351 00:20:35,990 --> 00:20:37,840 И тоа ќе ни даде најавите скала. 352 00:20:37,840 --> 00:20:41,269 >> Па сега нашата скала, наместо само проширување дека опсег, 353 00:20:41,269 --> 00:20:42,810 таа го прави повеќе софистицирани нешта. 354 00:20:42,810 --> 00:20:48,790 355 00:20:48,790 --> 00:20:53,790 Наместо да се има овој опсег тешко кодирани, и наместо тоа 600, 356 00:20:53,790 --> 00:20:58,465 ние можеби ќе сакате да се само користење на ширина, па од 20 до ширината минус 40, 357 00:20:58,465 --> 00:21:02,392 2 пати на маргина на другата страна. 358 00:21:02,392 --> 00:21:05,350 И ова го прави многу повеќе смисла да се некој кој може да се погледне на кодот. 359 00:21:05,350 --> 00:21:08,080 360 00:21:08,080 --> 00:21:11,850 >> Интересно, на скали да се добие многу, многу софистицирани, како и. 361 00:21:11,850 --> 00:21:13,350 Тие го прават многу интересни работи. 362 00:21:13,350 --> 00:21:17,620 Значи скали не мора нужно да работат само со броеви. 363 00:21:17,620 --> 00:21:18,955 Ајде да се создаде боја скала. 364 00:21:18,955 --> 00:21:23,120 365 00:21:23,120 --> 00:21:26,120 >> Значи, нашата палета може да be-- наш домен е од 1 до 200. 366 00:21:26,120 --> 00:21:28,220 Тоа е влезен работа. 367 00:21:28,220 --> 00:21:33,793 Но, ние би сакале да карта од зелена во црвена, на пример. 368 00:21:33,793 --> 00:21:39,710 369 00:21:39,710 --> 00:21:42,910 И сега, ако го помине 1, ние си оди за да се добие зелено. 370 00:21:42,910 --> 00:21:45,110 Ако ние го даде 200, ние ќе добиете црвена боја. 371 00:21:45,110 --> 00:21:49,480 И ако можеме да го давате нешто помеѓу, тоа се случува да биде некој микс на тоа, 372 00:21:49,480 --> 00:21:52,520 некаде на градиент помеѓу зелена и црвена боја. 373 00:21:52,520 --> 00:21:55,210 >> И наместо да има овој вид на clunky логика 374 00:21:55,210 --> 00:21:58,550 имаме тука со условно право, таму, 375 00:21:58,550 --> 00:22:03,250 би можеле да имаат something-- на линеарна скала помеѓу нив. 376 00:22:03,250 --> 00:22:07,100 Значи, ние би го користите на скалата ние само создаден, кој се нарекува боја. 377 00:22:07,100 --> 00:22:09,060 А ние би го D, кој е нашите податоци елемент. 378 00:22:09,060 --> 00:22:14,250 379 00:22:14,250 --> 00:22:15,060 И таму ќе одиме. 380 00:22:15,060 --> 00:22:18,070 Имаме боја скала. 381 00:22:18,070 --> 00:22:18,940 >> Значи ова е мапирање. 382 00:22:18,940 --> 00:22:20,960 Значи многу лево е сосема зелени. 383 00:22:20,960 --> 00:22:22,560 Екстремната десница е целосно црвено. 384 00:22:22,560 --> 00:22:24,828 И што ќе се памети е функција на d. 385 00:22:24,828 --> 00:22:33,369 386 00:22:33,369 --> 00:22:35,160 Имаме интересна визуализации тука. 387 00:22:35,160 --> 00:22:36,952 Но нашите податоци беше вид на здодевни. 388 00:22:36,952 --> 00:22:39,410 Ајде да видиме што можеме да направиме ако имавме повеќе интересни податоци. 389 00:22:39,410 --> 00:22:44,420 390 00:22:44,420 --> 00:22:50,500 >> ЧИН IV, кои работат со Data-- првото нешто 391 00:22:50,500 --> 00:22:53,560 ние треба да направите за да ја направиме нашата визуелизација поинтересна 392 00:22:53,560 --> 00:22:56,140 е да се преселат на податоци на друго место. 393 00:22:56,140 --> 00:22:58,310 Тоа е многу clunky да имаат податоците хард кодирани тука. 394 00:22:58,310 --> 00:23:01,220 И, генерално, ќе се прашуваат некој друг за податоци. 395 00:23:01,220 --> 00:23:05,400 Ќе се можеби бара од Владата, на Бирото за попис, што е вашите податоци 396 00:23:05,400 --> 00:23:10,170 а потоа заговор дека или се бара некои трети лице за некои податоци 397 00:23:10,170 --> 00:23:13,330 а потоа градење на визуелизација на тоа. 398 00:23:13,330 --> 00:23:17,170 >> Така првото нешто што сакате да направите, е тоа да се преселат на друго место. 399 00:23:17,170 --> 00:23:24,130 Па јас одам да се создаде поднесе тука наречен data.json. 400 00:23:24,130 --> 00:23:25,600 JSON е форматот на податоците. 401 00:23:25,600 --> 00:23:29,210 Вие не треба да се знае многу за тоа. 402 00:23:29,210 --> 00:23:33,210 И ние ќе треба да го копирате малку податоци имаме таму, 403 00:23:33,210 --> 00:23:40,330 ставете го во таму дословно, одете назад кон нашите визуелизација код 404 00:23:40,330 --> 00:23:45,362 тука, и ја користите оваа функција, токму тука. 405 00:23:45,362 --> 00:23:46,820 Вие не треба да ги знаат сите детали. 406 00:23:46,820 --> 00:23:49,800 Но, она што ова ќе го направите е, ќе најдете дека датотека, 407 00:23:49,800 --> 00:23:51,780 го земе, и вратете го на нас. 408 00:23:51,780 --> 00:24:11,660 409 00:24:11,660 --> 00:24:15,220 Па што тоа не е, тоа оди и да добијат data.json датотека. 410 00:24:15,220 --> 00:24:18,570 И тогаш сите кодот што е вовлечен inside-- суштина, 411 00:24:18,570 --> 00:24:21,800 сите кодот што треба there-- ќе работи само кога ќе го добиете податоци назад. 412 00:24:21,800 --> 00:24:25,760 И тогаш тоа се случува да се кандидира дека код со податоците што ги имаме. 413 00:24:25,760 --> 00:24:28,870 Голема, ние имаме визуелизација дека пребарувања 414 00:24:28,870 --> 00:24:31,390 за некои кодот некаде друго, што е обично 415 00:24:31,390 --> 00:24:36,110 каде што некои податоци од пребарувања некаде на друго место, што е обично 416 00:24:36,110 --> 00:24:38,656 како визуализации работа. 417 00:24:38,656 --> 00:24:41,400 >> Но, јас сакам да се вратам на податоците. 418 00:24:41,400 --> 00:24:48,030 Па податоците фундаментално во D3-- Д3 троши податоци тоа е листа на работи. 419 00:24:48,030 --> 00:24:53,000 Д3 очекува податоци само да биде листа работи, низа на работи. 420 00:24:53,000 --> 00:24:58,780 Тоа не е важно она што тие нешта се, се додека тоа е низа од нив. 421 00:24:58,780 --> 00:25:02,460 >> Па еве, на пример, би можеле на Се разбира дека со подвижна запирка вредности. 422 00:25:02,460 --> 00:25:04,830 Ние би можеле да имаат негативни. 423 00:25:04,830 --> 00:25:09,400 Д3 не се грижи, толку долго како што е списокот на работите. 424 00:25:09,400 --> 00:25:13,270 >> Како интересни работи што би можеле да имаат, ние би можеле, исто така, 425 00:25:13,270 --> 00:25:19,410 имаат листа на жици како што. 426 00:25:19,410 --> 00:25:25,440 Значи овие се Кримсон наслови Јас зедов пред неколку дена. 427 00:25:25,440 --> 00:25:29,220 А можеби можете да најдете некои интересни работи во врска со овие наслови. 428 00:25:29,220 --> 00:25:30,970 >> Значи, повторно, ова е листа на нештата. 429 00:25:30,970 --> 00:25:32,360 Д3 не се грижи. 430 00:25:32,360 --> 00:25:35,572 Овие се случи да биде стринг. 431 00:25:35,572 --> 00:25:36,530 Ние ги промени нашите податоци. 432 00:25:36,530 --> 00:25:38,210 >> Да се ​​вратиме на нашите визуелизација. 433 00:25:38,210 --> 00:25:42,495 Сега, нашите визуелизација очекува влезот да биде броеви. 434 00:25:42,495 --> 00:25:44,370 Значи ние се случува да имаат да се направат неколку промени. 435 00:25:44,370 --> 00:25:47,180 436 00:25:47,180 --> 00:25:52,180 Така на пример, прв од сите, можеби ние сакаме да се стави овие кругови заедно 437 00:25:52,180 --> 00:25:56,870 од должината на наслов, бројот на карактери во насловот. 438 00:25:56,870 --> 00:26:03,600 >> Значи она што ние ќе направиме is-- секој пат кога нашите функција се нарекува со еден конец, 439 00:26:03,600 --> 00:26:09,095 ние ќе најдете тоа е должина и потоа го положат дека на скалата. 440 00:26:09,095 --> 00:26:11,550 Бојата, јас ќе се врати дека за челик сина боја. 441 00:26:11,550 --> 00:26:19,060 442 00:26:19,060 --> 00:26:20,420 И таму ќе одиме. 443 00:26:20,420 --> 00:26:23,190 Имаме визуелизација на Crimson наслови. 444 00:26:23,190 --> 00:26:25,500 >> Нашите скала е малку надвор. 445 00:26:25,500 --> 00:26:29,680 Ајде да се претпостави дека најдолгиот Насловот е долг 100 карактери, 446 00:26:29,680 --> 00:26:32,244 така span дека од малку. 447 00:26:32,244 --> 00:26:33,410 И ние имаме визуелизација. 448 00:26:33,410 --> 00:26:36,710 Така, се чини дека повеќето наслови се прилично блиску, 449 00:26:36,710 --> 00:26:38,750 во однос на ликот на линија. 450 00:26:38,750 --> 00:26:41,200 Но, еден навистина се издвојува. 451 00:26:41,200 --> 00:26:46,660 >> Ние би можеле да се изгради некои алатки за да истражуваат што повеќе. 452 00:26:46,660 --> 00:26:50,710 Но, кога се работи за тоа, јас бев интересира дали, во оваа група на податоци, 453 00:26:50,710 --> 00:26:53,880 наслови со дебелото црево во нив ќе биде подолг. 454 00:26:53,880 --> 00:26:55,770 Се претпоставува дека би. 455 00:26:55,770 --> 00:26:56,660 >> Па ајде да дознаете. 456 00:26:56,660 --> 00:27:00,650 Ајде да го користите боја канал како што правевме досега, 457 00:27:00,650 --> 00:27:04,540 да се кодираат некои за тоа дали има дебелото црево или не. 458 00:27:04,540 --> 00:27:07,220 Значи ние ќе користат условна повторно. 459 00:27:07,220 --> 00:27:09,350 Вие не треба да знаете деталите на ова, 460 00:27:09,350 --> 00:27:14,260 Но, ова е како да се провери стринг за одреден карактер 461 00:27:14,260 --> 00:27:16,355 во JavaScript, повторно, не е важно. 462 00:27:16,355 --> 00:27:18,910 463 00:27:18,910 --> 00:27:23,270 >> Но, ако ние не се најде дебелото црево, ние ќе се врати зелена. 464 00:27:23,270 --> 00:27:26,100 И ако тоа го правиме, ние ќе се врати во црвено. 465 00:27:26,100 --> 00:27:29,010 Значи, повторно, наслови кои имаат дебелото црево ќе биде црвено. 466 00:27:29,010 --> 00:27:34,980 Тоа е она што ова means-- убаво. 467 00:27:34,980 --> 00:27:38,040 >> Така ми се чини дека мојот хипотеза се bumped. 468 00:27:38,040 --> 00:27:39,360 Има само две. 469 00:27:39,360 --> 00:27:42,380 Имаме само шест поени на податоци а само две имаа две точки. 470 00:27:42,380 --> 00:27:45,510 Но, се чини малку повеќе на долниот крај, всушност. 471 00:27:45,510 --> 00:27:47,830 Определување со запирки изгледа генерално да биде пократок, 472 00:27:47,830 --> 00:27:52,370 барем во нашите податоци set-- интересно. 473 00:27:52,370 --> 00:27:55,830 >> Да се ​​вратиме тоа да челик сина и потоа да видиме 474 00:27:55,830 --> 00:28:00,601 она што може да се направи дури и со повеќе интересни податоци. 475 00:28:00,601 --> 00:28:04,370 476 00:28:04,370 --> 00:28:09,070 Значи, повторно, јас спомнав дека податоци во Д3 е листа на работи. 477 00:28:09,070 --> 00:28:11,080 Видовме број на многу видови. 478 00:28:11,080 --> 00:28:12,810 Видовме жици. 479 00:28:12,810 --> 00:28:15,700 Но, она што, исто така, можат да бидат предмет. 480 00:28:15,700 --> 00:28:20,080 >> Тие можат да бидат комплицирани работи кои вклучуваат многу работи. 481 00:28:20,080 --> 00:28:24,510 Да се ​​каже дека повеќе од јасно, во повеќето случаи, 482 00:28:24,510 --> 00:28:28,384 сакате да се изгради секоја точка со податоци како покомплициран отколку само една вредност. 483 00:28:28,384 --> 00:28:30,175 Ако сакате да се замисли база на податоци за учениците, 484 00:28:30,175 --> 00:28:32,470 може да има еден студент име, студентски проект, 485 00:28:32,470 --> 00:28:36,370 и многу работи поврзани со посебен рекорд, 486 00:28:36,370 --> 00:28:39,834 не само низа или број. 487 00:28:39,834 --> 00:28:40,750 Значи, ајде да ги разгледаме во тоа. 488 00:28:40,750 --> 00:28:55,180 489 00:28:55,180 --> 00:28:56,760 >> Ова е една од тие податоци. 490 00:28:56,760 --> 00:28:59,090 Ова е група на податоци за земјотресите. 491 00:28:59,090 --> 00:29:01,910 492 00:29:01,910 --> 00:29:08,430 Значи се што тука на нашата листа или низа на работите содржи многу нешта себе. 493 00:29:08,430 --> 00:29:11,380 Така што секој податок има големината и координација. 494 00:29:11,380 --> 00:29:13,425 И се координира содржи две работи. 495 00:29:13,425 --> 00:29:15,960 496 00:29:15,960 --> 00:29:20,450 >> Така што секој ден е сега многу повеќе комплициран и многу поинтересна 497 00:29:20,450 --> 00:29:22,700 и содржи многу повеќе интересни информации. 498 00:29:22,700 --> 00:29:26,730 Ајде да видиме што може да се изгради од тоа. 499 00:29:26,730 --> 00:29:36,130 Враќање кон овде, повторно, со користење нашите хистограм круг визуелизација 500 00:29:36,130 --> 00:29:42,110 ние сме изградени, ајде да видиме дали можеме да се изгради визуелизација на дистрибуција големина 501 00:29:42,110 --> 00:29:43,305 во нашата група на податоци. 502 00:29:43,305 --> 00:29:45,850 503 00:29:45,850 --> 00:29:48,660 >> Па еве, тоа е истиот концепт. 504 00:29:48,660 --> 00:29:51,920 Но сега, г содржи повеќе работи. 505 00:29:51,920 --> 00:29:54,780 г содржи многу елементи на податоците. 506 00:29:54,780 --> 00:29:57,946 Значи ние се г назад. 507 00:29:57,946 --> 00:29:59,670 Д3 ни дава г. 508 00:29:59,670 --> 00:30:06,080 И ние ќе одговориме со наоѓање на големината на г а потоа поминува тоа да скала. 509 00:30:06,080 --> 00:30:08,490 >> И тогаш ние треба да се промени нашата скала, се разбира. 510 00:30:08,490 --> 00:30:12,980 Значи величини едноставно не одат многу повеќе од 10. 511 00:30:12,980 --> 00:30:15,485 Всушност, таму никогаш не било земјотрес од 10 степени. 512 00:30:15,485 --> 00:30:19,360 Но, тоа е вид на нашите горниот крајот, нашата горниот спектар. 513 00:30:19,360 --> 00:30:20,240 >> Ајде да се одмориме. 514 00:30:20,240 --> 00:30:22,990 Ница, имаме визуелизација. 515 00:30:22,990 --> 00:30:25,490 Интересно е да се note-- така постојат два поени на податоци кои 516 00:30:25,490 --> 00:30:29,010 се речиси точно на врвот на секоја други, во смисла на големина. 517 00:30:29,010 --> 00:30:31,350 Гледаш ова од страна на непроѕирноста ние сме со користење. 518 00:30:31,350 --> 00:30:40,810 519 00:30:40,810 --> 00:30:42,690 >> Имаме географски податоци сега. 520 00:30:42,690 --> 00:30:44,710 Имаме ширини и должина. 521 00:30:44,710 --> 00:30:47,549 Можеби би можеле да се направи нешто многу поинтересна со тоа. 522 00:30:47,549 --> 00:30:49,590 Ајде да се најдат некои повеќе Интересен начин да се визуелизира 523 00:30:49,590 --> 00:30:53,500 ова покомплицирано Податоците што ги имаме пристап до. 524 00:30:53,500 --> 00:31:04,950 >> Акт V, Mapping-- основа, ние сакаме да се стават овие на мапа. 525 00:31:04,950 --> 00:31:07,690 Мислам, ова е местото каде што тоа се случува. 526 00:31:07,690 --> 00:31:13,130 Ние сакаме да се кодираат информации за позицијата на овие земјотрес читања, 527 00:31:13,130 --> 00:31:16,350 како и нивната големина, бидејќи имаме тоа сега. 528 00:31:16,350 --> 00:31:21,310 Се разбере како да се консумираат покомплицирано податоци. 529 00:31:21,310 --> 00:31:26,200 >> Првото нешто што ние ќе го направиме е направи мапа, во позадина на сајтот. 530 00:31:26,200 --> 00:31:29,360 Одам да поминат низ тоа многу брзо. 531 00:31:29,360 --> 00:31:30,560 Ова е незгодно код. 532 00:31:30,560 --> 00:31:33,110 Тоа е уште едно од оние рецепти навистина не 533 00:31:33,110 --> 00:31:35,690 Мора да се разбере целосно за вас да го користите. 534 00:31:35,690 --> 00:31:38,510 535 00:31:38,510 --> 00:31:39,740 Но, ова е кодот. 536 00:31:39,740 --> 00:31:43,580 Овој код токму тука создава мапа. 537 00:31:43,580 --> 00:31:45,730 >> Ние нема да одиме во детали. 538 00:31:45,730 --> 00:31:54,210 Но, површно, она што го прави тоа е, тоа пребарувања овој us.json датотека, која 539 00:31:54,210 --> 00:31:57,150 е датотека на податоци како оној што го имале од порано. 540 00:31:57,150 --> 00:31:59,150 Тоа е посложена, се разбира. 541 00:31:59,150 --> 00:32:02,920 Но, во овој случај, сè, секој податок е оваа држава 542 00:32:02,920 --> 00:32:05,420 и има листа на ширини и должина 543 00:32:05,420 --> 00:32:10,500 кои го дефинираат полигон, таа форма, таа држава. 544 00:32:10,500 --> 00:32:13,280 >> Значи она што Д3 ќе го направите е слична на она што беше порано. 545 00:32:13,280 --> 00:32:18,140 Тоа ќе побара и кои се врзуваат на елемент. 546 00:32:18,140 --> 00:32:20,890 И таму е функција која ќе сајтот елементот надвор, 547 00:32:20,890 --> 00:32:23,410 врз основа на географска ширина и должина. 548 00:32:23,410 --> 00:32:24,580 Можете да прочитате повеќе за тоа. 549 00:32:24,580 --> 00:32:27,385 И јас го препорачувам. 550 00:32:27,385 --> 00:32:30,090 >> Постојат линкови на крајот на овој код испратени. 551 00:32:30,090 --> 00:32:31,570 И кодот е коментираше. 552 00:32:31,570 --> 00:32:34,050 Во постојат врски за понатамошна за ова. 553 00:32:34,050 --> 00:32:36,590 Јас Ви препорачуваме да го погледнете. 554 00:32:36,590 --> 00:32:39,460 Но, она што се грижат за се оваа проекција функција. 555 00:32:39,460 --> 00:32:41,210 Сакам да одам преку тоа. 556 00:32:41,210 --> 00:32:43,522 >> Прво на сите, дозволете ми да покаже што дека, да, ние имаме карта. 557 00:32:43,522 --> 00:32:47,300 558 00:32:47,300 --> 00:32:49,970 Мапите се излади. 559 00:32:49,970 --> 00:32:52,330 Значи, да се погледне на овој производство функција. 560 00:32:52,330 --> 00:32:56,481 >> Проекција е многу како скала, Вага повторно. 561 00:32:56,481 --> 00:32:59,210 Значи она што се производство за оваа проекција функција 562 00:32:59,210 --> 00:33:06,610 не е, ние би можеле да го помине Лонгитуда latitudes-- и во овој случај, 563 00:33:06,610 --> 00:33:09,590 овие вредности тука се лат-копнее на објектот 564 00:33:09,590 --> 00:33:13,990 Седиме во право now-- проекцијата. 565 00:33:13,990 --> 00:33:20,560 И проекција ќе се претвори дека во x и y пиксел вредности. 566 00:33:20,560 --> 00:33:23,300 >> Значи она што го прави проекција е многу слична на нашата скала. 567 00:33:23,300 --> 00:33:27,270 Тоа е преземање нашите географски широчини и должина, што претставува целиот свет 568 00:33:27,270 --> 00:33:31,390 и намалување на големината и дека одредување на плоштадот што го сакаме, 569 00:33:31,390 --> 00:33:33,510 дека ние сме ја дал. 570 00:33:33,510 --> 00:33:35,220 Во овој случај, ние сме донесување на овие вредности. 571 00:33:35,220 --> 00:33:41,370 И тоа е давање на нас, и тоа на вашиот екран значи 640 пиксели. 572 00:33:41,370 --> 00:33:46,250 Целиот овој екран е 700 пиксели широк, така што нè прави за тука, 573 00:33:46,250 --> 00:33:53,310 и 154 пиксели надолу, што би проценка е доста тука. 574 00:33:53,310 --> 00:33:57,250 >> Па земајќи оние лат-копнее, која претставува нешто за целиот свет 575 00:33:57,250 --> 00:34:02,850 и squishing и подвижни дека околу за нас x и y пиксели вредности даде, 576 00:34:02,850 --> 00:34:05,450 ова е првото нешто што е направи во оваа мапирање код. 577 00:34:05,450 --> 00:34:07,920 И тогаш остатокот на кодот троши на податоци 578 00:34:07,920 --> 00:34:14,310 а потоа мапи оние лат-копнее кон нешто на вашиот екран. 579 00:34:14,310 --> 00:34:18,380 >> Но, ние ќе го користат оваа проекција функции, затоа што се покажува 580 00:34:18,380 --> 00:34:20,270 имаме лат-копнее копнее, како и. 581 00:34:20,270 --> 00:34:24,509 Гледајќи назад на нашите податоци, имаме ширини и должина 582 00:34:24,509 --> 00:34:25,425 за секој набљудување. 583 00:34:25,425 --> 00:34:28,131 584 00:34:28,131 --> 00:34:29,130 Значи, ајде да го користат проекција. 585 00:34:29,130 --> 00:34:33,250 586 00:34:33,250 --> 00:34:37,639 >> Значи гледа во нашите експозиција, ние сакаме нашите exposition-- 587 00:34:37,639 --> 00:34:39,590 имаме географска ширина и должина. 588 00:34:39,590 --> 00:34:40,770 Но, ние сакаме пиксел вредности. 589 00:34:40,770 --> 00:34:43,510 И излегува, имаме точно она што want-- проекција. 590 00:34:43,510 --> 00:34:46,239 Многу како бевме користејќи скала токму тука, 591 00:34:46,239 --> 00:34:52,075 ние сме сега ќе се користи проекција и да го координира. 592 00:34:52,075 --> 00:34:55,241 593 00:34:55,241 --> 00:34:56,949 Така првото нешто ние сме doing-- па ние сме 594 00:34:56,949 --> 00:35:01,520 добивање d, кој е индивидуално податоци елемент на индивидуален земјотрес 595 00:35:01,520 --> 00:35:02,370 читање. 596 00:35:02,370 --> 00:35:04,640 Првото нешто што го правиме е да се добие координатите. 597 00:35:04,640 --> 00:35:06,150 Добро, имаме координати. 598 00:35:06,150 --> 00:35:09,160 >> Втората работа што ја правиме е мине на проекцијата. 599 00:35:09,160 --> 00:35:13,440 Проекција конвертира овие координати во pixel вредности, x и y. 600 00:35:13,440 --> 00:35:16,680 И тогаш последното нешто што ние сакате да направите е само да се добие x, 601 00:35:16,680 --> 00:35:19,342 што овој случај е првиот. 602 00:35:19,342 --> 00:35:22,050 Тоа е првата од двете нешта кои се вратија од проекција. 603 00:35:22,050 --> 00:35:27,840 604 00:35:27,840 --> 00:35:29,630 >> Ние ќе го стори истото за y. 605 00:35:29,630 --> 00:35:34,960 Но, наместо тоа, ќе се врати вториот елемент, на y. 606 00:35:34,960 --> 00:35:35,980 Подгответе се да се одмориме. 607 00:35:35,980 --> 00:35:39,830 608 00:35:39,830 --> 00:35:46,450 Ooh, екстра карактер here-- убаво, имаме 609 00:35:46,450 --> 00:35:51,730 податоци управувано документ кој е прикривањето на тоа JSON датотека на предмети, 610 00:35:51,730 --> 00:35:57,560 правење на мапа, и менување на атрибут во однос на податоци 611 00:35:57,560 --> 00:35:59,600 да го проектираат на мапа. 612 00:35:59,600 --> 00:36:00,840 Ова е навистина интересно. 613 00:36:00,840 --> 00:36:03,770 Тоа е кул. 614 00:36:03,770 --> 00:36:05,640 >> Ајде да се земе до еден степен. 615 00:36:05,640 --> 00:36:08,795 Мислам, имаме две парчиња информации со секој податок. 616 00:36:08,795 --> 00:36:10,000 Мислам, три. 617 00:36:10,000 --> 00:36:12,540 Имаме координати, кој е x и y. 618 00:36:12,540 --> 00:36:15,700 И ние имаме големина. 619 00:36:15,700 --> 00:36:17,420 >> Ние треба да се кодираат големината на некој начин. 620 00:36:17,420 --> 00:36:18,920 Имаме голем број на канали. 621 00:36:18,920 --> 00:36:20,370 Ние може да се користи боја. 622 00:36:20,370 --> 00:36:21,890 Можеме да го користиме радиус. 623 00:36:21,890 --> 00:36:23,040 Ние може да се користи транспарентноста. 624 00:36:23,040 --> 00:36:25,540 Ние може да се користи многу работи во кодот. 625 00:36:25,540 --> 00:36:29,180 Секој од овие атрибути и многу повеќе кои не се наведени таму, 626 00:36:29,180 --> 00:36:33,065 затоа што тие се опционални, ние би можеле да го користите да се кодираат овие податоци, мозочен удар 627 00:36:33,065 --> 00:36:35,670 и сите овие работи што сум споменат. 628 00:36:35,670 --> 00:36:36,690 >> Да направиме радиус. 629 00:36:36,690 --> 00:36:38,830 Мислам дека радиус е најстариот интуитивен. 630 00:36:38,830 --> 00:36:46,210 Значи, повторно, ние ќе го замени тоа хард-кодирани 40 и да прават пресметки. 631 00:36:46,210 --> 00:36:48,810 Ние ќе ги користат нашите омилени скала повторно. 632 00:36:48,810 --> 00:36:50,290 И ние сме минатото г. 633 00:36:50,290 --> 00:36:55,850 Но, не D, бидејќи ние сакаме големината на d. d е само на податоците точка. 634 00:36:55,850 --> 00:36:57,430 Ќе помине на големината на скалата. 635 00:36:57,430 --> 00:36:58,470 >> Ајде да се обидеме тоа повторно. 636 00:36:58,470 --> 00:37:00,230 Ooh, тоа не функционира. 637 00:37:00,230 --> 00:37:02,940 Зошто не функционира тоа? 638 00:37:02,940 --> 00:37:04,387 >> Значи се сеќавам она што скала го прави тоа. 639 00:37:04,387 --> 00:37:05,470 Да ги погледнеме на скала повторно. 640 00:37:05,470 --> 00:37:10,800 Скалата карти од 1 до 10 на до 22 до 600, повеќе или помалку. 641 00:37:10,800 --> 00:37:12,030 600 е огромна. 642 00:37:12,030 --> 00:37:14,730 Ова е причината зошто ние сме добивање ова. 643 00:37:14,730 --> 00:37:18,420 >> Значи, сакаме да ги промениме нашите скала до нешто повеќе разумни. 644 00:37:18,420 --> 00:37:22,610 Да речеме, ние сакаме 0 до 60. 645 00:37:22,610 --> 00:37:25,340 60 е голема, но 10 земјотреси се неверојатно ретки. 646 00:37:25,340 --> 00:37:27,880 Всушност, тие никогаш не сум се случило. 647 00:37:27,880 --> 00:37:31,830 >> Па што ова ќе направите, е, тоа ќе потрае нашите степени кој оди од 1 до 10 648 00:37:31,830 --> 00:37:34,490 и го сајтот за да ја прошири надвор. 649 00:37:34,490 --> 00:37:37,370 И го сајтот на 0 за 60 години. 650 00:37:37,370 --> 00:37:38,840 Ајде да се одмориме. 651 00:37:38,840 --> 00:37:41,850 >> Ница, имаме визуелизација. 652 00:37:41,850 --> 00:37:42,500 Ова е одлично. 653 00:37:42,500 --> 00:37:43,736 Ова е вистински податоци. 654 00:37:43,736 --> 00:37:46,360 Ќе забележите, во мојата мала играчка На пример, најголемиот земјотрес 655 00:37:46,360 --> 00:37:49,417 е правото на врвот на нас. 656 00:37:49,417 --> 00:37:50,000 Но, тоа е тоа. 657 00:37:50,000 --> 00:37:54,422 Имаме датум управувано визуелизација кој троши на податоци 658 00:37:54,422 --> 00:37:56,255 и ни дава навистина интересни информации. 659 00:37:56,255 --> 00:38:02,600 660 00:38:02,600 --> 00:38:06,420 Да, да додадете некои интерактивност за тоа. 661 00:38:06,420 --> 00:38:08,675 Јас спомнав дека беше силна сила на Д3. 662 00:38:08,675 --> 00:38:11,490 663 00:38:11,490 --> 00:38:15,060 >> Па еве, за секој елемент, ние сме опишувајќи еден куп на атрибути. 664 00:38:15,060 --> 00:38:20,230 Но, ние, исто така, може да се опише она што сакаме да се случи со интерактивноста елементи. 665 00:38:20,230 --> 00:38:26,190 На пример, ние може да се опише Што се случува кога глушецот над. 666 00:38:26,190 --> 00:38:28,740 667 00:38:28,740 --> 00:38:33,640 И многу сличен тоа, дека ќе преземе функција, 668 00:38:33,640 --> 00:38:36,700 многу сличен на атрибути имавме порано, 669 00:38:36,700 --> 00:38:44,650 каде што можеме да се направи нешто на елемент кога ќе лебдат над неа. 670 00:38:44,650 --> 00:38:47,100 >> Значи, прво нешто што треба да направите е да изберете кој елемент, 671 00:38:47,100 --> 00:38:49,435 за да го најдете во основа, во прелистувачот. 672 00:38:49,435 --> 00:38:57,090 673 00:38:57,090 --> 00:39:00,920 и потоа ќе можеме да ги атрибут на него. 674 00:39:00,920 --> 00:39:06,870 Значи она што го правам тука е, кога лебдиш за нешто, ние ќе добиете тој елемент 675 00:39:06,870 --> 00:39:11,197 а потоа во собата својата непроѕирност назад на 1, за да се матна. 676 00:39:11,197 --> 00:39:12,488 Ајде да видиме што изгледа тоа. 677 00:39:12,488 --> 00:39:29,430 678 00:39:29,430 --> 00:39:39,080 >> Се чини дека имаме дополнителни запирка тука. 679 00:39:39,080 --> 00:39:42,420 Значи, ако ние лебдат над тука, таа добива целосна. 680 00:39:42,420 --> 00:39:46,530 681 00:39:46,530 --> 00:39:48,960 Но, сега, се разбира, останува целосно, затоа што ние 682 00:39:48,960 --> 00:39:53,240 треба да се опише она што се случува кога се отстрани нашите курсорот. 683 00:39:53,240 --> 00:39:59,990 Значи, да го прават токму тоа на mouseout, за разлика од Посочете. 684 00:39:59,990 --> 00:40:06,399 >> И ние ќе го ресетираат она што го имавме before-- 0.5. 685 00:40:06,399 --> 00:40:10,260 И сега, секој пат кога ние лебдиш, да добиеме полн круг. 686 00:40:10,260 --> 00:40:13,468 Тоа ни помага да видиме што можеме ние сме изборот суштина. 687 00:40:13,468 --> 00:40:19,210 688 00:40:19,210 --> 00:40:22,860 >> И сега ајде да се направи ова е навистина голема. 689 00:40:22,860 --> 00:40:26,210 Ајде да се поврзете на оваа реални податоци. 690 00:40:26,210 --> 00:40:30,890 Значи, да побара можев USGS за нивните податоци. 691 00:40:30,890 --> 00:40:35,630 Значи САД за геолошко истражување има податоци за земјотресите. 692 00:40:35,630 --> 00:40:41,460 Тие имаат јавни API, што е во можност да се конзумира во JSON формат. 693 00:40:41,460 --> 00:40:42,548 Значи, да го направите тоа. 694 00:40:42,548 --> 00:40:49,730 695 00:40:49,730 --> 00:40:55,900 >> Значи ова е малку на код кој се поврзува со USGS API. 696 00:40:55,900 --> 00:40:57,990 И таму е малку на обработка на неа. 697 00:40:57,990 --> 00:41:02,200 Тоа не е важно, но тоа се поедноставува со едноставен формат на податоци, како онаа 698 00:41:02,200 --> 00:41:03,800 имавме порано. 699 00:41:03,800 --> 00:41:08,140 Па јас се ослободи од нашиот повик да нашите лажни data.json на датотеката. 700 00:41:08,140 --> 00:41:13,110 И наместо тоа, јас го повикувам на USGS суштина. 701 00:41:13,110 --> 00:41:16,700 >> Ајде да се освежи, ис убаво. 702 00:41:16,700 --> 00:41:21,260 Ова е вистински, реални податоци од оваа недела за земјотреси. 703 00:41:21,260 --> 00:41:23,217 Ова е навистина интересно. 704 00:41:23,217 --> 00:41:25,050 Ова не е изненадувачки за нас, но има 705 00:41:25,050 --> 00:41:27,909 многу земјотреси на Западниот брег, во Калифорнија. 706 00:41:27,909 --> 00:41:30,950 Но, јас мислев дека тоа е многу интересно дека имало толку многу земјотреси 707 00:41:30,950 --> 00:41:34,350 во Аљаска, и очигледно, тука во Среден Запад. 708 00:41:34,350 --> 00:41:37,630 Мислам, интересни, но и ние сме добри. 709 00:41:37,630 --> 00:41:40,410 Тоа е заклучокот. 710 00:41:40,410 --> 00:41:43,760 >> Но, во основа, овој Д3 е она што ни помага да се направи. 711 00:41:43,760 --> 00:41:48,030 Тоа ни помага да ги преземат податоците, услови да елементи во ДОМ, 712 00:41:48,030 --> 00:41:51,620 и имаат оние елементи промени како функција на податоци, 713 00:41:51,620 --> 00:41:54,780 имаат оние атрибути, сите многу атрибути на елементите, 714 00:41:54,780 --> 00:41:57,393 сите биде корисно за канали да пренесе информации. 715 00:41:57,393 --> 00:42:05,440 716 00:42:05,440 --> 00:42:09,290 >> Д3 е неверојатно моќна библиотека и неверојатно добро работи. 717 00:42:09,290 --> 00:42:12,260 Ова е дел моќно. 718 00:42:12,260 --> 00:42:15,960 Визуелизација на податоци е неверојатно моќна алатка 719 00:42:15,960 --> 00:42:21,530 за пренесување на луѓето длабоко увиди дека добива на нивните основни 720 00:42:21,530 --> 00:42:25,430 и им помага да се разбере, во Оваа длабока и интуитивен начин, 721 00:42:25,430 --> 00:42:29,760 како на податоци работи и како податоци промени нашиот живот. 722 00:42:29,760 --> 00:42:31,019