D3.js

開発者	マイク・ボストック、ジェイソン・デイヴィス、ジェフリー・ヒーア、ヴァディム・オギエベツキー、そしてコミュニティ
初回リリース	2011年2月18日; 13年前 ( 2011-02-18 )
安定版リリース	7.9.0 [1] / 2024年3月12日; 8か月前 （2024年3月12日）
リポジトリ	github.com/d3/d3
書かれた	JavaScript
タイプ	データ可視化、JavaScriptライブラリ
ライセンス	BSDA の
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]

これまでも、Web ブラウザにデータ視覚化をもたらすさまざまな試みが行われてきました。最も注目すべき例は、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]たとえば、すべての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 の基本概念です。

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

 d3 . selectAll ( "p" ) // すべての <p> 要素を選択します。 . transition ( "trans_1" ) // 名前が "trans_1" の遷移です。 . delay ( 0 ) // トリガーの 0 ミリ秒後に遷移を開始します。.duration ( 500 ) // 500 ミリ秒間遷移します。 . easy ( d3 . easyLinear ) // 遷移のイージングの進行は線形です... . style ( "color" , "pink" ); // ... color:pink に変更します             
         
                      
                 
                
        

より高度な用途では、読み込まれたデータによって要素が作成されます。D3.jsは指定されたデータセットを読み込み、各要素に対して、関連するプロパティ（形状、色、値）と動作（遷移、イベント）を持つSVGオブジェクトを作成します。^{[9] [10] [11]}

// データ
var countryData = [ { 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 を設定します. 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]

• JavaScriptフレームワーク
• JavaScript ライブラリ

D3.js自体の背景

• Bostock, Michael; Ogievetsky, Vadim; Heer, Jeffrey (2011 年 10 月)、「D3: データ駆動型ドキュメント」、IEEE Transactions on Visualization and Computer Graphics、17 (12)、IEEE プレス: 2301–2309、doi :10.1109/TVCG.2011.185、PMID  22034350、S2CID  505461

D3.js の使用 - 初級レベル

• マレー、スコット（2013年3月）、Web向けインタラクティブデータ視覚化、D3によるデザイン入門（第1版）、カリフォルニア州セバストポル：オライリーメディア、ISBN 978-1-4493-3973-9
• Timms, Simon (2013 年 9 月)、HTML5 と JavaScript によるソーシャル データ視覚化 (第 1 版)、バーミンガム: Packt Publishing、ISBN 978-1-7821-6654-2

D3.js の使用 - 中級レベル

• Dewar, Mike (2012 年 6 月)、Steele, Julie、Blanchette, Meghan (編)、Getting Started with D3、Creating Data-Driven Documents (第 1 版)、カリフォルニア州セバストポル: O'Reilly Media、ISBN 978-1-4493-2879-5
• Qi Zhu、Nick (2013 年 10 月)、「Data Visualization with D3.js Cookbook (第 1 版)」、バーミンガム: Packt Publishing、ISBN 978-1-7821-6216-2

その他

• ニュートン、トーマス、ビジャレアル、オスカー（2014）、Learning D3.js Mapping、バーミンガム：Packt Publishing、p. 126、ISBN 9781783985609
• Navarro Castillo、Pablo (2014)、Mastering D3.js、バーミンガム: Packt Publishing、p. 352、ISBN 9781783286270
• Teller, Swizec (2013)、「Data Visualization with d3.js」、バーミンガム: Packt Publishing、p. 194、ISBN 9781782160007
• Viau, Christophe (2013)、「D3.js Edge の開発: 再利用可能な D3 コンポーネントとチャートの作成」、Bleeding Edge Press、p. 268、ISBN 9781939902023、2014年9月3日時点のオリジナルよりアーカイブ。2014年8月27日閲覧。
• Meeks, Elijah (2014)、D3.js in Action、Manning Publications、p. 325、ISBN 9781617292118
• マクリーン、マルコム (2014)、D3 のヒントとコツ、Leanpub、p. 580
• King, Ritchie (2014)、「D3 によるビジュアル ストーリーテリング: JavaScript によるデータ視覚化入門」、Addison-Wesley Data & Analytics シリーズ、p. 288、ISBN 978-0-321-93317-1

ビデオ

• Gopal, Nikhil (2014 年 10 月)、D3 と CoffeeScript: Python プログラマーのための Web ビジュアライゼーション入門、カリフォルニア州セバストポル: O'Reilly Media
• King, Ritchie (2014 年 12 月)、D3 Visualization LiveLessons: JavaScript によるデータ視覚化入門、Addison-Wesley Professional

• Vegaおよび Vega-Lite 視覚化文法は、D3.js の一部に基づいて構築された宣言型視覚化仕様です。

Wikimedia Commons にはD3.jsに関連するメディアがあります。

• 公式サイト
• D3.js ギャラリー
• Blocksplorer、使用された方法でブロックを検索
• D3「再利用可能なチャート」ライブラリ:
  • C3 https://c3js.org
  • プロットリー https://plot.ly/javascript
• bl.ock.org 2017 年 4 月 7 日にWayback Machineおよび blockbuilder.org にアーカイブされました: 人気の初期のギャラリー システム。
• Observablehq.com: メインの D3js プレイグラウンド。