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

2
00:00:00,780 --> 00:00:11,880
>> [Музички]

3
00:00:11,880 --> 00:00:16,480
>> ДАВИД CHOUINARD: Јас сум Давид
Chouinard, а тоа е Д3.

4
00:00:16,480 --> 00:00:17,700
Добредојдовте.

5
00:00:17,700 --> 00:00:21,270
Ние ќе се запознаат со Д3 денес.

6
00:00:21,270 --> 00:00:25,020
D3 е да го вклучите Javascript рамка
за изградба на висок квалитет

7
00:00:25,020 --> 00:00:28,110
интерактивна визуелизација за веб.

8
00:00:28,110 --> 00:00:30,870
Работи како она што ние сме
гледајќи во задниот дел од мене,

9
00:00:30,870 --> 00:00:34,230
ние ќе треба да научат да прават оние
работи, вид на основите на неа.

10
00:00:34,230 --> 00:00:36,452
Но, тоа се случува да биде кул.

11
00:00:36,452 --> 00:00:38,160
Ајде да започнеме
правење убави слики.

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

13
00:00:41,108 --> 00:00:44,350
Имаме повеќе демонстрации
од перспектива на располагање.

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

15
00:00:48,040 --> 00:00:50,760
Ајде да го прават тоа.

16
00:00:50,760 --> 00:00:58,700
>> ЧИН I, ДОМ manipulation-- ние ќе
за да започнете веднаш правење интересни нешта.

17
00:00:58,700 --> 00:01:01,240
Прво на сите, на левата страна, имаме код.

18
00:01:01,240 --> 00:01:03,470
На десната страна, имаме
резултат на нашиот код.

19
00:01:03,470 --> 00:01:04,900
Ајде да одиме низ него.

20
00:01:04,900 --> 00:01:05,780
>> Да се ​​направи круг.

21
00:01:05,780 --> 00:01:08,570
Како прави тоа звук?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
ние само го направија еден круг.

23
00:01:14,934 --> 00:01:16,100
Вие не ми верувате, нели?

24
00:01:16,100 --> 00:01:18,190
Тоа не е таму.

25
00:01:18,190 --> 00:01:21,830
>> Значи она што го правевме токму тука е,
SVG е скалабилни векторска графика.

26
00:01:21,830 --> 00:01:27,530
Ова е начинот на кој ние се каже на прелистувачот да
направи вектор графика во прелистувачот.

27
00:01:27,530 --> 00:01:30,740
Она што го направија во моментов
се додава круг да ги пребарувате.

28
00:01:30,740 --> 00:01:34,790
>> Ветувањето е дека кругот
бара малку на основните атрибути

29
00:01:34,790 --> 00:01:36,850
пред ние всушност може да се види тоа.

30
00:01:36,850 --> 00:01:40,045
Ние треба да го кажам својот x позиција,
нејзините y позиција, нејзиниот радиус.

31
00:01:40,045 --> 00:01:43,310
Ние не го каже некој од тоа,
па ние не го гледаме сега.

32
00:01:43,310 --> 00:01:46,210
Но, ајде да го кажам нешто.

33
00:01:46,210 --> 00:01:49,510
>> Значи прво на сите, имаш
да им дадеме на нашите круг име.

34
00:01:49,510 --> 00:01:53,070
Значи, ајде да го наречеме круг.

35
00:01:53,070 --> 00:01:54,406
Нашите круг има име сега.

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

37
00:01:57,230 --> 00:01:59,490
И ајде да се даде неколку атрибути.

38
00:01:59,490 --> 00:02:03,690
Како за CX би центар x, па
центарот на x позиција.

39
00:02:03,690 --> 00:02:06,730
Да речеме, 200 за 200 пиксели.

40
00:02:06,730 --> 00:02:10,220
>> Ајде да го даде Y од 200 пиксели, како и.

41
00:02:10,220 --> 00:02:16,032
И r, радиус, од околу 40 пиксели.

42
00:02:16,032 --> 00:02:16,950
Сега да видиме.

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

44
00:02:21,740 --> 00:02:23,440
Јас не може да се опишат.

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

46
00:02:30,430 --> 00:02:31,520
>> Таму да одите.

47
00:02:31,520 --> 00:02:37,330
Имаме круг на позиција 200
пиксели, од 200 пиксели, радиус од 40 пиксели.

48
00:02:37,330 --> 00:02:38,280
Вид на кул, нели?

49
00:02:38,280 --> 00:02:38,988
Имаме круг.

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

51
00:02:40,880 --> 00:02:42,670
>> Значи нема потреба да го следат заедно.

52
00:02:42,670 --> 00:02:45,790
Сите овие примери, сите
кодот јас го правам денес

53
00:02:45,790 --> 00:02:51,300
ќе бидат обезбедени онлајн на крајот
во форма на интерактивна примери

54
00:02:51,300 --> 00:02:54,010
со контролни пунктови на
секој акт, и така натаму.

55
00:02:54,010 --> 00:02:55,160
>> Ајде да направиме повеќе нешта.

56
00:02:55,160 --> 00:02:58,901
Оваа црна круг е навистина грди.

57
00:02:58,901 --> 00:03:01,541
Жал ми е за таа грешка
пораки во право таму.

58
00:03:01,541 --> 00:03:05,340
Не одиме.

59
00:03:05,340 --> 00:03:06,350
>> Ајде да го даде боја.

60
00:03:06,350 --> 00:03:07,170
Како е тоа?

61
00:03:07,170 --> 00:03:08,340
Ми се допаѓа да го челик сина боја.

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

63
00:03:13,280 --> 00:03:16,030
Па, нашите круг промени на бојата.

64
00:03:16,030 --> 00:03:17,320
Тоа е одлично.

65
00:03:17,320 --> 00:03:31,330
Да се ​​направи тоа полу-транспарентен
too-- полу-транспарентен.

66
00:03:31,330 --> 00:03:33,670
>> Значи ова се атрибути
ние сме дефинирање на кругот.

67
00:03:33,670 --> 00:03:36,774
Првото нешто што ние го сторивме е
ние се стави круг на оваа страница.

68
00:03:36,774 --> 00:03:38,690
И тогаш ние сме дефинирање
еден куп на атрибути.

69
00:03:38,690 --> 00:03:41,610
Некои од нив се бара,
како CX, CY, и радиус.

70
00:03:41,610 --> 00:03:42,680
И другите се опционални.

71
00:03:42,680 --> 00:03:44,730
>> Постојат многу повеќе атрибути.

72
00:03:44,730 --> 00:03:46,760
Има многу од нив.

73
00:03:46,760 --> 00:03:53,070
На пример, ние би можеле да имаат
мозочниот удар, мозочен удар на црвено.

74
00:03:53,070 --> 00:03:55,630
Но, ајде да ја отстрани.

75
00:03:55,630 --> 00:04:00,450
Ние сме назад во круг, син круг.

76
00:04:00,450 --> 00:04:01,600
>> Значи, да се направи повеќе кругови.

77
00:04:01,600 --> 00:04:02,810
Како е тоа?

78
00:04:02,810 --> 00:04:04,665
Да се ​​направи уште еден круг.

79
00:04:04,665 --> 00:04:05,985
Ова е возбудлив, нели?

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

81
00:04:09,630 --> 00:04:12,300
>> Така велат Јас само копи-пејст
она што веќе го имале.

82
00:04:12,300 --> 00:04:13,570
Ајде да го наречеме circle2.

83
00:04:13,570 --> 00:04:15,840
И ајде да го стори токму
истото и го даде

84
00:04:15,840 --> 00:04:20,450
атрибути, со оглед на х позицијата на 300.

85
00:04:20,450 --> 00:04:24,140
Yay, имаме две кружници сега.

86
00:04:24,140 --> 00:04:27,240
>> И, се разбира, ние би можеле да
ажурирање на овие вредности.

87
00:04:27,240 --> 00:04:31,640
Јас може да го стави на 400, а сега таа се движи.

88
00:04:31,640 --> 00:04:35,470
И бидејќи тоа е досадно, ајде
извадете го, па circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
Тоа е нема сега.

91
00:04:40,730 --> 00:04:43,170
>> Значи она што го правиш и
е само многу, very-- ова

92
00:04:43,170 --> 00:04:46,030
е многу слично на она што
можел да направи во jQuery, на пример.

93
00:04:46,030 --> 00:04:48,240
Ние сме само манипулирање
ДОМ, се вика.

94
00:04:48,240 --> 00:04:50,040
Можеби сте слушнале дека пред зборот.

95
00:04:50,040 --> 00:04:53,255
Ние сме создавање работи, поставување
атрибути на работи, отстранување нешта.

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

