1
00:00:00,000 --> 00:00:00,780

2
00:00:00,780 --> 00:00:11,880
>> [Muziciranja]

3
00:00:11,880 --> 00:00:16,480
>> DAVID Chouinard: Ja sam David
Chouinard, a to je D3.

4
00:00:16,480 --> 00:00:17,700
Dobro došli.

5
00:00:17,700 --> 00:00:21,270
Ćemo učiti o D3 danas.

6
00:00:21,270 --> 00:00:25,020
D3 je JavaScript okvir
za izgradnju visoke kvalitete

7
00:00:25,020 --> 00:00:28,110
interaktivne vizualizacije za web.

8
00:00:28,110 --> 00:00:30,870
Stvari kao što smo
gledajući u leđa od mene,

9
00:00:30,870 --> 00:00:34,230
ćemo učiti kako bi one
stvari, vrsta osnove njega.

10
00:00:34,230 --> 00:00:36,452
No, to će biti super.

11
00:00:36,452 --> 00:00:38,160
Počnimo
što lijepe slike.

12
00:00:38,160 --> 00:00:41,108

13
00:00:41,108 --> 00:00:44,350
Imamo više demo
perspektive na raspolaganju.

14
00:00:44,350 --> 00:00:48,040

15
00:00:48,040 --> 00:00:50,760
Učinimo to.

16
00:00:50,760 --> 00:00:58,700
>> Zakon sam, DOM manipulation-- ćemo
započeti odmah stvaranje kul stvari.

17
00:00:58,700 --> 00:01:01,240
Prije svega, na lijevoj strani, imamo kod.

18
00:01:01,240 --> 00:01:03,470
Na desnoj strani, imamo
Rezultat našeg koda.

19
00:01:03,470 --> 00:01:04,900
Idemo kroz njega.

20
00:01:04,900 --> 00:01:05,780
>> Idemo napraviti krug.

21
00:01:05,780 --> 00:01:08,570
Kako to zvuči?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
samo smo napravili krug.

23
00:01:14,934 --> 00:01:16,100
Ne vjerujete mi, zar ne?

24
00:01:16,100 --> 00:01:18,190
To ne postoji.

25
00:01:18,190 --> 00:01:21,830
>> Dakle, ono što smo radili ovdje je,
SVG je skalabilan vektorske grafike.

26
00:01:21,830 --> 00:01:27,530
To je način na koji možemo reći da preglednik
bi vektorske grafike u pregledniku.

27
00:01:27,530 --> 00:01:30,740
Ono što smo mi napravili upravo sada
dodaje krug za pregledavanje.

28
00:01:30,740 --> 00:01:34,790
>> Obećanje je da u krug
zahtijeva malo osnovnih atributa

29
00:01:34,790 --> 00:01:36,850
Prije nego što zapravo može vidjeti.

30
00:01:36,850 --> 00:01:40,045
Moramo reći svoje x položaj,
njegov y pozicija, njegov radijus.

31
00:01:40,045 --> 00:01:43,310
Nismo ga reći bilo što od toga,
pa ne gledajući ga sada.

32
00:01:43,310 --> 00:01:46,210
Ali neka je reći da stvari.

33
00:01:46,210 --> 00:01:49,510
>> Dakle, prije svega, imaš
dati našem krugu ime.

34
00:01:49,510 --> 00:01:53,070
Tako ćemo ga nazvati krug.

35
00:01:53,070 --> 00:01:54,406
Naš krug ima ime sada.

36
00:01:54,406 --> 00:01:57,230

37
00:01:57,230 --> 00:01:59,490
I neka je dati nekoliko atributa.

38
00:01:59,490 --> 00:02:03,690
Kako o CX će se usredotočiti x, tako da
središte x položaju.

39
00:02:03,690 --> 00:02:06,730
Recimo, 200 200 piksela.

40
00:02:06,730 --> 00:02:10,220
>> Dajmo mu y 200 piksela, kao dobro.

41
00:02:10,220 --> 00:02:16,032
I r, radijus, od oko 40 piksela.

42
00:02:16,032 --> 00:02:16,950
Sad ćemo vidjeti.

43
00:02:16,950 --> 00:02:21,740

44
00:02:21,740 --> 00:02:23,440
Ne može čarolija.

45
00:02:23,440 --> 00:02:30,430

46
00:02:30,430 --> 00:02:31,520
>> Postoji li ići.

47
00:02:31,520 --> 00:02:37,330
Imamo krug na poziciji 200
piksela, 200 piksela, radijusu od 40 piksela.

48
00:02:37,330 --> 00:02:38,280
Vrsta cool, zar ne?

49
00:02:38,280 --> 00:02:38,988
Imamo krug.

50
00:02:38,988 --> 00:02:40,880
Da.

51
00:02:40,880 --> 00:02:42,670
>> Dakle, nema potrebe slijediti zajedno.

52
00:02:42,670 --> 00:02:45,790
Svi ovi primjeri, svi
kod radim i danas

53
00:02:45,790 --> 00:02:51,300
osigurat će se preko interneta na kraju
u obliku primjera interaktivnih

54
00:02:51,300 --> 00:02:54,010
s kontrolnim točkama na
svaki čin, i tako dalje.

55
00:02:54,010 --> 00:02:55,160
>> Učinimo više stvari.

56
00:02:55,160 --> 00:02:58,901
Ovaj crni krug stvarno ružno.

57
00:02:58,901 --> 00:03:01,541
Žao mi je zbog toga pogreške
Poruke tamo.

58
00:03:01,541 --> 00:03:05,340
Tamo idemo.

59
00:03:05,340 --> 00:03:06,350
>> Dajmo joj boju.

60
00:03:06,350 --> 00:03:07,170
Kako je to?

61
00:03:07,170 --> 00:03:08,340
Volim čelika plave.

62
00:03:08,340 --> 00:03:13,280

63
00:03:13,280 --> 00:03:16,030
Pa, naš krug promijenila boju.

64
00:03:16,030 --> 00:03:17,320
To je super.

65
00:03:17,320 --> 00:03:31,330
Učinimo to polu-transparentni
too-- polu-transparentni.

66
00:03:31,330 --> 00:03:33,670
>> Dakle, to su atributi
mi smo definiranja na krugu.

67
00:03:33,670 --> 00:03:36,774
Prva stvar koju smo napravili je
stavimo krug na stranici.

68
00:03:36,774 --> 00:03:38,690
A onda smo definiranja
hrpa atributa.

69
00:03:38,690 --> 00:03:41,610
Neki od njih su potrebne,
kao CX, CY, i radijus.

70
00:03:41,610 --> 00:03:42,680
I ostali su izborni.

71
00:03:42,680 --> 00:03:44,730
>> Postoji puno više atributa.

72
00:03:44,730 --> 00:03:46,760
Postoji mnogo njih.

73
00:03:46,760 --> 00:03:53,070
Na primjer, mogli bismo imati
moždanog udara te, moždani udar crvene.

74
00:03:53,070 --> 00:03:55,630
Ali neka je skine.

75
00:03:55,630 --> 00:04:00,450
Vratili smo se u krug, plavom krugu.

76
00:04:00,450 --> 00:04:01,600
>> Tako ćemo napraviti više krugova.

77
00:04:01,600 --> 00:04:02,810
Kako je to?

78
00:04:02,810 --> 00:04:04,665
Idemo napraviti još jedan krug.

79
00:04:04,665 --> 00:04:05,985
To je uzbudljivo, zar ne?

80
00:04:05,985 --> 00:04:09,630

81
00:04:09,630 --> 00:04:12,300
>> Dakle, reći da sam samo copy-paste metodom
ono što je već.

82
00:04:12,300 --> 00:04:13,570
Nazovimo ga circle2.

83
00:04:13,570 --> 00:04:15,840
I neka je to točno
Ista stvar i dati ga

84
00:04:15,840 --> 00:04:20,450
atributa, s obzirom x pozicija 300.

85
00:04:20,450 --> 00:04:24,140
Yay, imamo dva kruga sada.

86
00:04:24,140 --> 00:04:27,240
>> I naravno, mogli bismo
ažurirati te vrijednosti.

87
00:04:27,240 --> 00:04:31,640
Mogao sam ga stavio na 400, a sada se kreće.

88
00:04:31,640 --> 00:04:35,470
A budući da je neugodno, neka je
izvadite ga, pa circle2.remove.

89
00:04:35,470 --> 00:04:39,000

90
00:04:39,000 --> 00:04:40,730
To više nema.

91
00:04:40,730 --> 00:04:43,170
>> Dakle, ono što smo radili i
samo jako, very-- to

92
00:04:43,170 --> 00:04:46,030
je vrlo slično onome što
Možda ne u jQuery, npr.

93
00:04:46,030 --> 00:04:48,240
Mi samo manipulira
DOM, to se zove.

94
00:04:48,240 --> 00:04:50,040
Možda ste čuli tu riječ prije.

95
00:04:50,040 --> 00:04:53,255
Mi smo stvaranje stvari, postavljanje
atribute na stvari, uklanjanje stvari.

96
00:04:53,255 --> 00:04:58,950

97
00:04:58,950 --> 00:05:02,360
>> Sada, ovdje gdje se dobiva zanimljiv.

