>> [音楽再生]
>> DAVIDシュイナード：私はデビッドだ シュイナード、これはD3です。
ようこそ。
今日はD3について学ぶつもりだ。
D3は、JavaScriptのフレームワークです 高品質を構築するための
Web用のインタラクティブな可視化。
私たちは何をしているようなもの 私の後ろで見て、
私たちはそれらのを作ることを学ぶつもりだ 物事、それの基礎のようなもの。
しかし、それはクールになるだろう。
始めましょう きれいな写真を作る。
私たちは、より多くのデモを持っている 利用可能な見通しの。
やってみましょう。
>> 同法I、DOMは、我々が行っているmanipulation-- クールなものを作るすぐに開始します。
まず、左側に、我々は、コードを持っている。
右側には、我々は持っている 私たちのコードの結果。
のはそれを介して行ってみよう。
>> の円を作ってみましょう。
どのようにその音のでしょうか？
svg.append circle-- 私たちはサークルを作った。
あなたは正しい、私を信じていない？
それはそこではありません。
>> だから我々は、右ここで何をしたか、 SVGはスケーラブルベクターグラフィックスである。
これは、ブラウザに伝える方法です ブラウザでベクトルグラフィックを作る。
私達はちょうど今、何をしたか ブラウズする円を追加されます。
>> 約束は円ということです 基本的な属性のビットを必要とする
私たちは実際にそれを見ることができる前に。
私たちはそれにそのx位置を指示する必要があり、 そのy位置、その半径。
我々は、のいずれかをそれを言わなかった、 私たちは今、それを見ていない。
しかし、ここではそれをものを教えてみましょう。
>> だから、まず第一に、あなたが持っている 私たちのサークルに名前を得た。
それでは、円と呼ぶことにしましょう​​。
私たちのサークルは今名前があります。
そして、のはそれをいくつかの属性を与えてみましょう。
どのようにCX約そう、Xを中央になる x位置の中心。
それでは、200ピクセルのための200を言ってみましょう。
>> のは同様にそれを200ピクセルのYを挙げてみましょう。
そしてrは、約40ピクセルの半径。
今見てみましょう。
私が綴ることができません。
>> そこに行きます
私たちは、位置200での円を持っている ピクセル、200ピクセル、40ピクセルの半径。
種類のクールな、右？
私たちは、円を持っている。
うん。
>> 一緒に従うので、必要はありません。
すべてのこれらの例は、すべての 私が今日やっているコード
最後に、オンラインで提供されます 対話式の例の形で
でのチェックポイントを すべての行為、など。
>> それではより多くのものをやってみましょう。
この黒丸は本当に醜いです。
私は、そのエラーのために申し訳ありません 右がメッセージ。
我々はそこに行く。
>> のはそれを色を挙げてみましょう。
それはどうですか？
私は、スチールブルーが好き。
さて、私たちのサークルは色を変えた。
それは素晴らしいことです。
のは、それが半透明にしてみましょう 半透明too--。
>> したがって、これらは属性です 私たちは、円上定義している。
私たちが最初に行った事がある 私たちは、ページ上で円を置く。
そして、我々は定義している 属性の束。
これらのいくつかは、必要とされる、 CX、CY、およびRadiusのような。
他はオプションです。
>> より多くの属性があります。
それらの多くがあります。
例えば、私たちは持っている可能性があり 脳卒中にも、赤のストローク。
しかし、ここでそれを削除してみましょう。
私たちは、戻って円に青い丸だ。
>> それでは、より多くの円を作ってみましょう。
それはどうですか？
のは、別のサークルを作ってみましょう。
これは右、刺激的なのですか？
>> だから私はちょうどコピー貼り付け言う 我々はすでに持っていたもの。
のは、それを丸2と呼びましょう。
との正確な操作を行いましょう 同じこととそれを与える
300のx位置指定された属性、。
イェーイ、我々は今つの円を持っている。
>> そしてもちろん、我々は可能性 これらの値を更新。
私は400でそれを置くことができ、今では移動します。
それは迷惑なんだので、と、してみましょう そうcircle2.remove、それを削除。
今は逝ってしまった。
>> だから我々は何をやっていると、 このvery--、ちょうど非常にある
何と非常によく似ています 例えば、jQueryの中で行う可能性があります。
私達はちょうど操作している DOMは、それが呼ばれています。
あなたは前にその言葉を聞いたことがあるかもしれません。
私たちは、ものを作成し設定している ものを削除し、スタッフの属性。
>> それが面白いところ今、ここにある。
だから、後のコードで、我々はまだできた ここでは、元の円を参照してください。
それでは、CX、その属性をリセットしてみましょう。
それでは400にそのx位置、としましょう​​。
そして、私は遷移に行くよ その、それは明らかだそう。
我々はそこに行く。
>> だから我々は、円を追加しました。
我々はいくつかの属性を設定します。
我々はそれを削除、別の円を追加しました。
そして、我々は修正している オリジナルのサークル。
>> それは取得する場所しかし、ここだ より多くの興味深い。
だけでなく、我々は、属性を設定することができます ちょうど値として、我々は、言うことができます
ちょっと、円は、位置200に移動します。
また、関数として、それらを設定することができます。
>> だからではなく、ここに400を与える、 我々はいくつかの計算を行うことができます
私たちのためにその場で その属性になりたい。
だから、これはあなたがそれを表現したい方法です。
私たちは、代わりに400の、私を聞かせて、と言う 代わりにあなたの機能を与える。
そして、ここで、この関数内、 我々はすべてのクレイジーな計算を行うことができます。
>> 私たちは、時間がかかる可能性があり、 いくつかの他の事を見て
と動的で決める 我々が望むものを価値円。
どのように我々はちょうど与えるについて それランダムx位置？
だから、そのだ。
>> だから何それは言うことのために、ある すべてのxは、この関数を実行します。
そして、私たちがやっていることは計算している いくつかのもの、ランダムな時間幅
そしてそれを返す。
だから我々はことを実行するたびに、私たちは取得 ランダムな場所に行く円。
それは、クールのようなものだ。
私が見ることができるような気がします 少しのためにこれで。
私たちは、に到達するために始めている ここに何か面白い。
それでは駆動型このデータを作ってみましょう。
ここにはデータがありません。
のはそれを変更してみましょう。
>> 法第II、データ駆動Documents-- それでは、ここに戻りましょう。
そして、ちょうど丸2を取り除くましょう 私たちはただの追加と削除しているので
それ。
だから私たちは本当にそれを必要としない。
ここでは、より多くの賢いようにする必要があります。
我々が持っている、のとしましょう いくつかの並べ替えのいくつかのデータ。
一つは、の言わせmoment-- 私たちは、このフォームのデータを持っていた。
私達はちょうど、配列を持っていた 数字の束。
ここでは7数字を持っている、 どのようなこれらのrepresent--量
人々の銀行口座で、どのように ずっと彼らは、神が何を知っている、重量を量る。
>> これらは数字であり、我々 私たちのサークルを使用したい
何とかそれらの数を表します。
私たちは、ネクタイしたい これらの数字にサークル。
だから我々は何をすべきか。
それではとしましょう​​、私たちが望む すべての番号のためのサークル。
私たちは、古いを行うことができます 我々はdoing--たもの
サークル追記と丸2とcircle3。
しかし、これは手に負えなく取得し、 ロジックを繰り返すがたくさんあり​​ます。
>> それでは、その、より巧妙な紹介しています。
代わりにVAR円を使用しての 我々だけで使用していたsvg.append、
我々は、使用するつもりだ ここで、この小さなブロック。
私は綿密に行きたくない すべてのこれらの部品は何をすべきかに。
そして、それは高度なトピックのようなものだ。
そして私は、私は可能性がしたい。
>> しかし、重要なことは、recognize--すると あなたはD3コード内に頻繁にある表示されます。
テキスト基本のこのブロック として多くのサークルを作成
データ要素が存在するように この配列で右ここに。
だから、これはできるだけ多くを作成し、 要素があるとしてサークル。
それは私達に7円を作成するために起こっている。
そして、それは本当に、本当に重要なことをします。
それでは、それを実行してみましょう。
私たちの他のサークルを削除してみましょう。
ちょうどこのコメントしましょう 一部出て、再度これを実行。
>> 我々はそこに行く。
だからここに私たちの円である 我々のため、多くの暗い
7円、1を持っている 他の上に。
私達はちょうど7円、1を作成しました これらのデータ要素のそれぞれについて、それぞれ。
しかし、起こった重要な事があります 右ここにこのスニペットと。
>> それは、データが結合していることだ。
だから、ひとつひとつの1の それらのデータ要素
10、45、105、結合していた 特定の円に。
したがって、これらだけでなく、作成された サークルの束
しかし、これらの二つのことを結びつける。
>> 将来的に、我々は作成したので、 このD3機能を有するもの円、
私はあなたのサークルを与えれば、次のことができます 私はそれに関連するデータを与える。
だから我々はD3を求めることができます。
ねえ、D3、私はこのサークルを持っている。
円が持っているデータとは何ですか？
とD3は私たちに10または45または105を言うだろう。
>> これらの事は結合している。
それは非常に、非常に基本的なコンセプトです。
のは、その見てみましょう。
>> だから、方法は、私たちはそうD3--お願いしたい これは、このためには関係ありません
しかしただそれに私を信頼しています。
これは、我々がD3に尋ねる方法です。
ねえ、D3は、私に最初に与える あなたが見つけることができるサークル。
私にあなたが見つけることができる最初の円を付けます。
そして、我々は何ですか、D3を求めることができる このようなその上のデータ、10。
>> だから我々はちょうど私を見つける、D3を尋ねる あなたが見つけることができる最初の円。
そのデータは何ですか？
10、それは確かに私たちのある 最初のデータ要素。
私たちは、ちょっと、D3、それを求めることができる、 私たちの第三の円を見つける。
105。
なぜこれが本当に重要なのですか？
>> だから、右ここに、私が言及 ことを私たちは関数を使用することができます。
そして、私はそれがなかった言及 非常に強力なもの。
だから、唯一の私たちの関数は、物事を行うことができません のような、たとえば、いくつかの計算を行い、
それができる、乱数を返す また、データに基づいて物事を行う。
これは、データ駆動型のドキュメントが何を意味するかである。
つまり、D3は何の略だ。
>> したがって、このX postition--代わりに ちょうど、すべての円を言って、
x位置200を取得し、我々 それを機能を与えることができる。
そしてここで、我々はいくつかの計算を行うことができます。
と、ここでdはデータのための場所に立っている。
我々が持っているので、毎回 円形、基本的には、
D3は、これらの7つの円を作成します。
そして、すべてのための
>> 円は、それは、ちょっと、行くために起こっている あなたのx位置が何circle1。
以前、我々であった 常に200に答える。
しかし、今、毎回D3は尋ね 私たちあなたのx位置は何ですか、
それは我々が持っている学校案内与えるために起こっている その円なので、私たちはデータを持っている。
それは、私たちにデータを与え、言うために起こっている あなたがexpositionがする何をしたいですか、
そのデータに基づく。
>> ちょうど実際のデータを返しましょう​​。
我々はこれを実行するのであれば、これは与え 私たちのデータは、文書を駆動する。
これらの円は基づいています 関係でposition--
それらはデータの関数として塩基いる。
>> したがって、最初のサークルのために、 D3は円を置きます。
そしてD3は何をすべきか、私たちに尋ね あなたがexpositionになりたい。
そして、我々は単にデータが何であれ、と言う。
博覧会10を作る。
>> その後、それはあなたが何をしたいですか、尋ね 第二円に最適な博覧会。
そして、我々は、45に答える。
そして我々は、もちろん、缶 ここにいくつかの計算を行う。
私はそれらのサークルが判明 種類のアップ踏み付けている。
>> SO 3によるデータを掛け、3を掛け。
私たちのサークルはちょうど拡大してしまった。
私たちの価値は3倍にした。
>> 円は、実際にエッジである それでは、多分種類のそれを相殺してみましょう。
それでは20で、としましょう​​。
どうぞ。
>> これは、データの視覚化である。
これは非常に基本的なものだが、この 私たちのデータにいくつかの洞察力を与える。
それは私たちに伝え、その例として、我々 要素の少ないクラスタを持っている。
そして、私たちはここでの大きな外れ値を持っている。
これは私たちにいくつかの情報を提供します 分布に関する。
>> 私たちがした場合には、例えば、変更するには ここに150とリフレッシュにデータ、
私たちの視覚化が変更されます。
このドキュメントでは、データ駆動型である。
>> もちろん、そのように、これらすべての要素、 ここにすべてのこれらの属性、
我々は、機能を使用することができません 単に数字だけではなく、
xとyの位置。
だから私たちは色の機能を使用することができます。
だから我々は同じことをするでしょう。
私たちはそれを機能を与えるでしょう。
>> そして、我々が持っている可能性があり、の言わせて 私たちの関数で条件文。
この関数は、ことができます 長い行の百。
それは非常に、非常に複雑なことを行うことができます。
>> それでは、ここにif文を入れてみましょう。
我々のデータは以下であれば、のとしましょう 50よりも、それはいくつかのしきい値です
私たちは興味を持っていること 何らかの理由で。
のは、それが緑にしてみましょう。
そうでなければ、のは、それが赤にしましょう​​。
それはどうですか？
ニース。
>> だから私たちのデータの可視化を開始しています より多くの興味深い情報を伝えるために
多くのチャネル上で。
だから今、私たちは少し知っている 分布に関する。
そして、我々はいくつかの並べ替えがあることを知っている 私たちが興味を持っている50で切断。
我々は、2つのデータポイントがあることを知っている その閾値を下回ると、そのほとんど
上記。
>> だから、最後のステップとして、ここではこのデータを、 それはそのようにこれを見ることは非常にまれです。
それでは、単に変数にそれを移動してみましょう つまり、このような、きれいだから。
そして、我々はここでその変数を使用します。
それは、まったく同じことだ。
それはちょうど少しクリーナーです。
>> 次は、第三幕、Scales-- だから、一つの問題右
私たちはを変更した場合、ここで、ある この200 value--内のデータ
私たちは400に変更した場合 か何かとリフレッシュ、
この値はちょうどオフスクリーン行きました。
だから私たちのロジック右ここ 私たちは時間をどのように行うの3
及び20、それを広げ、へ それビットオフセットは本当に不格好です。
>> これらの数字は何を意味するのですか？
彼らはただ、ハードコーディングされたそこにいます。
そして、彼らは非常に多くのデータに関連付けられています。
私たちは、データ駆動型のドキュメントを求めています。
我々は非常に柔軟なドキュメントをしたい、 そのデータを与え、それに適応する
し、それを表す。
>> 私たちは基本的に必要なのは、我々です 番号10のこの範囲を持っている。
45、105。
そして、我々は上にそのをマップしたい 幅、ここで全幅。
だから我々はの範囲を持っている 0から100まで行くの数字。
そして、私たちは私が行くこのキャンパスを持っている この場合には、20から700。
>> 私たちは、この種のことを上にマッピングする。
我々はそれをスケールアップしたいと それを少しオフセット。
これは、D3は、これらを有することが判明した。
これは、スケールと呼ばれています。
それでは、それを使用してみましょう。
>> 私はするつもりだworks--方法 これを入力し、それを説明する。
これはスケールです。
あるそれは何行います、それはマップアウトします 20から600までで1から200までの値。
我々はそれを確認することができます。
ここではそれを見ることができます。
>> だから私はそれを養う場合、1-- 1瞬間を。
私に1秒を与えます。
私はそれが間違って入力されている必要があります。
そこに行きます
私はそのことについて申し訳ありません。
>> だから、スケールが何をするか 、値を取るさ
し、その変換し、 そのアウト展開するので、
あなたが求めている完全な範囲を埋めます。
この場合はそう、我々はそれ1を与えれば、 それは20の上にそれをマップアウトになるだろう。
そして、我々はそれを200を与えれば、それはだ 600にそれを上にマッピングする予定。
そして、どこかの間で、 私たちは100を得れば、それはだ
どこかになるだろう 20と600の間で。
>> そしてもちろん、今これは何です 我々は、これらのハードコードされたを削除する必要があります
物事は、我々はすぐそこ持っている。
だから我々が何をしたいです 私たちがしているデータを取る
与えられた、その個々のデータ 要素、および第1のスケールに渡す。
だから、規模はそれをスケールアップします。
>> ああWell--、我々はここで少しエラーが発生している。
我々は、データを逃している。
そこに行きます
そして、それはそれを展開する。
>> それは私たちに同じを与え その結果、我々は前に持っていた、
その代わりのものを有する ハード制約をコード化された。
そして、我々のサイズの場合 キャンバスの変更、例えば、
私たちはこの上を持っているしたい場合は 400ピクセル、それが出スキッシュ、
我々はそれをover​​--持つことができます 我々はそれを展開する、あるいは我々ができる
この左マージンを減らすことができます 20以下の何か。
これらの数値は、これらは、ハードコーディングされた 数字は、今私たちに意味をなす。
>> そして、私たちはたくさんのことを行うことができ 面白いことにも。
だからではなく、線形を持っていることの スケールは、私たちは規模を記録したい場合があります。
そして、それは私たちに対数スケールを与えるだろう。
>> だから今私たちのスケールのではなく、 ちょうどその範囲を拡大し、
それはより洗練された事をやっている。
代わりに、ハード、この範囲を持っていることの 、コード化され、代わりにその600を持っていることの
私たちは、単に幅を使用することもできます そのように幅マイナス20〜40、
他の側で2回マージン。
そして、これはにもっと多くの理にかなっている コー​​ドを見るかもしれない誰か。
>> 興味深いことに、スケールは取得 非常に、非常に洗練されたとしても。
彼らは、面白いことの多くを行う。
スケールは必ずしもそうではありません 数字だけで動作します。
それではカラースケールを作ってみましょう。
>> だから私たちの範囲はbe--できた 私たちのドメインは、1から200までです。
すなわち、入力のことだ。
しかし、我々はからマップする場合があります 例えば、赤に緑。
そして今、我々はそれ1を渡すと、 私たちは緑取得するつもりだ。
我々はそれを200を与える場合、我々は赤い得るでしょう。
そして、私たちはそれを間に何かを渡すと、 そのいくつかの組み合わせになるだろう、
勾配上のどこかに 緑色と赤色の間である。
>> そして、代わりに持つことの 無骨なこの種のロジック
我々は、とここに持っている 条件付きの権利が、
我々はsomething-- Aを持つことができ それらの間のリニアスケール。
だから我々は我々だけでスケールを使用したい 私たちは色と呼ばれて、作成された。
そして、私たちは、それをD与えると思いれる 我々のデータ要素である。
そして、そこに私達は行く。
我々は、カラースケールを有している。
>> だから、これはマッピングです。
これまでのところ、左は完全に緑です。
右端は完全に赤です。
との間ですべてのもの dの関数である。
私たちは、面白いを持っている ここに視覚化。
しかし、我々のデータは、退屈のようなものだった。
のは、我々があれば何ができるか見てみましょう 我々はより多くの興味深いデータを持っていた。
>> 第4幕、使って作業する 最初Data--
我々は我々のを作るために何をしたいでしょう より興味深い視覚化
どこか別の場所にデータを移動することです。
それは、持っていることは非常に不格好だ データは、ハードここにコード化された。
一般的に、我々は尋ねることでしょう データのための他の誰か。
私たちは、多分、政府に求めることでしょう 国勢調査局は、あなたのデータを何
その後それをプロットするか尋ねる いくつかのデータのためのいくつかのサードパーティのエンティティ
その後建物 その上で可視化。
>> 最初に私たちは何をしたい どこか別の場所にそれを移動している。
だから私は作成するつもりです ここにファイルdata.jsonと呼ばれる。
JSONはデータ形式である。
あなたはそれについて多くを知る必要はありません。
そして、我々はコピーするつもりだ 私たちはそこに持っている少しのデータ、
そこに逐語的に貼り付け、行く バック私たちの可視化コードに
ここでは、右ここに、この関数を使用します。
あなたが詳細を知る必要はありません。
しかし、これは行いますことは、ある それは、そのファイルを見つける、
それを取得し、私たちにそれを返す。
だから、これが何をするか、それは行く、ある とdata.jsonファイルを取得。
そして、すべてのコードだということ 基本的にinside--インデント、
我々はthere--意志持っているすべてのコード 我々は戻ってデータを取得する場合にのみ実行されます。
そして、それはそれを実行するために起こっている 我々が持っているデータを使用してコード。
素晴らしい、私たちは持っている 問い合わせを可視化
いくつかのコードのどこかに さもなければ、それは、通常、
それはどこからいくつかのデータを照会します どこかに、通常である
視覚化はどのように働くか。
>> しかし、私はデータに戻りたい。
D3-- D3における根本的にデータ もののリストのデータを消費します。
D3は、データがちょうどリストであると予想 物事の、物事の配列。
それはどのようなそれらのものを重要ではありません であれば、それらの配列のように、である。
>> だからここに、例えば、私たちはの可能性 コー​​スでは、浮動小数点値をしている。
私たちは、ネガを持っている可能性があります。
D3は、限り気にしない それは物事のリストだとして。
>> 面白いものとして、私たち 持っている可能性があり、我々はまた、可能性
そのような文字列のリストを持っている。
したがって、これらはクリムゾンの見出しである 私は数日前に拾った。
そして多分あなたは、いくつかの興味深いを見つけることができます これらの見出しについての事。
>> だから、再び、これは物事のリストです。
D3は気にしません。
これらは、文字列であることが起こる。
私たちは、データを変更しました。
>> 私たちの視覚化に戻りましょう。
今、私たちの視覚化は期待して 入力は数字であると。
だから我々は持っているつもりです いくつかの変更を行います。
だから、例えば、すべての最初の、多分 私たちは一緒にこれらの円を配置する
見出しの長さによって、 見出しの文字数。
>> だから何我々は毎回is--やる私たちの 関数は、文字列を使用して呼び出され、
我々はそれが長さです見つけるだろうと その後スケールにそれを渡す。
色は、私が戻ります スチールブルーへの。
そして、そこに私達は行く。
私たちは、可視化を持っている のクリムゾンヘッドライン。
>> 当社の規模は少しオフになっています。
のが最長と仮定しましょう 見出しは、100文字の長さ
そう少しそのアウトまたがる。
そして、我々は可視化を持っている。
だから、ほとんどの見出しているようです 一緒にかなり接近している、
文字行の観点。
しかし、一つが本当に際立っている。
>> 我々はいくつかのツールを構築することができました その多くを探索する。
私はこのに取り組んでいたときには、私がいた 好奇心が強いかどうか、このデータセットにおいて、
コロンと見出し それらの中に長くなります。
私は、彼らがだろうと想定しています。
>> それでは、見つけるてみましょう。
の色を使ってみましょう チャンネル私たちは前に行ったように、
かどうかについてのいくつかを符号化する コロンまたは全くはありません。
だから我々は再び、条件を使用します。
あなたが知っている必要はありません これの詳細は、
しかしこれは我々がチェックする方法です 特定の文字のための文字列
JavaScriptで、再び、関係ありません。
>> しかし、我々は見つからない場合は、 コロン、我々は緑戻ります。
我々が行うなら、私たちは赤戻ります。
だから、再び、ことを見出し コロンは赤になりますしている。
これは、これは素晴らしいmeans--ものです。
>> だから、私のようです 仮説がぶつかっている。
唯一の2があります。
我々は、6つのデータポイントのみを持っている そして唯一の2は、コロンを持っていた。
しかし、それはもう少しようだ 下端に、実際に。
コロンとの見出しが見える 一般的に短くなるため、
少なくとも私たちのデータで興味深いset--。
>> にそれを返すのをみましょう スチールブルー、次に参照してください。
私たちも、で作ることができるもの より興味深いデータ。
だからもう一度、私がいることを述べた D3のデータは、物事のリストです。
私たちは多くの種類の数字を見てきました。
私たちは、文字列を見てきました。
しかし、物事には、オブジェクトことができます。
>> 彼らは物事を複雑にすることができます それは多くのものを含む。
より明確にすることを言うためには、 ほとんどの場合、我々
のようにすべてのデータポイントを構築する ただ一つの値よりも複雑。
あなたが想像したい場合 学生約データベース、
学生があるかもしれません 名前、学生証、
物事の多くは、関連する 特定のレコードと、
だけではなく、文字列または数値。
それでは、その見てみましょう。
>> これは、1つのそのようなデータセットである。
これは、地震に関するデータセットである。
ここに私たちのリストまたはアレイ上だからすべてのもの 物事の多くのもの自体が含まれています。
したがって、すべてのデータポイントを有する 大きさと座標。
そして、自分自身を調整する 二つのことが含まれている。
>> だから、毎日は今、より多くのである 複雑で、より多くの興味深い
とはるかに含まれています 興味深い情報。
のは、我々はその外に構築することができました見てみましょう。
、再び、ここに戻って使用して 私たちのヒストグラムサークルの可視化
私たちが構築した、私たちが構築できるかどうかを見てみましょう 大きさ分布の可視化
私たちのデータセット内。
>> だからここ、それは同じ概念です。
しかし、今、dはより多くのものが含まれています。
Dは多くのデータ要素を含む。
だから我々は戻ってdを取得します。
D3は、私たちにDを与えます。
そして、我々は大きさを見つけることによって応答する dおよびその後のスケールにそれを渡す。
>> そして、我々は変更する必要があります 私たちのスケール、もちろん。
大きさは、単純にしないように、 10よりもはるかに多くを行く。
実際には、そこに行ったことがないだ 10の地震。
しかし、それは私たちのアッパーのようなものだ 終わり、私たちのアッパースペクトル。
>> のリフレッシュしましょう​​。
ニース、我々は可視化を持っている。
それはとてもnote--ことは興味深い その2つのデータ点があります
各の上にほぼ正確である 大きさの点で、他の。
あなたは、私たちが使っている不透明度によって、これを参照してください。
>> 私たちは現在、地理データを持っている。
私たちは、緯度と経度を持っている。
多分、我々は何かaを行うことができます 多くのそれともっと面白い。
いくつかの詳細を見つけるのをみましょう 視覚化するための興味深い方法
このより複雑 データ我々はへのアクセス権を持っている。
>> 法第V、Mapping--基本的に、 私たちは、マップ上でこれらを配置する。
私はこれが起こっている場所である、意味。
我々は、についての情報をエンコードする これらの地震測定値の位置、
同様に彼らの大きさ、 我々は今ことを持っているので。
私たちは、消費する方法を理解する より複雑なデータ。
>> 私たちがやる最初の事はある マップ、バックグラウンドマップを作成。
私が通って行くつもりです この非常に迅速に。
これはトリッキーなコードです。
それは、それらの別の一つだ レシピあなたが本当にない
あなたが使用するための完全に理解する必要があります。
しかし、これはコードである。
このコードは、右ここにマップを作成します。
>> 私たちは詳細に行くつもりはない。
しかし、表面的に、それが何をするかである、 それは、このus.jsonファイルを照会している
のようなデータファイルです 我々の前に持っていた1。
これは、もちろん、より複雑だ。
しかし、この場合は、すべてのもの、 すべてのデータポイントは、この状態で
とのリストを持って 緯度と経度
それは、多角形を定義し、 そのフォーム、その状態。
>> だから、D3は何をするか似ている 我々の前に何をしたかに。
それはそれを要求し、 要素にそれをバインドします。
そして、その関数があります 、その要素をマップします
緯度と経度に基づく。
あなたはその上で詳細を読むことができます。
そして、私はそれをお勧めします。
>> でのリンクがあります このコードの最後に掲載した。
そして、コードがコメントアウトされています。
で、この上にさらにためのリンクがあります。
私はあなたがそれを調べることをお勧めします。
しかし、我々は約何であるかを気に この投影関数。
私はそれを通過します。
>> まず第一に、私は見せしましょう はい、私たちは、マップを持っている、ことをあなた。
マップはクールです。
それでは、これを見てみましょう 生産関数。
>> プロジェクションは非常にある スケールのように、再びスケーリングします。
だから何生産のための この投影関数
、我々はそれを経度を渡すことができているん この場合においてlatitudes--、
ここでこれらの値は、 建物のLAT-long型
我々は正しいに座っている now--投影する。
と突起が変換されます xとyの画素値にその。
>> だから何投影をしている 私たちのスケールと非常によく似ています。
それは私たちの緯度を取っているし、 全世界を表し経度
と縮小していることをサイジング 私たちが望む二乗にダウン、
我々はそれを与えてくれたこと。
このケースでは、だ これらの値を渡す。
そして、それはあることを、よく、私たちを与えている 画面上の640ピクセルを意味します。
この全体の画面は700ピクセルです 幅の広い、それがここで私たちを行いので、
ダウンと154ピクセル、私はだろう 見積もりはかなりここにある。
>> だから、それらのLAT-long型を取って、その 全世界で何かを表現
とつぶして、その周りに移動する 私たちのxとyのピクセル値を与えるために、
これはだ最初のものです このマッピングコードで行わ。
そして、残りの コー​​ドは、データを消費する
次にそれらのLAT-long型にマップ あなたの画面上で何かの上に。
>> しかし、我々は、この投影法を使用するつもりだ 機能は、結局のところので
我々としてもLAT-long型のlong型を持っている。
私たちのデータを振り返ると、私たちは持っている 緯度と経度の座標
すべての観測のために。
それでは、投影を使用してみましょう。
>> だから私たちの博覧会を見て、 私たちはexposition--が欲しい
我々は、緯度と経度を有する。
しかし、我々は、画素値を求めています。
そして、それは結局のところ、我々は正確に持っている 私たちは、投影をwant--。
私たちはいた非常に多くのように 右ここにスケールを使用して、
我々は今、投影を使用するつもりだ それは座標渡す。
だから、最初のこと 私たちはしているのでdoing--している
個々のデータであり、dは、取得 個々の地震の要素
読書。
私たちが最初に行うこと 座標を取得することです。
すべての権利、私たちは座標を持っている。
>> 私たちは2つ目は 投影上にそれを渡す。
プロジェクションは、これらの座標に変換 画素値、xとyに変換する。
そして、最後の我々 やりたいことは、単にXを得ることである
これは、この場合は最初の1である。
これは2つのものの最初のだ それは、投影によって返されます。
>> 私たちは、yに対して同じことをやる。
しかし、その代わりに、我々は戻ります 第二の要素、Y。
リフレッシュする準備をしなさい。
ああ、余分な文字 我々が持っている、here--素敵
のデータ駆動型のドキュメント オブジェクトのこのJSONファイルを隠し、
マップを作る、と変化 データに関連する属性
地図上に投影する。
これは本当に面白いです。
これはクールです。
>> のノッチをそれを見てみましょう。
私が意味する、私たちは二つの部分を持っている すべてのデータポイントとの情報。
私は3つ、意味。
我々は、座標​​を有する、 そのxおよびyである。
そして、我々は大きさを持っている。
>> 私たちは、何とか大きさをエンコードする必要があります。
私たちは、チャンネルがたくさんある。
私たちは色を​​使用することができます。
私たちは、RADIUSを使用することができます。
私たちは、不透明度を使用することができます。
私たちは、コード内で多くのものを使用することができます。
これらの属性のいずれかと、多くの 、そこに記載されていないことがより
彼らはオプションだから、我々は可能性 このデータをエンコードするために使用して、脳卒中
これらのものはすべて私が述べてきた。
>> の半径をやってみましょう。
私は半径が最も直感的だと思う。
そこで再び、我々はハードコードされていることを置き換えるだろう 40といくつかの計算を行う。
私たちは、再び私たちのお気に入りのスケールを使用します。
そして、我々は、Dを過ぎている。
我々は大きさをしたいのでが、Dではない Dの。 dは単なるデータポイントです。
我々はスケールする大きさを渡します。
>> それでは、もう一度それを試してみましょう。
ああ、それは動作しません。
なぜそれが動作しない？
>> だから、何をするかのスケールを覚えています。
それでは再び規模を見てみましょう。
1から10 Scaleマップ上 22から600まで、多かれ少なかれ。
600は巨大である。
我々はこれを取得しているのはこのためです。
>> だから私たちは私たちのスケールを変更したい より合理的なものに。
私たちは60に0をしたい、のとしましょう​​。
60は大きいですが、10地震 信じられないほど稀である。
実際に、彼らは何が起こったことがありません。
>> そうするでしょうこれが何であるか、それは取るよ 1から10まで行く私たちの大きさ
そしてそれを展開し、それを上にマッピングします。
そして、0から60までにそれを上にマッピングします。
のリフレッシュしましょう​​。
>> ニース、我々は可視化を持っている。
これは素晴らしいです。
これは、実際のデータである。
あなたは私の小さなおもちゃで、わかります たとえば、最大の地震
右の私たちの上にある。
しかし、それはそれだ。
私たちは、可視化を駆動する日付を持っている それは、データを消費する
と本当に私たちを提供します 興味深い情報。
うん、のいくつかを追加してみましょう それに対話。
私はそれがなかった言及 D3の強い力。
>> だからここに、すべての要素のために、私たちはしている 属性の束を記述する。
しかし、我々はまた、我々が望むものを記述することができます インタラクティブ要素で発生する。
例えば、私たちは記述することができる 何がときに我々にマウスオーバーが起こる。
その非常に類似して、 それは、関数を取るよ、
に非常に類似し 我々は前に持っていた属性、
どこに我々は何かをする 我々はそれにカーソルを合わせる要素。
>> 我々はする必要がありますので最初の事 その要素を選択しているん、
ブラウザで、基本的にはそれを見つけること。
その後、我々は設定することができます それに属性。
我々は置くとだから私は、ISここで何をやっている 何かを、私たちはその要素を取得します
その後戻ってその不透明度を設定 1に、完全に不透明に。
のはそれがどのようなものか見てみましょう。
>> それは我々が持っている表示されます ここに余分なセミコロン。
私たちはここに上にマウスを移動した場合そう、それはいっぱいになる。
しかし、今は、もちろん、それ 我々ので、完全なままで
何が起こるかを記述するために持っている とき私たちのカーソルを削除します。
それでは、その上に正確にやらせる マウスアウト、マウスオーバーとは対照的に。
>> そして、我々はそれをリセットします 我々は0.5 before--ていたもの。
そして今、その都度、我々 ホバー、我々は完全な円を得る。
それは私たちが何を私達を参照してくださいことができます 私たちは本質的に選択している。
>> そして今のはこれが本当に素晴らしいしてみましょう。
それでは実際のデータにこれを接続してみましょう。
それでは、質問させ可能性 それらのデータについてUSGS。
だから、米国地質調査所 地震に関するデータを有している。
彼らはできるの公開APIを持っている JSON形式で消費される。
それでは、それを行うことができます。
>> だから、これはコードのビットであること USGS APIに接続します。
そして、それに対する処理のビットがあります。
これは関係ありませんが、それを簡素化します ような単純なデータ形式に
我々は前に持っていた。
だから私はに私達のコールを取り除く ファイルの私達の偽のdata.json。
その代わり、私が呼んでいる 基本的にUSGS。
>> 素敵な、のリフレッシュしましょう​​。
これは、実際、現実のデータである 地震のため、今週から。
これは本当に面白いです。
これは驚くべきことではない 私たちのために、しかしある
上の地震の多く カリフォルニアの西海岸。
しかし、私はそれが非常に面白いと思った 非常に多くの地震があったこと
アラスカで、どうやら、 ここに中西部で。
私は、興味深い意味し、我々は良いね。
それは結論だ。
>> しかし、根本的に、この D3は、私たちが何に役立つものです。
それは私たちがデータを取るのに役立ちます、バインド それDOMの要素に、
そして、これらの要素の変化が データの関数として、
それらの属性を持っている、すべての 要素の多くの属性、
すべてのチャネルのために有用で 情報を伝達する。
>> D3は信じられないほど強力です 図書館と驚くほどよく実行します。
これは、いくつかの強力なものです。
データの可視化は、 信じられないほど強力なツール
深い人々に伝えるための 自社のコアに到達する洞察
とで、それらを理解するのに役立ちます この深遠かつ直感的な方法、
どのようにデータの作品とどのように データは、私たちの生活を変える。