97
00:04:58,950 --> 00:05:02,360
>> Сега, тука е местото каде што станува интересно.

98
00:05:02,360 --> 00:05:07,250
Така подоцна во кодот, ние би можеле уште
се однесува на оригиналната круг тука.

99
00:05:07,250 --> 00:05:14,100
Значи, да ги ресетирате својот атрибут на CX.

100
00:05:14,100 --> 00:05:18,260
Да речеме, нејзината позиција х 400.

101
00:05:18,260 --> 00:05:22,406
И јас одам да транзиција
тоа, па тоа е очигледно.

102
00:05:22,406 --> 00:05:23,360
Не одиме.

103
00:05:23,360 --> 00:05:24,780
>> Значи ние додаде круг.

104
00:05:24,780 --> 00:05:26,440
Ние го поставите на некои атрибути.

105
00:05:26,440 --> 00:05:28,210
Додадовме уште еден круг, ја извади.

106
00:05:28,210 --> 00:05:31,650
И тогаш ние сме менување
оригинални круг.

107
00:05:31,650 --> 00:05:35,400
>> Но, тука е местото каде што станува
многу поинтересна.

108
00:05:35,400 --> 00:05:39,070
Не само што може да се постави атрибути
како само вредности, може да се каже,

109
00:05:39,070 --> 00:05:41,610
Еј, круг, оди во позиција 200.

110
00:05:41,610 --> 00:05:44,540
Ние, исто така може да ги поставите како функции.

111
00:05:44,540 --> 00:05:48,850
>> Така, наместо да даваат 400 овде,
можеме да направиме некои пресметка

112
00:05:48,850 --> 00:05:53,950
во лет за она што ние
сакам тоа атрибут за да биде.

113
00:05:53,950 --> 00:05:56,580
Значи ова е како што би го изразат тоа.

114
00:05:56,580 --> 00:06:00,660
Велиме, наместо 400, дозволете ми
ви даде функцијата, наместо.

115
00:06:00,660 --> 00:06:04,180
И тука, во внатрешноста на оваа функција,
ние може да направи било луд пресметка.

116
00:06:04,180 --> 00:06:06,820
>> Ние би можеле да се преземат на време и
гледам во некои други нешто

117
00:06:06,820 --> 00:06:11,230
и динамично се одлучи за
кругот што вредност сакаме.

118
00:06:11,230 --> 00:06:15,266
Како за ние само се откажат
тоа случаен x позиција?

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

120
00:06:20,360 --> 00:06:21,120
Значи тоа е тоа.

121
00:06:21,120 --> 00:06:25,490
>> Значи она што вели дека е, за
Секој Х, ја извршите оваа функција.

122
00:06:25,490 --> 00:06:29,340
И она што го правиш е пресметување
некои работи, по случаен избор пати ширина

123
00:06:29,340 --> 00:06:30,410
и да се врати тоа.

124
00:06:30,410 --> 00:06:34,765
Значи, секој пат кога ние се кандидира тоа, ние се добие
круг што оди на случаен место.

125
00:06:34,765 --> 00:06:36,394
Тоа е вид на кул.

126
00:06:36,394 --> 00:06:38,310
Се чувствувам како да може да се погледне
во ова за малку.

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

128
00:06:44,274 --> 00:06:46,440
Ние сме почнуваат да се дојде до
нешто интересно овде.

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

130
00:06:49,120 --> 00:06:51,390
Да се ​​направи ова на податоци управувано сега.

131
00:06:51,390 --> 00:06:53,420
Нема податоци овде.

132
00:06:53,420 --> 00:06:54,482
Ајде да го промени тоа.

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

134
00:06:57,440 --> 00:07:12,140
>> ЧИН II, податоци Управувано Documents--
Значи, да се вратиме тука.

135
00:07:12,140 --> 00:07:15,340
И ајде да се ослободи од circle2,
бидејќи ние сме само додавање и отстранување на

136
00:07:15,340 --> 00:07:15,840
тоа.

137
00:07:15,840 --> 00:07:17,382
Значи ние навистина не е потребно.

138
00:07:17,382 --> 00:07:21,421
Ние треба да се биде многу умен тука.

139
00:07:21,421 --> 00:07:23,170
Да речеме, имаме
некои податоци на некој вид.

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

141
00:07:31,540 --> 00:07:40,020
Еден moment-- да речеме,
имавме податоци на оваа форма.

142
00:07:40,020 --> 00:07:41,800
Ние имавме низа, само
еден куп на броеви.

143
00:07:41,800 --> 00:07:45,750
Имаме седум броеви,
без оглед на овие represent-- износ

144
00:07:45,750 --> 00:07:48,810
во банкарска сметка на луѓето, како
колку тие тежат, бог знае што.

145
00:07:48,810 --> 00:07:51,310
>> Овие се броеви, и ние
сакате да го користите нашите кругови

146
00:07:51,310 --> 00:07:53,240
да ги претставуваат оние броеви некако.

147
00:07:53,240 --> 00:07:55,515
Ние сакаме да се врзуваат за нашите
кругови на оние броеви.

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

149
00:07:58,750 --> 00:07:59,626
Значи она што го правиме.

150
00:07:59,626 --> 00:08:01,500
Да речеме, сакаме
круг за секој број.

151
00:08:01,500 --> 00:08:03,590
Ние може да направи стариот
нешто што се doing--

152
00:08:03,590 --> 00:08:06,020
круг додавај и circle2 и circle3.

153
00:08:06,020 --> 00:08:10,020
Но, ова излегува од рака, и
има многу на повторување логика.

154
00:08:10,020 --> 00:08:12,760
>> Значи, да се попаметниот со тоа.

155
00:08:12,760 --> 00:08:17,810
Наместо да се користи var круг
svg.append дека бевме само користи,

156
00:08:17,810 --> 00:08:21,580
ние сме случува да се користи
овој мал блок тука.

157
00:08:21,580 --> 00:08:24,510
Не сакам да одам во-длабочината на
во она што сите овие делови се направи.

158
00:08:24,510 --> 00:08:26,020
И тоа е вид на напредна тема.

159
00:08:26,020 --> 00:08:27,830
И посакувам да можев.

160
00:08:27,830 --> 00:08:31,370
>> Но, клучна работа е да recognize-- и
ќе видите многу често е во Д3 код.

161
00:08:31,370 --> 00:08:36,840
Овој блок од текст основните
создава како многу кругови

162
00:08:36,840 --> 00:08:41,360
колку што има елементи на податоците
во оваа низа, токму тука.

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

164
00:08:53,420 --> 00:08:55,780
Значи ова создава толку многу
кругови постојат елементи.

165
00:08:55,780 --> 00:08:58,520
Тоа се случува да ни создаде седум кругови.

166
00:08:58,520 --> 00:09:01,710
И тоа го прави навистина, навистина клучна работа.

167
00:09:01,710 --> 00:09:02,460
Значи, да се кандидира тоа.

168
00:09:02,460 --> 00:09:05,460
Да се ​​отстранат другите наши круг.

169
00:09:05,460 --> 00:09:09,565
Ајде само коментираше овој
скратено надвор и да ја стартувате тоа повторно.

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

171
00:09:13,840 --> 00:09:15,260
>> Не одиме.

172
00:09:15,260 --> 00:09:18,030
Така, нашето круг тука е
многу потемна, бидејќи ние

173
00:09:18,030 --> 00:09:20,720
имаат седум кругови, еден
на врвот на друга.

174
00:09:20,720 --> 00:09:25,425
Ние само се создаде седум кругови, еден
секој за секоја од овие податоци елементи.

175
00:09:25,425 --> 00:09:28,860
Но, има една клучна работа што се случи
со овој фрагмент, токму тука.

176
00:09:28,860 --> 00:09:31,030
>> Тоа е дека податоците биле врзани.

177
00:09:31,030 --> 00:09:33,440
Значи секој еден од
тие податоци елементи,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, е обврзан
на одреден круг.

179
00:09:38,830 --> 00:09:40,960
Затоа, не само овие создаден
еден куп на кругови

180
00:09:40,960 --> 00:09:43,420
но ги врзува овие две работи заедно.

181
00:09:43,420 --> 00:09:48,740
>> И во иднина, бидејќи ние создадовме
тие кругови со оваа Д3 функција,

182
00:09:48,740 --> 00:09:52,430
ако јас ви даде круг, можете да
ми даде податоците поврзани со неа.

183
00:09:52,430 --> 00:09:53,280
Значи можеме да поставиме Д3.

184
00:09:53,280 --> 00:09:54,840
Еј, Д3, имам овој круг.

185
00:09:54,840 --> 00:09:57,350
Што е податокот дека кругот?