98
00:05:02,360 --> 00:05:07,250
Tako je kasnije u kodu, uvijek smo mogli
odnose se na izvornom krug ovdje.

99
00:05:07,250 --> 00:05:14,100
Tako ćemo ponovo postaviti svoj atribut CX.

100
00:05:14,100 --> 00:05:18,260
Recimo, njegov položaj x 400.

101
00:05:18,260 --> 00:05:22,406
I ja ću prijeći
da, tako da je očito.

102
00:05:22,406 --> 00:05:23,360
Tamo idemo.

103
00:05:23,360 --> 00:05:24,780
>> Tako smo dodali krug.

104
00:05:24,780 --> 00:05:26,440
Postavili smo neke atribute.

105
00:05:26,440 --> 00:05:28,210
Dodali smo još jedan krug, to ukloniti.

106
00:05:28,210 --> 00:05:31,650
A onda smo modificiranje
izvorni krug.

107
00:05:31,650 --> 00:05:35,400
>> Ali ovdje gdje se dobiva
puno zanimljivije.

108
00:05:35,400 --> 00:05:39,070
Ne samo da možemo postaviti atribute
kao samo vrijednosti, možemo reći,

109
00:05:39,070 --> 00:05:41,610
Hej, krug, idite na poziciju 200.

110
00:05:41,610 --> 00:05:44,540
Također možete ih postaviti kao funkcija.

111
00:05:44,540 --> 00:05:48,850
>> Dakle, umjesto da 400 ovdje,
možemo napraviti neki izračun

112
00:05:48,850 --> 00:05:53,950
na letu za ono što smo
Želite da atribut biti.

113
00:05:53,950 --> 00:05:56,580
Dakle, to je kako bih izraziti da.

114
00:05:56,580 --> 00:06:00,660
Kažemo, umjesto 400, neka me
dati funkciju umjesto.

115
00:06:00,660 --> 00:06:04,180
I ovdje, u ovoj funkciji,
možemo napraviti bilo ludo izračun.

116
00:06:04,180 --> 00:06:06,820
>> Mogli bismo uzeti vremena i
pogled na neke druge stvari

117
00:06:06,820 --> 00:06:11,230
i dinamički odlučiti za
Krug ono vrijednost želimo.

118
00:06:11,230 --> 00:06:15,266
Kako bi bilo da jednostavno dati
je slučajna x stav?

119
00:06:15,266 --> 00:06:20,360

120
00:06:20,360 --> 00:06:21,120
Dakle, to je to.

121
00:06:21,120 --> 00:06:25,490
>> Pa što da kaže, za
svakih x, pokrenuti ovu funkciju.

122
00:06:25,490 --> 00:06:29,340
I ono što mi radimo je izračun
neke stvari, slučajni puta širine

123
00:06:29,340 --> 00:06:30,410
i vraća to.

124
00:06:30,410 --> 00:06:34,765
Dakle, svaki put smo pokrenuti da smo dobili
krug koji ide na slučajnom mjestu.

125
00:06:34,765 --> 00:06:36,394
To je vrsta cool.

126
00:06:36,394 --> 00:06:38,310
Osjećam se kao da sam mogao gledati
ovo za malo.

127
00:06:38,310 --> 00:06:44,274

128
00:06:44,274 --> 00:06:46,440
Mi smo počeli doći do
nešto zanimljivo.

129
00:06:46,440 --> 00:06:49,120

130
00:06:49,120 --> 00:06:51,390
Učinimo ove podatke pokreće danas.

131
00:06:51,390 --> 00:06:53,420
Nema tu nema podataka.

132
00:06:53,420 --> 00:06:54,482
Idemo promijeniti.

133
00:06:54,482 --> 00:06:57,440

134
00:06:57,440 --> 00:07:12,140
>> Zakon II, Data Driven Documents--
Dakle, vratimo se ovdje.

135
00:07:12,140 --> 00:07:15,340
I neka je samo riješiti circle2,
jer smo jednostavno dodavanje i uklanjanje

136
00:07:15,340 --> 00:07:15,840
to.

137
00:07:15,840 --> 00:07:17,382
Dakle, mi stvarno ne treba.

138
00:07:17,382 --> 00:07:21,421
Moramo biti puno pametniji ovdje.

139
00:07:21,421 --> 00:07:23,170
Recimo, imamo
Neki podaci o nekakvim.

140
00:07:23,170 --> 00:07:31,540

141
00:07:31,540 --> 00:07:40,020
Jedan moment-- recimo,
smo imali podatke o ovom obliku.

142
00:07:40,020 --> 00:07:41,800
Imali smo niz, samo
hrpa brojeva.

143
00:07:41,800 --> 00:07:45,750
Imamo sedam brojeva ovdje,
bez obzira na to represent-- iznos

144
00:07:45,750 --> 00:07:48,810
U ljudi bankovni račun, kako
koliko su teške, bog zna što.

145
00:07:48,810 --> 00:07:51,310
>> To su brojevi, a mi
Želite koristiti svoje krugove

146
00:07:51,310 --> 00:07:53,240
zastupati one brojeve nekako.

147
00:07:53,240 --> 00:07:55,515
Želimo povezati našu stranicu
Krugovi u tim brojevima.

148
00:07:55,515 --> 00:07:58,750

149
00:07:58,750 --> 00:07:59,626
Dakle, ono što nam je činiti.

150
00:07:59,626 --> 00:08:01,500
Recimo, želimo
Krug za svaki broj.

151
00:08:01,500 --> 00:08:03,590
Mogli bismo napraviti stari
što smo bili doing--

152
00:08:03,590 --> 00:08:06,020
Krug Dodavanje i circle2 i circle3.

153
00:08:06,020 --> 00:08:10,020
No, to dobiva iz ruke, a
postoji mnogo ponavljanja logiku.

154
00:08:10,020 --> 00:08:12,760
>> Tako ćemo dobiti više pametan s tim.

155
00:08:12,760 --> 00:08:17,810
Umjesto da koristite var krug
svg.append da smo bili samo pomoću,

156
00:08:17,810 --> 00:08:21,580
ćemo iskoristiti
ovaj mali blok ovdje.

157
00:08:21,580 --> 00:08:24,510
Ne želim ići u dubinu
u ono što su svi ti dijelovi ne.

158
00:08:24,510 --> 00:08:26,020
I to je vrsta napredne teme.

159
00:08:26,020 --> 00:08:27,830
I ja bih da mogu.

160
00:08:27,830 --> 00:08:31,370
>> No, ključna stvar za recognize-- i
vidjet ćete vrlo često u D3 koda.

161
00:08:31,370 --> 00:08:36,840
Ovaj blok teksta Basic
stvara onoliko krugova

162
00:08:36,840 --> 00:08:41,360
jer postoje elementi podataka
U ovom nizu upravo ovdje.

163
00:08:41,360 --> 00:08:53,420

164
00:08:53,420 --> 00:08:55,780
Dakle, to stvara onoliko
Krugovi što postoje elementi.

165
00:08:55,780 --> 00:08:58,520
To će nam stvoriti sedam krugova.

166
00:08:58,520 --> 00:09:01,710
I to ne stvarno, stvarno ključnu stvar.

167
00:09:01,710 --> 00:09:02,460
Tako ćemo pokrenuti to.

168
00:09:02,460 --> 00:09:05,460
Idemo uklanjanje naš drugi krug.

169
00:09:05,460 --> 00:09:09,565
Ajmo komentirati ovaj
rastati se i pokrenuti ovo opet.

170
00:09:09,565 --> 00:09:13,840

171
00:09:13,840 --> 00:09:15,260
>> Tamo idemo.

172
00:09:15,260 --> 00:09:18,030
Dakle, naš krug ovdje
puno tamniji, jer mi

173
00:09:18,030 --> 00:09:20,720
ima sedam krugova, jedan
na vrhu drugog.

174
00:09:20,720 --> 00:09:25,425
Upravo smo stvorili sedam krugova, jedan
svaki za svaki od tih podataka elemenata.

175
00:09:25,425 --> 00:09:28,860
No, tu je ključna stvar koja se dogodila
s ovim isječak ovdje.

176
00:09:28,860 --> 00:09:31,030
>> To je da se podaci vezani.

177
00:09:31,030 --> 00:09:33,440
Dakle, svaki od
one elemente,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, bio je vezan
određenoj krug.

179
00:09:38,830 --> 00:09:40,960
Dakle, to nije samo stvorio
hrpa krugovima

180
00:09:40,960 --> 00:09:43,420
ali povezuje te dvije stvari zajedno.

181
00:09:43,420 --> 00:09:48,740
>> A u budućnosti, jer smo stvorili
Ti krugovi s tom funkcijom, D3

182
00:09:48,740 --> 00:09:52,430
Ako sam ti krug, što možete
daj mi podatke povezane s njom.

183
00:09:52,430 --> 00:09:53,280
Dakle, možemo pitati D3.

184
00:09:53,280 --> 00:09:54,840
Hej, D3, imam krug.

185
00:09:54,840 --> 00:09:57,350
Što je podatke da je krug ima?

186
00:09:57,350 --> 00:10:01,290
I D3 će nam reći 10 ili 45 ili 105.

