目的：簡単な例で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の設定が違う言語の文字に基準点が違います 各種言語の文字の基準点が違うため、...

SVGで描画した円にテキストを表示します SVGで円を描画する簡単な例は以下のようです（半径80の円をx:200、y:100のところで描画） <svg width="600" height="200"> <circle r="80" // 半径：80 cx="200" // 中心x：200...

表示データを定義します（例：配列） d3.jsで扱う可能なデータタイプ：配列、JSON、csv、tsvなどがあります ここで、例として配列のデータを使用します（三つのテキストを表示） var dataset = ["aaa", "bbb", "ccc"] ;   d3.jsバージョン4を使用し、描画はsvgを使用します <...

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します 色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります 特定データ：数え切れる、数が多くないなどの特徴 例：都市名：東京、大阪など） 特定の色で表現できます（赤➡東京、青➡大阪、など） 不特定データ：数えるのは難しい、数が多い、...

やりたいこと：Heatmapチャートにある軸のラインと目盛を非表示にしたいです d3.axisでHeatmapチャートの軸を作成しました Heatmapチャートにある軸のラインと目盛の必要はない（あったら害はないですが、ちょっと不自然）ので、非表示したいです 解決１：cssで軸のライン（path）と目盛（line）を非表示 d3....

凡例（legend）が横方向/縦方向があります チャートに色が付けた場合、識別するため凡例（legend）が必要となります 凡例は横方向と縦方向があります バーチャートなどは横方向の凡例は自然的でしょう 縦方向の凡例がチャートと重複しやすいです 縦方向の凡例作成は比較的に簡単 d3.jsがSVG領域でチャートを描画するため、x/y、...

共通点：コールバック関数＋関数内部ループで処理を行います javascriptの配列処理関数（forEach,map,reduce,some,everyなど）はArray.prototypメソッドです これらの配列処理ロジックはコールバック関数に任せ、関数内のループで処理を行います コールバック関数：処理ロジックを一つ関数にまとめる（実作） 関数内のループ：...

SVGのプロパティ：viewBoxが設定されたビューの伸縮/切り取り 結論から言うと、SVGのプロパティ：viewBoxが設定されたSVGビューの伸縮/切り取り機能をしています SVGの設定ビュー(viewPort)がSVG設定のままのビューとなります SVGのviewBoxが設定ビューの視点を変えて表示ます（平面的に伸縮/切り取り） svgの定義...