186
00:09:57,350 --> 00:10:01,290
И Д3 ќе ни каже 10 или 45 или 105.

187
00:10:01,290 --> 00:10:02,380
>> Овие нешта се врзани.

188
00:10:02,380 --> 00:10:04,490
Тоа е многу, многу фундаментален концепт.

189
00:10:04,490 --> 00:10:06,070
Да ги погледнеме на тоа.

190
00:10:06,070 --> 00:10:12,210
>> Значи начинот на кој ние ќе побара D3-- така
ова е ирелевантно за ова,

191
00:10:12,210 --> 00:10:16,620
но само ми верувате на неа.

192
00:10:16,620 --> 00:10:17,620
Ова е како ние бараме Д3.

193
00:10:17,620 --> 00:10:21,312
Еј, Д3, дај ми прв
круг што може да се најдат.

194
00:10:21,312 --> 00:10:23,580
Дај ми првиот круг може да се најдат.

195
00:10:23,580 --> 00:10:29,660
И тогаш ние би можеле да побараат Д3, она што е
податоците за тоа, како оваа, 10.

196
00:10:29,660 --> 00:10:33,380
>> Значи ние само побарајте Д3, најдете ме
првиот круг може да се најдат.

197
00:10:33,380 --> 00:10:34,400
Што има своите податоци?

198
00:10:34,400 --> 00:10:36,650
10, кој е навистина нашата
Првиот елемент на податок.

199
00:10:36,650 --> 00:10:42,150
Можевме да го прашам, еј, Д3,
ни се најде нашиот трет круг.

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

201
00:10:44,450 --> 00:10:45,740
Зошто е ова важно?

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

203
00:10:49,790 --> 00:10:52,250
>> Значи, токму тука, јас спомнав
кои би можеле да се користат функции.

204
00:10:52,250 --> 00:10:54,910
И јас спомнав дека беше
многу моќна работа.

205
00:10:54,910 --> 00:11:03,070
Затоа, не само што може да функционира нашето прават работите
како што прават некои пресметка, на пример,

206
00:11:03,070 --> 00:11:09,170
се врати на случаен број, може да
исто така, се прават работите врз основа на податоците.

207
00:11:09,170 --> 00:11:11,550
Тоа е она што значи податоци управувано документи.

208
00:11:11,550 --> 00:11:13,750
Тоа е она што Д3 застапува.

209
00:11:13,750 --> 00:11:17,800
>> Значи ова x postition-- наместо
на само велејќи, сите кругови,

210
00:11:17,800 --> 00:11:21,735
добие x 200 позиција, ние
може да го даде во функција.

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

212
00:11:26,140 --> 00:11:30,140
И тука, можеме да направиме некои пресметка.

213
00:11:30,140 --> 00:11:33,710
и d тука стои во место за податоци.

214
00:11:33,710 --> 00:11:36,120
Така што секој пат имаме
круг, во основа,

215
00:11:36,120 --> 00:11:37,750
Д3 ќе се создадат овие седум кругови.

216
00:11:37,750 --> 00:11:38,500
И тогаш за секој

217
00:11:38,500 --> 00:11:41,920
>> круг, тоа се случува да одам, еј,
circle1 она што е вашата x позиција.

218
00:11:41,920 --> 00:11:45,210
Претходно, ние бевме
секогаш одговарање 200.

219
00:11:45,210 --> 00:11:48,630
Но, сега, во секое време Д3 прашува
Што има вашиот x позиција,

220
00:11:48,630 --> 00:11:51,790
тоа се случува да им даде us-- имаме
тој круг, па ние имаме податоците.

221
00:11:51,790 --> 00:11:55,290
Тоа се случува да ни даде податоци и да каже,
што сакаш изложбата да биде,

222
00:11:55,290 --> 00:11:57,120
врз основа на тие податоци.

223
00:11:57,120 --> 00:11:59,590
>> Ајде само да се вратат вистинските податоци.

224
00:11:59,590 --> 00:12:04,910
Значи, ако ние ја извршите оваа, ова му дава
ни податоци управувано документи.

225
00:12:04,910 --> 00:12:08,040
Овие кругови се базираат
во однос position--

226
00:12:08,040 --> 00:12:11,120
тие се основа како функција на податоците.

227
00:12:11,120 --> 00:12:13,100
>> Значи за прв круг,
Д3 става круг.

228
00:12:13,100 --> 00:12:16,770
И тогаш Д3 бара од нас, што прават
сакате изложбата да биде.

229
00:12:16,770 --> 00:12:19,620
А ние само се каже, без разлика на податоци.

230
00:12:19,620 --> 00:12:21,185
Направете експозиција 10.

231
00:12:21,185 --> 00:12:26,320
>> Потоа го прашува, што сакаш на
Изложбата ќе биде за вториот круг.

232
00:12:26,320 --> 00:12:27,270
И ние се одговори, 45.

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

234
00:12:30,000 --> 00:12:32,230
И ние, се разбира, може да
направи некои пресметка тука.

235
00:12:32,230 --> 00:12:35,510
Сметам дека тие кругови
се вид на squished до.

236
00:12:35,510 --> 00:12:38,965
>> Значи тоа се размножуваат со 3, помножи податоци од страна на 3.

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

238
00:12:41,870 --> 00:12:43,840
Нашите круг само што влегов прошири надвор.

239
00:12:43,840 --> 00:12:46,730
Нашите вредност е трипати.

240
00:12:46,730 --> 00:12:51,010
>> Кругот е навистина на работ,
па ајде можеби вид на тоа офсет.

241
00:12:51,010 --> 00:12:53,632
Да речеме, од 20.

242
00:12:53,632 --> 00:12:56,070
Овде и да одите.

243
00:12:56,070 --> 00:12:57,590
>> Ова е визуелизација на податоците.

244
00:12:57,590 --> 00:13:01,767
Тоа е многу основни, но овој
ни дава увид во нашите податоци.

245
00:13:01,767 --> 00:13:04,600
Тоа ни кажува дека, на пример, ние
имаат малку кластер на елементи.

246
00:13:04,600 --> 00:13:06,340
И ние имаме голем поодалечена тука.

247
00:13:06,340 --> 00:13:10,830
Ова ни дава некои информации
за дистрибуција.

248
00:13:10,830 --> 00:13:20,830
>> Ако бевме, на пример, да се промени
податоците до 150 тука и освежи,

249
00:13:20,830 --> 00:13:22,630
нашите визуелизација се менува.

250
00:13:22,630 --> 00:13:24,285
Овој документ е податоци управувано.

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

252
00:13:32,640 --> 00:13:36,180
>> Па се разбира, сите овие елементи,
сите овие атрибути тука,

253
00:13:36,180 --> 00:13:38,430
можеме да го користиме во функција, а не
само со броеви, а не само

254
00:13:38,430 --> 00:13:39,900
на x и y позиции.

255
00:13:39,900 --> 00:13:42,120
Значи, можеме да го користиме функција за боја.

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

257
00:13:45,260 --> 00:13:46,360
Затоа ние ќе го стори истото.

258
00:13:46,360 --> 00:13:49,360
Ние ќе го даде функција.

259
00:13:49,360 --> 00:13:52,320
>> И да речеме, ние би можеле да имаат
conditionals во нашата функција.

260
00:13:52,320 --> 00:13:54,770
Оваа функција може да биде
стотици линии долго.

261
00:13:54,770 --> 00:13:57,150
Што може да направи многу, многу комплицирани работи.

262
00:13:57,150 --> 00:13:59,080
>> Значи, да се стави ако изјавата тука.

263
00:13:59,080 --> 00:14:03,420
Да речеме, ако нашите податоци е помалку
од 50, тоа е некое преодно

264
00:14:03,420 --> 00:14:05,817
дека ние сме заинтересирани
во некоја причина.

265
00:14:05,817 --> 00:14:06,650
Да се ​​направи тоа зелени.

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

267
00:14:09,830 --> 00:14:15,320
Инаку, ајде да се направи тоа во црвено.

268
00:14:15,320 --> 00:14:16,110
Како е тоа?

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

270
00:14:19,630 --> 00:14:21,220
Ница.

271
00:14:21,220 --> 00:14:24,860
>> Значи, нашата визуелизација на податоците почнува
да пренесе повеќе интересни информации

272
00:14:24,860 --> 00:14:26,727
на многу канали.

273
00:14:26,727 --> 00:14:28,560
Така, сега знаете малку
за дистрибуција.

274
00:14:28,560 --> 00:14:31,768
И знаеме дека има некој вид на
отсечени во 50, дека ние сме заинтересирани.

275
00:14:31,768 --> 00:14:35,630
Знаеме дека постојат две поени
под прагот, а повеќето од нив

