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
>> DAVIDシュイナード：私はデビッドだ
シュイナード、これはD3です。

4
00:00:16,480 --> 00:00:17,700
ようこそ。

5
00:00:17,700 --> 00:00:21,270
今日はD3について学ぶつもりだ。

6
00:00:21,270 --> 00:00:25,020
D3は、JavaScriptのフレームワークです
高品質を構築するための

7
00:00:25,020 --> 00:00:28,110
Web用のインタラクティブな可視化。

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、DOMは、我々が行っている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
>> のは同様にそれを200ピクセルのYを挙げてみましょう。

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、およびRadiusのような。

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
のは、それを丸2と呼びましょう。

83
00:04:13,570 --> 00:04:15,840
との正確な操作を行いましょう
同じこととそれを与える

84
00:04:15,840 --> 00:04:20,450
300のx位置指定された属性、。

85
00:04:20,450 --> 00:04:24,140
イェーイ、我々は今つの円を持っている。

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
私達はちょうど操作している
DOMは、それが呼ばれています。

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にそのx位置、としましょう​​。

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
>> だから何それは言うことのために、ある
すべてのxは、この関数を実行します。

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
そして、ちょうど丸2を取り除くましょう
私たちはただの追加と削除しているので

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
ここでは7数字を持っている、
どのようなこれらの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
サークル追記と丸2と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--すると
あなたはD3コード内に頻繁にある表示されます。

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
それは私達に7円を作成するために起こっている。

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
7円、1を持っている
他の上に。

174
00:09:20,720 --> 00:09:25,425
私達はちょうど7円、1を作成しました
これらのデータ要素のそれぞれについて、それぞれ。

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
だから、ひとつひとつの1の
それらのデータ要素

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
>> 将来的に、我々は作成したので、
このD3機能を有するもの円、

182
00:09:48,740 --> 00:09:52,430
私はあなたのサークルを与えれば、次のことができます
私はそれに関連するデータを与える。

183
00:09:52,430 --> 00:09:53,280
だから我々はD3を求めることができます。

184
00:09:53,280 --> 00:09:54,840
ねえ、D3、私はこのサークルを持っている。

185
00:09:54,840 --> 00:09:57,350
円が持っているデータとは何ですか？

186
00:09:57,350 --> 00:10:01,290
とD3は私たちに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
これは、我々がD3に尋ねる方法です。

193
00:10:17,620 --> 00:10:21,312
ねえ、D3は、私に最初に与える
あなたが見つけることができるサークル。

194
00:10:21,312 --> 00:10:23,580
私にあなたが見つけることができる最初の円を付けます。

195
00:10:23,580 --> 00:10:29,660
そして、我々は何ですか、D3を求めることができる
このようなその上のデータ、10。

196
00:10:29,660 --> 00:10:33,380
>> だから我々はちょうど私を見つける、D3を尋ねる
あなたが見つけることができる最初の円。

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
私たちは、ちょっと、D3、それを求めることができる、
私たちの第三の円を見つける。

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
つまり、D3は何の略だ。

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
D3は、これらの7つの円を作成します。

216
00:11:37,750 --> 00:11:38,500
そして、すべてのための

217
00:11:38,500 --> 00:11:41,920
>> 円は、それは、ちょっと、行くために起こっている
あなたのx位置が何circle1。

218
00:11:41,920 --> 00:11:45,210
以前、我々であった
常に200に答える。

219
00:11:45,210 --> 00:11:48,630
しかし、今、毎回D3は尋ね
私たちあなたのx位置は何ですか、

220
00:11:48,630 --> 00:11:51,790
それは我々が持っている学校案内与えるために起こっている
その円なので、私たちはデータを持っている。

221
00:11:51,790 --> 00:11:55,290
それは、私たちにデータを与え、言うために起こっている
あなたがexpositionがする何をしたいですか、

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
>> したがって、最初のサークルのために、
D3は円を置きます。

228
00:12:13,100 --> 00:12:16,770
そしてD3は何をすべきか、私たちに尋ね
あなたがexpositionになりたい。

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
私はそれらのサークルが判明
種類のアップ踏み付けている。

236
00:12:35,510 --> 00:12:38,965
>> SO 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
私たちの価値は3倍にした。

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
>> そして、我々が持っている可能性があり、の言わせて
私たちの関数で条件文。

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
>> それでは、ここにif文を入れてみましょう。

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
我々は、2つのデータポイントがあることを知っている
その閾値を下回ると、そのほとんど

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
>> 次は、第三幕、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
この値はちょうどオフスクリーン行きました。

289
00:15:44,540 --> 00:15:49,040
だから私たちのロジック右ここ
私たちは時間をどのように行うの3

