1 00:00:00,000 --> 00:00:00,780 2 00:00:00,780 --> 00:00:11,880 >> [REPRODUCCIÓ DE MÚSICA] 3 00:00:11,880 --> 00:00:16,480 >> DAVID Chouinard: Sóc David Chouinard, i això és D3. 4 00:00:16,480 --> 00:00:17,700 Benvingut. 5 00:00:17,700 --> 00:00:21,270 Anem a aprendre sobre D3 avui. 6 00:00:21,270 --> 00:00:25,020 D3 és un marc de JavaScript per a la construcció d'una alta qualitat 7 00:00:25,020 --> 00:00:28,110 visualitzacions interactives per a la web. 8 00:00:28,110 --> 00:00:30,870 Coses com el que som veure darrere meu, 9 00:00:30,870 --> 00:00:34,230 anem a aprendre a fer els coses, classe dels fonaments de la mateixa. 10 00:00:34,230 --> 00:00:36,452 Però serà genial. 11 00:00:36,452 --> 00:00:38,160 Anem a començar fer fotos boniques. 12 00:00:38,160 --> 00:00:41,108 13 00:00:41,108 --> 00:00:44,350 Tenim més donem de perspectives disponibles. 14 00:00:44,350 --> 00:00:48,040 15 00:00:48,040 --> 00:00:50,760 Anem a fer-ho. 16 00:00:50,760 --> 00:00:58,700 >> Acte I, DOM manipulation-- Anem per començar immediatament fent coses interessants. 17 00:00:58,700 --> 00:01:01,240 En primer lloc, a l'esquerra, tenim codi. 18 00:01:01,240 --> 00:01:03,470 A la dreta, tenim el resultat del nostre codi. 19 00:01:03,470 --> 00:01:04,900 Anem a anar a través d'ell. 20 00:01:04,900 --> 00:01:05,780 >> Anem a fer un cercle. 21 00:01:05,780 --> 00:01:08,570 Què et sembla? 22 00:01:08,570 --> 00:01:14,934 svg.append circle-- que acaba de fer un cercle. 23 00:01:14,934 --> 00:01:16,100 No em creu, oi? 24 00:01:16,100 --> 00:01:18,190 No hi és. 25 00:01:18,190 --> 00:01:21,830 >> Així que el que vam fer aquí és, SVG és gràfics vectorials escalables. 26 00:01:21,830 --> 00:01:27,530 Aquesta és la manera en què diem que el navegador fer gràfics vectorials del navegador. 27 00:01:27,530 --> 00:01:30,740 El que acabem de fer en aquest moment s'afegeix un cercle per navegar. 28 00:01:30,740 --> 00:01:34,790 >> La promesa és que el cercle requereix una mica d'atributs bàsics 29 00:01:34,790 --> 00:01:36,850 abans que realment podem veure-ho. 30 00:01:36,850 --> 00:01:40,045 Hem de dir-li que la seva posició x, la seva posició i, el seu radi. 31 00:01:40,045 --> 00:01:43,310 No li vam dir que res d'això, pel que no estem veient ara mateix. 32 00:01:43,310 --> 00:01:46,210 Però anem a dir-li que això. 33 00:01:46,210 --> 00:01:49,510 >> Així que en primer lloc, vostè ha per donar al nostre cercle un nom. 34 00:01:49,510 --> 00:01:53,070 Així que anem a cridar cercle. 35 00:01:53,070 --> 00:01:54,406 El nostre cercle té un nom ara. 36 00:01:54,406 --> 00:01:57,230 37 00:01:57,230 --> 00:01:59,490 I anem a donar-li un parell d'atributs. 38 00:01:59,490 --> 00:02:03,690 Què hi ha de cx es centraria x, de manera que el centre de la posició x. 39 00:02:03,690 --> 00:02:06,730 Diguem, de 200 per 200 píxels. 40 00:02:06,730 --> 00:02:10,220 >> Anem a donar-li un any de 200 píxels també. 41 00:02:10,220 --> 00:02:16,032 I un r, un radi, d'uns 40 píxels. 42 00:02:16,032 --> 00:02:16,950 Ara anem a veure. 43 00:02:16,950 --> 00:02:21,740 44 00:02:21,740 --> 00:02:23,440 Jo no puc escriure. 45 00:02:23,440 --> 00:02:30,430 46 00:02:30,430 --> 00:02:31,520 >> Cal anar. 47 00:02:31,520 --> 00:02:37,330 Comptem amb un cercle a la posició 200 píxels, 200 píxels, radi de 40 píxels. 48 00:02:37,330 --> 00:02:38,280 Una mena de fresc, no? 49 00:02:38,280 --> 00:02:38,988 Tenim un cercle. 50 00:02:38,988 --> 00:02:40,880 Sí. 51 00:02:40,880 --> 00:02:42,670 >> Així que no hi ha necessitat de seguir al llarg. 52 00:02:42,670 --> 00:02:45,790 Tots aquests exemples, totes el codi que estic fent avui 53 00:02:45,790 --> 00:02:51,300 serà proporcionat en línia a l'extrem en forma d'exemples interactius 54 00:02:51,300 --> 00:02:54,010 amb llocs de control a cada acte, i així successivament. 55 00:02:54,010 --> 00:02:55,160 >> Anem a fer més coses. 56 00:02:55,160 --> 00:02:58,901 Aquest cercle negre és realment lleig. 57 00:02:58,901 --> 00:03:01,541 Ho sento per aquest error missatges allà mateix. 58 00:03:01,541 --> 00:03:05,340 Cal anar. 59 00:03:05,340 --> 00:03:06,350 >> Anem a donar-li un color. 60 00:03:06,350 --> 00:03:07,170 Com és això? 61 00:03:07,170 --> 00:03:08,340 M'agrada blau acer. 62 00:03:08,340 --> 00:03:13,280 63 00:03:13,280 --> 00:03:16,030 Bé, el nostre cercle canviar de color. 64 00:03:16,030 --> 00:03:17,320 Això és genial. 65 00:03:17,320 --> 00:03:31,330 Farem que semitransparent també-- semitransparent. 66 00:03:31,330 --> 00:03:33,670 >> Així que aquests són atributs estem definint en el cercle. 67 00:03:33,670 --> 00:03:36,774 El primer que vam fer és posem un cercle a la pàgina. 68 00:03:36,774 --> 00:03:38,690 I després estem definint un grup d'atributs. 69 00:03:38,690 --> 00:03:41,610 Alguns d'aquests estan obligats, com CX, CY, i Ràdio. 70 00:03:41,610 --> 00:03:42,680 I altres són opcionals. 71 00:03:42,680 --> 00:03:44,730 >> Hi ha molts més atributs. 72 00:03:44,730 --> 00:03:46,760 Hi ha un munt d'ells. 73 00:03:46,760 --> 00:03:53,070 Per exemple, podríem tenir un accident cerebrovascular, així, un cop de vermell. 74 00:03:53,070 --> 00:03:55,630 Però anem a treure això. 75 00:03:55,630 --> 00:04:00,450 Estem de tornada a un cercle, un cercle blau. 76 00:04:00,450 --> 00:04:01,600 >> Així que farem més cercles. 77 00:04:01,600 --> 00:04:02,810 Com és això? 78 00:04:02,810 --> 00:04:04,665 Anem a fer un altre cercle. 79 00:04:04,665 --> 00:04:05,985 Això és emocionant, no? 80 00:04:05,985 --> 00:04:09,630 81 00:04:09,630 --> 00:04:12,300 >> Així que dir que m'acaba d'enganxar-Copy el que ja teníem. 82 00:04:12,300 --> 00:04:13,570 Diguem circle2. 83 00:04:13,570 --> 00:04:15,840 I farem l'exacta el mateix i donar-li 84 00:04:15,840 --> 00:04:20,450 atributs, donada una posició x del 300. 85 00:04:20,450 --> 00:04:24,140 Yay, tenim dos cercles ara. 86 00:04:24,140 --> 00:04:27,240 >> I, per descomptat, podríem actualitzar aquests valors. 87 00:04:27,240 --> 00:04:31,640 Jo podria posar a 400, i ara es mou. 88 00:04:31,640 --> 00:04:35,470 I ja que és molest, anem a i eliminar, per circle2.remove. 89 00:04:35,470 --> 00:04:39,000 90 00:04:39,000 --> 00:04:40,730 Ara s'ha anat. 91 00:04:40,730 --> 00:04:43,170 >> Així que el que estem fent i és molt, very-- aquest 92 00:04:43,170 --> 00:04:46,030 és molt similar al que podria fer en jQuery, per exemple. 93 00:04:46,030 --> 00:04:48,240 Només estem manipulant DOM, es diu. 94 00:04:48,240 --> 00:04:50,040 Vostè pot haver sentit aquesta paraula abans. 95 00:04:50,040 --> 00:04:53,255 Estem creant coses, l'establiment de atributs en coses, l'eliminació de la matèria. 96 00:04:53,255 --> 00:04:58,950 97 00:04:58,950 --> 00:05:02,360 >> Ara, aquí és on es posa interessant. 98 00:05:02,360 --> 00:05:07,250 Així que més endavant en el codi, que encara podia consulteu el cercle original aquí. 99 00:05:07,250 --> 00:05:14,100 Així que anem a restablir la seva atribut de cx. 100 00:05:14,100 --> 00:05:18,260 Diguem, la seva posició x 400. 101 00:05:18,260 --> 00:05:22,406 I jo vaig a la transició que, pel que és obvi. 102 00:05:22,406 --> 00:05:23,360 Cal anar. 103 00:05:23,360 --> 00:05:24,780 >> Així que afegim un cercle. 104 00:05:24,780 --> 00:05:26,440 Vam establir alguns atributs. 105 00:05:26,440 --> 00:05:28,210 Afegim un altre cercle, l'eliminem. 106 00:05:28,210 --> 00:05:31,650 I després estem modificant el cercle original. 107 00:05:31,650 --> 00:05:35,400 >> Però aquí és on es posa molt més interessant. 108 00:05:35,400 --> 00:05:39,070 No només podem establir atributs com s'acaba de valors, podem dir, 109 00:05:39,070 --> 00:05:41,610 bo, cercle, anar a la posició 200. 110 00:05:41,610 --> 00:05:44,540 També podem establir com a funcions. 111 00:05:44,540 --> 00:05:48,850 >> Així que en lloc de donar 400 aquí, podem fer una mica de càlcul 112 00:05:48,850 --> 00:05:53,950 sobre la marxa de manera que Vull aquest atribut sigui. 113 00:05:53,950 --> 00:05:56,580 Així que aquesta és la forma en què t'expresses això. 114 00:05:56,580 --> 00:06:00,660 Diem, en lloc de 400, em va deixar donar-li una funció en lloc. 115 00:06:00,660 --> 00:06:04,180 I aquí, a l'interior d'aquesta funció, podem fer qualsevol càlcul boig. 116 00:06:04,180 --> 00:06:06,820 >> Podríem prendre el temps i mirar a una altra cosa 117 00:06:06,820 --> 00:06:11,230 i decidir dinàmicament per el cercle que valor que volem. 118 00:06:11,230 --> 00:06:15,266 Què tal si només donem una posició aleatòria x? 119 00:06:15,266 --> 00:06:20,360 120 00:06:20,360 --> 00:06:21,120 Així que això és tot. 121 00:06:21,120 --> 00:06:25,490 >> Així que el que diu és, per cada x, executen aquesta funció. 122 00:06:25,490 --> 00:06:29,340 I el que estem fent és calcular algunes coses, unes vegades a l'atzar l'ample 123 00:06:29,340 --> 00:06:30,410 i tornar això. 124 00:06:30,410 --> 00:06:34,765 Així que cada vegada que ens trobem, tenim una cercle que va a un lloc a l'atzar. 125 00:06:34,765 --> 00:06:36,394 És una mena de fresc. 126 00:06:36,394 --> 00:06:38,310 Em sento com si pogués mirar en això per una mica. 127 00:06:38,310 --> 00:06:44,274 128 00:06:44,274 --> 00:06:46,440 Estem començant a arribar a alguna cosa interessant aquí. 129 00:06:46,440 --> 00:06:49,120 130 00:06:49,120 --> 00:06:51,390 Farem aquestes dades impulsada ara. 131 00:06:51,390 --> 00:06:53,420 No hi ha dades aquí. 132 00:06:53,420 --> 00:06:54,482 Anem a canviar això. 133 00:06:54,482 --> 00:06:57,440 134 00:06:57,440 --> 00:07:12,140 >> Documents-- acte II, Data Driven Així que anem a tornar a aquí. 135 00:07:12,140 --> 00:07:15,340 I anem a desfer-nos de circle2, perquè només estem afegint i traient 136 00:07:15,340 --> 00:07:15,840 ella. 137 00:07:15,840 --> 00:07:17,382 Així que realment no ho necessitem. 138 00:07:17,382 --> 00:07:21,421 Hem de ser molt més intel·ligent aquí. 139 00:07:21,421 --> 00:07:23,170 Diguem, tenim algunes dades d'algun tipus. 140 00:07:23,170 --> 00:07:31,540 141 00:07:31,540 --> 00:07:40,020 Un moment-- diguem, teníem les dades d'aquest formulari. 142 00:07:40,020 --> 00:07:41,800 Vam tenir una matriu, només un munt de nombres. 143 00:07:41,800 --> 00:07:45,750 Tenim set nombres aquí, qualssevol que aquestes quantitat represent-- 144 00:07:45,750 --> 00:07:48,810 en el compte bancari de la gent, com molt que pesen, déu sap què. 145 00:07:48,810 --> 00:07:51,310 >> Aquests són els números, i ens que desitgi utilitzar els nostres cercles 146 00:07:51,310 --> 00:07:53,240 per representar els nombres d'alguna manera. 147 00:07:53,240 --> 00:07:55,515 Volem vincular la nostra cercles a aquests nombres. 148 00:07:55,515 --> 00:07:58,750 149 00:07:58,750 --> 00:07:59,626 Així que el que fem. 150 00:07:59,626 --> 00:08:01,500 Diguem, volem un cercle per a cada número. 151 00:08:01,500 --> 00:08:03,590 Podríem fer el vell cosa que ens doing-- 152 00:08:03,590 --> 00:08:06,020 append cercle i circle2 i circle3. 153 00:08:06,020 --> 00:08:10,020 Però això va de les mans, i hi ha un munt de repetir la lògica. 154 00:08:10,020 --> 00:08:12,760 >> Així que anem més intel·ligent amb això. 155 00:08:12,760 --> 00:08:17,810 En lloc d'utilitzar el cercle var svg.append que estàvem fent servir, 156 00:08:17,810 --> 00:08:21,580 utilitzarem aquest petit bloc d'aquí. 157 00:08:21,580 --> 00:08:24,510 Jo no vull anar a fons en el que fan totes aquestes parts. 158 00:08:24,510 --> 00:08:26,020 I és una cosa d'un tema avançat. 159 00:08:26,020 --> 00:08:27,830 I m'agradaria poder fer-ho. 160 00:08:27,830 --> 00:08:31,370 >> Però la clau per recognize-- i veuràs que és molt sovint en codi D3. 161 00:08:31,370 --> 00:08:36,840 Aquest bloc de text bàsic crea tants cercles 162 00:08:36,840 --> 00:08:41,360 ja que hi ha elements de dades en aquesta sèrie aquí. 163 00:08:41,360 --> 00:08:53,420 164 00:08:53,420 --> 00:08:55,780 Així com això crea molts cercles, ja que hi ha elements. 165 00:08:55,780 --> 00:08:58,520 Es crearà nosaltres set cercles. 166 00:08:58,520 --> 00:09:01,710 I ho fa d'una cosa molt, molt clau. 167 00:09:01,710 --> 00:09:02,460 Així que anem a córrer això. 168 00:09:02,460 --> 00:09:05,460 Anem a treure el nostre altre cercle. 169 00:09:05,460 --> 00:09:09,565 Anem a comentar aquest separar-se i córrer de nou. 170 00:09:09,565 --> 00:09:13,840 171 00:09:13,840 --> 00:09:15,260 >> Cal anar. 172 00:09:15,260 --> 00:09:18,030 Així que el nostre cercle que aquí hi ha una molt més fosc, perquè 173 00:09:18,030 --> 00:09:20,720 tenen 7 cercles, un a la part superior de l'altra. 174 00:09:20,720 --> 00:09:25,425 Acabem de crear set cercles, un cada un per a cada un d'aquests elements de dades. 175 00:09:25,425 --> 00:09:28,860 Però hi ha una cosa clau que va succeir amb aquest fragment aquí. 176 00:09:28,860 --> 00:09:31,030 >> És que les dades van ser obligats. 177 00:09:31,030 --> 00:09:33,440 Així que cada un aquests elements de dades, 178 00:09:33,440 --> 00:09:38,830 10, 45, 105, estava obligat a un cercle particular. 179 00:09:38,830 --> 00:09:40,960 Així que aquests no només van crear un munt de cercles 180 00:09:40,960 --> 00:09:43,420 però corbates aquestes dues coses juntes. 181 00:09:43,420 --> 00:09:48,740 >> I en el futur, perquè hem creat aquests cercles amb aquesta funció D3, 182 00:09:48,740 --> 00:09:52,430 si et dono un cercle, es pot dóna'm les dades associades amb ell. 183 00:09:52,430 --> 00:09:53,280 Així que podem demanar D3. 184 00:09:53,280 --> 00:09:54,840 Ei, D3, tinc aquest cercle. 185 00:09:54,840 --> 00:09:57,350 Quina és la informació que el cercle té? 186 00:09:57,350 --> 00:10:01,290 I D3 ens diria a 10 o 45 o 105. 187 00:10:01,290 --> 00:10:02,380 >> Aquestes coses estan limitades. 188 00:10:02,380 --> 00:10:04,490 Aquest és un concepte molt, molt fonamental. 189 00:10:04,490 --> 00:10:06,070 Fem una ullada a això. 190 00:10:06,070 --> 00:10:12,210 >> Així que la forma en què li preguntaria D3-- així això és irrellevant per això, 191 00:10:12,210 --> 00:10:16,620 però només confia en mi en ell. 192 00:10:16,620 --> 00:10:17,620 Així és com ens preguntem D3. 193 00:10:17,620 --> 00:10:21,312 Ei, D3, dóna'm la primera cercle que es pot trobar. 194 00:10:21,312 --> 00:10:23,580 Dóna'm el primer cercle que pots trobar. 195 00:10:23,580 --> 00:10:29,660 I llavors podríem preguntar D3, el que és les dades que, d'aquesta manera, 10. 196 00:10:29,660 --> 00:10:33,380 >> Així que només demanem D3, trobar el primer cercle que pots trobar. 197 00:10:33,380 --> 00:10:34,400 Què és les seves dades? 198 00:10:34,400 --> 00:10:36,650 10, que és de fet la nostra primer element de dades. 199 00:10:36,650 --> 00:10:42,150 Podríem demanar-li que, hey, D3, nosaltres trobar el nostre tercer cercle. 200 00:10:42,150 --> 00:10:44,450 105. 201 00:10:44,450 --> 00:10:45,740 Per què és realment important? 202 00:10:45,740 --> 00:10:49,790 203 00:10:49,790 --> 00:10:52,250 >> Així que aquí, he esmentat que podíem utilitzar les funcions. 204 00:10:52,250 --> 00:10:54,910 I vaig esmentar que era una cosa molt poderosa. 205 00:10:54,910 --> 00:11:03,070 Així que no només poden fer les nostres funcions coses com fer algun càlcul, per exemple, 206 00:11:03,070 --> 00:11:09,170 retornar un nombre aleatori, pot també fer coses basades en les dades. 207 00:11:09,170 --> 00:11:11,550 Això és el que signifiquen els documents de dades impulsades. 208 00:11:11,550 --> 00:11:13,750 Això és el D3 representa. 209 00:11:13,750 --> 00:11:17,800 >> Així que aquesta vegada x postition-- de simplement dir, tots els cercles, 210 00:11:17,800 --> 00:11:21,735 obtenir la posició x 200, podria donar-li una funció. 211 00:11:21,735 --> 00:11:26,140 212 00:11:26,140 --> 00:11:30,140 I aquí, podem fer alguns càlculs. 213 00:11:30,140 --> 00:11:33,710 i d aquí es troba en el seu lloc per a les dades. 214 00:11:33,710 --> 00:11:36,120 Així que cada vegada que tenim un cercle, en el fons, 215 00:11:36,120 --> 00:11:37,750 D3 crearà aquests set cercles. 216 00:11:37,750 --> 00:11:38,500 I a continuació, per a cada 217 00:11:38,500 --> 00:11:41,920 >> cercle, es va a anar, hey, circle1 quin és la teva posició x. 218 00:11:41,920 --> 00:11:45,210 Anteriorment, estàvem sempre contestant 200. 219 00:11:45,210 --> 00:11:48,630 Però ara, cada vegada que demana D3 nosaltres quina és la teva posició x, 220 00:11:48,630 --> 00:11:51,790 que donarà a nosaltres-- tenim aquest cercle, el que tenim les dades. 221 00:11:51,790 --> 00:11:55,290 Es va a donar-nos les dades i dir: Què vols que l'exposició sigui, 222 00:11:55,290 --> 00:11:57,120 sobre la base d'aquestes dades. 223 00:11:57,120 --> 00:11:59,590 >> Anem a tornar a les dades reals. 224 00:11:59,590 --> 00:12:04,910 Així que si correm això, això dóna dades ens impulsats documents. 225 00:12:04,910 --> 00:12:08,040 Aquests cercles es basen en relació Position-- 226 00:12:08,040 --> 00:12:11,120 són bases com una funció de les dades. 227 00:12:11,120 --> 00:12:13,100 >> Així que per al primer cercle, D3 posa un cercle. 228 00:12:13,100 --> 00:12:16,770 I llavors D3 ens pregunta, què fer desitja que l'exposició sigui. 229 00:12:16,770 --> 00:12:19,620 I acabem de dir, el que serà la informació. 230 00:12:19,620 --> 00:12:21,185 Feu l'exposició 10. 231 00:12:21,185 --> 00:12:26,320 >> Llavors es pregunta, què és el que desitja que el exposició sigui per al segon cercle. 232 00:12:26,320 --> 00:12:27,270 I nosaltres responem: 45. 233 00:12:27,270 --> 00:12:30,000 234 00:12:30,000 --> 00:12:32,230 I, per descomptat, pot fer algun càlcul aquí. 235 00:12:32,230 --> 00:12:35,510 Em sembla que aquests cercles són una mica aixafat cap amunt. 236 00:12:35,510 --> 00:12:38,965 >> Així es multiplica per 3, multiplicar per 3 les dades. 237 00:12:38,965 --> 00:12:41,870 238 00:12:41,870 --> 00:12:43,840 El nostre cercle acaba d'ampliar a terme. 239 00:12:43,840 --> 00:12:46,730 El nostre valor es va triplicar. 240 00:12:46,730 --> 00:12:51,010 >> El cercle és realment a la vora, així que anem a aquest tipus de compensar-ho. 241 00:12:51,010 --> 00:12:53,632 Diguem, per 20. 242 00:12:53,632 --> 00:12:56,070 Aquí tens. 243 00:12:56,070 --> 00:12:57,590 >> Aquesta és una visualització de dades. 244 00:12:57,590 --> 00:13:01,767 És una pregunta molt bàsica, però això ens dóna una idea de les nostres dades. 245 00:13:01,767 --> 00:13:04,600 Ens diu que, per exemple, que tenir un petit grup d'elements. 246 00:13:04,600 --> 00:13:06,340 I tenim un gran valor atípic aquí. 247 00:13:06,340 --> 00:13:10,830 Això ens dóna una mica d'informació sobre la distribució. 248 00:13:10,830 --> 00:13:20,830 >> Si haguéssim de, per exemple, per canviar les dades a 150 aquí i actualització, 249 00:13:20,830 --> 00:13:22,630 es canvia la nostra visualització. 250 00:13:22,630 --> 00:13:24,285 En aquest document es fa servir la informació. 251 00:13:24,285 --> 00:13:32,640 252 00:13:32,640 --> 00:13:36,180 >> Així que per descomptat, tots aquests elements, tots aquests atributs aquí, 253 00:13:36,180 --> 00:13:38,430 podem utilitzar una funció, no només els números, no només 254 00:13:38,430 --> 00:13:39,900 les posicions x i y. 255 00:13:39,900 --> 00:13:42,120 Així que podem utilitzar una funció per al color. 256 00:13:42,120 --> 00:13:45,260 257 00:13:45,260 --> 00:13:46,360 Així que anem a fer el mateix. 258 00:13:46,360 --> 00:13:49,360 Anem a donar-li una funció. 259 00:13:49,360 --> 00:13:52,320 >> I diguem, podríem tenir condicionals en la nostra funció. 260 00:13:52,320 --> 00:13:54,770 Aquesta funció pot ser centenars de línies llargues. 261 00:13:54,770 --> 00:13:57,150 Es pot fer coses molt, molt complicats. 262 00:13:57,150 --> 00:13:59,080 >> Així que anem a posar una sentència if aquí. 263 00:13:59,080 --> 00:14:03,420 Diguem, si els nostres dades són menys de 50, això és cert llindar 264 00:14:03,420 --> 00:14:05,817 que ens interessa en per alguna raó. 265 00:14:05,817 --> 00:14:06,650 Fem-ho verd. 266 00:14:06,650 --> 00:14:09,830 267 00:14:09,830 --> 00:14:15,320 En cas contrari, farem que el vermell. 268 00:14:15,320 --> 00:14:16,110 Com és això? 269 00:14:16,110 --> 00:14:19,630 270 00:14:19,630 --> 00:14:21,220 Niça. 271 00:14:21,220 --> 00:14:24,860 >> Així que la nostra visualització de dades està començant per transmetre la informació més interessant 272 00:14:24,860 --> 00:14:26,727 en molts canals. 273 00:14:26,727 --> 00:14:28,560 Així que ara sabem una mica sobre la distribució. 274 00:14:28,560 --> 00:14:31,768 I sabem que hi ha algun tipus de tallat a 50 que ens interessa. 275 00:14:31,768 --> 00:14:35,630 Sabem que hi ha dos punts de dades per sota d'aquest llindar i la majoria d'ells 276 00:14:35,630 --> 00:14:36,130 anteriorment. 277 00:14:36,130 --> 00:14:41,510 278 00:14:41,510 --> 00:14:46,160 >> Així com un pas final, aquestes dades aquí, és molt rar veure aquest així. 279 00:14:46,160 --> 00:14:52,610 Així que anem a moure a una variable perquè això és més net, com aquest. 280 00:14:52,610 --> 00:15:02,980 281 00:15:02,980 --> 00:15:05,197 I després fem servir aquesta variable aquí. 282 00:15:05,197 --> 00:15:06,280 És exactament el mateix. 283 00:15:06,280 --> 00:15:07,280 És només una mica més neta. 284 00:15:07,280 --> 00:15:25,300 285 00:15:25,300 --> 00:15:35,300 >> El següent, acte III, Scales-- Així que un problema de dret 286 00:15:35,300 --> 00:15:38,920 aquí és, si canviem la nostra dades en aquesta 200 value-- 287 00:15:38,920 --> 00:15:41,685 si canviem a 400 o alguna cosa i actualització, 288 00:15:41,685 --> 00:15:44,540 llavors aquest valor només es va anar fora de la pantalla. 289 00:15:44,540 --> 00:15:49,040 Així que la nostra lògica aquí de la forma en què fem les vegades 3 290 00:15:49,040 --> 00:15:52,570 i 20, per estendre-cap a fora i després compensar una mica és molt maldestre. 291 00:15:52,570 --> 00:15:54,150 >> Què signifiquen aquests números? 292 00:15:54,150 --> 00:15:55,400 Només estan codificat allà. 293 00:15:55,400 --> 00:15:58,830 I estan molt lligats a les dades. 294 00:15:58,830 --> 00:16:00,550 Volem un document de dades impulsada. 295 00:16:00,550 --> 00:16:05,460 Volem un document molt flexible, que les dades donades, s'adapta a ella 296 00:16:05,460 --> 00:16:07,900 i el representa. 297 00:16:07,900 --> 00:16:11,330 >> El que bàsicament necessitem és que tenir aquest rang de nombres 10. 298 00:16:11,330 --> 00:16:12,640 45, 105. 299 00:16:12,640 --> 00:16:17,630 I volem mapejar de sortir a l'ample, l'amplada complet aquí. 300 00:16:17,630 --> 00:16:20,620 Així que tenim la gamma de nombres que van de 0 a 100. 301 00:16:20,620 --> 00:16:24,980 I nosaltres tenim aquest campus que va 20-700, en aquest cas. 302 00:16:24,980 --> 00:16:26,515 >> És com que volem mapejar que a. 303 00:16:26,515 --> 00:16:30,002 Volem que escalar i després compensar una mica. 304 00:16:30,002 --> 00:16:33,165 Resulta que D3 té aquests. 305 00:16:33,165 --> 00:16:34,220 Es diu una escala. 306 00:16:34,220 --> 00:16:37,410 307 00:16:37,410 --> 00:16:38,250 Així que anem a utilitzar-lo. 308 00:16:38,250 --> 00:16:46,300 309 00:16:46,300 --> 00:16:49,670 >> La forma en què works-- vaig a escriure això i després explicar-ho. 310 00:16:49,670 --> 00:17:01,530 311 00:17:01,530 --> 00:17:02,450 Aquesta és una escala. 312 00:17:02,450 --> 00:17:08,670 El que farà és, serà traçar els valors d'1 a 200 sobre a 20-600. 313 00:17:08,670 --> 00:17:10,990 Podem comprovar que. 314 00:17:10,990 --> 00:17:13,329 Podem veure que aquí. 315 00:17:13,329 --> 00:17:21,704 >> Així que si em aliment que 1-- un moment. 316 00:17:21,704 --> 00:17:47,764 317 00:17:47,764 --> 00:17:48,555 Dóna'm un segon. 318 00:17:48,555 --> 00:17:53,680 319 00:17:53,680 --> 00:17:55,080 He haver escrit malament ella. 320 00:17:55,080 --> 00:18:15,320 321 00:18:15,320 --> 00:18:15,990 Cal anar. 322 00:18:15,990 --> 00:18:17,930 Ho sento per això. 323 00:18:17,930 --> 00:18:22,050 >> Llavors, què va a fer una escala és, prendrà un valor 324 00:18:22,050 --> 00:18:24,930 i després convertir aquest, ampliar això, pel que 325 00:18:24,930 --> 00:18:27,320 omple tota la gamma que està demanant. 326 00:18:27,320 --> 00:18:32,910 Així que en aquest cas, si li fem una, que va a assignar que fos sobre 20. 327 00:18:32,910 --> 00:18:37,750 I si li donem 200, és va a assignar que a 600. 328 00:18:37,750 --> 00:18:40,460 I en algun lloc en el medi, si aconseguim 100, és 329 00:18:40,460 --> 00:18:44,610 estarà en algun lloc entre 20 i 600. 330 00:18:44,610 --> 00:18:51,480 >> I, per descomptat, ara això és el que hem d'eliminar aquests xifrats durs 331 00:18:51,480 --> 00:18:53,402 coses que tenen allà. 332 00:18:53,402 --> 00:18:55,950 Així que el que volem fer és prendre les dades que estem 333 00:18:55,950 --> 00:19:00,950 donat, que les dades individu element, i passar-lo a escala primer. 334 00:19:00,950 --> 00:19:02,635 Així balança ampliar-lo. 335 00:19:02,635 --> 00:19:27,020 336 00:19:27,020 --> 00:19:48,880 >> Bueno-- Oh, tenim un petit error aquí. 337 00:19:48,880 --> 00:19:50,120 Ens falten dades. 338 00:19:50,120 --> 00:19:51,290 Cal anar. 339 00:19:51,290 --> 00:19:58,550 340 00:19:58,550 --> 00:19:59,550 I que s'expandeix cap a fora. 341 00:19:59,550 --> 00:20:01,383 >> Això ens dóna la mateixa resultat que teníem abans, 342 00:20:01,383 --> 00:20:04,030 però en lloc de tenir les codificat limitacions. 343 00:20:04,030 --> 00:20:07,790 I si la mida de la nostra canvis de lona, ​​per exemple, 344 00:20:07,790 --> 00:20:11,790 si volem tenir això sobre 400 píxels i que aixafa a terme, 345 00:20:11,790 --> 00:20:15,440 podem tenir over-- podem ampliar, o fem 346 00:20:15,440 --> 00:20:21,890 pot reduir aquest marge esquerra a una mica menys o més de 20. 347 00:20:21,890 --> 00:20:25,470 Aquests números, aquests codificats números ara tenen sentit per a nosaltres. 348 00:20:25,470 --> 00:20:28,110 349 00:20:28,110 --> 00:20:30,520 >> I podríem fer molt més coses interessants també. 350 00:20:30,520 --> 00:20:35,990 Així que en lloc de tenir un lineal escala, que pot ser que desitgi registrar una escala. 351 00:20:35,990 --> 00:20:37,840 I això ens donarà una escala logarítmica. 352 00:20:37,840 --> 00:20:41,269 >> Així que ara la nostra escala, en lloc de només l'expansió fora d'aquest rang, 353 00:20:41,269 --> 00:20:42,810 que està fent les coses més sofisticades. 354 00:20:42,810 --> 00:20:48,790 355 00:20:48,790 --> 00:20:53,790 En lloc de tenir aquest rang dur codificada, i en lloc d'haver de 600, 356 00:20:53,790 --> 00:20:58,465 el que es vol només ha d'utilitzar l'ample, per la qual cosa des del 20 a l'amplada de menys de 40 anys, 357 00:20:58,465 --> 00:21:02,392 2 vegades el marge a l'altra banda. 358 00:21:02,392 --> 00:21:05,350 I això té molt més sentit algú que pugui mirar el codi. 359 00:21:05,350 --> 00:21:08,080 360 00:21:08,080 --> 00:21:11,850 >> Curiosament, les escales queden molt, molt sofisticat també. 361 00:21:11,850 --> 00:21:13,350 Ells fan un munt de coses interessants. 362 00:21:13,350 --> 00:21:17,620 Així escales no tenen necessàriament per operar només amb números. 363 00:21:17,620 --> 00:21:18,955 Anem a fer una escala de colors. 364 00:21:18,955 --> 00:21:23,120 365 00:21:23,120 --> 00:21:26,120 >> Així que la nostra gamma podria ser: nostre domini és d'1 a 200. 366 00:21:26,120 --> 00:21:28,220 Aquesta és la cosa entrada. 367 00:21:28,220 --> 00:21:33,793 Però el que es vol mapejar des verd a vermell, per exemple. 368 00:21:33,793 --> 00:21:39,710 369 00:21:39,710 --> 00:21:42,910 I ara, si ens passem 1, aconseguirem verd. 370 00:21:42,910 --> 00:21:45,110 Si li donem 200, ens posarem vermell. 371 00:21:45,110 --> 00:21:49,480 I si li passem alguna cosa intermedi, que serà una mica de barreja d'això, 372 00:21:49,480 --> 00:21:52,520 en algun lloc en el gradient entre verd i vermell. 373 00:21:52,520 --> 00:21:55,210 >> I en lloc de tenir aquest tipus de lògica maldestre 374 00:21:55,210 --> 00:21:58,550 tenim aquí amb la condicional allà mateix, 375 00:21:58,550 --> 00:22:03,250 podríem tenir un alguna cosa-- escala lineal entre aquells. 376 00:22:03,250 --> 00:22:07,100 Així que usaríem l'escala que acabem de creat, el que anomenem color. 377 00:22:07,100 --> 00:22:09,060 I ens agradaria donar-li D, que és el nostre element de dades. 378 00:22:09,060 --> 00:22:14,250 379 00:22:14,250 --> 00:22:15,060 I aquí anem. 380 00:22:15,060 --> 00:22:18,070 Comptem amb una escala de colors. 381 00:22:18,070 --> 00:22:18,940 >> Així que aquesta és la cartografia. 382 00:22:18,940 --> 00:22:20,960 Així que el 'esquerra és completament verd. 383 00:22:20,960 --> 00:22:22,560 L'extrema dreta és completament vermell. 384 00:22:22,560 --> 00:22:24,828 I tota la resta és una funció de d. 385 00:22:24,828 --> 00:22:33,369 386 00:22:33,369 --> 00:22:35,160 Tenim una interessant visualitzacions aquí. 387 00:22:35,160 --> 00:22:36,952 Però els nostres dades va ser una mica avorrit. 388 00:22:36,952 --> 00:22:39,410 Anem a veure el que podem fer si teníem les dades més interessants. 389 00:22:39,410 --> 00:22:44,420 390 00:22:44,420 --> 00:22:50,500 >> Acte IV, que treballa amb el Data-- el primer 391 00:22:50,500 --> 00:22:53,560 voldrem fer perquè la nostra visualització més interessant 392 00:22:53,560 --> 00:22:56,140 és per moure les dades a un altre lloc. 393 00:22:56,140 --> 00:22:58,310 És molt maldestre per tenir les dades no modificables aquí. 394 00:22:58,310 --> 00:23:01,220 I, en general, estarem demanant algú més per a les dades. 395 00:23:01,220 --> 00:23:05,400 Estarem potser demanant al govern, l'Oficina del Cens, quin és el teu dades 396 00:23:05,400 --> 00:23:10,170 i després el traçat que o demanant una entitat de tercers per algunes dades 397 00:23:10,170 --> 00:23:13,330 i després la construcció d'una visualització en això. 398 00:23:13,330 --> 00:23:17,170 >> Així que el primer que volem fer és traslladar això a un altre lloc. 399 00:23:17,170 --> 00:23:24,130 Així que vaig a crear un presentar aquí anomenat data.json. 400 00:23:24,130 --> 00:23:25,600 JSON és el format de dades. 401 00:23:25,600 --> 00:23:29,210 No ha de saber molt sobre això. 402 00:23:29,210 --> 00:23:33,210 I anem a copiar el poques dades que tenim allà, 403 00:23:33,210 --> 00:23:40,330 enganxar-hi textualment, aneu de nou al nostre codi de visualització 404 00:23:40,330 --> 00:23:45,362 aquí, i utilitzar aquesta funció aquí. 405 00:23:45,362 --> 00:23:46,820 No ha de saber els detalls. 406 00:23:46,820 --> 00:23:49,800 Però el que això va a fer és, trobarà aquest arxiu, 407 00:23:49,800 --> 00:23:51,780 portar el menjar, i tornar-lo a nosaltres. 408 00:23:51,780 --> 00:24:11,660 409 00:24:11,660 --> 00:24:15,220 Així que el que fa és, va i descarregar el fitxer data.json. 410 00:24:15,220 --> 00:24:18,570 I llavors tot el codi que és sagnia dins-- essencialment, 411 00:24:18,570 --> 00:24:21,800 tot el codi de tenir allà-- voluntat executi només quan aconseguim les dades de nou. 412 00:24:21,800 --> 00:24:25,760 I llavors funcionarà que codi amb les dades que tenim. 413 00:24:25,760 --> 00:24:28,870 Gran, tenim una visualització que consulta 414 00:24:28,870 --> 00:24:31,390 per algun codi en algun lloc una altra cosa, que és generalment 415 00:24:31,390 --> 00:24:36,110 on algunes dades de consulta en un altre lloc, que és generalment 416 00:24:36,110 --> 00:24:38,656 com funcionen les visualitzacions. 417 00:24:38,656 --> 00:24:41,400 >> Però vull tornar a les dades. 418 00:24:41,400 --> 00:24:48,030 Així que les dades fonamentalment en D3-- D3 consumeix dades que hi ha una llista de les coses. 419 00:24:48,030 --> 00:24:53,000 D3 espera que les dades que acaba de ser una llista de les coses, una sèrie de coses. 420 00:24:53,000 --> 00:24:58,780 No importa quines són aquestes coses són, en tant que és un conjunt d'ells. 421 00:24:58,780 --> 00:25:02,460 >> Així que aquí, per exemple, podríem de Per suposat haver valors de punt flotant. 422 00:25:02,460 --> 00:25:04,830 Podríem tenir els negatius. 423 00:25:04,830 --> 00:25:09,400 D3 no li importa, sempre i ja que és una llista de les coses. 424 00:25:09,400 --> 00:25:13,270 >> Com les coses interessants que podria tenir, també podria 425 00:25:13,270 --> 00:25:19,410 tenir una llista de cadenes com aquestes. 426 00:25:19,410 --> 00:25:25,440 Així que aquests són els titulars de Crimson Vaig agafar fa uns dies. 427 00:25:25,440 --> 00:25:29,220 I potser vostè pot trobar alguns interessants coses d'aquests als titulars. 428 00:25:29,220 --> 00:25:30,970 >> Així que de nou, aquesta és una llista de les coses. 429 00:25:30,970 --> 00:25:32,360 D3 no li importa. 430 00:25:32,360 --> 00:25:35,572 Aquests resulten ser una cadena. 431 00:25:35,572 --> 00:25:36,530 Hem canviat els nostres dades. 432 00:25:36,530 --> 00:25:38,210 >> Tornem a la nostra visualització. 433 00:25:38,210 --> 00:25:42,495 Ara, el nostre visualització espera l'entrada a ser nombres. 434 00:25:42,495 --> 00:25:44,370 Així que tindrem fer alguns canvis. 435 00:25:44,370 --> 00:25:47,180 436 00:25:47,180 --> 00:25:52,180 Així, per exemple, en primer lloc, potser volem posar aquests cercles al llarg 437 00:25:52,180 --> 00:25:56,870 per la longitud de la titular, la nombre de caràcters en el títol. 438 00:25:56,870 --> 00:26:03,600 >> Llavors, què farem és-- cada vegada que el nostre funció és cridada amb una cadena, 439 00:26:03,600 --> 00:26:09,095 trobarem és la longitud I després passa que a escala. 440 00:26:09,095 --> 00:26:11,550 El color, vaig a tornar que a blau acer. 441 00:26:11,550 --> 00:26:19,060 442 00:26:19,060 --> 00:26:20,420 I aquí anem. 443 00:26:20,420 --> 00:26:23,190 Tenim una visualització titulars de carmesí. 444 00:26:23,190 --> 00:26:25,500 >> La nostra escala és una mica apagat. 445 00:26:25,500 --> 00:26:29,680 Anem a suposar que el més llarg títol és de 100 caràcters, 446 00:26:29,680 --> 00:26:32,244 pel que abasten una mica. 447 00:26:32,244 --> 00:26:33,410 I tenim una visualització. 448 00:26:33,410 --> 00:26:36,710 Així que sembla que la majoria dels titulars són força propers entre si, 449 00:26:36,710 --> 00:26:38,750 en termes de línia de caràcter. 450 00:26:38,750 --> 00:26:41,200 Però un que realment es destaca. 451 00:26:41,200 --> 00:26:46,660 >> Podríem construir algunes eines explorar que més. 452 00:26:46,660 --> 00:26:50,710 Però quan jo estava treballant en això, jo estava curiositat per saber si, en aquest conjunt de dades, 453 00:26:50,710 --> 00:26:53,880 titulars amb dos punts en ells seria més llarg. 454 00:26:53,880 --> 00:26:55,770 I assumeix que ho farien. 455 00:26:55,770 --> 00:26:56,660 >> Així que anem a esbrinar. 456 00:26:56,660 --> 00:27:00,650 Anem a utilitzar el color canal com ho vam fer abans, 457 00:27:00,650 --> 00:27:04,540 per codificar alguna sobre si hi ha dos punts o no. 458 00:27:04,540 --> 00:27:07,220 Així que anem a utilitzar un condicional de nou. 459 00:27:07,220 --> 00:27:09,350 No ha de saber els detalls d'aquesta, 460 00:27:09,350 --> 00:27:14,260 però així és com vam comprovar 01:00 cadena per a un personatge en particular 461 00:27:14,260 --> 00:27:16,355 en JavaScript, de nou, no és rellevant. 462 00:27:16,355 --> 00:27:18,910 463 00:27:18,910 --> 00:27:23,270 >> Però si no trobem un còlon, tornarem verd. 464 00:27:23,270 --> 00:27:26,100 I si ho fem, anem a tornar vermell. 465 00:27:26,100 --> 00:27:29,010 Així que de nou, titulars que haver dos punts serà de color vermell. 466 00:27:29,010 --> 00:27:34,980 Això és el que aquest significa: agradable. 467 00:27:34,980 --> 00:27:38,040 >> Així que sembla que la meva hipòtesi és colpejat. 468 00:27:38,040 --> 00:27:39,360 Només hi ha dos. 469 00:27:39,360 --> 00:27:42,380 Només tenim sis punts de dades i només dos tenien dos punts. 470 00:27:42,380 --> 00:27:45,510 Però sembla una mica més al capdavall, de fet. 471 00:27:45,510 --> 00:27:47,830 Titulars amb dos punts semblen generalment a ser més curt, 472 00:27:47,830 --> 00:27:52,370 almenys en els nostres dades definido-- interessant. 473 00:27:52,370 --> 00:27:55,830 >> Tornem a què blau acer i després veure 474 00:27:55,830 --> 00:28:00,601 el que podem fer amb encara les dades més interessants. 475 00:28:00,601 --> 00:28:04,370 476 00:28:04,370 --> 00:28:09,070 Així que de nou, he esmentat que dades en D3 és una llista de les coses. 477 00:28:09,070 --> 00:28:11,080 Hem vist els números de molts tipus. 478 00:28:11,080 --> 00:28:12,810 Hem vist cordes. 479 00:28:12,810 --> 00:28:15,700 Però les coses també poden ser objectes. 480 00:28:15,700 --> 00:28:20,080 >> Poden ser coses complicades que inclouen un munt de coses. 481 00:28:20,080 --> 00:28:24,510 Dir que amb més claredat, en la majoria dels casos, 482 00:28:24,510 --> 00:28:28,384 vol construir cada punt de dades com més complicat que un sol valor. 483 00:28:28,384 --> 00:28:30,175 Si vostè s'imagina un base de dades sobre els estudiants, 484 00:28:30,175 --> 00:28:32,470 podria ser un estudiant nom, una identificació d'estudiant, 485 00:28:32,470 --> 00:28:36,370 i un munt de coses associada amb un registre en particular, 486 00:28:36,370 --> 00:28:39,834 no només una cadena o un nombre. 487 00:28:39,834 --> 00:28:40,750 Així que donem una ullada a això. 488 00:28:40,750 --> 00:28:55,180 489 00:28:55,180 --> 00:28:56,760 >> Es tracta d'un conjunt d'aquestes dades. 490 00:28:56,760 --> 00:28:59,090 Es tracta d'un conjunt de dades sobre els terratrèmols. 491 00:28:59,090 --> 00:29:01,910 492 00:29:01,910 --> 00:29:08,430 Així que tot el que aquí a la nostra llista o matriu de les coses en si conté moltes coses. 493 00:29:08,430 --> 00:29:11,380 Així que cada punt de dades té una magnitud i una coordenada. 494 00:29:11,380 --> 00:29:13,425 I coordina a si mateixos contenir dues coses. 495 00:29:13,425 --> 00:29:15,960 496 00:29:15,960 --> 00:29:20,450 >> Així que cada dia és ara molt més complicat i molt més interessant 497 00:29:20,450 --> 00:29:22,700 i conté molt més informació interessant. 498 00:29:22,700 --> 00:29:26,730 Anem a veure que podíem construir fora d'això. 499 00:29:26,730 --> 00:29:36,130 Tornant de nou a aquí, de nou, usant la nostra visualització cercle histograma 500 00:29:36,130 --> 00:29:42,110 hem construït, anem a veure si podem construir un la visualització de la distribució de magnitud 501 00:29:42,110 --> 00:29:43,305 en el nostre conjunt de dades. 502 00:29:43,305 --> 00:29:45,850 503 00:29:45,850 --> 00:29:48,660 >> Així que aquí, és el mateix concepte. 504 00:29:48,660 --> 00:29:51,920 Però ara, d conté més coses. 505 00:29:51,920 --> 00:29:54,780 d conté molts elements de dades. 506 00:29:54,780 --> 00:29:57,946 Així que vesteixen D esquena. 507 00:29:57,946 --> 00:29:59,670 D3 ens dóna d. 508 00:29:59,670 --> 00:30:06,080 I nosaltres responem en trobar la magnitud de d i després pas, que a escala. 509 00:30:06,080 --> 00:30:08,490 >> I llavors hem de canviar la nostra escala, és clar. 510 00:30:08,490 --> 00:30:12,980 Així magnituds simplement no ho fan anar molt més de 10. 511 00:30:12,980 --> 00:30:15,485 En realitat, no hi ha hagut un terratrèmol de magnitud 10. 512 00:30:15,485 --> 00:30:19,360 Però això és una cosa de la nostra part superior final, el nostre espectre superior. 513 00:30:19,360 --> 00:30:20,240 >> Anem a refrescar. 514 00:30:20,240 --> 00:30:22,990 Niça, tenim una visualització. 515 00:30:22,990 --> 00:30:25,490 És interessant el note-- hi ha dos punts de dades que 516 00:30:25,490 --> 00:30:29,010 són gairebé exactament a la part superior de cada un altre, en termes de magnitud. 517 00:30:29,010 --> 00:30:31,350 Això es veu per l'opacitat que estem usant. 518 00:30:31,350 --> 00:30:40,810 519 00:30:40,810 --> 00:30:42,690 >> Tenim dades geogràfiques ara. 520 00:30:42,690 --> 00:30:44,710 Tenim latituds i longitud. 521 00:30:44,710 --> 00:30:47,549 Potser podríem fer alguna cosa una molt més interessant amb això. 522 00:30:47,549 --> 00:30:49,590 Anem a veure una mica més interessant forma de visualitzar 523 00:30:49,590 --> 00:30:53,500 aquesta més complicat dades que tenim accés. 524 00:30:53,500 --> 00:31:04,950 >> Acte V, Mapping-- fonamentalment, volem posar aquests en un mapa. 525 00:31:04,950 --> 00:31:07,690 Vull dir, aquí és on va això. 526 00:31:07,690 --> 00:31:13,130 Volem per codificar informació sobre el posició d'aquestes lectures del terratrèmol, 527 00:31:13,130 --> 00:31:16,350 així com la seva magnitud, perquè hem de ara. 528 00:31:16,350 --> 00:31:21,310 Entenem com consumir dades més complicats. 529 00:31:21,310 --> 00:31:26,200 >> El primer que farem és crear un mapa, un mapa de fons. 530 00:31:26,200 --> 00:31:29,360 Vaig a anar a través de això molt ràpidament. 531 00:31:29,360 --> 00:31:30,560 Aquest és el codi complicat. 532 00:31:30,560 --> 00:31:33,110 És un altre d'aquests receptes que realment no 533 00:31:33,110 --> 00:31:35,690 ha d'entendre completament perquè utilitzeu. 534 00:31:35,690 --> 00:31:38,510 535 00:31:38,510 --> 00:31:39,740 Però això és codi. 536 00:31:39,740 --> 00:31:43,580 Aquest codi aquí crea un mapa. 537 00:31:43,580 --> 00:31:45,730 >> No entrarem en detall. 538 00:31:45,730 --> 00:31:54,210 Però per sobre, el que fa és, es consulta aquest arxiu us.json, que 539 00:31:54,210 --> 00:31:57,150 és un arxiu de dades com la que teníem abans. 540 00:31:57,150 --> 00:31:59,150 És més complex, és clar. 541 00:31:59,150 --> 00:32:02,920 Però en aquest cas, tot, cada punt de dades és aquest estat 542 00:32:02,920 --> 00:32:05,420 i té una llista de latituds i longitud 543 00:32:05,420 --> 00:32:10,500 que defineixen el polígon, aquesta forma, aquest estat. 544 00:32:10,500 --> 00:32:13,280 >> Llavors, què va a fer D3 és similar al que vam fer abans. 545 00:32:13,280 --> 00:32:18,140 Es sol·licitarà que i obligar que a un element. 546 00:32:18,140 --> 00:32:20,890 I hi ha una funció que traçarà un mapa d'aquest element fora, 547 00:32:20,890 --> 00:32:23,410 basat en les latituds i longitud. 548 00:32:23,410 --> 00:32:24,580 Pots llegir més sobre això. 549 00:32:24,580 --> 00:32:27,385 I ho recomano. 550 00:32:27,385 --> 00:32:30,090 >> Hi ha enllaços a la part final d'aquest codi publicarà. 551 00:32:30,090 --> 00:32:31,570 I es comenta el codi. 552 00:32:31,570 --> 00:32:34,050 En hi ha enllaços per a més endavant això. 553 00:32:34,050 --> 00:32:36,590 Et recomano que miris cap amunt. 554 00:32:36,590 --> 00:32:39,460 Però el que ens importa és aquesta funció de projecció. 555 00:32:39,460 --> 00:32:41,210 Vull passar per això. 556 00:32:41,210 --> 00:32:43,522 >> En primer lloc, deixa mostrar que, sí, tenim un mapa. 557 00:32:43,522 --> 00:32:47,300 558 00:32:47,300 --> 00:32:49,970 Els mapes són cool. 559 00:32:49,970 --> 00:32:52,330 Així que donem una ullada a aquesta funció de producció. 560 00:32:52,330 --> 00:32:56,481 >> La projecció és molt com una balança, escales de nou. 561 00:32:56,481 --> 00:32:59,210 Així que el que la producció de aquesta funció de projecció 562 00:32:59,210 --> 00:33:06,610 fa és, podríem passar-ho longitud i latitudes-- en aquest cas, 563 00:33:06,610 --> 00:33:09,590 aquests valors aquí són la lat-llargs de l'edifici 564 00:33:09,590 --> 00:33:13,990 estem asseguts a la dreta ara-- a la projecció. 565 00:33:13,990 --> 00:33:20,560 I la projecció convertirà que en els valors de x i y de píxels. 566 00:33:20,560 --> 00:33:23,300 >> Llavors, què està fent la projecció és molt similar a la nostra escala. 567 00:33:23,300 --> 00:33:27,270 Es tracta de prendre les nostres latituds i la longitud que representa tot un globus 568 00:33:27,270 --> 00:33:31,390 i la reducció i dimensionament que a la plaça que volem, 569 00:33:31,390 --> 00:33:33,510 que li hem donat. 570 00:33:33,510 --> 00:33:35,220 En aquest cas, estem passant aquests valors. 571 00:33:35,220 --> 00:33:41,370 I ens està donant, així, que a la pantalla significa 640 píxels. 572 00:33:41,370 --> 00:33:46,250 Tota aquesta pantalla és 700 píxels d'ample, de manera que ens fa per aquí, 573 00:33:46,250 --> 00:33:53,310 i 154 píxels cap avall, que jo estimació és més o menys aquí. 574 00:33:53,310 --> 00:33:57,250 >> Així que tenint aquests lat-llargs, que representar alguna cosa en tot el món 575 00:33:57,250 --> 00:34:02,850 i aixafant i que es mou i tot ens valors X i Y de píxels donar, 576 00:34:02,850 --> 00:34:05,450 aquesta és la primera cosa que és fet en aquest codi de correspondència. 577 00:34:05,450 --> 00:34:07,920 I després la resta de la codi consumeix les dades 578 00:34:07,920 --> 00:34:14,310 i després aquests mapes lat-llargs amb alguna cosa a la pantalla. 579 00:34:14,310 --> 00:34:18,380 >> Però utilitzarem aquesta projecció funcions, perquè resulta que 580 00:34:18,380 --> 00:34:20,270 tenim lat-llargs llargs també. 581 00:34:20,270 --> 00:34:24,509 Mirant cap enrere en els nostres dades, tenim latituds i coordenades de longitud 582 00:34:24,509 --> 00:34:25,425 per a cada observació. 583 00:34:25,425 --> 00:34:28,131 584 00:34:28,131 --> 00:34:29,130 Així que anem a utilitzar la projecció. 585 00:34:29,130 --> 00:34:33,250 586 00:34:33,250 --> 00:34:37,639 >> Així que buscant en la nostra exposició, volem que el nostre exposition-- 587 00:34:37,639 --> 00:34:39,590 tenim una latitud i una longitud. 588 00:34:39,590 --> 00:34:40,770 Però volem que els valors de píxels. 589 00:34:40,770 --> 00:34:43,510 I resulta que, tenim exactament el que want-- projecció. 590 00:34:43,510 --> 00:34:46,239 Molt semblant estàvem utilitzant l'escala d'aquí, 591 00:34:46,239 --> 00:34:52,075 ara utilitzarem projecció i passar-ho coordina. 592 00:34:52,075 --> 00:34:55,241 593 00:34:55,241 --> 00:34:56,949 Així que el primer estem doing-- així que estem 594 00:34:56,949 --> 00:35:01,520 aconseguir d, que és una de dades individual element d'un terratrèmol individu 595 00:35:01,520 --> 00:35:02,370 la lectura. 596 00:35:02,370 --> 00:35:04,640 El primer que fem és aconseguir les coordenades. 597 00:35:04,640 --> 00:35:06,150 Molt bé, tenim les coordenades. 598 00:35:06,150 --> 00:35:09,160 >> La segona cosa que fem és va succeir que a la projecció. 599 00:35:09,160 --> 00:35:13,440 Projecció converteix aquestes coordenades en valors de píxel, x i y. 600 00:35:13,440 --> 00:35:16,680 I després l'última cosa que vull fer és obtenir la x, 601 00:35:16,680 --> 00:35:19,342 que aquest cas és el primer. 602 00:35:19,342 --> 00:35:22,050 És la primera de les dues coses que són retornats per projecció. 603 00:35:22,050 --> 00:35:27,840 604 00:35:27,840 --> 00:35:29,630 >> Nosaltres farem el mateix per i. 605 00:35:29,630 --> 00:35:34,960 Però en canvi, anem a tornar el segon element, la i. 606 00:35:34,960 --> 00:35:35,980 Prepara't per refrescar. 607 00:35:35,980 --> 00:35:39,830 608 00:35:39,830 --> 00:35:46,450 Ooh, personatge extra aquí-- agradable, tenim 609 00:35:46,450 --> 00:35:51,730 un document impulsat dades que és ocultar aquest arxiu JSON dels objectes, 610 00:35:51,730 --> 00:35:57,560 fer un mapa, i canviant la atribut en relació a les dades 611 00:35:57,560 --> 00:35:59,600 projectar-la en un mapa. 612 00:35:59,600 --> 00:36:00,840 Això és realment interessant. 613 00:36:00,840 --> 00:36:03,770 Això és genial. 614 00:36:03,770 --> 00:36:05,640 >> Prenguem a un nivell superior. 615 00:36:05,640 --> 00:36:08,795 Vull dir, tenim dues peces de informació amb cada punt de dades. 616 00:36:08,795 --> 00:36:10,000 Vull dir, tres. 617 00:36:10,000 --> 00:36:12,540 Tenim les coordenades, que és un x i y. 618 00:36:12,540 --> 00:36:15,700 I tenim la magnitud. 619 00:36:15,700 --> 00:36:17,420 >> Necessitem codificar magnitud d'alguna manera. 620 00:36:17,420 --> 00:36:18,920 Tenim una gran quantitat de canals. 621 00:36:18,920 --> 00:36:20,370 Podem utilitzar el color. 622 00:36:20,370 --> 00:36:21,890 Podem utilitzar el radi. 623 00:36:21,890 --> 00:36:23,040 Podríem utilitzar l'opacitat. 624 00:36:23,040 --> 00:36:25,540 Podríem utilitzar moltes coses en el codi. 625 00:36:25,540 --> 00:36:29,180 Qualsevol d'aquests atributs i molts més que no són a la llista, 626 00:36:29,180 --> 00:36:33,065 , Perquè són opcionals, podríem utilitzar per codificar aquestes dades, l'accident cerebrovascular 627 00:36:33,065 --> 00:36:35,670 i totes aquestes coses que he esmentat. 628 00:36:35,670 --> 00:36:36,690 >> Anem a fer ràdio. 629 00:36:36,690 --> 00:36:38,830 Crec ràdio és el més intuïtiu. 630 00:36:38,830 --> 00:36:46,210 Així que de nou, l'hi canviarem que codificamos- 40 i fer alguns càlculs. 631 00:36:46,210 --> 00:36:48,810 Farem servir la nostra escala favorit. 632 00:36:48,810 --> 00:36:50,290 I estem més enllà d. 633 00:36:50,290 --> 00:36:55,850 Però no d perquè volem que la magnitud de d. d és només el punt de dades. 634 00:36:55,850 --> 00:36:57,430 Passarem la magnitud a escala. 635 00:36:57,430 --> 00:36:58,470 >> Anem a intentar-ho de nou. 636 00:36:58,470 --> 00:37:00,230 Ooh, que no funciona. 637 00:37:00,230 --> 00:37:02,940 Per què no funciona? 638 00:37:02,940 --> 00:37:04,387 >> Així que recorda el que fa escala. 639 00:37:04,387 --> 00:37:05,470 Fem una ullada a l'escala de nou. 640 00:37:05,470 --> 00:37:10,800 Mapes a escala d'1 a 10 sobre al 22 de 600, més o menys. 641 00:37:10,800 --> 00:37:12,030 600 és enorme. 642 00:37:12,030 --> 00:37:14,730 És per això que estem rebent aquest. 643 00:37:14,730 --> 00:37:18,420 >> Així que volem canviar la nostra escala a una mica més raonable. 644 00:37:18,420 --> 00:37:22,610 Diguem, volem 0-60. 645 00:37:22,610 --> 00:37:25,340 60 és gran, però 10 terratrèmols són increïblement estrany. 646 00:37:25,340 --> 00:37:27,880 De fet, mai han succeït. 647 00:37:27,880 --> 00:37:31,830 >> Així que el que això va a fer és, que prendrà la nostra magnitud que va d'1 a 10 648 00:37:31,830 --> 00:37:34,490 i assignar-la a expandir a terme. 649 00:37:34,490 --> 00:37:37,370 I assignar-la a 0 a 60. 650 00:37:37,370 --> 00:37:38,840 Anem a refrescar. 651 00:37:38,840 --> 00:37:41,850 >> Niça, tenim una visualització. 652 00:37:41,850 --> 00:37:42,500 Això és molt bo. 653 00:37:42,500 --> 00:37:43,736 Es tracta de dades reals. 654 00:37:43,736 --> 00:37:46,360 Es donarà compte, en el meu petit joguina exemple, el terratrèmol més gran 655 00:37:46,360 --> 00:37:49,417 és just a sobre de nosaltres. 656 00:37:49,417 --> 00:37:50,000 Però això és tot. 657 00:37:50,000 --> 00:37:54,422 Tenim una visualització data impulsada que consumeix les dades 658 00:37:54,422 --> 00:37:56,255 i ens dóna realment informació interessant. 659 00:37:56,255 --> 00:38:02,600 660 00:38:02,600 --> 00:38:06,420 Sí, anem a afegir una mica interactivitat a ella. 661 00:38:06,420 --> 00:38:08,675 Esmentar que era la força forta de D3. 662 00:38:08,675 --> 00:38:11,490 663 00:38:11,490 --> 00:38:15,060 >> Així que aquí, per a cada element, estem que descriu un grup d'atributs. 664 00:38:15,060 --> 00:38:20,230 Però també podem descriure el que volem passarà amb elements d'interactivitat. 665 00:38:20,230 --> 00:38:26,190 Per exemple, podríem descriure el que passa quan el cursor sobre. 666 00:38:26,190 --> 00:38:28,740 667 00:38:28,740 --> 00:38:33,640 I molt similar que, Això prendrà una funció, 668 00:38:33,640 --> 00:38:36,700 molt similar a la atributs que teníem abans, 669 00:38:36,700 --> 00:38:44,650 on fem alguna cosa al element quan passa sobre ella. 670 00:38:44,650 --> 00:38:47,100 >> Així que el primer que hem de fer és seleccionar aquest element, 671 00:38:47,100 --> 00:38:49,435 per trobar-lo, bàsicament, al navegador. 672 00:38:49,435 --> 00:38:57,090 673 00:38:57,090 --> 00:39:00,920 i llavors podríem establir un atribut a la mateixa. 674 00:39:00,920 --> 00:39:06,870 Així que el que estic fent aquí és, quan passem per per alguna cosa, ens posarem aquest element 675 00:39:06,870 --> 00:39:11,197 a continuació, estableixi la seva opacitat esquena a 1, fins completament opaca. 676 00:39:11,197 --> 00:39:12,488 Anem a veure el que sembla. 677 00:39:12,488 --> 00:39:29,430 678 00:39:29,430 --> 00:39:39,080 >> Sembla que tenim una punt i coma addicional aquí. 679 00:39:39,080 --> 00:39:42,420 Així que si passem per aquí, que s'omple. 680 00:39:42,420 --> 00:39:46,530 681 00:39:46,530 --> 00:39:48,960 Però ara, per descomptat, pensió completa, ja que 682 00:39:48,960 --> 00:39:53,240 ha de descriure el que succeeix Quan s'extreu la nostra cursor. 683 00:39:53,240 --> 00:39:59,990 Així que farem exactament això en mouseout, a diferència de mouseover. 684 00:39:59,990 --> 00:40:06,399 >> I anem a restablir a el que teníem abans-- 0.5. 685 00:40:06,399 --> 00:40:10,260 I ara, cada vegada que vol estacionari, obtenim un cercle complet. 686 00:40:10,260 --> 00:40:13,468 Ens ajuda a veure el que estem seleccionant essencialment. 687 00:40:13,468 --> 00:40:19,210 688 00:40:19,210 --> 00:40:22,860 >> I ara farem això realment genial. 689 00:40:22,860 --> 00:40:26,210 Anem a connectar aquest a dades reals. 690 00:40:26,210 --> 00:40:30,890 Preguntem llavors podria USGS sobre les seves dades. 691 00:40:30,890 --> 00:40:35,630 Així que el Servei Geològic dels EUA té dades sobre terratrèmols. 692 00:40:35,630 --> 00:40:41,460 Tenen una API pública que és capaç per ser consumit en format JSON. 693 00:40:41,460 --> 00:40:42,548 Així que farem això. 694 00:40:42,548 --> 00:40:49,730 695 00:40:49,730 --> 00:40:55,900 >> Així que això és una mica de codi que es connecta a l'API de USGS. 696 00:40:55,900 --> 00:40:57,990 I hi ha una mica de processament en ell. 697 00:40:57,990 --> 00:41:02,200 Això no és rellevant, però ho simplifica a un format de dades simple com la que es 698 00:41:02,200 --> 00:41:03,800 que teníem abans. 699 00:41:03,800 --> 00:41:08,140 Així que em desfaig del nostre cridat a la nostra data.json fals a l'arxiu. 700 00:41:08,140 --> 00:41:13,110 I en canvi, estic trucant l'USGS essencialment. 701 00:41:13,110 --> 00:41:16,700 >> Anem a refrescar, agradable. 702 00:41:16,700 --> 00:41:21,260 És a dir, les dades reals de la vida real d'aquesta setmana per als terratrèmols. 703 00:41:21,260 --> 00:41:23,217 Això és realment interessant. 704 00:41:23,217 --> 00:41:25,050 Això no és sorprenent per a nosaltres, però hi ha 705 00:41:25,050 --> 00:41:27,909 una gran quantitat de terratrèmols al Costa Oest a Califòrnia. 706 00:41:27,909 --> 00:41:30,950 Però vaig pensar que era molt interessant que hi havia tants terratrèmols 707 00:41:30,950 --> 00:41:34,350 a Alaska, i pel que sembla, aquí al Mig Oest. 708 00:41:34,350 --> 00:41:37,630 Vull dir, interessant, i estem bé. 709 00:41:37,630 --> 00:41:40,410 Aquesta és la conclusió. 710 00:41:40,410 --> 00:41:43,760 >> Però fonamentalment, aquesta és el que ens ajuda a fer D3. 711 00:41:43,760 --> 00:41:48,030 Ens ajuda a donar les dades, s'uneixen a elements en el DOM, 712 00:41:48,030 --> 00:41:51,620 i tenen els elements canvien com una funció de les dades, 713 00:41:51,620 --> 00:41:54,780 tenir aquests atributs, tots els molts atributs dels elements, 714 00:41:54,780 --> 00:41:57,393 tot ésser útil per a canals per transmetre informació. 715 00:41:57,393 --> 00:42:05,440 716 00:42:05,440 --> 00:42:09,290 >> D3 és un increïblement poderós biblioteca i increïblement ben dirigit. 717 00:42:09,290 --> 00:42:12,260 Això és una mica de matèria de gran abast. 718 00:42:12,260 --> 00:42:15,960 La visualització de dades és un eina increïblement poderosa 719 00:42:15,960 --> 00:42:21,530 per transportar les persones profundes idees que arriba al seu nucli 720 00:42:21,530 --> 00:42:25,430 i els ajuda a entendre, en d'aquesta manera profunda i intuïtiva, 721 00:42:25,430 --> 00:42:29,760 com les dades de les obres i com dades canvia la nostra vida. 722 00:42:29,760 --> 00:42:31,019