276
00:14:35,630 --> 00:14:36,130
погоре.

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

278
00:14:41,510 --> 00:14:46,160
>> Значи, како последен чекор, овие податоци тука,
тоа е многу ретко да се види ова како тоа.

279
00:14:46,160 --> 00:14:52,610
Значи, ајде да го исели на променлива
затоа што тоа е почиста, вака.

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

281
00:15:02,980 --> 00:15:05,197
И потоа ние ги користиме таа променлива тука.

282
00:15:05,197 --> 00:15:06,280
Тоа е иста работа.

283
00:15:06,280 --> 00:15:07,280
Тоа е само малку почист.

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

285
00:15:25,300 --> 00:15:35,300
>> Потоа, акт III, Scales--
Значи еден проблем во право

286
00:15:35,300 --> 00:15:38,920
тука е, ако ги менуваме нашите
Податоците во оваа 200 value--

287
00:15:38,920 --> 00:15:41,685
ако го смените 400
или нешто и освежи,

288
00:15:41,685 --> 00:15:44,540
тогаш оваа вредност само отиде offscreen.

289
00:15:44,540 --> 00:15:49,040
Значи, нашата логика, токму тука
за тоа како тоа го правиме на времето 3

290
00:15:49,040 --> 00:15:52,570
и 20, да го шират и потоа
надомести тоа малку е навистина clunky.

291
00:15:52,570 --> 00:15:54,150
>> Што прават тие бројки значат?

292
00:15:54,150 --> 00:15:55,400
Тие се само хард кодирани таму.

293
00:15:55,400 --> 00:15:58,830
И тие се многу врзани за податоци.

294
00:15:58,830 --> 00:16:00,550
Сакаме податоци управувано документ.

295
00:16:00,550 --> 00:16:05,460
Ние сакаме многу флексибилен документ,
дека со оглед на податоците, се прилагодува на него

296
00:16:05,460 --> 00:16:07,900
и тој претставува.

297
00:16:07,900 --> 00:16:11,330
>> Она што е потребно е во основа, ние
имаат оваа спектар на броеви 10.

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

299
00:16:12,640 --> 00:16:17,630
И ние сакаме да го мапираат дека излез
ширина, по целата ширина тука.

300
00:16:17,630 --> 00:16:20,620
Значи имаме на опсегот на
броеви и оди од 0 до 100.

301
00:16:20,620 --> 00:16:24,980
И ние имаме овој кампус Јас оди
20-700, во овој случај.

302
00:16:24,980 --> 00:16:26,515
>> Ние вид на сакаат да планирам што натаму.

303
00:16:26,515 --> 00:16:30,002
Ние сакаме да скала дека и
тогаш тоа се надомести малку.

304
00:16:30,002 --> 00:16:33,165
Излегува дека Д3 има овие.

305
00:16:33,165 --> 00:16:34,220
Таа се вика скала.

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

307
00:16:37,410 --> 00:16:38,250
Значи, да го користам.

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

309
00:16:46,300 --> 00:16:49,670
>> Начинот на кој works-- Одам да
тип овој, а потоа се објасни.

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

311
00:17:01,530 --> 00:17:02,450
Ова е скала.

312
00:17:02,450 --> 00:17:08,670
Што да се направи, тоа ќе планирам
вредности 1-200 на 20 до 600.

313
00:17:08,670 --> 00:17:10,990
Ние може да се провери тоа.

314
00:17:10,990 --> 00:17:13,329
Можеме да видиме дека тука.

315
00:17:13,329 --> 00:17:21,704
>> Значи, ако јас се хранат 1-- еден момент.

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

317
00:17:47,764 --> 00:17:48,555
Дај ми една секунда.

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

319
00:17:53,680 --> 00:17:55,080
Морам да го погрешиле.

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

321
00:18:15,320 --> 00:18:15,990
Таму да одите.

322
00:18:15,990 --> 00:18:17,930
Жал ми е за тоа.

323
00:18:17,930 --> 00:18:22,050
>> Значи она што скала ќе направи
е, тоа ќе потрае вредност

324
00:18:22,050 --> 00:18:24,930
а потоа се конвертира тоа,
се прошири тоа надвор, така што

325
00:18:24,930 --> 00:18:27,320
го исполнува целиот спектар си бара.

326
00:18:27,320 --> 00:18:32,910
Значи во овој случај, ако ние го даде еден,
тоа се случува да се на сајтот, кој излезе на 20.

327
00:18:32,910 --> 00:18:37,750
И ако ние го даде 200, тоа е
одат за да на сајтот дека на 600.

328
00:18:37,750 --> 00:18:40,460
И некаде помеѓу,
ако добиеме 100, тоа е

329
00:18:40,460 --> 00:18:44,610
ќе биде некаде
меѓу 20 и 600.

330
00:18:44,610 --> 00:18:51,480
>> И, се разбира, сега тоа е она што
ние треба да ги отстрани оние хард кодирани

331
00:18:51,480 --> 00:18:53,402
работите што ги имаат право таму.

332
00:18:53,402 --> 00:18:55,950
Значи она што сакате да го направите е
ги податоците што сме

333
00:18:55,950 --> 00:19:00,950
со оглед дека индивидуалните податоци
елемент, и го давате да скала во прв план.

334
00:19:00,950 --> 00:19:02,635
Значи обем ќе ја скала нагоре.

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

336
00:19:27,020 --> 00:19:48,880
>> Well-- О, имаме малку грешка тука.

337
00:19:48,880 --> 00:19:50,120
Ние сме податоците кои недостасуваат.

338
00:19:50,120 --> 00:19:51,290
Таму да одите.

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

340
00:19:58,550 --> 00:19:59,550
И тоа се проширува надвор.

341
00:19:59,550 --> 00:20:01,383
>> Тоа ни дава за истото
Резултатот ги имале од порано,

342
00:20:01,383 --> 00:20:04,030
но наместо оние
хард кодирани ограничувања.

343
00:20:04,030 --> 00:20:07,790
И ако големината на нашите
платно промени, на пример,

344
00:20:07,790 --> 00:20:11,790
Ако сакаме да имаме повеќе од тоа
400 пиксели и тоа squishes надвор,

345
00:20:11,790 --> 00:20:15,440
можеме да го имаат over--
ние може да се прошири, или ние

346
00:20:15,440 --> 00:20:21,890
може да ја намали оваа левата маргина на
нешто помалку или повеќе од 20.

347
00:20:21,890 --> 00:20:25,470
Овие броеви, овие хард кодирани
броеви сега да има смисла за нас.

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

349
00:20:28,110 --> 00:20:30,520
>> И ние може да направи многу повеќе
интересни работи, како и.

350
00:20:30,520 --> 00:20:35,990
Така, наместо да има линеарна
скала, ние можеби ќе сакате да се логирате скала.

351
00:20:35,990 --> 00:20:37,840
И тоа ќе ни даде најавите скала.

352
00:20:37,840 --> 00:20:41,269
>> Па сега нашата скала, наместо
само проширување дека опсег,

353
00:20:41,269 --> 00:20:42,810
таа го прави повеќе софистицирани нешта.

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

355
00:20:48,790 --> 00:20:53,790
Наместо да се има овој опсег тешко
кодирани, и наместо тоа 600,

356
00:20:53,790 --> 00:20:58,465
ние можеби ќе сакате да се само користење на ширина,
па од 20 до ширината минус 40,

357
00:20:58,465 --> 00:21:02,392
2 пати на маргина на другата страна.

358
00:21:02,392 --> 00:21:05,350
И ова го прави многу повеќе смисла да се
некој кој може да се погледне на кодот.

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

360
00:21:08,080 --> 00:21:11,850
>> Интересно, на скали да се добие
многу, многу софистицирани, како и.

361
00:21:11,850 --> 00:21:13,350
Тие го прават многу интересни работи.

362
00:21:13,350 --> 00:21:17,620
Значи скали не мора нужно
да работат само со броеви.

363
00:21:17,620 --> 00:21:18,955
Ајде да се создаде боја скала.

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

365
00:21:23,120 --> 00:21:26,120
>> Значи, нашата палета може да be--
наш домен е од 1 до 200.

366
00:21:26,120 --> 00:21:28,220
Тоа е влезен работа.

367
00:21:28,220 --> 00:21:33,793
Но, ние би сакале да карта од
зелена во црвена, на пример.

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

369
00:21:39,710 --> 00:21:42,910
И сега, ако го помине 1,
ние си оди за да се добие зелено.

370
00:21:42,910 --> 00:21:45,110
Ако ние го даде 200, ние ќе добиете црвена боја.

371
00:21:45,110 --> 00:21:49,480
И ако можеме да го давате нешто помеѓу,
тоа се случува да биде некој микс на тоа,

