D3.js

D3.js
D3.js(D3とも呼ばれ、Data-Driven Documentsの略)は、Webブラウザーで動的でインタラクティブなデータ視覚化を生成するためのJavaScriptライブラリです。これは、Scalable Vector Graphics(SVG)、HTML5、およびCascading Style Sheets(CSS)標準を利用します。これは、以前のProtovisフレームワークの後継です。その開発は2011年に注目され、バージョン2.0.0が2011年8月にリリースされました。 D3.js 開発者
Mike Bostock、Jason Davies、Jeffrey Heer、Vadim Ogievetsky、およびコミュニティ
初回リリース
2011年2月18日; 9年前 (2011-02-18)
安定したリリース
6.5.0 / 2021年1月25日 ; 23日前  (2021-01-25)
リポジトリ
github .com / d3 / d3
で書かれている JavaScript タイプ
データの視覚化、JavaScriptライブラリ
ライセンス BSD ウェブサイト
d3js .org
無料のオープンソースソフトウェアポータル
内容
1 環境
2 技術原則
2.1 セレクション 2.2 トランジション 2.3 データバインディング 2.4 データを使用してノードを追加する
3 API構造
3.1 数学 3.2 配列 3.3 ジオメトリ 3.43.4 色
4 参考文献
5 参考文献
6 関連プロジェクト
7 外部リンク
環境
Webブラウザにデータの視覚化をもたらすためのさまざまなこれまでの試みがありました。最も注目すべき例は、Prefuse、Flare、およびProtovisツールキットでした。これらはすべて、D3.jsの直接の前身と見なすことができます。
Prefuseは、Javaの使用を必要とする2005年に作成された視覚化ツールキットであり、視覚化はJavaプラグインを備えたブラウザー内でレンダリングされました。Flareは、ActionScriptを使用した2007年の同様のツールキットであり、レンダリングにはFlashプラグインが必要でした。
2009年、PrefuseとFlareの開発と利用の経験に基づいて、スタンフォード大学のStanford VisualizationGroupのJeffHeer 、Mike Bostock、Vadim Ogievetskyが、データからSVGグラフィックを生成するJavaScriptライブラリであるProtovisを作成しました。このライブラリは、データ視覚化の実践者や学者に知られていました。
2011年、Protovisの開発は中止され、新しいプロジェクトD3.jsに焦点が当てられました。Protovisでの経験から情報を得て、Bostockは、HeerとOgievetskyとともに、D3.jsを開発して、より表現力豊かなフレームワークを提供すると同時に、Web標準に焦点を合わせてパフォーマンスを向上させました。
技術原則
D3.jsライブラリは、事前に作成された関数を使用して、要素の選択、SVGオブジェクトの作成、スタイル設定、またはトランジション、動的効果、ツールチップの追加を行います。これらのオブジェクトは、CSSを使用してスタイルを設定することもできます。大規模なデータセットは、D3.js関数を使用してSVGオブジェクトにバインドし、テキスト/グラフィックチャートおよび図を生成できます。データは、JSON、コンマ区切り値(CSV)、geoJSONなどのさまざまな形式にすることができますが、必要に応じて、JavaScript関数を記述して他のデータ形式を読み取ることができます。
セレクション
D3.js設計の中心的な原則は、プログラマーが最初にCSSスタイルのセレクターを使用してドキュメントオブジェクトモデル(DOM)ノードの特定のセットを選択し、次に演算子を使用してjQueryと同様の方法でそれらを操作できるようにすることです。たとえば、すべてのHTML

要素を選択してから、テキストの色をラベンダーに変更することができます。
d3 。selectAll (”p” )
//すべての

要素を選択します 。style (”color” 、 “lavender” ) //スタイル “color”を値 “lavender”に設定し ます。attr (”class” 、 “squares” )
//属性 “class”を値 “squares”に設定します 。attr (”x” 、 50 );
//属性「x」(水平位置)を値50pxに設定します
選択は、HTMLタグ、クラス、識別子、属性、または階層内の場所に基づいて行うことができます。要素を選択すると、それらに操作を適用できます。これには、属性、表示テキスト、およびスタイルの取得と設定が含まれます(上記の例のように)。要素を追加および削除することもできます。HTML要素を変更、作成、削除するこのプロセスは、D3.jsの基本概念であるデータに依存させることができます。
トランジション
遷移を宣言することにより、属性とスタイルの値を特定の時間にわたってスムーズに補間できます。次のコードは