187
00:10:01,290 --> 00:10:02,380
>> Te stvari su vezani.

188
00:10:02,380 --> 00:10:04,490
To je vrlo, vrlo osnovni koncept.

189
00:10:04,490 --> 00:10:06,070
Pogledajmo kako.

190
00:10:06,070 --> 00:10:12,210
>> Dakle, način na koji ćemo postaviti tako D3--
to je nebitno za ovo,

191
00:10:12,210 --> 00:10:16,620
ali samo mi vjerujte na njemu.

192
00:10:16,620 --> 00:10:17,620
To je, kako smo pitati D3.

193
00:10:17,620 --> 00:10:21,312
Hej, D3, daj mi prvo
Krug koji možete naći.

194
00:10:21,312 --> 00:10:23,580
Daj mi prvi krug možete pronaći.

195
00:10:23,580 --> 00:10:29,660
A onda bismo mogli upitati D3, što je
Podaci o tome, kao što je to, 10.

196
00:10:29,660 --> 00:10:33,380
>> Dakle, mi samo pitajte D3, naći me
Prvi krug možete pronaći.

197
00:10:33,380 --> 00:10:34,400
Što je njegove podatke?

198
00:10:34,400 --> 00:10:36,650
10, koji je zaista
Prvi element podataka.

199
00:10:36,650 --> 00:10:42,150
Mogli bismo ga pitati, hej, D3,
Pronađite nas naš treći krug.

200
00:10:42,150 --> 00:10:44,450
105.

201
00:10:44,450 --> 00:10:45,740
Zašto je to jako važno?

202
00:10:45,740 --> 00:10:49,790

203
00:10:49,790 --> 00:10:52,250
>> Dakle ovdje sam spomenuo
da bismo mogli koristiti funkcije.

204
00:10:52,250 --> 00:10:54,910
I sam spomenuo da je bio
vrlo moćna stvar.

205
00:10:54,910 --> 00:11:03,070
Dakle, ne samo da mogu naši funkcionira raditi stvari
kao i napraviti neki izračun, na primjer,

206
00:11:03,070 --> 00:11:09,170
povratak slučajni broj, to može
Također ne stvari na temelju podataka.

207
00:11:09,170 --> 00:11:11,550
To je ono što podaci vođene dokumenti znače.

208
00:11:11,550 --> 00:11:13,750
To je ono što D3 znači.

209
00:11:13,750 --> 00:11:17,800
>> Dakle, ovo x postition-- umjesto
samo govoreći, sve krugove,

210
00:11:17,800 --> 00:11:21,735
dobiti x 200 poziciju, što
mogao dati mu funkciju.

211
00:11:21,735 --> 00:11:26,140

212
00:11:26,140 --> 00:11:30,140
I ovdje, možemo napraviti neke obračun.

213
00:11:30,140 --> 00:11:33,710
i d Ovdje stoji na mjestu za podacima.

214
00:11:33,710 --> 00:11:36,120
Dakle, svaki put smo
krug, u osnovi,

215
00:11:36,120 --> 00:11:37,750
D3 će stvoriti tih sedam krugova.

216
00:11:37,750 --> 00:11:38,500
I onda za svaki

217
00:11:38,500 --> 00:11:41,920
>> krug, to će ići, hej,
circle1 što je vaš x položaj.

218
00:11:41,920 --> 00:11:45,210
Prije toga, bili smo
Uvijek odgovorite 200.

219
00:11:45,210 --> 00:11:48,630
Ali sada, svaki put D3 pita
nam što je tvoj stav x,

220
00:11:48,630 --> 00:11:51,790
to će dati us-- smo
da je krug, tako da imamo podatke.

221
00:11:51,790 --> 00:11:55,290
To će nam dati podatke i reći,
Što želite izložba biti,

222
00:11:55,290 --> 00:11:57,120
na temelju tih podataka.

223
00:11:57,120 --> 00:11:59,590
>> Ajmo se vratiti stvarne podatke.

224
00:11:59,590 --> 00:12:04,910
Dakle, ako smo pokrenuti ovo, to daje
Američki podaci odvezao dokumente.

225
00:12:04,910 --> 00:12:08,040
Ti krugovi temelje
U odnosu position--

226
00:12:08,040 --> 00:12:11,120
oni baze kao funkcija podataka.

227
00:12:11,120 --> 00:12:13,100
>> Tako je za prvi krug,
D3 stavlja krug.

228
00:12:13,100 --> 00:12:16,770
A onda D3 nas pita, što učiniti
Želite izložba biti.

229
00:12:16,770 --> 00:12:19,620
A mi samo reći, bez obzira podataka.

230
00:12:19,620 --> 00:12:21,185
Provjerite izlaganje 10.

231
00:12:21,185 --> 00:12:26,320
>> Zatim se pita, što želiš
Izložba se za drugi krug.

232
00:12:26,320 --> 00:12:27,270
A mi odgovoriti, 45.

233
00:12:27,270 --> 00:12:30,000

234
00:12:30,000 --> 00:12:32,230
A mi, naravno, može
napraviti neki izračun ovdje.

235
00:12:32,230 --> 00:12:35,510
Ja smatram da tim krugovima
su vrsta squished up.

236
00:12:35,510 --> 00:12:38,965
>> Dakle, to pomnožite 3, pomnožite podatke za 3.

237
00:12:38,965 --> 00:12:41,870

238
00:12:41,870 --> 00:12:43,840
Naš krug upravo dobio proširila van.

239
00:12:43,840 --> 00:12:46,730
Naša vrijednost je utrostručio.

240
00:12:46,730 --> 00:12:51,010
>> Krug je stvarno na rubu,
pa ćemo možda vrsta to nadoknaditi.

241
00:12:51,010 --> 00:12:53,632
Recimo, od 20.

242
00:12:53,632 --> 00:12:56,070
Ovdje možete ići.

243
00:12:56,070 --> 00:12:57,590
>> To je vizualizacija podataka.

244
00:12:57,590 --> 00:13:01,767
To je vrlo osnovni jedno, ali ovo
daje nam uvid u naše podatke.

245
00:13:01,767 --> 00:13:04,600
To nam govori da je, primjerice, da
ima malo nakupina elemenata.

246
00:13:04,600 --> 00:13:06,340
I mi imamo veliku odskoke ovdje.

247
00:13:06,340 --> 00:13:10,830
To nam daje neke informacije
o distribuciji.

248
00:13:10,830 --> 00:13:20,830
>> Ako smo, na primjer, za promjenu
podataka do 150 ovdje i osvježiti,

249
00:13:20,830 --> 00:13:22,630
naša vizualizacija se promijenila.

250
00:13:22,630 --> 00:13:24,285
Ovaj dokument podataka upravljan.

251
00:13:24,285 --> 00:13:32,640

252
00:13:32,640 --> 00:13:36,180
>> Pa naravno, svi ti elementi,
Svi ovi atributi,

253
00:13:36,180 --> 00:13:38,430
možemo koristiti funkciju, ne
samo brojevi, a ne samo

254
00:13:38,430 --> 00:13:39,900
x i y položajima.

255
00:13:39,900 --> 00:13:42,120
Dakle, možemo koristiti funkciju za boju.

256
00:13:42,120 --> 00:13:45,260

257
00:13:45,260 --> 00:13:46,360
Dakle, mi ćemo učiniti isto.

258
00:13:46,360 --> 00:13:49,360
Mi ćemo dati funkciju.

259
00:13:49,360 --> 00:13:52,320
>> I recimo, mogli bismo imati
uvjetima u našoj funkciji.

260
00:13:52,320 --> 00:13:54,770
Ova funkcija može biti
stotina redova.

261
00:13:54,770 --> 00:13:57,150
To može učiniti vrlo, vrlo komplicirane stvari.

262
00:13:57,150 --> 00:13:59,080
>> Tako ćemo staviti ako izjavu ovdje.

263
00:13:59,080 --> 00:14:03,420
Recimo, ako naši podaci manje
od 50 godina, to je neki prag

264
00:14:03,420 --> 00:14:05,817
da smo zainteresirani za
u nekog razloga.

265
00:14:05,817 --> 00:14:06,650
Učinimo to zeleno.

266
00:14:06,650 --> 00:14:09,830

267
00:14:09,830 --> 00:14:15,320
Inače, neka bude crveno.

268
00:14:15,320 --> 00:14:16,110
Kako je to?

269
00:14:16,110 --> 00:14:19,630

270
00:14:19,630 --> 00:14:21,220
Nice.

271
00:14:21,220 --> 00:14:24,860
>> Dakle, naša vizualizacija podataka počinje
prenijeti više zanimljivih informacija

272
00:14:24,860 --> 00:14:26,727
na mnogim kanalima.

273
00:14:26,727 --> 00:14:28,560
Dakle, sada znamo malo
o distribuciji.

274
00:14:28,560 --> 00:14:31,768
A mi znamo da postoji neka vrsta
odsječeni na 50 da smo zainteresirani.

275
00:14:31,768 --> 00:14:35,630
Mi znamo da postoje dvije točke podataka
ispod tog praga, a većina od njih

276
00:14:35,630 --> 00:14:36,130
gore.

277
00:14:36,130 --> 00:14:41,510