372
00:21:49,480 --> 00:21:52,520
некаде на градиент
помеѓу зелена и црвена боја.

373
00:21:52,520 --> 00:21:55,210
>> И наместо да има
овој вид на clunky логика

374
00:21:55,210 --> 00:21:58,550
имаме тука со
условно право, таму,

375
00:21:58,550 --> 00:22:03,250
би можеле да имаат something-- на
линеарна скала помеѓу нив.

376
00:22:03,250 --> 00:22:07,100
Значи, ние би го користите на скалата ние само
создаден, кој се нарекува боја.

377
00:22:07,100 --> 00:22:09,060
А ние би го D, кој
е нашите податоци елемент.

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

379
00:22:14,250 --> 00:22:15,060
И таму ќе одиме.

380
00:22:15,060 --> 00:22:18,070
Имаме боја скала.

381
00:22:18,070 --> 00:22:18,940
>> Значи ова е мапирање.

382
00:22:18,940 --> 00:22:20,960
Значи многу лево е сосема зелени.

383
00:22:20,960 --> 00:22:22,560
Екстремната десница е целосно црвено.

384
00:22:22,560 --> 00:22:24,828
И што ќе се памети
е функција на d.

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

386
00:22:33,369 --> 00:22:35,160
Имаме интересна
визуализации тука.

387
00:22:35,160 --> 00:22:36,952
Но нашите податоци беше вид на здодевни.

388
00:22:36,952 --> 00:22:39,410
Ајде да видиме што можеме да направиме ако
имавме повеќе интересни податоци.

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

390
00:22:44,420 --> 00:22:50,500
>> ЧИН IV, кои работат со
Data-- првото нешто

391
00:22:50,500 --> 00:22:53,560
ние треба да направите за да ја направиме нашата
визуелизација поинтересна

392
00:22:53,560 --> 00:22:56,140
е да се преселат на податоци на друго место.

393
00:22:56,140 --> 00:22:58,310
Тоа е многу clunky да имаат
податоците хард кодирани тука.

394
00:22:58,310 --> 00:23:01,220
И, генерално, ќе се прашуваат
некој друг за податоци.

395
00:23:01,220 --> 00:23:05,400
Ќе се можеби бара од Владата,
на Бирото за попис, што е вашите податоци

396
00:23:05,400 --> 00:23:10,170
а потоа заговор дека или се бара
некои трети лице за некои податоци

397
00:23:10,170 --> 00:23:13,330
а потоа градење на
визуелизација на тоа.

398
00:23:13,330 --> 00:23:17,170
>> Така првото нешто што сакате да направите,
е тоа да се преселат на друго место.

399
00:23:17,170 --> 00:23:24,130
Па јас одам да се создаде
поднесе тука наречен data.json.

400
00:23:24,130 --> 00:23:25,600
JSON е форматот на податоците.

401
00:23:25,600 --> 00:23:29,210
Вие не треба да се знае многу за тоа.

402
00:23:29,210 --> 00:23:33,210
И ние ќе треба да го копирате
малку податоци имаме таму,

403
00:23:33,210 --> 00:23:40,330
ставете го во таму дословно, одете
назад кон нашите визуелизација код

404
00:23:40,330 --> 00:23:45,362
тука, и ја користите оваа функција, токму тука.

405
00:23:45,362 --> 00:23:46,820
Вие не треба да ги знаат сите детали.

406
00:23:46,820 --> 00:23:49,800
Но, она што ова ќе го направите е,
ќе најдете дека датотека,

407
00:23:49,800 --> 00:23:51,780
го земе, и вратете го на нас.

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

409
00:24:11,660 --> 00:24:15,220
Па што тоа не е, тоа оди
и да добијат data.json датотека.

410
00:24:15,220 --> 00:24:18,570
И тогаш сите кодот што е
вовлечен inside-- суштина,

411
00:24:18,570 --> 00:24:21,800
сите кодот што треба there-- ќе
работи само кога ќе го добиете податоци назад.

412
00:24:21,800 --> 00:24:25,760
И тогаш тоа се случува да се кандидира дека
код со податоците што ги имаме.

413
00:24:25,760 --> 00:24:28,870
Голема, ние имаме
визуелизација дека пребарувања

414
00:24:28,870 --> 00:24:31,390
за некои кодот некаде
друго, што е обично

415
00:24:31,390 --> 00:24:36,110
каде што некои податоци од пребарувања
некаде на друго место, што е обично

416
00:24:36,110 --> 00:24:38,656
како визуализации работа.

417
00:24:38,656 --> 00:24:41,400
>> Но, јас сакам да се вратам на податоците.

418
00:24:41,400 --> 00:24:48,030
Па податоците фундаментално во D3-- Д3
троши податоци тоа е листа на работи.

419
00:24:48,030 --> 00:24:53,000
Д3 очекува податоци само да биде листа
работи, низа на работи.

420
00:24:53,000 --> 00:24:58,780
Тоа не е важно она што тие нешта
се, се додека тоа е низа од нив.

421
00:24:58,780 --> 00:25:02,460
>> Па еве, на пример, би можеле на
Се разбира дека со подвижна запирка вредности.

422
00:25:02,460 --> 00:25:04,830
Ние би можеле да имаат негативни.

423
00:25:04,830 --> 00:25:09,400
Д3 не се грижи, толку долго
како што е списокот на работите.

424
00:25:09,400 --> 00:25:13,270
>> Како интересни работи што
би можеле да имаат, ние би можеле, исто така,

425
00:25:13,270 --> 00:25:19,410
имаат листа на жици како што.

426
00:25:19,410 --> 00:25:25,440
Значи овие се Кримсон наслови
Јас зедов пред неколку дена.

427
00:25:25,440 --> 00:25:29,220
А можеби можете да најдете некои интересни
работи во врска со овие наслови.

428
00:25:29,220 --> 00:25:30,970
>> Значи, повторно, ова е листа на нештата.

429
00:25:30,970 --> 00:25:32,360
Д3 не се грижи.

430
00:25:32,360 --> 00:25:35,572
Овие се случи да биде стринг.

431
00:25:35,572 --> 00:25:36,530
Ние ги промени нашите податоци.

432
00:25:36,530 --> 00:25:38,210
>> Да се ​​вратиме на нашите визуелизација.

433
00:25:38,210 --> 00:25:42,495
Сега, нашите визуелизација очекува
влезот да биде броеви.

434
00:25:42,495 --> 00:25:44,370
Значи ние се случува да имаат
да се направат неколку промени.

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

436
00:25:47,180 --> 00:25:52,180
Така на пример, прв од сите, можеби
ние сакаме да се стави овие кругови заедно

437
00:25:52,180 --> 00:25:56,870
од должината на наслов,
бројот на карактери во насловот.

438
00:25:56,870 --> 00:26:03,600
>> Значи она што ние ќе направиме is-- секој пат кога нашите
функција се нарекува со еден конец,

439
00:26:03,600 --> 00:26:09,095
ние ќе најдете тоа е должина и
потоа го положат дека на скалата.

440
00:26:09,095 --> 00:26:11,550
Бојата, јас ќе се врати
дека за челик сина боја.

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

442
00:26:19,060 --> 00:26:20,420
И таму ќе одиме.

443
00:26:20,420 --> 00:26:23,190
Имаме визуелизација
на Crimson наслови.

444
00:26:23,190 --> 00:26:25,500
>> Нашите скала е малку надвор.

445
00:26:25,500 --> 00:26:29,680
Ајде да се претпостави дека најдолгиот
Насловот е долг 100 карактери,

446
00:26:29,680 --> 00:26:32,244
така span дека од малку.

447
00:26:32,244 --> 00:26:33,410
И ние имаме визуелизација.

448
00:26:33,410 --> 00:26:36,710
Така, се чини дека повеќето наслови
се прилично блиску,

449
00:26:36,710 --> 00:26:38,750
во однос на ликот на линија.

450
00:26:38,750 --> 00:26:41,200
Но, еден навистина се издвојува.

451
00:26:41,200 --> 00:26:46,660
>> Ние би можеле да се изгради некои алатки
за да истражуваат што повеќе.

452
00:26:46,660 --> 00:26:50,710
Но, кога се работи за тоа, јас бев
интересира дали, во оваа група на податоци,

453
00:26:50,710 --> 00:26:53,880
наслови со дебелото црево
во нив ќе биде подолг.

454
00:26:53,880 --> 00:26:55,770
Се претпоставува дека би.

455
00:26:55,770 --> 00:26:56,660
>> Па ајде да дознаете.

456
00:26:56,660 --> 00:27:00,650
Ајде да го користите боја
канал како што правевме досега,

