[{"source":"A","target":"B","weight":4,"group":"Core"}]
アークダイアグラムメーカー
source、target、weight、groupの関係データからアークダイアグラムを作成し、確認・スタイル調整・書き出しを行います。
図を読み解く
関係データを準備
各行はsourceノードからtargetノードへ向かう1本のリンクです。source、target、weightは必須で、groupは色分けに使えます。同じ有向リンクは1行だけにします。
曲線とweightを理解する
ノード間の距離は曲線の広がりを決めますが、長い曲線が強い関係を意味するわけではありません。リンクweightは線幅に対応し、同じ図で同じ範囲を使う場合だけ直接比較できます。
書き出し形式を選ぶ
SVGは編集や印刷、PNGはそのままの表示、CSVは現在有効な関係データの保存に向いています。透明背景は書き出し領域だけを変えます。
データの制限
- リンクは最大500本、ノードは最大200個です。
- weightは0より大きい有限数である必要があります。
- 重複する有向リンクと自己リンクは拒否されます。
詳しく見る
使い方と制限
フィールドのルール
- sourceとtargetの値を用意します。
- 大きさを表したい場合は数値weightを追加します。
- 関係するノードを整理するにはgroupを使います。
エラーと検証
空のノード、0以下のweight、自己リンク、重複する有向リンクがあると、該当行を示して図を一時停止します。古いプレビューを現在の結果と誤認しないための動作で、修正すると再描画します。
図の生成方法
ノードは選択した順番で水平の基準線上に等間隔で並びます。各リンクの水平半径は2つのノード間の距離の半分で、曲線比率が垂直半径を調整します。
線幅は現在の最小weightと最大weightを設定範囲へ線形に対応付けます。色はグループ、Sourceノード、weightのグラデーション、単色で表現できます。ノードを選ぶと直接つながるリンクが強調されます。
よくある質問
よくある質問
アークダイアグラムにはどんなデータを使いますか？
各関係行のsourceとtargetに加え、任意の数値weightとgroupを使います。
リンクの太さはどう決まりますか？
リンクの太さは各数値weightを設定した範囲に対応付けたものです。因果スコアではなく視覚的な表現です。
どの書き出し形式を選べばよいですか？
SVGは拡大編集に向き、PNGは画像として使いやすく、CSVは関係データ行を保存します。
プライバシーと実装
ローカル処理
データの解析、描画、操作、書き出しはこのブラウザ内で行います。アップロードせず、リモートAPIにも接続しません。ファイル読み込み、ダウンロード、クリップボードはユーザー操作の後だけ発生します。
書き出しメモ
SVGは拡大しても鮮明で編集向き、PNGは画像として使いやすく、CSVは現在有効な関係行を保存します。透明背景は書き出しキャンバスだけを変え、ノードやリンクは変えません。
実装メモ
データ解析、レイアウト、操作、書き出しは、CDNやオンラインフォントを使わない独自のJavaScriptとSVGで実装しています。