278
00:14:41,510 --> 00:14:46,160
>> Dakle, kao konačni korak, ovi podaci ovdje
to je vrlo rijetko vidjeti ovako.

279
00:14:46,160 --> 00:14:52,610
Pa neka je samo ga premjestiti na varijablu
zato što je čišći, kao što je ovaj.

280
00:14:52,610 --> 00:15:02,980

281
00:15:02,980 --> 00:15:05,197
I onda mi koristimo tu varijablu ovdje.

282
00:15:05,197 --> 00:15:06,280
To je točno istu stvar.

283
00:15:06,280 --> 00:15:07,280
To je samo malo čišći.

284
00:15:07,280 --> 00:15:25,300

285
00:15:25,300 --> 00:15:35,300
>> Zatim se, Zakonom III, Scales--
Dakle, jedan problem u pravu

286
00:15:35,300 --> 00:15:38,920
Ovdje je, ako ćemo promijeniti naš
Podaci u ovoj 200 value--

287
00:15:38,920 --> 00:15:41,685
Ako smo to promijeniti 400
ili nešto i refresh,

288
00:15:41,685 --> 00:15:44,540
onda ta vrijednost samo otišao van platna.

289
00:15:44,540 --> 00:15:49,040
Tako je naša logika ovdje
kako mi vremena 3

290
00:15:49,040 --> 00:15:52,570
i 20, to raširena, a zatim
nadoknaditi to malo stvarno nezgrapnih.

291
00:15:52,570 --> 00:15:54,150
>> Što ti brojevi znače?

292
00:15:54,150 --> 00:15:55,400
Oni samo teško kodirani tamo.

293
00:15:55,400 --> 00:15:58,830
I oni su jako povezani s podacima.

294
00:15:58,830 --> 00:16:00,550
Želimo podataka upravljan dokument.

295
00:16:00,550 --> 00:16:05,460
Želimo vrlo fleksibilan dokument,
da je dao podatke, prilagođava na njega

296
00:16:05,460 --> 00:16:07,900
i predstavlja ga.

297
00:16:07,900 --> 00:16:11,330
>> Ono što mi zapravo trebamo je, mi
ima tu niz brojeva 10.

298
00:16:11,330 --> 00:16:12,640
45, 105.

299
00:16:12,640 --> 00:16:17,630
I mi želimo da se na karti
širina, puna širina ovdje.

300
00:16:17,630 --> 00:16:20,620
Dakle, imamo niz
Brojevi idu od 0 do 100.

301
00:16:20,620 --> 00:16:24,980
I mi smo to kampus sam ide
20-700, u ovom slučaju.

302
00:16:24,980 --> 00:16:26,515
>> Mi vrsta žele kartu da na.

303
00:16:26,515 --> 00:16:30,002
Želimo razmjera da i
a zatim ga nadoknaditi malo.

304
00:16:30,002 --> 00:16:33,165
Ispada da je D3 ima njih.

305
00:16:33,165 --> 00:16:34,220
To se zove ljestvica.

306
00:16:34,220 --> 00:16:37,410

307
00:16:37,410 --> 00:16:38,250
Tako ćemo ga koristiti.

308
00:16:38,250 --> 00:16:46,300

309
00:16:46,300 --> 00:16:49,670
>> Način na koji works-- ću
tipa ovo gore, a zatim ga objasniti.

310
00:16:49,670 --> 00:17:01,530

311
00:17:01,530 --> 00:17:02,450
To je mjerilo.

312
00:17:02,450 --> 00:17:08,670
Ono što će učiniti je, da će map out
Vrijednosti 1-200 na to 20-600.

313
00:17:08,670 --> 00:17:10,990
Možemo provjeriti.

314
00:17:10,990 --> 00:17:13,329
Možemo vidjeti da je ovdje.

315
00:17:13,329 --> 00:17:21,704
>> Dakle, ako sam ga hraniti 1-- jedan trenutak.

316
00:17:21,704 --> 00:17:47,764

317
00:17:47,764 --> 00:17:48,555
Daj mi jednu sekundu.

318
00:17:48,555 --> 00:17:53,680

319
00:17:53,680 --> 00:17:55,080
Mora da sam ga pogrešno.

320
00:17:55,080 --> 00:18:15,320

321
00:18:15,320 --> 00:18:15,990
Postoji li ići.

322
00:18:15,990 --> 00:18:17,930
Žao mi je zbog toga.

323
00:18:17,930 --> 00:18:22,050
>> Dakle, ono što će učiniti razmjera
je, to će potrajati vrijednost

324
00:18:22,050 --> 00:18:24,930
a zatim pretvoriti da,
proširiti da se, kako je to

325
00:18:24,930 --> 00:18:27,320
ispunjava cijeli niz tražiš.

326
00:18:27,320 --> 00:18:32,910
Dakle, u ovom slučaju, ako mi dati jedan,
to će karta koja se na 20.

327
00:18:32,910 --> 00:18:37,750
A ako damo 200, što je
ide na karti da na 600.

328
00:18:37,750 --> 00:18:40,460
A negdje između,
Ako smo dobili 100, što je

329
00:18:40,460 --> 00:18:44,610
će biti negdje
između 20 i 600.

330
00:18:44,610 --> 00:18:51,480
>> I naravno, sad to je ono što
moramo ukloniti one kodirali

331
00:18:51,480 --> 00:18:53,402
Ono što mi imamo pravo postoji.

332
00:18:53,402 --> 00:18:55,950
Dakle, ono što želimo učiniti je
uzeti podatke koje smo

333
00:18:55,950 --> 00:19:00,950
s obzirom da pojedinac podataka
Element, i to prođe na ljestvici na prvom mjestu.

334
00:19:00,950 --> 00:19:02,635
Dakle, vaga će ga razmjeru.

335
00:19:02,635 --> 00:19:27,020

336
00:19:27,020 --> 00:19:48,880
>> Well-- Oh, imamo malu pogrešku ovdje.

337
00:19:48,880 --> 00:19:50,120
Mi smo podatke koji nedostaju.

338
00:19:50,120 --> 00:19:51,290
Postoji li ići.

339
00:19:51,290 --> 00:19:58,550

340
00:19:58,550 --> 00:19:59,550
I to je to širi se.

341
00:19:59,550 --> 00:20:01,383
>> To nam daje ista
Rezultat smo imali prije,

342
00:20:01,383 --> 00:20:04,030
ali umjesto da one
Teško kodirani ograničenja.

343
00:20:04,030 --> 00:20:07,790
A ako je veličina našeg
platno promjene, na primjer,

344
00:20:07,790 --> 00:20:11,790
Ako želimo imati to više
400 piksela i to squishes out,

345
00:20:11,790 --> 00:20:15,440
to možemo imati over--
možemo ga proširiti, ili ćemo

346
00:20:15,440 --> 00:20:21,890
može smanjiti ovaj lijeve margine za
nešto manje ili više od 20.

347
00:20:21,890 --> 00:20:25,470
Ti brojevi, to je teško kodirano
Brojevi sada smisla za nas.

348
00:20:25,470 --> 00:20:28,110

349
00:20:28,110 --> 00:20:30,520
>> A što smo mogli učiniti puno više
Zanimljivi stvari.

350
00:20:30,520 --> 00:20:35,990
Dakle, umjesto da je linearni
razmjera, možda žele prijaviti na ljestvicu.

351
00:20:35,990 --> 00:20:37,840
I da će nam dati ljestvice dnevnika.

352
00:20:37,840 --> 00:20:41,269
>> Tako sada naša razmjera, umjesto
Samo širi izvan tog raspona,

353
00:20:41,269 --> 00:20:42,810
to radi sofisticiranije stvari.

354
00:20:42,810 --> 00:20:48,790

355
00:20:48,790 --> 00:20:53,790
Umjesto da taj raspon teško
kodirani, i umjesto da taj 600,

356
00:20:53,790 --> 00:20:58,465
smo možda želite koristiti samo širinu,
pa od 20 do širine minus 40,

357
00:20:58,465 --> 00:21:02,392
2 puta margina na drugoj strani.

358
00:21:02,392 --> 00:21:05,350
I to čini puno više smisla
netko tko bi mogao pogledati koda.

359
00:21:05,350 --> 00:21:08,080

360
00:21:08,080 --> 00:21:11,850
>> Zanimljivo, vaga dobiti
Vrlo, vrlo sofisticiran kao dobro.

361
00:21:11,850 --> 00:21:13,350
Oni učiniti mnogo zanimljivih stvari.

362
00:21:13,350 --> 00:21:17,620
Dakle, vaga ne mora nužno imati
da rade samo s brojevima.

363
00:21:17,620 --> 00:21:18,955
Učinimo različitim bojama.

364
00:21:18,955 --> 00:21:23,120

365
00:21:23,120 --> 00:21:26,120
>> Dakle, naš asortiman mogao be--
naša domena 1 do 200.

366
00:21:26,120 --> 00:21:28,220
To je ulaz stvar.

367
00:21:28,220 --> 00:21:33,793
Ali mi možda želite preslikati iz
zelene do crvene, npr.

368
00:21:33,793 --> 00:21:39,710

