🙆🏾 🅰️ ↘️ D3.jsを使用したブラウザーでのデータの視覚化 🚣🏻 🌚 😛

ミハイル・ドゥナエフ（ war_hol ）

私たちは毎日データの視覚化とさまざまなグラフに出会います。これらは何らかのGoogleアナリティクス、インターネットバンク、Excelなどです。

実際、グラフィックスは私たちの歴史を通じて人類を苦しめています。最初のデータ視覚化の1つは、西暦10世紀です。未知の天文学者は、図を使用して天体の動きを描写しました：

次の興味深い作品は、17世紀の太陽のスポットの動きです。

ここには、特定のタイムラインがすでに表示されています。これは、インフォグラフィックの誕生から表示されます。

次の 18世紀には、機械的なタイムラインを作成できるデバイスが登場しました。ノブを左右にスクロールすることで、スクロールを左右に広げて、このドキュメントからストーリーを学習することができます。本の一種の代替：

同時に、データビジュアライゼーションのこのような美しいインスタンスが表示されます。

これは人間帝国の物語です。また、タイムライン、人々に登場した最初の高品質のカラータイムライン。

そして、これは最も有名な歴史的インフォグラフィックです：

ナポレオン軍のフランスからモスクワへの移動、およびその逆の動きを示しています。したがって、ベージュ色はモスクワへの移動であり、黒色は逆戻りです。線の太さはナポレオンの部隊の数を示しています。川は特別に指定されており、川を渡るときにナポレオンが軍隊の一部を失ったことがわかります。このタイプのデータ表示により、ストーリーを視覚的に「見る」ことができます。

これが私たちの時間です。

これは、文化的キャリアの生と死の場所を示す視覚化です-青は人が生まれた場所を示し、赤は彼が死んだ場所を示します。この男たちは、文化、科学者、芸術家のための歴史的な重要人物をすべて集めました。そして、都市化のプロセスが人類の全存在、すなわち早い時期から、文化の担い手は文化センターを志し、同時に郊外で生まれました。つまり現在、ロシア中の人々がモスクワに行っています。今は始まっていませんでした。

残念ながら、現代の技術のすべての開発とインフォグラフィックの開発により、世界の人口のほとんどはEXCELの標準グラフィックを使用しており、これ以上進むことはありません。

実際、より多くのグラフがあり、データに応じて選択する必要があるグラフを示す美しい図があります。関係、分布、比較、構成を表示する必要がある場合：

以下に、クラシックチャートを美しく表示する方法の良い例を示します。

これはもはやExcelではありません。これは、イラク戦争での死亡者数です。ニューヨークタイムズは、そのようなあざのある棒グラフを示しています。第一に、それは美しく、第二に、人が何人、いつ死んだかがすぐにわかります。

同じように、RIA Novostiインフォグラフィックスタジオの私の以前の同僚は、ここで何かを描写しました。

あなたはそれがどれほど美しいかを見ることができます。つまり Excelのグラフに限定されない場合は、すぐに美しくファッショナブルになります。

別の良い例：

これは、19世紀の医学運動の創設者であるフローレンスナイチンゲールであり、イギリス軍の死因を描いたものです。あなたは、XIX世紀、そしてなんと美しいグラフィックを見るか。

そして、これが私たちの時代であり、オンラインゲームの数と人気です。

そして、私のお気に入りの例は私のハードドライブです。

このタイプのチャートはツリーマップと呼ばれます。 Mac OSおよびWindows用のプログラムがあり、各長方形の領域（ファイルサイズ）が表示されます。これらはすべて、ハードドライブ上のファイルです。緑は私が見ているシリーズであり、赤はアプリケーションフォルダであり、青はスワップファイルであることがわかります...この形式でハードディスクを見ると、あなたの場所がどこに行ったのか、どのファイルが多くのスペースを占めているかすぐにわかります、-非常に便利で明確。

これは、データの提示方法と、それが必要な理由です。ただし、Web上でインタラクティブ、インタラクティブが表示されると、全体が変わります。グラフとチャートの数は劇的に増加しており、どの分類にも適していません。

D3の良い例を次に示します。これは、いくつかのタイプの図を一度に組み合わせたものであり、結果はもちろん素晴らしいものです。

実際、ウェブのデータのインフォグラフィックスと視覚化には、非常に短い歴史があります。それはすべて、90年代にMacromedia Directorプログラムで始まりました。

