Loading article…
| データ駆動型ドキュメント（D3.js） | |
|---|---|
 | |
| 開発者 | マイク・ボストック、ジェイソン・デイビス、ジェフリー・ヒア、ヴァディム・オギエヴェツキー、そしてコミュニティ |
| リリース | 2011年2月18日 ( 2011-02-18 ) |
| 安定放出 | |
| 執筆 | JavaScript |
| タイプ | データ可視化、JavaScriptライブラリ |
| ライセンス | ISC |
| Webサイト | d3js.org |
| リポジトリ |
|
D3.js （ D3、Data-Driven Documentsの略）は、 Webブラウザで動的でインタラクティブなデータ視覚化を作成するためのJavaScriptライブラリです。Scalable Vector Graphics（SVG）、HTML5、およびCascading Style Sheets （CSS）の標準を使用しています。以前のProtovisフレームワークの後継です。[ 2 ] 2011年に開発が注目され、[ 3 ] 2011年8月にバージョン2.0.0がリリースされました。[ 4 ] 2016年6月にバージョン4.0.0がリリースされたことで、D3は単一のライブラリから、独立して使用できるより小さなモジュール型ライブラリのコレクションに変更されました。[ 5 ]
これまでにも、ウェブブラウザにデータ可視化機能を導入しようとする様々な試みが行われてきた。中でも特筆すべきは、Prefuse、Flare、Protovisといったツールキットであり、これらはすべてD3.jsの直接的な前身とみなすことができる。
Prefuseは2005年に開発された視覚化ツールキットで、 Javaの使用が必要であり、Javaプラグインを介してブラウザ内で視覚化がレンダリングされた。Flareは2007年に開発された同様のツールキットで、ActionScriptを使用し、レンダリングにはFlashプラグインが必要だった。
2009年、スタンフォード大学のスタンフォード・ビジュアライゼーション・グループのジェフリー・ヒア、マイク・ボストック、ヴァディム・オギエヴェツキーは、PrefuseとFlareの開発と利用の経験に基づいて、データからSVGグラフィックを生成するJavaScriptライブラリであるProtovisを作成しました。このライブラリは、データビジュアライゼーションの実務家や研究者の間で知られていました。[ 6 ]
2011年、Protovisの開発は中止され、新しいプロジェクトであるD3.jsに注力することになった。Protovisでの経験を踏まえ、BostockはHeerとOgievetskyと共に、Web標準に重点を置きつつパフォーマンスを向上させた、より表現力豊かなフレームワークであるD3.jsを開発した。[ 7 ]
D3.jsライブラリは、あらかじめ用意された関数を使用して、要素の選択、SVGオブジェクトの作成、スタイルの適用、トランジション、動的効果、ツールチップの追加などを行います。これらのオブジェクトはCSSを使用してスタイル設定することも可能です。D3.js関数を使用すると、大規模なデータセットをSVGオブジェクトにバインドして、テキスト/グラフィックチャートや図を生成できます。データはJSON、カンマ区切り値（CSV） 、 geoJSONなど、さまざまな形式に対応していますが、必要に応じて、他のデータ形式を読み取るJavaScript関数を作成することもできます。
D3.js の設計における中心的な原則は、プログラマーがまず CSS スタイルのセレクタを使用して指定された一連のDocument Object Model (DOM) ノードを選択し、次にjQueryと同様の方法で演算子を使用してそれらを操作できるようにすることです。[ 8 ]例えば、すべての HTML 段落要素 (で表される) を選択し、次にテキストの色をラベンダー色に変更することができます。<p>...</p>
d3.selectAll ( "p" ) // すべての<p>要素を選択.style ( " color" , " lavender" ) // スタイル"color"の値を"lavender"に設定.attr ( " class " , "squares" ) // 属性"class"の値を"squares"に設定 .attr ( " x " , 50 ); // 属性"x"（水平位置）の値を50pxに設定要素の選択は、HTMLタグ、クラス、識別子、属性、または階層構造内の位置に基づいて行うことができます。要素が選択されると、それらに対して操作を適用できます。これには、属性、表示テキスト、スタイルの取得と設定（上記の例のように）が含まれます。要素を追加したり削除したりすることもできます。HTML要素の変更、作成、削除といったプロセスは、データに依存するように設定できます。これがD3.jsの基本概念です。
トランジションを宣言することで、属性やスタイルの値を一定時間かけて滑らかに変化させることができます。以下のコードは、ページ上のすべてのHTML要素のテキストカラーを徐々にピンク色に変化させます。<p>...</p>
d3.selectAll ( "p" ) // すべての<p>要素を選択.transition ( " trans_1" ) // "trans_1"という名前のトランジション.delay ( 0 ) // トリガーから0ms後にトランジションを開始.duration ( 500 ) // 500ms間トランジション .ease ( d3.easeLinear ) //トランジションのイージング進行は線形... .style ( " color" , "pink" ); // ...色をピンクに変更より高度な用途では、読み込まれたデータによって要素が作成されます。D3.js は指定されたデータセットを読み込み、その各要素に対して、関連付けられたプロパティ (形状、色、値) と動作 (遷移、イベント) を持つ SVG オブジェクトを作成します。[ 9 ] [ 10 ] [ 11 ]
// データvar countriesData = [ { name : "アイルランド" , income : 53000 , life : 78 , pop : 6378 , color : "black" }, { name : "ノルウェー" , income : 73000 , life : 87 , pop : 5084 , color : "blue" }, { name : "タンザニア" , income : 27000 , life : 50 , pop : 3407 , color : "grey" } ]; // SVG コンテナを作成var svg = d3 . select ( "#hook" ). append ( "svg" ) . attr ( "width" , 120 ) . attr ( "height" , 120 ) . style ( "background-color " , "#D0D0D0" ); // データから SVG 要素を作成しますsvg . selectAll ( "circle" ) // 仮想の円を作成します template . data ( countriesData ) // データをバインドします. join ( "circle" ) // データを選択範囲に結合し、個々のデータごとに円要素を作成します. attr ( "id" , function ( d ) { return d . name }) // 国名に応じて円の id を設定します name . attr ( "cx" , function ( d ) { return d . income / 1000 }) // 収入に応じて円の水平位置を設定します. attr ( "cy" ,function ( d ) { return d.life } ) //平均寿命に応じて円の垂直位置を設定します。 .attr("r", function(d) { return d.pop / 1000 * 2 } ) //国の人口に応じて円の半径を設定します。.attr ( "fill" , function ( d ) { return d.color }); // 国の色に応じて円の色を設定します。生成されるSVGグラフィックは、提供されたデータに基づいてデザインされます。
データセットがドキュメントにバインドされると、D3.js の使用は通常、バインドされたデータセットの各項目に対して明示的な.enter()関数、暗黙的な「更新」、および明示的な関数が呼び出されるパターンに従います。コマンドの後にチェーンされたメソッドは、選択 (前の) で DOM ノードによって既に表現されていないデータセットの各項目に対して呼び出されます。同様に、暗黙的な更新関数は、データセットに対応する項目がある既存の選択済みノードすべてに対して呼び出され、バインドするデータセットの項目がない既存の選択済みノードすべてに対して呼び出されます。D3.js のドキュメントには、この動作に関するいくつかの例が示されています。[ 12 ].exit().enter()selectAll().exit()
D3.js は、多くの個人や組織がデータ視覚化に使用している人気のツールセットです。これを使用している組織には、ニューヨーク・タイムズ、Airbnb、MTVなどがあります。[ 13 ]マイク・ボストックは、 GitHub Gist を使用してコードをホストする、D3 の視覚化とコードスニペットを共有する Web サイトとして bl.ocks を作成しました。その後、プログラマーが視覚化を作成して共有できる場所として Observable を作成しました (bl.ocks と似ていますが、コードはすべて observable サイトでホストされています) 。CodePenなどの多くのプログラミングサイトにも D3 コミュニティがあります。