369
00:21:39,710 --> 00:21:42,910
A sada, ako mi to prođe 1,
ćemo dobiti zeleno.

370
00:21:42,910 --> 00:21:45,110
Ako smo da je to 200, mi ćemo dobiti crveni.

371
00:21:45,110 --> 00:21:49,480
A ako ga prođe nešto između,
to će biti neki miks koji,

372
00:21:49,480 --> 00:21:52,520
negdje na gradijentu
između zelene i crvene boje.

373
00:21:52,520 --> 00:21:55,210
>> I umjesto da
Ova vrsta nezgrapnih logike

374
00:21:55,210 --> 00:21:58,550
imamo ovdje
uvjetovana upravo tamo,

375
00:21:58,550 --> 00:22:03,250
bismo mogli imati something--
Linearno mjerilo između njih.

376
00:22:03,250 --> 00:22:07,100
Tako ćemo koristiti ljestvicu smo upravo
stvorio, koji smo pozvani boju.

377
00:22:07,100 --> 00:22:09,060
I mi bismo dali D, koji je
Naša elementa podataka.

378
00:22:09,060 --> 00:22:14,250

379
00:22:14,250 --> 00:22:15,060
I tamo idemo.

380
00:22:15,060 --> 00:22:18,070
Imamo različitim bojama.

381
00:22:18,070 --> 00:22:18,940
>> Dakle, to je mapiranje.

382
00:22:18,940 --> 00:22:20,960
Dakle, krajnje lijevo je potpuno zelena.

383
00:22:20,960 --> 00:22:22,560
Sasvim desno je potpuno crveno.

384
00:22:22,560 --> 00:22:24,828
A sve što je između
funkcija d.

385
00:22:24,828 --> 00:22:33,369

386
00:22:33,369 --> 00:22:35,160
Imamo zanimljiva
vizualizacije ovdje.

387
00:22:35,160 --> 00:22:36,952
No, naši podaci je vrsta dosadno.

388
00:22:36,952 --> 00:22:39,410
Idemo vidjeti što možemo učiniti ako
imali smo više zanimljivih podataka.

389
00:22:39,410 --> 00:22:44,420

390
00:22:44,420 --> 00:22:50,500
>> Zakon IV, rad s
Data-- prva stvar

391
00:22:50,500 --> 00:22:53,560
ćemo želite učiniti da bi naš
vizualizacija zanimljivije

392
00:22:53,560 --> 00:22:56,140
je premjestiti podatke negdje drugdje.

393
00:22:56,140 --> 00:22:58,310
To je vrlo nespretan imati
podaci na tvrdom ovdje kodirani.

394
00:22:58,310 --> 00:23:01,220
I općenito, mi ćemo biti molba
netko drugi za podatke.

395
00:23:01,220 --> 00:23:05,400
Mi ćemo se možda pitaju vladu,
Biro za popis stanovništva, što je vaše podatke

396
00:23:05,400 --> 00:23:10,170
a zatim planiraju da ili pita
Neki treće strane entiteta za neke podatke

397
00:23:10,170 --> 00:23:13,330
a zatim izgradnju
vizualizacija na to.

398
00:23:13,330 --> 00:23:17,170
>> Dakle, prva stvar koju želite učiniti
je potez koji bi negdje drugdje.

399
00:23:17,170 --> 00:23:24,130
Tako ću stvoriti
podnijeti ovdje zove data.json.

400
00:23:24,130 --> 00:23:25,600
JSON je format podataka.

401
00:23:25,600 --> 00:23:29,210
Ne morate znati puno o tome.

402
00:23:29,210 --> 00:23:33,210
A mi ćemo se kopirati
Malo podataka imamo tamo,

403
00:23:33,210 --> 00:23:40,330
zalijepite ga tamo doslovno, otići
natrag na našu vizualizaciju koda

404
00:23:40,330 --> 00:23:45,362
ovdje, i koristiti ovu funkciju upravo ovdje.

405
00:23:45,362 --> 00:23:46,820
Ne morate znati pojedinosti.

406
00:23:46,820 --> 00:23:49,800
No, ono što će učiniti je,
ona će tu datoteku,

407
00:23:49,800 --> 00:23:51,780
dohvatiti ga, i vratiti se na nas.

408
00:23:51,780 --> 00:24:11,660

409
00:24:11,660 --> 00:24:15,220
Pa što to čini se, to ide
i dobiti data.json datoteku.

410
00:24:15,220 --> 00:24:18,570
A onda je sve kod koji je
razvedena inside-- suštini,

411
00:24:18,570 --> 00:24:21,800
sve kod nas ima there-- će
pokrenuti samo kada smo dobili podatke natrag.

412
00:24:21,800 --> 00:24:25,760
A onda će se pokrenuti da
kod s podacima koje imamo.

413
00:24:25,760 --> 00:24:28,870
Veliki, imamo
vizualizacija da upita

414
00:24:28,870 --> 00:24:31,390
neko kôd negdje
drugo, što je obično

415
00:24:31,390 --> 00:24:36,110
gdje upite neke podatke iz
negdje drugdje, što je obično

416
00:24:36,110 --> 00:24:38,656
Kako vizualizacije raditi.

417
00:24:38,656 --> 00:24:41,400
>> Ali ja želim ići natrag u podacima.

418
00:24:41,400 --> 00:24:48,030
Tako su podaci iz temelja D3-- D3
troši podatke da je popis stvari.

419
00:24:48,030 --> 00:24:53,000
D3 očekuje podaci biti samo popis
stvari, niz stvari.

420
00:24:53,000 --> 00:24:58,780
Nije bitno ono što one stvari
su, tako dugo dok je niz njih.

421
00:24:58,780 --> 00:25:02,460
>> Pa evo, na primjer, mogli bismo od
Naravno su pomičnim zarezom vrijednosti.

422
00:25:02,460 --> 00:25:04,830
Mogli bismo imati negative.

423
00:25:04,830 --> 00:25:09,400
D3 nije briga, tako dugo
kao što je popis stvari.

424
00:25:09,400 --> 00:25:13,270
>> Kao zanimljivosti mi
mogao imati, također smo mogli

425
00:25:13,270 --> 00:25:19,410
imate popis žice kao što je to.

426
00:25:19,410 --> 00:25:25,440
Dakle, to su Crimson naslovi
Pokupio sam prije nekoliko dana.

427
00:25:25,440 --> 00:25:29,220
A možda možete pronaći neke zanimljive
stvari o tim od naslova.

428
00:25:29,220 --> 00:25:30,970
>> Pa opet, to je popis stvari.

429
00:25:30,970 --> 00:25:32,360
D3 ne brine.

430
00:25:32,360 --> 00:25:35,572
To se dogoditi da bude string.

431
00:25:35,572 --> 00:25:36,530
Mi smo promijenili naše podatke.

432
00:25:36,530 --> 00:25:38,210
>> Vratimo se na našu vizualizaciju.

433
00:25:38,210 --> 00:25:42,495
Sada, naša vizualizacija očekuje
ulaz za brojeve.

434
00:25:42,495 --> 00:25:44,370
Tako ćemo imati
napraviti nekoliko promjena.

435
00:25:44,370 --> 00:25:47,180

436
00:25:47,180 --> 00:25:52,180
Tako, na primjer, u prvom redu, možda
želimo staviti ove krugove zajedno

437
00:25:52,180 --> 00:25:56,870
duljinom naslova,
Broj znakova u naslovu.

438
00:25:56,870 --> 00:26:03,600
>> Pa što ćemo učiniti is-- svaki put naš
Funkcija se zove s nizom,

439
00:26:03,600 --> 00:26:09,095
pronaći ćemo da je duljina i
zatim proći da bi razmjera.

440
00:26:09,095 --> 00:26:11,550
Boja, ja ću se vratiti
da bi čelika plave.

441
00:26:11,550 --> 00:26:19,060

442
00:26:19,060 --> 00:26:20,420
I tamo idemo.

443
00:26:20,420 --> 00:26:23,190
Imamo vizualizaciju
od Crimson naslove.

444
00:26:23,190 --> 00:26:25,500
>> Naša ljestvica je malo off.

445
00:26:25,500 --> 00:26:29,680
Pretpostavimo da je najduža
Naslov je duga 100 znakova,

446
00:26:29,680 --> 00:26:32,244
tako da obuhvati se malo.

447
00:26:32,244 --> 00:26:33,410
A imamo vizualizaciju.

448
00:26:33,410 --> 00:26:36,710
Dakle, čini se da je većina naslove
su prilično blizu jedna drugoj,

449
00:26:36,710 --> 00:26:38,750
U pogledu znakova linije.

450
00:26:38,750 --> 00:26:41,200
Ali on ima stvarno ističe.

451
00:26:41,200 --> 00:26:46,660
>> Mogli bismo izgraditi neke alate
istražiti kako više.

452
00:26:46,660 --> 00:26:50,710
No, kada sam radio na tome, sam je
znatiželjni hoće li, u ovom setu podataka,

453
00:26:50,710 --> 00:26:53,880
Naslovi s dvotočkom
U njima će biti više.

454
00:26:53,880 --> 00:26:55,770
I pretpostavlja da bi.

455
00:26:55,770 --> 00:26:56,660
>> Tako ćemo saznati.

