コードを書かずにプロ品質のコード図を作る：理解から実践までの完全ガイド
コード図が得意なのは「誰から誰へ、どれだけ流れているか」という問いです。本ガイドでは、できること・できないことの境界と正しい読み方を整理したうえで、9 種類の変種（クラシック、スカラップ、二陣営グラデーション、バブル、2 部半リング、二扇形目盛り付き、Circos 共線性、グループ流向、スペクトル細線）を実際に合うデータ構造へ割り当て、CSV スキーマと選択表を添えています。
コード図（Chord Diagram）は、見栄えはするが何も語らないタイプのグラフではありません。答えを出すのは一つの問いです——誰から誰へ、どれだけ流れているか。問いは単純に見えますが、間違ったグラフではいつまでも答えが出ません。棒グラフは単一の指標しか比べられず、折れ線は時間変化のために作られており、「カテゴリ × カテゴリ」の関係はどちらでも曖昧なままです。
本ガイドは二部構成です。前半でコード図にできること・できないことの境界と正しい読み方を整理し、後半で 9 種類の変種を、実際に合うデータ構造へ割り当てます。各変種には実際に生成した図と、そのままコピーして使える CSV 例を添えています。
1. コード図は何を解決するのか
データが多対多の関係——国家間の貿易額、部門間の協業頻度、遺伝子間の共発現——であるとき、棒グラフも折れ線も力不足になります。コード図の基本構造は一言で説明できます。各カテゴリが円周上の弧を占め、弧の長さはそのカテゴリの総流量に比例し、カテゴリ同士を結ぶ線——コード——がペアごとの大きさを太さで符号化します。
グラフィックスの文法でいえば弧長リンク図の変種です。ノードを円周上に放射状に並べ、重み付きの弧で結びます。この配置は多くの関係を表現しながら視覚的複雑さを抑えられ、力指向グラフや全結合ネットワークのように毛糸玉状に崩れることがありません。
おおよそ次のような場面に合います。
- 貿易と人口移動：国家間の輸出入、都市間の転入・転出
- ソーシャルと伝播：アカウント間の相互作用の強さ、情報拡散の経路
- バイオインフォマティクス：遺伝子共発現、タンパク質相互作用、種間相互作用
- 組織分析：部門間の協業頻度、チケットや承認の流れ
- テキスト共起：キーワード共起ネットワーク、共著マップ
境界も同じくらい重要です。コード図は精密な比較を手放しています。コードの太さから 42 と 38 の差を確実に読み取ることは難しく、その差は棒グラフなら一目で分かります。したがって個々の値を比べることが目的なら、棒グラフやドットプロットのほうが適しています。コード図が他に代えがたいのは、全体構造を一目で見えるようにする点です——どこがハブで、どこが周辺で、二つの陣営が密か疎か。
上限もあります。ノードが 60 を超え、関係が数百本を超えると、どのコード図もぼやけ始めます。特定のツールの問題ではなく、中心付近の使える面積には限りがあるからです。以下の第 4 変種と第 9 変種が、高密度をそれぞれ別の方法で扱います。
2. まず読み方を身につける
読み方に 2 分使うかどうかが、テンプレート選択の正否を決めます。
- 弧の位置ではなく長さを読む。 弧の長さが符号化するのはそのノードの合計だけです。円がどこから始まるか、時計回りか反時計回りかは情報を持ちません。ツールごとに流儀が違いますが、結論は変わりません。
- コードの太さを読む。 ペアごとの大きさを符号化します。太いコードは強い関係です。
- コードの色を読む。 多くの場合「このコードは誰のものか」を答えます。多くの実装は始点ノードの色でコードを染めるため、同じ色のコードが集まっていればそのノードが主要な送出側だと分かります。
- 弧の内側の目盛りと仕切りを読む。 0 から増えていく数値目盛りを描く変種では、それはそのノードの累積流量です。細い白線を描く変種では、それは弧を関係ごとに分割した境界で、その数がノードの接続数に等しくなります。
この 4 点を合わせると、1 枚の図から 3 段階の結論が得られます。全体の規模分布（弧長）、局所的な強い結び付き（コードの太さ）、そして構造的な役割分担（色のまとまりと弧内の分割）です。
3. はじめる前に：3 列 CSV の共通ルール
ほとんどのオンラインコード図ツールは同じ形のデータを取ります。3 列の CSV で、始点・終点・数値です。
source,target,value
USA,China,580
USA,Germany,320
China,Germany,210
Japan,China,180先に避けておきたい落とし穴がいくつかあります。
- ヘッダー行。 標準的な書き方は 1 行目に
source,target,valueです。多くのツールはこれを認識して読み飛ばしますが、自言語で「始点,終点,件数」と書いていると判定に失敗し、「始点」という名前のノードが図に現れます。迷ったらヘッダーを削ってください。 - 文字コード。 Excel は環境によって CSV を従来のローカル文字コードで保存します。ブラウザが UTF-8 として読むと非 ASCII のラベルが文字化けします。対処は二つ——プレーンテキストエディタで UTF-8 として保存し直すか、CSV のラベルを ASCII のままにして書き出した後に文字を編集するか。本記事の例はすべて ASCII ラベルにしてあるので、コピーすればそのまま図になります。
- 数値は正の数のみ。 0 や負の値の行は不正な入力として拒否されます。
- 自己ループ。 始点と終点が同じ行（
A,A,10）は、意味のあるコードを描けないため多くの実装で無視されます。 - 双方向のペア。
A→BとB→Aを統合するかは実装によります。別々の曲線として描くものもあれば、1 本にまとめて値を合算するものもあります。始める前にツールの説明を確認しないと、二重計上になります。
4. 9 種類の変種をデータ構造に割り当てる
以下の 9 変種は、それぞれ異なる構造と読みの目的に対応します。各節には実際に生成した図（図中のデータはそのツールの初期サンプル）と、そのままコピーできる CSV 例を添えています。
変種 1：クラシック円形コード図 — 最も汎用的な出発点
合う場面：source,target,value の 3 列で、カテゴリの立場が対等なとき。国家間貿易、通話記録、論文引用はここに含まれます。どのテンプレートを使うか迷ったら、ここから始めてください。
データ：3 列、最大 200 行・60 ノード。
読み方：色付きの外弧が円周に並び、その長さが各ノードの合計に等しくなります。各弧の内側には 0 からそのノードの合計まで増える数値目盛りが入ります。半透明のリボンが中心を横切り、太いほど流量が大きいことを示します。
使い方：CSV をドロップすれば図が出ます。ページには多地域のフロー例が最初から入っているので、開いた時点で見るものがあります。配色テーマは 3 種類、ライトとダークの 2 種類のキャンバスがあり、ダークモードではリボンの不透明度も調整されるため、暗い背景で織り目が潰れません。
source,target,value
West Asia,Africa,8
Africa,Europe,9
East Asia,Europe,8
Europe,North Ame.,12
Latin Ame.,Europe,6ツール：オンラインコード図ジェネレーター
変種 2：スカラップコード図 — 片側がもう片側の十倍あるとき
合う場面：典型的な 2 部引用構造、たとえば「8 社 → 78 技術」「少数の機関 → 大量のトピックタグ」。標準的なコード図はこれが苦手です。少ない側の弧は不釣り合いに長くなり、多い側のラベルは読めない塊に積み上がります。
データ：source,target,value の 3 列。source が下部のグループ（≤12）、target が上部のノード（≤120）、最大 300 行。他の変種より行数の上限が緩いのは、まさに「少数対多数」を受け止めるためです。
読み方：円周は二つのセクタに切られます。下側の約 3 分の 1 にグループが流量で重み付けされ、鮮やかな色で塗られます。上側の約 3 分の 2 に多数のノードが等幅で並び、これがラベルの可読性を保ちます。細いリボンが中心を回り込んで両側を結び、スカラップ状の扇面を作ります。ラベルは放射状に並び、絡みません。
source,target,value
CompanyA,Patent-101,3
CompanyA,Patent-118,2
CompanyB,Patent-101,4
CompanyB,Patent-127,3
CompanyC,Patent-118,2ツール：スカラップコード図ジェネレーター
変種 3：二陣営グラデーション — ノードが二つの陣営に分かれるとき
合う場面：ノードが自然に対立または対応する二組に分かれるとき。上流サプライヤ対下流顧客、競合 A のユーザー対競合 B のユーザー、処理群対対照群などです。単色のコード図では陣営の区別が見えませんが、この変種は同じ陣営のノードを連続した弧にまとめ、陣営をまたぐリンクを暖色から寒色へ変化するリボンとして描くため、流れの向きが色そのものから読めます。
データ：source,target,value,group。4 列目は任意で、warm / cold を指定して陣営を割り当てます。省略すると均等に分割されます。最大 200 行。
読み方：Circos 風のレイアウトで、ノードラベルは円周に沿って自動回転し、中心はクラシックな環状の美学のために空きます。各リンクの塗りは始点ノードの色から終点ノードの色へグラデーションし、半透明の重なりがリボンに質感を与えます。ホバーすると無関係な要素が薄れ、その関係だけが浮かびます。
source,target,value,group
UpstreamA,DownstreamX,42,warm
UpstreamB,DownstreamY,31,cold
UpstreamA,DownstreamY,24,warm
UpstreamC,DownstreamX,18,cold変種 4：バブルコード図 — ノード自身が指標を持つとき
合う場面：参加者の役割が「誰とつながっているか」だけでなく、規模や品質も伴うとき。計量書誌学の協業ネットワークが典型例です。国は協業ノードであると同時に、論文数と影響度という二つの属性を持ちます。サプライチェーンでは、サプライヤは供給関係を持ちながら、生産能力と品質評価も持っています。
データ：空行 1 行で区切った 2 セクションの CSV。まず関係行 source,target,value（最大 120 行）、次にノード指標 name,size,color。指標は任意で、書かなかったノードは合計流量に自動フォールバックします。
読み方：ノードは円の外側のバブルになります。直径が第一指標（size）、塗り色が青緑から青への連続色帯で第二指標（color）、コードの太さが関係の強さ（value）を担います。円自体は何も符号化しないため、ノードが 30 個あってもラベルは円の外側に放射状に並び、互いを押しのけません。
source,target,value
USA,China,210
China,Germany,150
USA,Germany,95
name,size,color
USA,85,92
China,78,88
Germany,45,73ツール：バブルコード図ジェネレーター
変種 5：二色ハーフリング 2 部コード図 — 向きを明示したいとき
合う場面：始点と終点の身分がはっきり異なり、「どちらがどちらを指すか」を一目で示す必要があるとき。脅威モデリング（攻撃面 → リスク種別）、要求トレーサビリティ（要求 → テストケース）、ケイパビリティマッピング（能力 → 目標）が典型です。
データ：source,target,value。始点と終点の名前は重複不可（厳密な 2 部関係）。最大 120 行。
読み方：水平の直径が円を上下のハーフリングに分けます。上側のリングはすべての始点ノードを同じ色系で、下側はすべての終点を別の色系で持ち、役割が一目で分かれます。各関係はベジェ曲線として、始点セクタの内縁から出て中心を横切り、終点セクタの内縁に着地し、小さな矢印が向きを示します。セクタ幅は総流量で重み付けされ、ラベルはリングの接線に沿って並びます。
source,target,value
Security,Data Breach,6
Security,Account Takeover,4
Reliability,Downtime,5
Scalability,Bottleneck,3
Compliance,Fine,2変種 6：二扇形コード図 — 数値として読む 2 部関係
合う場面：チャネルの流れ、コスト配分、要求カバレッジなど、実際の数値を読みたい 2 部関係。変種 5 との違いは、各セクタが 0 から始まる目盛り軸を持ち、主目盛りが 10 単位ごとに入ることです。値を読むのに勘に頼る必要がありません。
データ：source,target,value。始点と終点の集合は重複不可、最大 120 行、各側 8 ノードまで。
読み方：全体の輪郭は砂時計のようです。12 時方向の扇に始点ノードが彩度の高い実色で、6 時方向の扇に終点ノードが同じ色系の淡い色調で入り、左右に開口部が空きます。半透明の色付きリボンが中心のくびれを横切り、その粗密がそのまま流量分布になります。
source,target,value
ChannelA,ProductLine1,45
ChannelA,ProductLine2,30
ChannelB,ProductLine1,22
ChannelB,ProductLine2,18
ChannelC,ProductLine1,12変種 7：Circos 共線性コード図 — 位置が流量より重要なとき
合う場面：9 変種のうち、ノードを離散カテゴリとして扱わない唯一のものです。扱うのは区間から区間への対応付けです。ゲノム共線性（染色体のどの区間がどこと対応するか）、ディスクブロック移行（どのブロックがどこへ移ったか）、アドレス範囲の再マッピング、注文バッチの再編、地層深度の比較などです。
データ：7 列の CSV——source_group, source_start, source_end, target_group, target_start, target_end, color、最大 240 行。1 行は重み付きの辺ではなく、1 本の完全な区間マッピングです。
読み方：リング上の各セグメントは離散ノードではなく連続したトラックで、0 から始まる座標目盛りを持ちます。中心の細い曲線が、始点トラック上の区間を終点トラック上の区間へ写します。交差が多いほど、区間の順序が入れ替わり、再編され、かき混ぜられたことを意味します——これこそ共線性解析が求める視覚信号です。
source_group,source_start,source_end,target_group,target_start,target_end,color
AtChr1,0,1500,Sca1,200,1800,blue
AtChr2,0,900,ApChr1,500,1400,orange
AtChr1,1500,2600,Sca2,0,1100,blue変種 8：グループ流向コード図 — 「多数から少数へ」の構造
合う場面：サンプル分類、チャネル帰属、キーワードのトピック帰属、バッチの行き先。このデータは自然に 2 部構造で、片側は数が多く小さく、もう片側は数が少なく大きくなります。
データ：source,target,value。ソース ≤24、グループ ≤12、2 つの名前集合は重複不可、最大 200 行。
読み方：リングは二つの半円に切られます。左半分はソースを単一色で、右半分はグループを 1 色ずつ持ち、右側の縦並び凡例と対応します。各グループ弧の内部には白い仕切りがあり、各ソースの流量で小区画に分けられます——区画の数がそのグループを構成するソースの数です。グループ A の中身がどこから来るかを知りたければ、A の弧から内側を見てください。A を指すリボンはすべて同じ色なので、構成比がすぐに分かります。
source,target,value
kw-A,Topic1,15
kw-B,Topic1,8
kw-C,Topic2,12
kw-D,Topic1,6
kw-E,Topic2,9変種 9：スペクトル細線コード図 — 高密度でもたどれるネットワーク
合う場面：ノードが数十、関係が数百にのぼる密な行列。標準的なコード図の幅広リボンは互いを塗り潰して一塊になり、1 本のリボンを両端まで追うことすらできません。この変種は二つの設計で解決します——色が順位、細線がたどれる。
データ：source,target,value、ノード ≤60、最大 200 行。A→B と B→A は値が合算されて 1 本の双方向関係に統合されます。
読み方：ノードは合計量の大きい順に時計回りに並び、弧の色は連続したスペクトル色帯（赤・橙・黄・緑・青緑・青）から取られます。最も赤いノードが最大、最も青いノードが最小——色相そのものが順位の目盛りで、凡例は不要です。各関係は等幅の細線で、両端ノードの弧セグメント中点から出て中心へ向かって湾曲しながら交差し、密になると実際にたどれる網目を織ります。中心には半透明のピンクのリングが視覚的なアンカーとして置かれ、各弧には小さな黒丸が付きます。
source,target,value
PaperA,PaperB,8
PaperA,PaperC,3
PaperB,PaperC,5
PaperC,PaperD,12
PaperA,PaperD,35. 早見選択表
| データ構造 | 推奨する変種 | 判断の根拠 |
|---|---|---|
素直な source,target,value、カテゴリが対等 | 変種 1 クラシック円形コード図 | 特殊な構造がないので既定から始める |
| 片側が極端に少なく、もう片側が極端に多い | 変種 2 スカラップコード図 | 例：「8 社 → 78 技術」 |
| ノードが二つの陣営に分かれる | 変種 3 二陣営グラデーション | 陣営の区別を際立たせたい |
| ノードが規模・品質の指標を持つ | 変種 4 バブルコード図 | 「誰と強いか」と「誰が重要か」を同時に読む |
| 始点と終点の役割が異なり、向きが要る | 変種 5 二色ハーフリング | 脅威モデリング、要求トレーサビリティ |
| 2 部関係で数値を読みたい | 変種 6 二扇形コード図 | 各セクタに目盛り軸が付く |
| 離散ノードではなく区間から区間への対応 | 変種 7 Circos 共線性コード図 | ゲノム、アドレス対応、バッチ再編 |
| 多数のソースから少数のグループへ | 変種 8 グループ流向コード図 | 帰属、分類、トピック割り当て |
| ノードが多く（>30）関係が密（>80） | 変種 9 スペクトル細線コード図 | 色の塊ではなくたどれるネットワークが必要 |
判断の軸はまずデータ構造、次に視覚的な目的です。データが素直な source,target,value でカテゴリが 20 以下なら、変種 1 が常に安全な選択です。既定のテンプレートが限界に当たったとき——ラベルが重なる、陣営が見えない、向きが曖昧、数値が読めない——にだけ専用の変種へ切り替えてください。
6. プロらしく見せる 4 つの細部
- 書き出し形式は用途で選ぶ。 PNG の 2 倍はスライド・レポート・SNS に向きます。SVG はベクターなので、論文の組版や、Illustrator・Inkscape での色・文字サイズの調整に向きます。
- ライトかダークかは好みではなく配信の問題です。 暗い背景はプロジェクタやダークテーマのレポートで読みやすく、明るい背景は印刷と Web で安全です。切り替えたら書き出し直してください——プレビューと書き出しは同じ配色を使うので、見たままが得られます。
- ラベル密度が可読性の上限を決めます。 ノードが 30 を超えると、すべての名前が読めることは期待できません。劣化戦略を備えた変種（8 と 9）に移るか、ノード数を減らしてください。
- 画面キャプチャではなくキャンバスから書き出す。 内蔵の書き出しは図だけを出力します。OS のスクリーンショットはインターフェースの枠、ブラウザのズーム、圧縮ノイズまで持ち込みます。
上記 9 つの実装は同じ使い方です。ページを開き、CSV をアップロードし、ライト／ダークを切り替え、画像を書き出す。データはブラウザ内で解析・描画され、サーバーへ送信されることはなく、アカウントも不要です。書き出した図に透かしは入りません。
7. おわりに
コード図の価値は、複雑な多対多の関係を一目で読めるようにすることです。本当の壁は描画ではなく、二つの判断にあります——自分のデータがどのクラスの構造なのか、そして図の各視覚チャネルが何を意味するのか。この二つが片付けば、あとは CSV をアップロードするだけです。
上の 9 変種は、よくある関係データの形のほとんどをカバーします。どれも当てはまらない場合、それはたいてい、この問いがコード図ではなく棒グラフやネットワーク図を求めているという意味です——それも早めに知っておく価値のある結論です。