html

d3のフォースレイアウト（fouce layout）で各要素を円形状態に配置するのはよく紹介されている 前回紹介いたした「d3.jsのフォース（force）を理解するための簡単な例 」でも円形状態に各要素を配置します ネットでd3のフォースレイアウトの例を調べてみると、大半も円形状に各要素を配置しています 時々、一直線に各要素を配置させることもあります d3....

d3.jsのSVGの折れ線チャートを作成 d3.jsで簡単に折れ線チャート作成ができます ポイント１：d3.line()でデータセットをSVGのpathプロパティ（d）への変換 d3.jsにd3.line関数があります。d3.lineよりデータセットから直接にSVG描画のpathのプロパティ（d）への変換ができます //　...

データセットの日付/時間のフォーマットがチャートで表示するフォーマットが違うことが多い 時系列のデータセットにある日付/時間のフォーマットがデータ抽出ロジックに左右され、いろいろなフォーマットがあります // 例：時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2",...

d3.jsのチャート（例：バーチャート、折れ線チャートなど）の軸を作成 d3.jsでは、チャート（例：バーチャート、折れ線チャートなど）を作成時に、x/y軸が別部品なので、チャートと別に作成する必要はあります d3.jsでは、基本的にx/y軸を中心にしています x軸： d3.axisTop(目盛は軸の上に表示)、d3.axisBottom（目盛は軸の下に表示）...

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie 前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成 のポイントは二つあります d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します...

d3.jsがデータより新規描画エレメント作成 d3.jsがデータ可視化ツールと言われています。それは入力より描画エレメントを作成したり、動作を制御するライブラリです 入力データより新規描画エレメント作成について「d3.jsの基本１：表示するデータをHTMLのエレメントに埋め込み/表示過程」 をご参考 新規エレメント作成するにはd3.data()がよく利用されますが、d3....

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要 svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です pathで円弧を描画するには始点（start angle）、終点(end angle)が必要 描画データ配列から始点、終点の計算は少し面倒です d3....

目的：簡単な例でd3.jsフォース（force）を利用します ここで、d3.js：V4を使用します（V3）のコーティング方法が大きく違うので、ご注意ください d3.jsのモジュール（force）に関する表現性が非常に高い例は数多く掲載されています ほとんどはソースのみで、説明が少ななく、わかりずらいです ここで、簡単の例を用いて、d3.jsのforceの動作を説明します...

バブルチャート（bubble chart）にルート付きの構造化されたデータが必要 d3.jsではルート（大きなバブル）についてノード（小さいバブル）をまとめています 簡単なルートのある構造化データが以下のようです var data_set = { children: [ {name:"aaa", val:58...

IEがSVGの垂直方向位置調整プロパティ（dominant-baseline）を非対応 以下の例の効果はIEブラウザで確認はできません（IE10でテストしました） 垂直方向の位置調整にIEまで適応するため、プロパティ「dy」使用することができます dominant-baselineの設定が違う言語の文字に基準点が違います 各種言語の文字の基準点が違うため、...