290
00:15:49,040 --> 00:15:52,570
及び20、それを広げ、へ
それビットオフセットは本当に不格好です。

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
これは、D3は、これらを有することが判明した。

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
あるそれは何行います、それはマップアウトします
20から600までで1から200までの値。

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-- 1瞬間を。

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

317
00:17:47,764 --> 00:17:48,555
私に1秒を与えます。

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
この場合はそう、我々はそれ1を与えれば、
それは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
与えられた、その個々のデータ
要素、および第1のスケールに渡す。

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ピクセル、それが出スキッシュ、

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
>> そして、代わりに持つことの
無骨なこの種のロジック

374
00:21:55,210 --> 00:21:58,550
我々は、とここに持っている
条件付きの権利が、

375
00:21:58,550 --> 00:22:03,250
我々はsomething-- Aを持つことができ
それらの間のリニアスケール。

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
>> 第4幕、使って作業する
最初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
それは、持っていることは非常に不格好だ
データは、ハードここにコード化された。

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-- D3における根本的にデータ
もののリストのデータを消費します。

419
00:24:48,030 --> 00:24:53,000
D3は、データがちょうどリストであると予想
物事の、物事の配列。

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
D3は、限り気にしない
それは物事のリストだとして。

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
D3は気にしません。

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
私たちは、可視化を持っている
のクリムゾンヘッドライン。

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
そう少しそのアウトまたがる。

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
>> だから、私のようです
仮説がぶつかっている。

468
00:27:38,040 --> 00:27:39,360
唯一の2があります。

469
00:27:39,360 --> 00:27:42,380
我々は、6つのデータポイントのみを持っている
そして唯一の2は、コロンを持っていた。

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
だからもう一度、私がいることを述べた
D3のデータは、物事のリストです。

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
>> これは、1つのそのようなデータセットである。

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
しかし、今、dはより多くのものが含まれています。

505
00:29:51,920 --> 00:29:54,780
Dは多くのデータ要素を含む。

506
00:29:54,780 --> 00:29:57,946
だから我々は戻ってdを取得します。

507
00:29:57,946 --> 00:29:59,670
D3は、私たちにDを与えます。

508
00:29:59,670 --> 00:30:06,080
そして、我々は大きさを見つけることによって応答する
dおよびその後のスケールにそれを渡す。

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--ことは興味深い
その2つのデータ点があります

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
多分、我々は何かaを行うことができます
多くのそれともっと面白い。

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
のようなデータファイルです
我々の前に持っていた1。

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
>> だから、D3は何をするか似ている
我々の前に何をしたかに。

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
ここでこれらの値は、
建物のLAT-long型

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
>> だから、それらのLAT-long型を取って、その
全世界で何かを表現

575
00:33:57,250 --> 00:34:02,850
とつぶして、その周りに移動する
私たちの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
次にそれらのLAT-long型にマップ
あなたの画面上で何かの上に。

579
00:34:14,310 --> 00:34:18,380
>> しかし、我々は、この投影法を使用するつもりだ
機能は、結局のところので

580
00:34:18,380 --> 00:34:20,270
我々としてもLAT-long型のlong型を持っている。

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
>> 私たちは2つ目は
投影上にそれを渡す。

599
00:35:09,160 --> 00:35:13,440
プロジェクションは、これらの座標に変換
画素値、xとyに変換する。

600
00:35:13,440 --> 00:35:16,680
そして、最後の我々
やりたいことは、単にXを得ることである

601
00:35:16,680 --> 00:35:19,342
これは、この場合は最初の1である。

602
00:35:19,342 --> 00:35:22,050
これは2つのものの最初のだ
それは、投影によって返されます。

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
ああ、余分な文字
我々が持っている、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
私は3つ、意味。

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
私たちは、RADIUSを使用することができます。

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
そして、我々は、Dを過ぎている。

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
ああ、それは動作しません。

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 Scaleマップ上
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
私たちは60に0をしたい、のとしましょう​​。

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
私はそれがなかった言及
D3の強い力。

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
我々は置くとだから私は、ISここで何をやっている
何かを、私たちはその要素を取得します

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
それでは、その上に正確にやらせる
マウスアウト、マウスオーバーとは対照的に。

684
00:39:59,990 --> 00:40:06,399
>> そして、我々はそれをリセットします
我々は0.5 before--ていたもの。

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
>> しかし、根本的に、この
D3は、私たちが何に役立つものです。

711
00:41:43,760 --> 00:41:48,030
それは私たちがデータを取るのに役立ちます、バインド
それDOMの要素に、

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
>> D3は信じられないほど強力です
図書館と驚くほどよく実行します。

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