タッチパネル対応D3の範囲選択の使い方を紹介します。範囲選択の基本的な使い方はこちらで紹介しましたが、タッチパネルに対応する場合はこのサンプルのように変更すると使いやすくなります。グラフ上をタッチしてください。使い方D3で用意されている乱数を生成する関数を紹介します。使い方D3の範囲選択の使い方を紹介します。サンプルデモでは表示されているグレーの四角をドラッグするか、グラフ上の何もないところをクリック&ドラッグして範囲選択できます。map)の作り方D3でのヒートマップの作り方を紹介します。tableの作り方と似ていますが、tableタグではなくSVGのrect要素を使って作成します。使い方D3での密度推定の使い方を紹介します。データの個数密度を計算してコンター図を作成することができます。サンプルは黒いプロットが元データで、コンター図は個数密度を推定した結果です。使い方D3のマウス/タッチイベントに対応するzoomの使い方を紹介します。グラフ上でドラッグ/スワイプ、マウスホイール/ピンチインしてください。下のresetボタンで初期位置に戻ります。種類一覧D3の折れ線グラフの種類を紹介します。基本的な折れ線グラフの作り方の詳細はこちらに記載しています。基本の折れ線グラフを表示するプログラムは下記です。exit)D3の基本、dataの使い方を紹介します。すると"div"要素にデータが割り当てられます。すると、データの個数分のdiv要素が生成されます。ease)D3のアニメーション用API、transitionと一緒に用いるeaseを紹介します。D3でのアニメーションの設定は下記です。fetch使い方D3でWeb上のファイルを読み込むd3-fetchについて紹介します。v5は標準で組み込まれています。v4の場合は下記をHTMLのヘッダーに追加して使います。APIには次の種類があります。burst)図で、クリック/タッチにより対象部分をズームする方法を紹介します。外側をクリック/タッチしてください(CかHがおススメ)。burst)図の作り方を紹介します。サンバースト図は、partitionと円グラフの組み合わせで作成します。棒グラフをアニメーションとともに並び替える方法を紹介します。書籍まとめD3の本、参考書のまとめです。plot)の作り方を紹介します。(d3-scale-chromatic)D3のv5から追加されたカラーテーマです。v4でもHTMLファイルのヘッダーに下記を追加して呼び出すと使うことができます。9つのカラーテーマが用意されています。円グラフやコンター図を書くときに便利なD3のカラースケールの作り方を紹介します。スケールの線形変換を使った方法です。chart)の作成D3で基本チャートの円グラフの作り方を紹介します。円グラフ描画用のデータを準備します。chart)の作り方D3で基本チャートの面グラフの作り方を紹介します。こちらに散布図を対象にグラフの作り方のチュートリアルを、こちらに折れ線グラフの作り方をあげています。chart)の作り方D3での基本チャート、折れ線グラフの作り方を紹介します。こちらのチュートリアルで散布図を書く方法を詳しく紹介しています。散布図(ScatterPlot)の書き方D3で基本的なグラフ、散布図を書く方法を紹介します。こちらのチュートリアルで散布図を書く方法を詳しく紹介しています。棒グラフにtooltipを付ける方法を紹介します。v4/v5にはtooltip用の関数が用意されていないのですが、CSSを使って簡単に実装できます。基本サンプル簡単な棒グラフを作成します。軸を表示する幅を確保するために、paddingを変数として用意します。サンプルD3.jsの使い方の説明です。テーブルの作り方を紹介します。29行目のrowは、25行目で設定した二次元配列(dataset)のデータが一行ずつ呼び出されます。簡単なグラフのサンプルとして散布図を作成します。今回は次のデータを使います。最初のステップとして、D3を使って画面に要素を追加していきます。環境準備このチュートリアルではD3.jsで簡単なグラフ(散布図)を書けるところまでを解説します。円周上にノードを配置する方法D3の階層構造を表すclusterで円周上にノードを配置する方法について紹介します。階層構造(hierarchy)のデータ構造とデータの準備については、こちらをご覧ください。サンプルD3.jsの階層構造を可視化するtreeの折りたたみ動作についてのプログラムデモです。データの準備とデータ構造については、こちらを、treeの基本的な使い方についてはこちらをご覧ください。サンプルプログラムD3の階層構造を可視化するpartition(d3.partition)のプログラムデモです。上のグラフは下の図と同じ階層構造を表示しています(参考)。(v4/v5)の階層構造を可視化するtreemap(d3.treemap)のプログラムデモです。見慣れないグラフですが、カテゴリーの重要度を面積で表示するものです。使い方D3の階層構造を可視化するpack(d3.hieararchy)のプログラムデモです(v4/v5対応)。描画用のデータを用意します。サンプルD3.jsの階層構造を可視化するtree(d3.hieararchy)のプログラムデモです。マインドマップや関連性の表示に活用できます。データの準備とデータ構造については、こちらをご覧ください。サンプルD3.jsの階層構造を可視化するcluster(d3.hieararchy)のプログラムデモです。決定木などのクラスター分析の結果表示に活用できます。hierarchy(v4/v5対応)の使い方について説明します。hierarchyは、階層データを視覚化するためのライブラリで以下の5つの描画が可能です。関連ノード/リンクをハイライトする方法D3のforceSimulationでクリックした要素に関連する要素とリンクをハイライトする方法を紹介します。本デモは、こちらのデモにクリック時のハイライト機能を加えたものです。d3.jsでノードに複数のsvg要素を含め、テキストなどの要素を同時にドラッグする方法を解説します。要素をサークル状に配置することが可能です。使い方D3のドラッグイベントについて解説します。円をドラッグしてください。D3のdragは、タッチイベントに対応しています。まとめD3、forceSimulationの座標更新アルゴリズムと実行関数を紹介します。ノード間の相互作用力の設定についてはこちらを、リンクの設定についてはこちらを確認ください。layout)のプログラムデモです(v4/v5対応)。リンクによる相互作用を説明します。ノード間の相互作用についてはこちらを参照ください。サンプルD3.jsのforceSimulationのプログラムデモです(v4/v5対応)。リンクなしバージョンです。ノード間の相互作用を説明します。ノード(丸いやつ)をドラックしてください。v5.0.0がプレリリースされました。今回はv4のような大幅な名前空間の更新はなく、ほとんどのプログラムがそのまま使えそうです。forceSimulationのプログラムデモです。forceSimulationの最も簡単な構成のプログラムを紹介します。forceSimulationを使う際などに活用ください。