457
00:27:00,650 --> 00:27:04,540
да се кодираат некои за тоа дали
има дебелото црево или не.

458
00:27:04,540 --> 00:27:07,220
Значи ние ќе користат условна повторно.

459
00:27:07,220 --> 00:27:09,350
Вие не треба да знаете
деталите на ова,

460
00:27:09,350 --> 00:27:14,260
Но, ова е како да се провери
стринг за одреден карактер

461
00:27:14,260 --> 00:27:16,355
во JavaScript, повторно, не е важно.

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

463
00:27:18,910 --> 00:27:23,270
>> Но, ако ние не се најде
дебелото црево, ние ќе се врати зелена.

464
00:27:23,270 --> 00:27:26,100
И ако тоа го правиме, ние ќе се врати во црвено.

465
00:27:26,100 --> 00:27:29,010
Значи, повторно, наслови кои
имаат дебелото црево ќе биде црвено.

466
00:27:29,010 --> 00:27:34,980
Тоа е она што ова means-- убаво.

467
00:27:34,980 --> 00:27:38,040
>> Така ми се чини дека мојот
хипотеза се bumped.

468
00:27:38,040 --> 00:27:39,360
Има само две.

469
00:27:39,360 --> 00:27:42,380
Имаме само шест поени на податоци
а само две имаа две точки.

470
00:27:42,380 --> 00:27:45,510
Но, се чини малку повеќе
на долниот крај, всушност.

471
00:27:45,510 --> 00:27:47,830
Определување со запирки изгледа
генерално да биде пократок,

472
00:27:47,830 --> 00:27:52,370
барем во нашите податоци set-- интересно.

473
00:27:52,370 --> 00:27:55,830
>> Да се ​​вратиме тоа да
челик сина и потоа да видиме

474
00:27:55,830 --> 00:28:00,601
она што може да се направи дури и со
повеќе интересни податоци.

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

476
00:28:04,370 --> 00:28:09,070
Значи, повторно, јас спомнав дека
податоци во Д3 е листа на работи.

477
00:28:09,070 --> 00:28:11,080
Видовме број на многу видови.

478
00:28:11,080 --> 00:28:12,810
Видовме жици.

479
00:28:12,810 --> 00:28:15,700
Но, она што, исто така, можат да бидат предмет.

480
00:28:15,700 --> 00:28:20,080
>> Тие можат да бидат комплицирани работи
кои вклучуваат многу работи.

481
00:28:20,080 --> 00:28:24,510
Да се ​​каже дека повеќе од јасно,
во повеќето случаи,

482
00:28:24,510 --> 00:28:28,384
сакате да се изгради секоја точка со податоци како
покомплициран отколку само една вредност.

483
00:28:28,384 --> 00:28:30,175
Ако сакате да се замисли
база на податоци за учениците,

484
00:28:30,175 --> 00:28:32,470
може да има еден студент
име, студентски проект,

485
00:28:32,470 --> 00:28:36,370
и многу работи поврзани
со посебен рекорд,

486
00:28:36,370 --> 00:28:39,834
не само низа или број.

487
00:28:39,834 --> 00:28:40,750
Значи, ајде да ги разгледаме во тоа.

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

489
00:28:55,180 --> 00:28:56,760
>> Ова е една од тие податоци.

490
00:28:56,760 --> 00:28:59,090
Ова е група на податоци за земјотресите.

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

492
00:29:01,910 --> 00:29:08,430
Значи се што тука на нашата листа или низа
на работите содржи многу нешта себе.

493
00:29:08,430 --> 00:29:11,380
Така што секој податок има
големината и координација.

494
00:29:11,380 --> 00:29:13,425
И се координира
содржи две работи.

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

496
00:29:15,960 --> 00:29:20,450
>> Така што секој ден е сега многу повеќе
комплициран и многу поинтересна

497
00:29:20,450 --> 00:29:22,700
и содржи многу повеќе
интересни информации.

498
00:29:22,700 --> 00:29:26,730
Ајде да видиме што може да се изгради од тоа.

499
00:29:26,730 --> 00:29:36,130
Враќање кон овде, повторно, со користење
нашите хистограм круг визуелизација

500
00:29:36,130 --> 00:29:42,110
ние сме изградени, ајде да видиме дали можеме да се изгради
визуелизација на дистрибуција големина

501
00:29:42,110 --> 00:29:43,305
во нашата група на податоци.

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

503
00:29:45,850 --> 00:29:48,660
>> Па еве, тоа е истиот концепт.

504
00:29:48,660 --> 00:29:51,920
Но сега, г содржи повеќе работи.

505
00:29:51,920 --> 00:29:54,780
г содржи многу елементи на податоците.

506
00:29:54,780 --> 00:29:57,946
Значи ние се г назад.

507
00:29:57,946 --> 00:29:59,670
Д3 ни дава г.

508
00:29:59,670 --> 00:30:06,080
И ние ќе одговориме со наоѓање на големината
на г а потоа поминува тоа да скала.

509
00:30:06,080 --> 00:30:08,490
>> И тогаш ние треба да се промени
нашата скала, се разбира.

510
00:30:08,490 --> 00:30:12,980
Значи величини едноставно не
одат многу повеќе од 10.

511
00:30:12,980 --> 00:30:15,485
Всушност, таму никогаш не било
земјотрес од 10 степени.

512
00:30:15,485 --> 00:30:19,360
Но, тоа е вид на нашите горниот
крајот, нашата горниот спектар.

513
00:30:19,360 --> 00:30:20,240
>> Ајде да се одмориме.

514
00:30:20,240 --> 00:30:22,990
Ница, имаме визуелизација.

515
00:30:22,990 --> 00:30:25,490
Интересно е да се note-- така
постојат два поени на податоци кои

516
00:30:25,490 --> 00:30:29,010
се речиси точно на врвот на секоја
други, во смисла на големина.

517
00:30:29,010 --> 00:30:31,350
Гледаш ова од страна на непроѕирноста ние сме со користење.

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

519
00:30:40,810 --> 00:30:42,690
>> Имаме географски податоци сега.

520
00:30:42,690 --> 00:30:44,710
Имаме ширини и должина.

521
00:30:44,710 --> 00:30:47,549
Можеби би можеле да се направи нешто
многу поинтересна со тоа.

522
00:30:47,549 --> 00:30:49,590
Ајде да се најдат некои повеќе
Интересен начин да се визуелизира

523
00:30:49,590 --> 00:30:53,500
ова покомплицирано
Податоците што ги имаме пристап до.

524
00:30:53,500 --> 00:31:04,950
>> Акт V, Mapping-- основа,
ние сакаме да се стават овие на мапа.

525
00:31:04,950 --> 00:31:07,690
Мислам, ова е местото каде што тоа се случува.

526
00:31:07,690 --> 00:31:13,130
Ние сакаме да се кодираат информации за
позицијата на овие земјотрес читања,

527
00:31:13,130 --> 00:31:16,350
како и нивната големина,
бидејќи имаме тоа сега.

528
00:31:16,350 --> 00:31:21,310
Се разбере како да се консумираат
покомплицирано податоци.

529
00:31:21,310 --> 00:31:26,200
>> Првото нешто што ние ќе го направиме е
направи мапа, во позадина на сајтот.

530
00:31:26,200 --> 00:31:29,360
Одам да поминат низ
тоа многу брзо.

531
00:31:29,360 --> 00:31:30,560
Ова е незгодно код.

532
00:31:30,560 --> 00:31:33,110
Тоа е уште едно од оние
рецепти навистина не

533
00:31:33,110 --> 00:31:35,690
Мора да се разбере целосно за вас да го користите.

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

535
00:31:38,510 --> 00:31:39,740
Но, ова е кодот.

536
00:31:39,740 --> 00:31:43,580
Овој код токму тука создава мапа.

537
00:31:43,580 --> 00:31:45,730
>> Ние нема да одиме во детали.

538
00:31:45,730 --> 00:31:54,210
Но, површно, она што го прави тоа е,
тоа пребарувања овој us.json датотека, која

539
00:31:54,210 --> 00:31:57,150
е датотека на податоци како
оној што го имале од порано.

540
00:31:57,150 --> 00:31:59,150
Тоа е посложена, се разбира.

541
00:31:59,150 --> 00:32:02,920
Но, во овој случај, сè,
секој податок е оваа држава

542
00:32:02,920 --> 00:32:05,420
и има листа на
ширини и должина

543
00:32:05,420 --> 00:32:10,500
кои го дефинираат полигон,
таа форма, таа држава.

544
00:32:10,500 --> 00:32:13,280
>> Значи она што Д3 ќе го направите е слична
на она што беше порано.

545
00:32:13,280 --> 00:32:18,140
Тоа ќе побара и
кои се врзуваат на елемент.