456
00:26:56,660 --> 00:27:00,650
Neka je koristiti boju
Kanal kao što smo učinili prije,

457
00:27:00,650 --> 00:27:04,540
kodirati neki o tome je li
Tu je debelo ili ne.

458
00:27:04,540 --> 00:27:07,220
Tako ćemo koristiti uvjetna opet.

459
00:27:07,220 --> 00:27:09,350
Ne morate znati
Detalji ovog,

460
00:27:09,350 --> 00:27:14,260
ali to je, kako smo provjerili
string za određeni karakter

461
00:27:14,260 --> 00:27:16,355
U JavaScript, opet, nije bitno.

462
00:27:16,355 --> 00:27:18,910

463
00:27:18,910 --> 00:27:23,270
>> Ali ako ne nađemo
debelog crijeva, mi ćemo se vratiti zeleni.

464
00:27:23,270 --> 00:27:26,100
A ako nam je činiti, mi ćemo se vratiti crveno.

465
00:27:26,100 --> 00:27:29,010
Pa opet, naslova koji
su debelo će biti crvene boje.

466
00:27:29,010 --> 00:27:34,980
To je ono što ovaj means-- lijepo.

467
00:27:34,980 --> 00:27:38,040
>> Tako se čini da je moj
Hipoteza je udario.

468
00:27:38,040 --> 00:27:39,360
Postoji samo dva.

469
00:27:39,360 --> 00:27:42,380
Imamo samo šest bodova podataka
a samo dva su dvotočke.

470
00:27:42,380 --> 00:27:45,510
No, čini se malo više
Na donjem kraju, u stvari.

471
00:27:45,510 --> 00:27:47,830
Naslovi s dvotočke činiti
to uglavnom biti kraći,

472
00:27:47,830 --> 00:27:52,370
barem u našim podacima set-- zanimljiva.

473
00:27:52,370 --> 00:27:55,830
>> Ajmo se vratiti da bi
čelika plava i onda vidjeti

474
00:27:55,830 --> 00:28:00,601
ono što možemo učiniti s još
više zanimljivih podataka.

475
00:28:00,601 --> 00:28:04,370

476
00:28:04,370 --> 00:28:09,070
Pa opet, sam spomenuo da je
Podaci u D3 je popis stvari.

477
00:28:09,070 --> 00:28:11,080
Vidjeli smo brojeve mnogih vrsta.

478
00:28:11,080 --> 00:28:12,810
Vidjeli smo konce.

479
00:28:12,810 --> 00:28:15,700
No, stvari mogu biti objekti.

480
00:28:15,700 --> 00:28:20,080
>> Oni mogu biti komplicirani stvari
da su puno stvari.

481
00:28:20,080 --> 00:28:24,510
Da biste jasnije reći da,
U većini slučajeva,

482
00:28:24,510 --> 00:28:28,384
Želite izgraditi svaku točku podataka kao
više komplicirano nego samo jednu vrijednost.

483
00:28:28,384 --> 00:28:30,175
Ako bih zamisliti
baze podataka o studentima,

484
00:28:30,175 --> 00:28:32,470
Tu bi moglo biti student
ime, student ID,

485
00:28:32,470 --> 00:28:36,370
i puno stvari povezane
s posebnim rekord,

486
00:28:36,370 --> 00:28:39,834
Ne samo niz ili broj.

487
00:28:39,834 --> 00:28:40,750
Pa pogledajmo kako.

488
00:28:40,750 --> 00:28:55,180

489
00:28:55,180 --> 00:28:56,760
>> Ovo je jedan takav skup podataka.

490
00:28:56,760 --> 00:28:59,090
To je skup podataka o potresima.

491
00:28:59,090 --> 00:29:01,910

492
00:29:01,910 --> 00:29:08,430
Dakle, sve što ovdje na našoj listi ili niz
stvari sadrži sebe mnogo stvari.

493
00:29:08,430 --> 00:29:11,380
Tako je svaki podatak ima
Veličina i koordinirati.

494
00:29:11,380 --> 00:29:13,425
I sami koordinate
sadrži dvije stvari.

495
00:29:13,425 --> 00:29:15,960

496
00:29:15,960 --> 00:29:20,450
>> Dakle, svaki dan je sada puno više
komplicirano i puno zanimljiviji

497
00:29:20,450 --> 00:29:22,700
i sadrži mnogo više
zanimljive informacije.

498
00:29:22,700 --> 00:29:26,730
Da vidimo možemo graditi izvan toga.

499
00:29:26,730 --> 00:29:36,130
Vraćanje natrag u ovdje, opet, pomoću
naša histogram krug vizualizacija

500
00:29:36,130 --> 00:29:42,110
smo izgradili, neka je vidjeti ako mi može graditi
vizualizacija distribucije veličine

501
00:29:42,110 --> 00:29:43,305
u našem skupu podataka.

502
00:29:43,305 --> 00:29:45,850

503
00:29:45,850 --> 00:29:48,660
>> Pa evo, to je isti koncept.

504
00:29:48,660 --> 00:29:51,920
Ali sada, d sadrži više stvari.

505
00:29:51,920 --> 00:29:54,780
d sadrži mnogo podataka elemente.

506
00:29:54,780 --> 00:29:57,946
Tako smo dobili d natrag.

507
00:29:57,946 --> 00:29:59,670
D3 nam daje d.

508
00:29:59,670 --> 00:30:06,080
A mi odgovoriti pronalaženje veličinu
d je zatim prolazi koji mjerilu.

509
00:30:06,080 --> 00:30:08,490
>> I onda moramo mijenjati
naš razmjera, naravno.

510
00:30:08,490 --> 00:30:12,980
Tako veličine jednostavno ne
ići puno više od 10.

511
00:30:12,980 --> 00:30:15,485
Zapravo, nikada nije bilo
10 magnituda potresa.

512
00:30:15,485 --> 00:30:19,360
No, to je vrsta naša gornja
kraj, naš gornji spektar.

513
00:30:19,360 --> 00:30:20,240
>> Idemo osvježiti.

514
00:30:20,240 --> 00:30:22,990
Lijepo, imamo vizualizaciju.

515
00:30:22,990 --> 00:30:25,490
Zanimljivo je kako note--
postoje dvije točke podataka koje

516
00:30:25,490 --> 00:30:29,010
gotovo točno na vrhu svake
drugo, u smislu veličine.

517
00:30:29,010 --> 00:30:31,350
To vidim po neprozirnost smo pomoću.

518
00:30:31,350 --> 00:30:40,810

519
00:30:40,810 --> 00:30:42,690
>> Imamo geografske podatke.

520
00:30:42,690 --> 00:30:44,710
Imamo širine i dužine.

521
00:30:44,710 --> 00:30:47,549
Možda bismo mogli učiniti nešto
Puno zanimljivije s tim.

522
00:30:47,549 --> 00:30:49,590
Idemo naći neki više
zanimljiv način da vizualizirate

523
00:30:49,590 --> 00:30:53,500
to više komplicirano
Podaci imamo pristup.

524
00:30:53,500 --> 00:31:04,950
>> Zakon V, Mapping-- temelja,
želimo ih staviti na karti.

525
00:31:04,950 --> 00:31:07,690
Mislim, ovo je mjesto gdje se to događa.

526
00:31:07,690 --> 00:31:13,130
Želimo da se kodirati podatke o
Položaj tih potresa čitanja,

527
00:31:13,130 --> 00:31:16,350
kao i njihova veličina,
jer imamo je sada.

528
00:31:16,350 --> 00:31:21,310
Mi razumijemo kako konzumirati
složeniji podataka.

529
00:31:21,310 --> 00:31:26,200
>> Prvo što ćemo učiniti je
izraditi kartu, kartu pozadine.

530
00:31:26,200 --> 00:31:29,360
Ja ću proći
to vrlo brzo.

531
00:31:29,360 --> 00:31:30,560
To je lukav broj.

532
00:31:30,560 --> 00:31:33,110
To je još jedan od onih
Recepti ne stvarno

533
00:31:33,110 --> 00:31:35,690
moraju shvatiti u potpunosti za korištenje.

534
00:31:35,690 --> 00:31:38,510

535
00:31:38,510 --> 00:31:39,740
No, to je broj.

536
00:31:39,740 --> 00:31:43,580
Ovaj kod ovdje stvara kartu.

537
00:31:43,580 --> 00:31:45,730
>> Nećemo ići u detalje.

538
00:31:45,730 --> 00:31:54,210
No, površno, što se je,
ona upita ovaj us.json datoteku koja

539
00:31:54,210 --> 00:31:57,150
je podatkovna datoteka kao što su
jedan smo imali prije.

540
00:31:57,150 --> 00:31:59,150
To je složeniji, naravno.

541
00:31:59,150 --> 00:32:02,920
No, u ovom slučaju, sve,
svaki podatak je ovo stanje

542
00:32:02,920 --> 00:32:05,420
i ima popis
širine i zemljopisne dužine

543
00:32:05,420 --> 00:32:10,500
koji definiraju poligon,
koji oblik, to stanje.

544
00:32:10,500 --> 00:32:13,280
>> Pa što će D3 učiniti je slična
za ono što smo učinili prije.