、ページ上のすべてのHTML要素のテキストの色を徐々にピンクに変更します。
d3 。selectAll (”p” )
//すべての

要素を選択します 。transition (”trans_1″ )
//名前が “trans_1″の遷移 。delay (0 )
//トリガーの0ms後に遷移を開始し ます。期間(500 )
// 500msの間遷移し ます。楽(D3 。easeLinear )
//トランジション緩和進行は直線的です… 。スタイル(”色” 、 “ピンク” ); // … to color:pink
データバインディング
より高度な使用法では、ロードされたデータが要素の作成を促進します。D3.jsは特定のデータセットを読み込み、その要素ごとに、関連付けられたプロパティ(形状、色、値)と動作(遷移、イベント)を持つSVGオブジェクトを作成します。
//データ 変数 countriesData = [
{ name :”Ireland” 、 income :53000 、 life : 78 、 pop :6378 、 color : “black” }、 { name :”Norway” 、 income :73000 、 life : 87 、 pop :5084 、 色: “青” }、 { 名前:”タンザニア” 、 収入:27000 、 生活: 50 、 ポップ:3407 、 色: “灰色” } ]; // SVGコンテナの作成 VAR SVG = D3を。(”#hook” )を選択します。追加(”svg” )。attr (”width” 、120 )。attr (”高さ” 、120 )。スタイル(”背景色” 、”#D0D0D0″ ); //データsvgからSVG要素を作成します。selectAll (”circle” )//仮想サークルテンプレートを作成します。data (countriesData )//データをバインドします。join (”circle” )//データを選択範囲に結合し、個々のデータごとに円要素を作成します。ATTR (”ID” 、関数(D ){リターンD 。名})//国名に係る円のIDを設定します。ATTR (”CX” 、関数(D ){リターンD 。利益/ 1000年})//所得に係る円の水平位置を設定します。ATTR (”CY” 、関数(D ){戻りD 。ライフ})//は平均余命に係る円の垂直位置を設定します。ATTR (”R” 、関数(D ){戻りD 。ポップ/ 1000年* 2 })//国の人口に応じて円の半径を設定します。ATTR (”充填” 、関数(D ){戻りD 。色})。//国の色に応じて円の色を設定します
生成されたSVGグラフィックは、提供されたデータに従って設計されています。
データを使用してノードを追加する
データセットがドキュメントにバインドされると、D3.jsの使用は通常、明示的な.enter()関数、暗黙的な「更新」、および明示的な.exit()関数がバインドされたデータセット内の各アイテムに対して呼び出されるパターンに従います。任意の連鎖方法の後.enter()のコマンドは、既に選択(前にDOMノードによって表されていないデータセット内の各項目に対して呼び出されますselectAll())。同様に、暗黙的な更新関数は、データセットに対応するアイテムがある.exit()既存の選択されたすべてのノードで呼び出され、データセットにバインドするアイテムがない既存の選択されたすべてのノードで呼び出されます。D3.jsのドキュメントには、これがどのように機能するかの例がいくつか記載されています。
API構造
D3.js APIには数百の関数が含まれており、それらは次の論理単位にグループ化できます。
セレクション
トランジション
配列
数学 色 はかり SVG 時間
レイアウト
地理
ジオメトリ
行動
数学
正規分布、対数正規分布、ベイツ分布、およびアーウィンホール分布を使用した疑似乱数の生成。
2Dでの変換:平行移動、回転、スキュー、スケーリング。
配列
D3.js配列操作は、JavaScriptの既存の配列サポートを補完するように構築されています(ミューテーターメソッド:sort、reverse、splice、shift、unshift、アクセサーメソッド:concat、join、slice、indexOf、lastIndexOf、反復メソッド:filter、every、forEach、 map、some、reduceおよびreduceRight)。D3.jsは、この機能を次のように拡張します。
配列の最小値、最大値、範囲、合計、平均、中央値、および分位数を見つけるための関数。
配列の順序付け、シャッフル、並べ替え、マージ、および二等分するための関数。
配列をネストするための関数。
連想配列を操作するための関数。
マップおよびセットコレクションのサポート。
ジオメトリ
点のセットの凸包を計算します。
一連の点のボロノイ分割を計算します。
ポイント四分木データ構造のサポート。
ポリゴンの基本操作のサポート。 色 RGB、HSL、HCL、およびL * a * b *色表現のサポート。
色の明るさ、暗さ、および補間。
参考文献
^ 「d3リリース」。Github.com。 ^ 「Protovisユーザー向け」、Mbostock.github.com 、 2012年8月18日取得
^ Myatt、Glenn J。; Johnson、Wayne P.、「5.10参考資料」、Making Sense of Data III:A Practical Guide to Designing Interactive Data Visualizations、Hoboken、New Jersey:John Wiley&Sons、p。A–2、ISBN  978-0-470-53649-0、2013年1月23日取得 ^ 「リリースノート」、D3.js 、 2012年8月22日取得
^ 学術的な例:
Savva、Manolis; コング、ニコラス; Chhajta、Arti; リー、フェイフェイ; アグラワラ、マニーシュ; Heer、Jeffrey(2011)、「ReVision:チャート画像の自動分類、分析、および再設計」、ACMユーザーインターフェイスソフトウェアおよびテクノロジー、 2013年1月23日取得 ^ Bostock、Ogievetsky&Heer 2011 ^ Bostock、Ogievetsky&Heer 2011、chap。3 ^ Bostock、Mike(2012年2月5日)、Joinsで考える
^ 「ロペスHugoによるペン」。Codepen.io 。
^ 「フィドルの
」。JSFiddle.net 。
^ 「3つの小さな円」。Mbostock.github.io 。
^ d3(2016年6月30日)。「APIリファレンス・d3 / d3 Wiki・GitHub」。Github.com 。
参考文献
D3.js自体の背景
ボストック、マイケル; Ogievetsky、Vadim; Heer、Jeffrey、「D3:Data-Driven Documents」、IEEE Transactions on Visualization and Computer Graphics、IEEE Press、17(12):2301–2309、doi:10.1109 / TVCG.2011.185、PMID  22034350
D3.jsの使用-初心者レベル
マレー、スコット、Webのインタラクティブデータ視覚化、D3を使用した設計の概要(第1版)、カリフォルニア州セバストポル:O’Reilly Media、ISBN 978-1-4493-3973-9
Timms、Simon、HTML5およびJavaScriptを使用したソーシャルデータの視覚化(第1版)、バーミンガム:Packt Publishing、ISBN 978-1-7821-6654-2
D3.jsの使用-中級レベル
デュワー、マイク、スティール、ジュリー; Blanchette、Meghan(eds。)、Getting Started with D3、Creating Data-Driven Documents(1st ed。)、Sebastopol、California:O’Reilly Media、ISBN 978-1-4493-2879-5
Qi Zhu、Nick、D3.jsクックブックによるデータの視覚化(第1版)、バーミンガム:Packt Publishing、ISBN 978-1-7821-6216-2
その他
ニュートン、トーマス; Villarreal、オスカー(2014)、Learning D3.js Mapping、Birmingham:Packt Publishing、p。126、ISBN 9781783985609
Navarro Castillo、Pablo(2014)、Mastering D3.js、Birmingham:Packt Publishing、p。352、ISBN 9781783286270
Teller、Swizec(2013)、d3.jsによるデータの視覚化、バーミンガム:Packt Publishing、p。194、ISBN 9781782160007
Viau、Christophe(2013)、D3.jsエッジの開発:再利用可能なD3コンポーネントとチャートの構築、Bleeding Edge Press、p。268、ISBN 9781939902023、アーカイブからのオリジナル2014年9月3日に、検索された8月27日、2014年
Meeks、Elijah(2014)、D3.js in Action、Manning Publications、p。325、ISBN 9781617292118
Maclean、Malcolm(2014)、D3のヒントとコツ、Leanpub、p。580
King、Ritchie(2014)、D3を使用したビジュアルストーリーテリング:JavaScriptでのデータ視覚化の概要、Addison-Wesley Data&Analytics Series、p。288
ビデオ
Gopal、Nikhil、D3およびCoffeeScript:PythonプログラマーによるWeb視覚化の概要、カリフォルニア州セバストポル:O’Reilly Media
King、Ritchie、D3 Visualization LiveLessons:JavaScriptでのデータ視覚化の概要、Addison-Wesley Professional
関連プロジェクト
ベガとベガ-Liteの可視化文法はD3.js.の部分上に構築された宣言の可視化の仕様です
外部リンク
コモンズには、D3.jsに関連するメディアが
公式サイト
D3.jsギャラリー
Blocksplorer、使用した方法でブロックを検索
D3「再利用可能なチャート」ライブラリ:
C3 https://c3js.org
プロットhttps://plot.ly/javascript
bl.ock.orgおよびblockbuilder.org:人気のある初期のギャラリーシステム。
Observablehq.com  :メインのD3jsプレイグラウンド。

投稿日:
カテゴリー: D