これはフラッシュの前兆であり、Webでの最初のいくつかの種類のデータ視覚化がフラッシュ上に現れ始めました。当然、「Macromedia Director」が私たちの支援「Adobe Flash Platform」に来た後、彼女は美しくなりました。実際、データの視覚化、フラッシュ上のグラフィックスのコストは、優れたツールではありません。

RIA Novostiは、インフォグラフィックのメインツールとしてフラッシュを使用しました。 2年前、彼らはフラッシュを完全に放棄しましたが、それまでは便利だったため、フラッシュを使用していました。

当然、これら3人が置き換えられました-html、javascript、css：

そして、彼らはsvgとWebGLを持ち込んだので、フラッシュ上でできることはほとんどすべてウェブ上でできました。

多くのことで、D3を実行できます。ネットワーク上では、オンラインでの動作例が見られます。すべてが素早く（これはベクトルです）、美しく、ブレーキなしで動作します。 D3は現在、データの視覚化に最適なライブラリの1つです。 Githubからスクリーンショットを見ることができます：

このライブラリは2010年に開発を開始し、過去5年間で動的に開発されていますが、最近ではそれほど多くはありませんが、動きが落ち着き、発明する新しい機能がそれほど多くないためです。 3万7千個の星と1万個近くの分岐点が、ライブラリが本当に優れていることを示しています。彼女はGithubで最も人気のある20のJavaScriptライブラリの1つです。

これが良い例です。最近ではD3ライブラリを直接使用しています。 New York Timesは何を表示してもかまいませんが、表示方法は重要です。

ここでは、データ駆動のアプローチが非常に明確に表示されています。各DOM要素にはデータの一部の要素が格納されており、1つまたは別の表示方法を選択するたびに、このデータの表示方法が必要です。このデータは要素に保存され、D3がどのようにアニメーションを美しく作成するか、どのようにすべてが効率的、迅速に機能するか、そして最も重要なことは、制作に問題がないことを確認できます。

これも良い例で、D3もあります：

これは、異なる年における米国の気温の視覚化です。月が変化し、ループしていることがわかります。また、干ばつの年、雨の多い年をはっきりと見ることができます。まず、それは本当に美しいです。あなたはそれを長い間見て、固執するだけで、うまく機能します。

または3番目の例：

これは東京風速です。今すぐリアルタイムで検索して見ることができます-東京の風速が視覚化されています。非常に美しい、どこで、どのように、なぜ見ることができるたびに...非常に人気のあるサービス。私たちの場所では、ギスメテオはこれがすぐに考えられるかどうかを知りません。

または、ここにも例があります：

これはニューヨークタイムズでもあります。スクロールによって制御される視覚化、つまりこのビデオを撮影していた瞬間に、マウスでスクロールしました。ページは静的ですが、グラフィックは変化しています-すべてが明確で美しく、高速です。これは、愚かなExcelのタブレットから、通常のスケジュールから逃げ、大きな「すごい」効果を持つユーザーのプロジェクトを作成できるようにする方法です。ユーザーが「すごい、すごい！」

ロシアには何がありますか？ロシアでは、すべてが非常に良好です。

私のプロジェクトのいくつかと、それらがどのように進んでいるかを説明します。 Excelファイルから次のようなプロジェクトを開始するたびに：

エディターはいくつかのデータを提供し、エディターと一緒にこのデータをどうするかを決め始めます。

このデータは何ですか？これはさまざまな年のロシアの人口であり、年齢ごとに分類されています。 Y軸に沿って-異なる年、X軸に沿って-年齢。したがって、交差点-ある年齢または別の年齢の人々がロシアに何人住んでいたか。最後に、X軸に年齢が表示され、Y軸に人口が表示されるダイアグラムを取得します。

さまざまな色で、男性と女性の人口を「ペイント」します。インタラクティブなスライドではなく、静的なスライドであっても、ストーリーを作成できます。データを視覚化する必要がある主な理由は、Excelスプレッドシートでは見ることができないストーリーを人々に見せることです。ここで、私たちはすでに「戦争のエコー」としてそのようなものを見ています：

この失敗を参照してください？これらは第二次世界大戦中に生まれなかった子供たちであり、したがって、ベビーブームは第二次世界大戦後に生まれた子供たちです。

また、この図では、労働年齢人口の年齢、つまり 16歳から55-60歳までで、年金受給者1人あたりの労働年齢の人数を計算しました。