546
00:32:18,140 --> 00:32:20,890
И таму е функција која
ќе сајтот елементот надвор,

547
00:32:20,890 --> 00:32:23,410
врз основа на географска ширина и должина.

548
00:32:23,410 --> 00:32:24,580
Можете да прочитате повеќе за тоа.

549
00:32:24,580 --> 00:32:27,385
И јас го препорачувам.

550
00:32:27,385 --> 00:32:30,090
>> Постојат линкови на
крајот на овој код испратени.

551
00:32:30,090 --> 00:32:31,570
И кодот е коментираше.

552
00:32:31,570 --> 00:32:34,050
Во постојат врски за понатамошна за ова.

553
00:32:34,050 --> 00:32:36,590
Јас Ви препорачуваме да го погледнете.

554
00:32:36,590 --> 00:32:39,460
Но, она што се грижат за се
оваа проекција функција.

555
00:32:39,460 --> 00:32:41,210
Сакам да одам преку тоа.

556
00:32:41,210 --> 00:32:43,522
>> Прво на сите, дозволете ми да покаже
што дека, да, ние имаме карта.

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

558
00:32:47,300 --> 00:32:49,970
Мапите се излади.

559
00:32:49,970 --> 00:32:52,330
Значи, да се погледне на овој
производство функција.

560
00:32:52,330 --> 00:32:56,481
>> Проекција е многу
како скала, Вага повторно.

561
00:32:56,481 --> 00:32:59,210
Значи она што се производство за
оваа проекција функција

562
00:32:59,210 --> 00:33:06,610
не е, ние би можеле да го помине Лонгитуда
latitudes-- и во овој случај,

563
00:33:06,610 --> 00:33:09,590
овие вредности тука се
лат-копнее на објектот

564
00:33:09,590 --> 00:33:13,990
Седиме во право
now-- проекцијата.

565
00:33:13,990 --> 00:33:20,560
И проекција ќе се претвори
дека во x и y пиксел вредности.

566
00:33:20,560 --> 00:33:23,300
>> Значи она што го прави проекција
е многу слична на нашата скала.

567
00:33:23,300 --> 00:33:27,270
Тоа е преземање нашите географски широчини и
должина, што претставува целиот свет

568
00:33:27,270 --> 00:33:31,390
и намалување на големината и дека
одредување на плоштадот што го сакаме,

569
00:33:31,390 --> 00:33:33,510
дека ние сме ја дал.

570
00:33:33,510 --> 00:33:35,220
Во овој случај, ние сме
донесување на овие вредности.

571
00:33:35,220 --> 00:33:41,370
И тоа е давање на нас, и тоа
на вашиот екран значи 640 пиксели.

572
00:33:41,370 --> 00:33:46,250
Целиот овој екран е 700 пиксели
широк, така што нè прави за тука,

573
00:33:46,250 --> 00:33:53,310
и 154 пиксели надолу, што би
проценка е доста тука.

574
00:33:53,310 --> 00:33:57,250
>> Па земајќи оние лат-копнее, која
претставува нешто за целиот свет

575
00:33:57,250 --> 00:34:02,850
и squishing и подвижни дека околу
за нас x и y пиксели вредности даде,

576
00:34:02,850 --> 00:34:05,450
ова е првото нешто што е
направи во оваа мапирање код.

577
00:34:05,450 --> 00:34:07,920
И тогаш остатокот на
кодот троши на податоци

578
00:34:07,920 --> 00:34:14,310
а потоа мапи оние лат-копнее
кон нешто на вашиот екран.

579
00:34:14,310 --> 00:34:18,380
>> Но, ние ќе го користат оваа проекција
функции, затоа што се покажува

580
00:34:18,380 --> 00:34:20,270
имаме лат-копнее копнее, како и.

581
00:34:20,270 --> 00:34:24,509
Гледајќи назад на нашите податоци, имаме
ширини и должина

582
00:34:24,509 --> 00:34:25,425
за секој набљудување.

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

584
00:34:28,131 --> 00:34:29,130
Значи, ајде да го користат проекција.

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

586
00:34:33,250 --> 00:34:37,639
>> Значи гледа во нашите експозиција,
ние сакаме нашите exposition--

587
00:34:37,639 --> 00:34:39,590
имаме географска ширина и должина.

588
00:34:39,590 --> 00:34:40,770
Но, ние сакаме пиксел вредности.

589
00:34:40,770 --> 00:34:43,510
И излегува, имаме точно
она што want-- проекција.

590
00:34:43,510 --> 00:34:46,239
Многу како бевме
користејќи скала токму тука,

591
00:34:46,239 --> 00:34:52,075
ние сме сега ќе се користи проекција
и да го координира.

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

593
00:34:55,241 --> 00:34:56,949
Така првото нешто
ние сме doing-- па ние сме

594
00:34:56,949 --> 00:35:01,520
добивање d, кој е индивидуално податоци
елемент на индивидуален земјотрес

595
00:35:01,520 --> 00:35:02,370
читање.

596
00:35:02,370 --> 00:35:04,640
Првото нешто што го правиме
е да се добие координатите.

597
00:35:04,640 --> 00:35:06,150
Добро, имаме координати.

598
00:35:06,150 --> 00:35:09,160
>> Втората работа што ја правиме е
мине на проекцијата.

599
00:35:09,160 --> 00:35:13,440
Проекција конвертира овие координати
во pixel вредности, x и y.

600
00:35:13,440 --> 00:35:16,680
И тогаш последното нешто што ние
сакате да направите е само да се добие x,

601
00:35:16,680 --> 00:35:19,342
што овој случај е првиот.

602
00:35:19,342 --> 00:35:22,050
Тоа е првата од двете нешта
кои се вратија од проекција.

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

604
00:35:27,840 --> 00:35:29,630
>> Ние ќе го стори истото за y.

605
00:35:29,630 --> 00:35:34,960
Но, наместо тоа, ќе се врати
вториот елемент, на y.

606
00:35:34,960 --> 00:35:35,980
Подгответе се да се одмориме.

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

608
00:35:39,830 --> 00:35:46,450
Ooh, екстра карактер
here-- убаво, имаме

609
00:35:46,450 --> 00:35:51,730
податоци управувано документ кој е
прикривањето на тоа JSON датотека на предмети,

610
00:35:51,730 --> 00:35:57,560
правење на мапа, и менување на
атрибут во однос на податоци

611
00:35:57,560 --> 00:35:59,600
да го проектираат на мапа.

612
00:35:59,600 --> 00:36:00,840
Ова е навистина интересно.

613
00:36:00,840 --> 00:36:03,770
Тоа е кул.

614
00:36:03,770 --> 00:36:05,640
>> Ајде да се земе до еден степен.

615
00:36:05,640 --> 00:36:08,795
Мислам, имаме две парчиња
информации со секој податок.

616
00:36:08,795 --> 00:36:10,000
Мислам, три.

617
00:36:10,000 --> 00:36:12,540
Имаме координати,
кој е x и y.

618
00:36:12,540 --> 00:36:15,700
И ние имаме големина.

619
00:36:15,700 --> 00:36:17,420
>> Ние треба да се кодираат големината на некој начин.

620
00:36:17,420 --> 00:36:18,920
Имаме голем број на канали.

621
00:36:18,920 --> 00:36:20,370
Ние може да се користи боја.

622
00:36:20,370 --> 00:36:21,890
Можеме да го користиме радиус.

623
00:36:21,890 --> 00:36:23,040
Ние може да се користи транспарентноста.

624
00:36:23,040 --> 00:36:25,540
Ние може да се користи многу работи во кодот.

625
00:36:25,540 --> 00:36:29,180
Секој од овие атрибути и многу
повеќе кои не се наведени таму,

626
00:36:29,180 --> 00:36:33,065
затоа што тие се опционални, ние би можеле да
го користите да се кодираат овие податоци, мозочен удар

627
00:36:33,065 --> 00:36:35,670
и сите овие работи што сум споменат.

628
00:36:35,670 --> 00:36:36,690
>> Да направиме радиус.

629
00:36:36,690 --> 00:36:38,830
Мислам дека радиус е најстариот интуитивен.

630
00:36:38,830 --> 00:36:46,210
Значи, повторно, ние ќе го замени тоа хард-кодирани
40 и да прават пресметки.

631
00:36:46,210 --> 00:36:48,810
Ние ќе ги користат нашите омилени скала повторно.

632
00:36:48,810 --> 00:36:50,290
И ние сме минатото г.

633
00:36:50,290 --> 00:36:55,850
Но, не D, бидејќи ние сакаме големината
на d. d е само на податоците точка.