545
00:32:13,280 --> 00:32:18,140
To će zahtijevati da se i
vezati da se element.

546
00:32:18,140 --> 00:32:20,890
A tu je funkcija koja
će kartu koja elementa van,

547
00:32:20,890 --> 00:32:23,410
temelji se na geografskim širinama i duljine.

548
00:32:23,410 --> 00:32:24,580
Možete pročitati više o tome.

549
00:32:24,580 --> 00:32:27,385
I ja ga preporučujem.

550
00:32:27,385 --> 00:32:30,090
>> Tu su linkovi na
kraj ovog koda objavljena.

551
00:32:30,090 --> 00:32:31,570
I kod je komentirao.

552
00:32:31,570 --> 00:32:34,050
U tu su linkovi za dalje to.

553
00:32:34,050 --> 00:32:36,590
Preporučujem ti ga potražiti.

554
00:32:36,590 --> 00:32:39,460
No, ono što mi je stalo je
ova projekcija funkcija.

555
00:32:39,460 --> 00:32:41,210
Želim ići kroz to.

556
00:32:41,210 --> 00:32:43,522
>> Prije svega, dopustite mi pokazati
ti da, da, imamo kartu.

557
00:32:43,522 --> 00:32:47,300

558
00:32:47,300 --> 00:32:49,970
Karte su super.

559
00:32:49,970 --> 00:32:52,330
Pa pogledajmo ovo
Funkcija proizvodnje.

560
00:32:52,330 --> 00:32:56,481
>> Projekcija je jako puno
kao ljestvici, opet vage.

561
00:32:56,481 --> 00:32:59,210
Dakle, ono što proizvodnja za
ova projekcija funkcija

562
00:32:59,210 --> 00:33:06,610
nema je, mogli bismo to prođe dužine
i latitudes-- u ovom slučaju,

563
00:33:06,610 --> 00:33:09,590
ove vrijednosti su ovdje
Lat-žudi za zgrade

564
00:33:09,590 --> 00:33:13,990
sjedimo u pravu
now-- na projekciji.

565
00:33:13,990 --> 00:33:20,560
A projekcija će se pretvoriti
da se u X i Y vrijednosti piksela.

566
00:33:20,560 --> 00:33:23,300
>> Dakle, ono što radi projekcija
je vrlo slična našem skali.

567
00:33:23,300 --> 00:33:27,270
To je uzimanje našim geografskim širinama i
duljina koja predstavlja cijeli svijet

568
00:33:27,270 --> 00:33:31,390
a smanjuje i dimenzioniranje da
dolje na trgu kako želimo,

569
00:33:31,390 --> 00:33:33,510
da smo ga dali.

570
00:33:33,510 --> 00:33:35,220
U ovom slučaju, mi smo
donošenje tih vrijednosti.

571
00:33:35,220 --> 00:33:41,370
I to daje nam, dobro, da
na zaslonu znači 640 piksela.

572
00:33:41,370 --> 00:33:46,250
Cijeli ovaj ekran je 700 piksela
široka, tako da nas čini oko ovdje,

573
00:33:46,250 --> 00:33:53,310
i 154 piksela dolje, što bih
Procjena je prilično ovdje.

574
00:33:53,310 --> 00:33:57,250
>> Tako da one Par-čezne, što
predstavlja nešto na cijelom svijetu

575
00:33:57,250 --> 00:34:02,850
i squishing i kreće se da oko
da nam X i Y vrijednosti piksela dati,

576
00:34:02,850 --> 00:34:05,450
to je prva stvar koja je
učinjeno u ovom mapiranje koda.

577
00:34:05,450 --> 00:34:07,920
I onda ostatak
kod troši podatke

578
00:34:07,920 --> 00:34:14,310
a zatim mapirati ta Par-čezne
na nešto na zaslonu.

579
00:34:14,310 --> 00:34:18,380
>> No, mi ćemo koristiti ovu projekciju
funkcije, jer ispada

580
00:34:18,380 --> 00:34:20,270
imamo lat-žudi, teži što je dobro.

581
00:34:20,270 --> 00:34:24,509
Gledajući unatrag na naše podatke, imamo
širine i zemljopisne dužine

582
00:34:24,509 --> 00:34:25,425
za svakog promatranja.

583
00:34:25,425 --> 00:34:28,131

584
00:34:28,131 --> 00:34:29,130
Tako ćemo koristiti projekciju.

585
00:34:29,130 --> 00:34:33,250

586
00:34:33,250 --> 00:34:37,639
>> Tako gledajući svoje izlaganje,
želimo našu exposition--

587
00:34:37,639 --> 00:34:39,590
imamo zemljopisne širine i dužine.

588
00:34:39,590 --> 00:34:40,770
Ali mi želimo vrijednosti piksela.

589
00:34:40,770 --> 00:34:43,510
I to ispada, imamo točno
ono što want-- projekciju.

590
00:34:43,510 --> 00:34:46,239
Vrlo slično kao što su
pomoću skale upravo ovdje,

591
00:34:46,239 --> 00:34:52,075
sada ćemo koristiti projekcije
i proći koordinira.

592
00:34:52,075 --> 00:34:55,241

593
00:34:55,241 --> 00:34:56,949
Dakle, prva stvar
mi smo doing-- tako da smo

594
00:34:56,949 --> 00:35:01,520
uzimajući d, što je pojedinac podataka
element pojedinog potresa

595
00:35:01,520 --> 00:35:02,370
čitanje.

596
00:35:02,370 --> 00:35:04,640
Prva stvar koju smo učinili
je dobiti koordinate.

597
00:35:04,640 --> 00:35:06,150
U redu, imamo koordinate.

598
00:35:06,150 --> 00:35:09,160
>> Druga je stvar što mi radimo je
proći da na projekciju.

599
00:35:09,160 --> 00:35:13,440
Projekcija pretvara one koordinate
u vrijednosti piksela, X i Y.

600
00:35:13,440 --> 00:35:16,680
A onda je zadnje što smo
želite učiniti je jednostavno dobiti x,

601
00:35:16,680 --> 00:35:19,342
što je ovaj slučaj prvi.

602
00:35:19,342 --> 00:35:22,050
To je prva od dvije stvari
koji su se vratili po projekciji.

603
00:35:22,050 --> 00:35:27,840

604
00:35:27,840 --> 00:35:29,630
>> Mi ćemo učiniti isto za y.

605
00:35:29,630 --> 00:35:34,960
No, umjesto toga, mi ćemo se vratiti
Drugi element y.

606
00:35:34,960 --> 00:35:35,980
Nabavite spremni za osvježavanje.

607
00:35:35,980 --> 00:35:39,830

608
00:35:39,830 --> 00:35:46,450
Ooh, extra lik
here-- lijepo, imamo

609
00:35:46,450 --> 00:35:51,730
Podaci pogon dokument koji je
prikrivanje ovu JSON datoteku objekata,

610
00:35:51,730 --> 00:35:57,560
što kartu, a mijenja
atribut u odnosu na podatke

611
00:35:57,560 --> 00:35:59,600
to projicirati na karti.

612
00:35:59,600 --> 00:36:00,840
To je stvarno zanimljivo.

613
00:36:00,840 --> 00:36:03,770
To je super.

614
00:36:03,770 --> 00:36:05,640
>> Idemo uzeti gore zarezati.

615
00:36:05,640 --> 00:36:08,795
Mislim, imamo dva komada
Podaci sa svake točke podataka.

616
00:36:08,795 --> 00:36:10,000
Mislim, tri.

617
00:36:10,000 --> 00:36:12,540
Imamo koordinate,
što je x i y.

618
00:36:12,540 --> 00:36:15,700
I mi imamo veličinu.

619
00:36:15,700 --> 00:36:17,420
>> Moramo kodiranje veličine nekako.

620
00:36:17,420 --> 00:36:18,920
Imamo puno kanala.

621
00:36:18,920 --> 00:36:20,370
Možemo koristiti boju.

622
00:36:20,370 --> 00:36:21,890
Možemo koristiti radijus.

623
00:36:21,890 --> 00:36:23,040
Možemo koristiti neprozirnost.

624
00:36:23,040 --> 00:36:25,540
Mogli bismo iskoristiti mnoge stvari u kodu.

625
00:36:25,540 --> 00:36:29,180
Svaka od tih atributa i mnogi
više da se ne nalazi na ovom popisu,

626
00:36:29,180 --> 00:36:33,065
jer su izborni, mogli bismo
koristiti za kodiranje ove podatke, moždani udar

627
00:36:33,065 --> 00:36:35,670
i sve ove stvari koje sam spomenuo.

628
00:36:35,670 --> 00:36:36,690
>> Učinimo radijus.

629
00:36:36,690 --> 00:36:38,830
Mislim radijus je većina intuitivno.

630
00:36:38,830 --> 00:36:46,210
Pa opet, mi ćemo zamijeniti taj hard-kodirane
40 i napraviti neke izračune.

631
00:36:46,210 --> 00:36:48,810
Mi ćemo opet koristiti naš omiljeni ljestvice.

632
00:36:48,810 --> 00:36:50,290
I mi smo prošli d.

633
00:36:50,290 --> 00:36:55,850
No, ne bih, jer želimo veličinu
D. d je samo točka podataka.