これらは実際には非常に重要な数字です。その理由を示します。

1990年には、年金受給者1人あたり3人の労働者がいたことがわかります。また、年を変更するために左右にドラッグできるタイムラインも追加しました。

次のように機能します。「再生」ボタンをクリックすると、年が変わり始め、D3はスケジュールをアニメーション化します。エコー・オブ・ウォーが、い、引退し、1人の年金受給者に約3人の労働者がいることがわかります。しかし、この背後で何が起こるのでしょうか？ベビーブームの間に生まれた子供たちが引退し、ロシアの年金受給者の数が急激に増加し、1人の年金受給者のために働く人の数が急激に減少します。実際、この国では、すべての労働者が自分自身と1人の年金受給者の給与を受け取るような状況にあります。 2025年には、1人の年金受給者の人数が2人未満になり、これが本当の年金危機になることがわかっていますか？

これは、データから履歴を取得する方法を示すものです。これはジャーナリズムにとって非常に重要です。

そして、最初は単なる数字の「混乱」でした。

次のプロジェクト。私たちはオープンソースで下院議員に関する情報を見つけました：

6回すべての召集の州下院議員。彼が州下院に来たときと下院を去ったとき、私たちは名前、代理人の姓、党の所属と年を見る。

このデータで何ができますか？それらを視覚化しようとします。まず、最初の召集を行い、すべての議員を党の所属に対応する色で「ペイント」し、小さな党から大きな党へと構築します。

すでに美しいが、何かが正しくない、歴史がない。続けましょう。 6つの招集すべてを視覚化します。

とても簡単です。州下院の6回の召集。「統一ロシア」がどのように出現し、このために共産党がどのように地盤を失っているのかを見る。

それも非常に興味深いですが、歴史はありません。ストーリーを追加しましょう。

議員は召集から召集に移ったことを知っています。代理がI召集、たとえばII召集から合格した場合、線を引きましょう。そのような図が得られます。それはすでに美しいです。

議員が召集から召集にどのように通過したか、実際、各召集は新しい代理ではなく、これらは過去の召集からの古い代理であることがわかります。

このスキームに少し対話性を追加すると、個々の関係者を選択できるようになり、各代理人を突くことができ、代理人の履歴を追跡できるようになります。たとえば、共産党の歴史は、人々がどのようにある党から別の党に移動したかを見ます。いくつかの招集を逃した人々を見ることができます-彼らの行は特定の招集をバイパスします。

それはすでに非常に興味深いです。ユーザーはサイトにアクセスして、突くことができます...動作します。ベクトルであり、svgであり、低速のブラウザーでもうまく動作します。実際、私たちは最初にpng基板を作成し、高速ブラウザでレンダリングしたかったのですが、それがsvgでどのように機能するかを見たときに、そのままにしておくことにしました。後悔はありません。

ここでどんな物語を見つけることができますか？ここでは、6回すべての召集に参加した議員を見つけることができます。「物語のある人」。

そして、共産党からのこれらの代理人のほとんどを見ることができます。ロシア連邦の共産党は人々を「保持」し、どこにも行かせません。おそらく新しい人々はいないからです。

同様に、召集を逃したすべての議員を区別できます。それも興味深いですが、理由は明らかではありません。

そして、ここに私のお気に入りのスライドがあります-政治的所属を4回以上変更した議員：

これらは政治的理由ではなく、何らかの理由で下院にいる人々です。人は政治的信念を4回変えることはできないからです。しかし、誰が知っている...

Mike BostokのWebサイトでさらに例を見つけることができます（これはD3ライブラリの作成者です）。

マイク・ボストックは例の大ファンであり、膨大な数でそれらを収集し、例でページをスクロールしますが、それらはすべて終わらないし終わらないと言わなければなりません。それらの多くがあるので、私は底に行ったことはありません...そして、毎日のための例があります。コード例、およびすべてがうまく書かれている、すなわち必要なものをすべて見つけることができます。

それで、いくつかのコード。

D3ライブラリ-DOM要素を操作する他のライブラリと同様。すべてセレクターから始まります。セレクターはd3.select（ "div"）またはd3.selectAll（ "div"）で機能します。最初の要素のみ、またはすべてを選択できます。使用されたW3CセレクターAPI、またはSizzle。

SizzleはjQueryを使用するエンジンセレクターです。 jQueryを並列に接続している場合、セレクターはより高速に動作しますが、Sizzleを個別に接続することもできます。