634
00:36:55,850 --> 00:36:57,430
Ќе помине на големината на скалата.

635
00:36:57,430 --> 00:36:58,470
>> Ајде да се обидеме тоа повторно.

636
00:36:58,470 --> 00:37:00,230
Ooh, тоа не функционира.

637
00:37:00,230 --> 00:37:02,940
Зошто не функционира тоа?

638
00:37:02,940 --> 00:37:04,387
>> Значи се сеќавам она што скала го прави тоа.

639
00:37:04,387 --> 00:37:05,470
Да ги погледнеме на скала повторно.

640
00:37:05,470 --> 00:37:10,800
Скалата карти од 1 до 10 на
до 22 до 600, повеќе или помалку.

641
00:37:10,800 --> 00:37:12,030
600 е огромна.

642
00:37:12,030 --> 00:37:14,730
Ова е причината зошто ние сме добивање ова.

643
00:37:14,730 --> 00:37:18,420
>> Значи, сакаме да ги промениме нашите скала
до нешто повеќе разумни.

644
00:37:18,420 --> 00:37:22,610
Да речеме, ние сакаме 0 до 60.

645
00:37:22,610 --> 00:37:25,340
60 е голема, но 10 земјотреси
се неверојатно ретки.

646
00:37:25,340 --> 00:37:27,880
Всушност, тие никогаш не сум се случило.

647
00:37:27,880 --> 00:37:31,830
>> Па што ова ќе направите, е, тоа ќе потрае
нашите степени кој оди од 1 до 10

648
00:37:31,830 --> 00:37:34,490
и го сајтот за да ја прошири надвор.

649
00:37:34,490 --> 00:37:37,370
И го сајтот на 0 за 60 години.

650
00:37:37,370 --> 00:37:38,840
Ајде да се одмориме.

651
00:37:38,840 --> 00:37:41,850
>> Ница, имаме визуелизација.

652
00:37:41,850 --> 00:37:42,500
Ова е одлично.

653
00:37:42,500 --> 00:37:43,736
Ова е вистински податоци.

654
00:37:43,736 --> 00:37:46,360
Ќе забележите, во мојата мала играчка
На пример, најголемиот земјотрес

655
00:37:46,360 --> 00:37:49,417
е правото на врвот на нас.

656
00:37:49,417 --> 00:37:50,000
Но, тоа е тоа.

657
00:37:50,000 --> 00:37:54,422
Имаме датум управувано визуелизација
кој троши на податоци

658
00:37:54,422 --> 00:37:56,255
и ни дава навистина
интересни информации.

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

660
00:38:02,600 --> 00:38:06,420
Да, да додадете некои
интерактивност за тоа.

661
00:38:06,420 --> 00:38:08,675
Јас спомнав дека беше
силна сила на Д3.

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

663
00:38:11,490 --> 00:38:15,060
>> Па еве, за секој елемент, ние сме
опишувајќи еден куп на атрибути.

664
00:38:15,060 --> 00:38:20,230
Но, ние, исто така, може да се опише она што сакаме
да се случи со интерактивноста елементи.

665
00:38:20,230 --> 00:38:26,190
На пример, ние може да се опише
Што се случува кога глушецот над.

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

667
00:38:28,740 --> 00:38:33,640
И многу сличен тоа,
дека ќе преземе функција,

668
00:38:33,640 --> 00:38:36,700
многу сличен на
атрибути имавме порано,

669
00:38:36,700 --> 00:38:44,650
каде што можеме да се направи нешто на
елемент кога ќе лебдат над неа.

670
00:38:44,650 --> 00:38:47,100
>> Значи, прво нешто што треба да
направите е да изберете кој елемент,

671
00:38:47,100 --> 00:38:49,435
за да го најдете во основа, во прелистувачот.

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

673
00:38:57,090 --> 00:39:00,920
и потоа ќе можеме да ги
атрибут на него.

674
00:39:00,920 --> 00:39:06,870
Значи она што го правам тука е, кога лебдиш
за нешто, ние ќе добиете тој елемент

675
00:39:06,870 --> 00:39:11,197
а потоа во собата својата непроѕирност назад
на 1, за да се матна.

676
00:39:11,197 --> 00:39:12,488
Ајде да видиме што изгледа тоа.

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

678
00:39:29,430 --> 00:39:39,080
>> Се чини дека имаме
дополнителни запирка тука.

679
00:39:39,080 --> 00:39:42,420
Значи, ако ние лебдат над тука, таа добива целосна.

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

681
00:39:46,530 --> 00:39:48,960
Но, сега, се разбира,
останува целосно, затоа што ние

682
00:39:48,960 --> 00:39:53,240
треба да се опише она што се случува
кога се отстрани нашите курсорот.

683
00:39:53,240 --> 00:39:59,990
Значи, да го прават токму тоа на
mouseout, за разлика од Посочете.

684
00:39:59,990 --> 00:40:06,399
>> И ние ќе го ресетираат
она што го имавме before-- 0.5.

685
00:40:06,399 --> 00:40:10,260
И сега, секој пат кога ние
лебдиш, да добиеме полн круг.

686
00:40:10,260 --> 00:40:13,468
Тоа ни помага да видиме што можеме
ние сме изборот суштина.

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

688
00:40:19,210 --> 00:40:22,860
>> И сега ајде да се направи ова е навистина голема.

689
00:40:22,860 --> 00:40:26,210
Ајде да се поврзете на оваа реални податоци.

690
00:40:26,210 --> 00:40:30,890
Значи, да побара можев
USGS за нивните податоци.

691
00:40:30,890 --> 00:40:35,630
Значи САД за геолошко истражување
има податоци за земјотресите.

692
00:40:35,630 --> 00:40:41,460
Тие имаат јавни API, што е во можност
да се конзумира во JSON формат.

693
00:40:41,460 --> 00:40:42,548
Значи, да го направите тоа.

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

695
00:40:49,730 --> 00:40:55,900
>> Значи ова е малку на код кој
се поврзува со USGS API.

696
00:40:55,900 --> 00:40:57,990
И таму е малку на обработка на неа.

697
00:40:57,990 --> 00:41:02,200
Тоа не е важно, но тоа се поедноставува
со едноставен формат на податоци, како онаа

698
00:41:02,200 --> 00:41:03,800
имавме порано.

699
00:41:03,800 --> 00:41:08,140
Па јас се ослободи од нашиот повик да
нашите лажни data.json на датотеката.

700
00:41:08,140 --> 00:41:13,110
И наместо тоа, јас го повикувам
на USGS суштина.

701
00:41:13,110 --> 00:41:16,700
>> Ајде да се освежи, ис убаво.

702
00:41:16,700 --> 00:41:21,260
Ова е вистински, реални податоци
од оваа недела за земјотреси.

703
00:41:21,260 --> 00:41:23,217
Ова е навистина интересно.

704
00:41:23,217 --> 00:41:25,050
Ова не е изненадувачки
за нас, но има

705
00:41:25,050 --> 00:41:27,909
многу земјотреси на
Западниот брег, во Калифорнија.

706
00:41:27,909 --> 00:41:30,950
Но, јас мислев дека тоа е многу интересно
дека имало толку многу земјотреси

707
00:41:30,950 --> 00:41:34,350
во Аљаска, и очигледно,
тука во Среден Запад.

708
00:41:34,350 --> 00:41:37,630
Мислам, интересни, но и ние сме добри.

709
00:41:37,630 --> 00:41:40,410
Тоа е заклучокот.

710
00:41:40,410 --> 00:41:43,760
>> Но, во основа, овој
Д3 е она што ни помага да се направи.

711
00:41:43,760 --> 00:41:48,030
Тоа ни помага да ги преземат податоците, услови
да елементи во ДОМ,

712
00:41:48,030 --> 00:41:51,620
и имаат оние елементи промени
како функција на податоци,

713
00:41:51,620 --> 00:41:54,780
имаат оние атрибути, сите
многу атрибути на елементите,

714
00:41:54,780 --> 00:41:57,393
сите биде корисно за канали
да пренесе информации.

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

716
00:42:05,440 --> 00:42:09,290
>> Д3 е неверојатно моќна
библиотека и неверојатно добро работи.

717
00:42:09,290 --> 00:42:12,260
Ова е дел моќно.

718
00:42:12,260 --> 00:42:15,960
Визуелизација на податоци е
неверојатно моќна алатка

719
00:42:15,960 --> 00:42:21,530
за пренесување на луѓето длабоко
увиди дека добива на нивните основни

720
00:42:21,530 --> 00:42:25,430
и им помага да се разбере, во
Оваа длабока и интуитивен начин,

721
00:42:25,430 --> 00:42:29,760
како на податоци работи и како
податоци промени нашиот живот.

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