634
00:36:55,850 --> 00:36:57,430
Mi ćemo proći veličina na ljestvici.

635
00:36:57,430 --> 00:36:58,470
>> Ajmo opet pokušati.

636
00:36:58,470 --> 00:37:00,230
Ooh, to ne radi.

637
00:37:00,230 --> 00:37:02,940
Zašto to ne rade?

638
00:37:02,940 --> 00:37:04,387
>> Dakle, ne zaboravite ono što radi razmjera.

639
00:37:04,387 --> 00:37:05,470
Pogledajmo ljestvici ponovo.

640
00:37:05,470 --> 00:37:10,800
Mjerilo karte 1-10 na
na 22-600, više ili manje.

641
00:37:10,800 --> 00:37:12,030
600 je ogroman.

642
00:37:12,030 --> 00:37:14,730
To je razlog zašto smo sve to.

643
00:37:14,730 --> 00:37:18,420
>> Zato želimo promijeniti naše ljestvice
nešto više razuman.

644
00:37:18,420 --> 00:37:22,610
Recimo, želimo 0-60.

645
00:37:22,610 --> 00:37:25,340
60 je velika, ali 10 potresa
su nevjerojatno rijetki.

646
00:37:25,340 --> 00:37:27,880
U stvari, oni nikada dogodilo.

647
00:37:27,880 --> 00:37:31,830
>> Pa što će to učiniti, to će potrajati
naša veličina koja ide od 1 do 10

648
00:37:31,830 --> 00:37:34,490
i mapirati ga na to proširiti van.

649
00:37:34,490 --> 00:37:37,370
A mapirati ga na 0-60.

650
00:37:37,370 --> 00:37:38,840
Idemo osvježiti.

651
00:37:38,840 --> 00:37:41,850
>> Lijepo, imamo vizualizaciju.

652
00:37:41,850 --> 00:37:42,500
To je super.

653
00:37:42,500 --> 00:37:43,736
To je stvarni podaci.

654
00:37:43,736 --> 00:37:46,360
Primijetit ćete, u mom malom igračkom
Primjer, najveći potres

655
00:37:46,360 --> 00:37:49,417
je pravo na vrhu nas.

656
00:37:49,417 --> 00:37:50,000
No, to je to.

657
00:37:50,000 --> 00:37:54,422
Imamo datum pogon vizualizaciju
koji troši podatke

658
00:37:54,422 --> 00:37:56,255
i daje nam stvarno
zanimljive informacije.

659
00:37:56,255 --> 00:38:02,600

660
00:38:02,600 --> 00:38:06,420
Da, neka je dodati neke
interaktivnost na njega.

661
00:38:06,420 --> 00:38:08,675
Spomenuo sam da je
jaka snaga D3.

662
00:38:08,675 --> 00:38:11,490

663
00:38:11,490 --> 00:38:15,060
>> Pa evo, za svaki element, mi smo
opisujući hrpu atributa.

664
00:38:15,060 --> 00:38:20,230
Ali, mi također može opisati ono što želimo
dogoditi interaktivnosti elementima.

665
00:38:20,230 --> 00:38:26,190
Na primjer, mogli bismo opisati
što se događa kada se miš iznad.

666
00:38:26,190 --> 00:38:28,740

667
00:38:28,740 --> 00:38:33,640
I vrlo sličan da,
koja će uzeti funkciju,

668
00:38:33,640 --> 00:38:36,700
Vrlo slično
pripisuje smo imali prije,

669
00:38:36,700 --> 00:38:44,650
gdje smo napraviti nešto
elementa kada prelazite preko njega.

670
00:38:44,650 --> 00:38:47,100
>> Dakle, prva stvar koju trebate
to je odabir tog elementa,

671
00:38:47,100 --> 00:38:49,435
ga naći u osnovi, u pregledniku.

672
00:38:49,435 --> 00:38:57,090

673
00:38:57,090 --> 00:39:00,920
a onda bismo mogli postaviti
atribut na njega.

674
00:39:00,920 --> 00:39:06,870
Dakle, ono što ja radim ovdje, kad smo lebdjeti
preko nečega, mi ćemo dobiti tu elementa

675
00:39:06,870 --> 00:39:11,197
a zatim postavite svoju neprozirnost natrag
1, s potpuno neprozirno.

676
00:39:11,197 --> 00:39:12,488
Idemo vidjeti kako to izgleda.

677
00:39:12,488 --> 00:39:29,430

678
00:39:29,430 --> 00:39:39,080
>> Čini mi se
extra zarezom ovdje.

679
00:39:39,080 --> 00:39:42,420
Dakle, ako smo lebdjeti ovamo, ona dobiva puna.

680
00:39:42,420 --> 00:39:46,530

681
00:39:46,530 --> 00:39:48,960
Ali sada, naravno, to
ostaje puna, jer mi

682
00:39:48,960 --> 00:39:53,240
moraju opisati što se događa
kada je izvadite naš pokazivač.

683
00:39:53,240 --> 00:39:59,990
Tako ćemo učiniti upravo to na
mouseout, za razliku od Prelazak mišem.

684
00:39:59,990 --> 00:40:06,399
>> A mi ćemo ga resetirati na
ono što smo imali before-- 0.5.

685
00:40:06,399 --> 00:40:10,260
A sada, svaki put smo
hover, dobili smo puni krug.

686
00:40:10,260 --> 00:40:13,468
Pomaže nam vidjeti što smo
mi smo odabirom osnovi.

687
00:40:13,468 --> 00:40:19,210

688
00:40:19,210 --> 00:40:22,860
>> A sada ćemo napraviti ovo stvarno super.

689
00:40:22,860 --> 00:40:26,210
Idemo spojiti ovo stvarnim podacima.

690
00:40:26,210 --> 00:40:30,890
Tako ćemo pitati mogla
USGS o svojim podacima.

691
00:40:30,890 --> 00:40:35,630
Dakle, US Geological Survey
ima podatke o potresima.

692
00:40:35,630 --> 00:40:41,460
Oni imaju javne API koji je u mogućnosti
da se konzumira u JSON formatu.

693
00:40:41,460 --> 00:40:42,548
Tako ćemo učiniti.

694
00:40:42,548 --> 00:40:49,730

695
00:40:49,730 --> 00:40:55,900
>> Dakle, to je malo koda koji
spaja na USGS API.

696
00:40:55,900 --> 00:40:57,990
A tu je malo obrade na njemu.

697
00:40:57,990 --> 00:41:02,200
To nije relevantan, ali to pojednostavljuje
na jednostavan format podataka poput onog

698
00:41:02,200 --> 00:41:03,800
smo imali prije.

699
00:41:03,800 --> 00:41:08,140
Tako sam se riješiti naš poziv da se
naš lažni data.json na datoteku.

700
00:41:08,140 --> 00:41:13,110
I umjesto da, ja zovem
USGS bitno.

701
00:41:13,110 --> 00:41:16,700
>> Idemo osvježiti, lijepo.

702
00:41:16,700 --> 00:41:21,260
To je stvarni, stvarnim podacima
od ovog tjedna za potrese.

703
00:41:21,260 --> 00:41:23,217
To je stvarno zanimljivo.

704
00:41:23,217 --> 00:41:25,050
To ne iznenađuje
za nas, ali postoje

705
00:41:25,050 --> 00:41:27,909
Puno potresa na
West Coast u Kaliforniji.

706
00:41:27,909 --> 00:41:30,950
Ali mislio sam da je to jako zanimljivo
da je bilo toliko potresa

707
00:41:30,950 --> 00:41:34,350
na Aljasci, i očito,
Ovdje u Srednji zapad.

708
00:41:34,350 --> 00:41:37,630
Mislim, zanimljivo, a mi smo dobri.

709
00:41:37,630 --> 00:41:40,410
To je zaključak.

710
00:41:40,410 --> 00:41:43,760
>> No, u osnovi, to
je ono D3 pomaže nam učiniti.

711
00:41:43,760 --> 00:41:48,030
Ona nam pomaže preuzeti podatke, vežu
to elementi u DOM,

712
00:41:48,030 --> 00:41:51,620
i imaju ti elementi promijeniti
kao funkcija podataka,

713
00:41:51,620 --> 00:41:54,780
ima one atribute, sve
mnogi atributi elemenata,

714
00:41:54,780 --> 00:41:57,393
sve biti korisno za kanale
prenijeti podatke.

715
00:41:57,393 --> 00:42:05,440

716
00:42:05,440 --> 00:42:09,290
>> D3 je nevjerojatno snažan
Knjižnica i nevjerojatno dobro izvoditi.

717
00:42:09,290 --> 00:42:12,260
To je neka moćna stvar.

718
00:42:12,260 --> 00:42:15,960
Vizualizacija podataka je
Nevjerojatno moćan alat

719
00:42:15,960 --> 00:42:21,530
za prijenos na ljude duboko
uvidi da dođe do njihove srži

720
00:42:21,530 --> 00:42:25,430
i pomaže im razumjeti, u
ova duboka i intuitivan način,

721
00:42:25,430 --> 00:42:29,760
Kako podataka radi i kako
Podaci mijenja naš život.

722
00:42:29,760 --> 00:42:31,019