D3.js

データ駆動型ドキュメント (D3.js)
開発者マイク・ボストック、ジェイソン・デイヴィス、ジェフリー・ヒーア、ヴァディム・オギエベツキー、そしてコミュニティ
初回リリース2011年2月18日 （2011年2月18日）
安定版リリース
7.9.0 [ 1 ]ウィキデータで編集する / 2024年3月12日 （2024年3月12日）
リポジトリ
書かれた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 ]バージョン2.0.0は2011年8月にリリースされました。[ 4 ] 2016年6月のバージョン4.0.0のリリースにより、D3は単一のライブラリから、独立して使用できる小規模なモジュール式ライブラリの集合体へと変更されました。[ 5 ]

コンテクスト

ウェブブラウザでデータ可視化を実現しようとする試みは、これまでも数多く行われてきました。中でも注目すべきは、Prefuse、Flare、Protovisといったツールキットです。これらはすべてD3.jsの直接的な前身と言えるでしょう。

Prefuseは2005年に開発された視覚化ツールキットで、 Javaを使用し、視覚化はJavaプラグインを使ってブラウザ内でレンダリングされていました。Flareは2007年に開発された同様のツールキットで、ActionScriptを使用し、レンダリングにはFlashプラグインが必要でした。

2009年、スタンフォード大学スタンフォード可視化グループのJeffrey Heer、Mike Bostock、Vadim Ogievetskyは、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スタイルのセレクターを使ってドキュメントオブジェクトモデル（DOM）ノードの特定のセットを選択し、次に演算子を使ってjQueryと同様の方法でそれらを操作できるようにすることです。[ 8 ]例えば、（で表される<p>...</p>）すべてのHTML段落要素を選択し、そのテキストの色をラベンダー色などに変更することができます。 

d3 . selectAll ( "p" ) // すべての <p> 要素を選択. style ( "color" , "lavender" ) // スタイル "color" の値を "lavender" に設定. attr ( "class" , "squares" ) // 属性 "class" の値を "squares" に設定. attr ( "x" , 50 ); // 属性 "x" (水平位置) の値を 50px に設定

選択は、HTMLタグ、クラス、識別子、属性、または階層内の位置に基づいて行うことができます。要素を選択すると、それらに対して操作を適用できます。これには、属性の取得と設定、表示テキスト、スタイル（上記の例を参照）が含まれます。また、要素の追加と削除も可能です。HTML要素の変更、作成、削除のプロセスは、データに依存するように設定できます。これがD3.jsの基本概念です。

トランジション

トランジションを宣言することで、属性とスタイルの値を一定時間にわたって滑らかに補間できます。次のコードは、<p>...</p>ページ上のすべてのHTML要素のテキストの色が徐々にピンク色に変化します。 

d3 . selectAll ( "p" ) // すべての <p> 要素を選択. transition ( "trans_1" ) // 名前が "trans_1" のトランジション. delay ( 0 ) // トリガーの 0 ミリ秒後にトランジションを開始. duration ( 500 ) // 500 ミリ秒間トランジション. 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 ) // バインド data . join ( "circle" ) // 選択範囲にデータを結合し、各データごとに円要素を作成. attr ( "id" , function ( d ) { return d . name }) // 国名に応じて円のIDを設定. attr ( "cx" , function ( d ) { return d . income / 1000 }) // 収入に応じて円の水平位置を設定. attr ( "cy" ,関数( d ) { dを返す.life } ) // 平均寿命に応じて円の垂直位置を設定します。.attr ( "r" , function ( d ) { return d .pop / 1000 * 2 } ) //国の人口に応じて円の半径を設定します。.attr ( " fill " , function ( d ) { return d .color }); // 国の色に応じて円の色を設定します。

生成された SVG グラフィックは、提供されたデータに従って設計されます。

データを使用してノードを追加する

データセットがドキュメントにバインドされると、D3.js は通常、明示的な.enter()関数、暗黙的な「更新」、そして明示的な.exit()関数が、バインドされたデータセット内の各アイテムに対して呼び出されるというパターンに従います。コマンドの後に連鎖されたメソッド.enter()は、データセット内のDOMノード（前のselectAll()）によってまだ表現されていない各アイテムに対して呼び出されます。同様に、暗黙的な更新関数は、データセット内に対応するアイテムが存在するすべての選択ノードに対して呼び出され、.exit()データセット内にバインドするアイテムがないすべての選択ノードに対して呼び出されます。D3.js のドキュメントには、この動作の仕組みを示すいくつかの例が記載されています。[ 12 ]

コミュニティ

D3.jsは、多くの個人や組織がデータ可視化に利用する人気のツールセットです。ニューヨーク・タイムズ、Airbnb、MTVなどが利用しています。[ 13 ] Mike Bostock氏は、D3の可視化やコードスニペットを共有するためのウェブサイトとしてbl.ocksを作成しました。このウェブサイトでは、GitHub Gistを使ってコードをホストしていました。その後、彼はプログラマーが可視化を作成して共有できる場所としてObservableを作成しました。（bl.ocksに似ていますが、コードはすべてObservableサイトでホストされています）。CodePenなどの多くのプログラミングサイトにもD3のコミュニティがあります。

参照

参考文献

  1. ^ 「リリース 7.9.0」 . 2024年3月12日. 2024年3月22日閲覧。
  2. ^ 「For Protovis Users」、Mbostock.github.com、2012年8月6日時点のオリジナルよりアーカイブ、 2012年8月18日閲覧。
  3. ^ Myatt, Glenn J.; Johnson, Wayne P. (2011年9月)、「5.10 参考文献」、Making Sense of Data III: A Practical Guide to Designing Interactive Data Visualizations、ニュージャージー州ホーボーケン：John Wiley & Sons、p. A–2、ISBN 978-0-470-53649-0、 2013年1月23日閲覧
  4. ^ 「リリースノート」、D3.js 、 2012年8月22日閲覧
  5. ^ "v4.0.0 · d3/d3 をリリース" . GitHub。 2016 年 6 月 28 日。2021 年12 月 27 日に取得。
  6. ^学術的な例: Savva, Manolis; Kong, Nicholas; Chhajta, Arti; Li, Feifei; Agrawala, Maneesh; Heer, Jeffrey (2011)、「ReVision: チャート画像の自動分類、分析、再設計」、ACM User Interface Software & Technology 、 2013年1月23日閲覧。
  7. ^ボストック、オギエヴェツキー、ヘア 2011
  8. ^ Bostock、Ogievetsky、Heer 2011、第3章
  9. ^ボストック、マイク（2012年2月5日）、結合で考える
  10. ^ 「A Pen by Lopez Hugo」 . Codepen.io . 2016年3月22日時点のオリジナルよりアーカイブ。 2016年8月1日閲覧。
  11. ^ 「Edit fiddle」 . JSFiddle.net . 2016年8月1日閲覧。
  12. ^ 「Three Little Circles」 . Mbostock.github.io . 2016年8月1日閲覧。
  13. ^ 「業界リーダーが強力なデータ視覚化のためにD3.jsを選択する理由」 2023年4月13日。

さらに読む

D3.js自体の背景
D3.jsの使い方 - 初心者レベル
D3.js の使用 - 中級レベル
その他
ビデオ
Wikimedia Commons にはD3.jsに関連するメディアがあります。
「 https://en.wikipedia.org/w/index.php?title=D3.js&oldid=1333892839」から取得