D3でチェーンが機能するように、メソッドを順番に呼び出すことができます。

最初から最後まで、ある種のプロジェクトを行い、それがどのように行われるかを見てみましょう。私のお気に入りの議員に戻りましょう。なぜ私は代理人をそんなに愛するのですか？私が政治的に活発な男だからではなく、ロシアの州下院だけが優れたデータソースです。なぜなら、代理人に関するすべてのデータが公開されているからです。州下院のウェブサイト、彼の名前、ロシアの不動産、妻の給料と不動産、車-彼と妻...私たちはそれぞれの代理人について広く知ることができます。

例として、代理人のスピーチの数、この代理が下院に提出した法案の数を調べることができます。非常に良い例：

代理人が稼ぐほど、彼が話すことは少ないという仮定を立てましょう。そして、これがそうかどうかを確認します。

この方法で各副メンバーをsvgに追加します。各代理人はボックスを使用して表示されます。また、各副議員を彼の党の色で着色します。 State DumaのWebサイトを解析したと想像してください。

今、私は最初の3人の議員のペンで運転しました。Jsonでは、彼の名前、給料、スピーチの回数、党の所属を維持しました。これまでのところ、他に何も必要ありません。

D3は通常のライブラリのように接続します。

最初に行うことは、このデータをダウンロードすることです。 jQueryに精通している人なら誰でも知っています。 d3.json（ 'datajson）およびエラーを処理し、使用するJsonオブジェクトを返すコールバック。

次に作成する必要があるのは、DOMツリーのsvgです。d3.select（ 'body'）、append（ 'svg'）を書き込みます。

同様に、追加の幅と高さの属性を設定する必要があります-attr（ 'width'）、attr（ 'height'）。すべてがシンプルで理解しやすく、馴染みのあるものです。

そして、このコードを実行した後、必要な属性を持つsvg要素を取得することがわかります。

次に行うことは非常に重要です。 D3ライブラリとは何ですか？ D3の主なタスクはデータバインディングです。これは、データをDOM要素にバインドするときです。これは、着信データによって制御されるデータ駆動型アプリケーションと呼ばれるタイプのアプリケーションです。何をする必要がありますか？データを長方形にバインドする必要があります。 svg.selectAll（ 'rect'）を実行すると、空の配列が返されます。これは、svgを作成したばかりで、四角形が存在しないためです。空のD3配列に関してこのような奇妙な操作を行います。

これがD3の動作方法であり、非常に長い間D3を使用し始めると、このパスが明らかになります。 .dataメソッドを使用して、このjson.deputatesデータをこの空の配列に割り当てます。そして、このスキームが判明しました：

完成したプロジェクトがある場合、各DOM要素に対応するデータ要素があり、それらは互いに接続されています。私たちのプロジェクトでは、今何がありますか？

データはありますが、DOM要素はそれぞれに割り当てられていません。

そして、次のことを行います。

.enter（）メソッドを使用すると、DOM要素が割り当てられていないデータ要素が返されます。 DOM要素を持たないすべてのデータが返され、これらの要素を繰り返し処理しているようです。それらのために、append（ 'rect'）メソッドを呼び出します。つまり「DOM要素がないデータ要素ごとに、新しいrect要素を割り当てます。」彼は彼を任命するだけでなく、それらを結び付け、DOMツリーに描画します。

ほら、svgの中に既に3つの<rect>要素があります。実際、これはD3ライブラリの最も重要な部分です。

この部分を理解し、それがどのように機能するかを理解すれば、他のすべては非常に簡単に機能します。そして、各長方形についても同様に、幅と高さを設定します。

このすべての意味は何ですか？なぜこれをすべて行ったのですか？

今これを見ると、画面上に10x10ピクセルの小さな黒い長方形が1つ表示されます。この長方形は3つで構成されています。代理人の給料とスピーチの回数に応じて、各座標（X、Y）を変更する必要があります。

そして、.attrメソッドを使用して最初の属性「x」を渡し、次に2つのパラメーターが渡される関数を渡します。dはこのDOM要素に対応するデータ要素であり、2番目は反復番号です。繰り返し数はほとんど必要ありませんが、データ要素が常に必要であり、属性「x」にバインドする必要がある方法で、この関数で処理されたデータを返します。

データ要素がどのように見えるかを少し思い出させてください。つまり「x」にスピーチの数、スピーチの数を添付します。