濃いマスほど、このテーマでその指標が高いことを示します。
明瞭60
説得55
密度90
制作コスト75
課題適合58
仕事適合70
低高
短い答え
ネットワークグラフマップはいつ選ぶ？
次の条件に合う。組織の影響マップ、依存関係グラフ、教室のソーシャル マップ
いつ避ける？
次の場合は別の形にする。単純な組織図や箇条書きにはすでに主張が含まれています
誰が作り、広めた？
強制的なレイアウト。 Cytoscape.js と GitHub の仲間たち
何を符号化する？
フォースまたは階層レイアウトを使用したノードとエッジ
広告に使ってよいか？
Yahoo・LINE・Meta素材で主張が一目なら可。難しければランディングに図を置く。
課題に使えるか？
実験レポートとポスターで軸・単位・出典があれば通る。
ネットワークグラフマップはフォースまたは階層レイアウトを使用したノードとエッジとして値を載せます。強制的なレイアウト。 Cytoscape.js と GitHub の仲間たち。
業務報告・広告・課題では「組織の影響マップ、依存関係グラフ、教室のソーシャル マップ」に向く。「単純な組織図や箇条書きにはすでに主張が含まれています」のときは別の形を選ぶ。
ソフト
- Cytoscape.js — ブラウザ用のグラフ理論ツールキット - MIT。 · MIT · github.com/cytoscape/cytoscape.js
- force-graph — ボイラープレートがほとんどない、強制的なキャンバス。 · MIT · github.com/vasturiano/force-graph
- d3-force — 多くのカスタム ネットワーク ビューで使用される物理演算。 · ISC · github.com/d3/d3-force
- Mermaid flowchart — インタラクションが不要な場合のテキスト グラフ。 · MIT · github.com/mermaid-js/mermaid
- Mind-map demo — 静的な放射状関係ティーチングマーク。 · CC0 examples · github.com/Tool-Lifes/viz-atlas
書き出し
- 書き出し 1 — SVG
- 書き出し 2 — PDF
- 書き出し 3 — スライドへ EMF/SVG（スクリーンショット禁止）
- 書き出し 4 — ウェブはSVG、印刷はPDF
アクセシビリティ
- アクセシビリティ 1 — 色だけに意味を持たせない。パターン・ラベル・位置を重ねる。
- アクセシビリティ 2 — 本文は 4.5:1、大きなマークは 3:1。
- アクセシビリティ 3 — チャートに短い代替テキスト。数値はHTML表でも。
- アクセシビリティ 4 — 動きは強調のときだけ。prefers-reduced-motion を尊重。
ネットワークグラフマップ: フォースまたは階層レイアウトを使用したノードとエッジを守り、「単純な組織図や箇条書きにはすでに主張が含まれています」のときは別の図を選ぶ。