[音楽再生] 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は信じられないほど強力です 図書館と驚くほどよく実行します。 これは、いくつかの強力なものです。 データの可視化は、 信じられないほど強力なツール 深い人々に伝えるための 自社のコアに到達する洞察 とで、それらを理解するのに役立ちます この深遠かつ直感的な方法、 どのようにデータの作品とどのように データは、私たちの生活を変える。