スペクトル環コード図ジェネレーター

無料のオンライン・スペクトル環コード図ジェネレーターです。source,target,value の3列CSVをアップロードすると、ペア関係の行列がカラフルなリングになります。ノードは合計量の大きい順に時計回りに並び、各弧の色は連続したスペクトル色帯（赤・橙・黄・緑・青緑・青）から取られます。つまり 色相そのものが順位 であり、最大のノードが赤、最小は青寄りになります。各関係は等幅2pxの青緑の細線になり、両端ノードの弧セグメント中点から中心へ向かって湾曲しながら交差し、密度が高いと網目を織ります。中心には半透明のピンクのリングが視線を留めます。開いた瞬間にサンプルが表示され、高解像度の PNG / SVG へ書き出せます。

スペクトル環コード図とは

クラシックなコード図は流量を リボンの幅 で表すため、太さの比較が必要になります。この図は別の道を選び、順序は色に、関係は細線に 任せます。弧の長さは各ノードの合計に比例したままですが、色は繰り返し使うパレットからではなく、ノードの順位に従って連続したスペクトル色帯からサンプリングされます。1位は赤端、最下位は青端に落ち、その間は橙・黄・緑・青緑へと配分されます。したがって凡例は不要です。赤いほど大きく、青いほど小さい と読めます。

第二の違いはリンクの形です。幅を持つリボンではなく、各ノードの弧セグメント中点から引き出した均一な2pxの細線を、中心へ向けて湾曲する柔らかな曲線で結びます。効き目が出るのは密なネットワークです。幅のあるリボンは互いを塗り潰して一塊になりますが、細線は たどれる経路を保ったまま網目 を織ります。A から B まで一本の線を追え、どのノードがハブになっているかも一目で分かります。

さらに弧には三つの細部があります。各弧の内側は関係ごとの値で白い仕切りに分割されるため、その数がノードの接続数になります。各弧の中央には小さな黒丸が付きます。ノード名は弧の外側に接線方向で並ぶので、描画領域を圧迫しません。

できること

• 3列CSVをアップロード：source,target,value。1行が1本の関係で、value は正の数が必要です。
• 対称ペアの自動統合：A→B と B→A は値が合算されて1本の双方向関係になり、同じ接続が二重に描かれません。
• 合計量による時計回り配置：ノードは合計の大きい順に並び、最大のノードは12時方向に固定されます。
• 連続スペクトル配色：ノード番号に沿って色帯を線形補間するため色の重複が起きず、色相が順位として機能します。
• 等幅の細線リンク：すべての関係が同じ2pxの青緑の線で描かれ、高密度でも読みやすいテクスチャになります。
• 弧内の白い仕切り：各弧を関係ごとの値で分割し、区画の数が接続数を表します。
• 中心のピンクのリング：データを持たない半透明の視覚的なアンカーです。
• サンプル＝テンプレート：CSVテンプレートをダウンロードして再アップロードすると、画面と完全に同じ図が得られます。
• ライト / ダークモード：ダークモードは背景と文字のコントラストだけを変えます。
• PNG / SVG 出力：レポート、スライド、ポスター、ダッシュボードに最適。
• ローカル処理：解析も描画もブラウザ内で完結し、アップロードされません。

使い方

1. ページを開くと初期サンプルが既に描画されています。119行の生フローが双方向関係に統合され、28か国の密なネットワークになります。
2. CSVをアップロードするか、「CSV テンプレートをダウンロード」で形式を取得してください。最大200行、ノードは60以下です。
3. 細線上にマウスを置くと「ノード ↔ ノード : 値」が表示されます。弧の上ではそのノードの合計が出ます。
4. ライト / ダークを切り替えてから PNG または SVG を保存してください。

CSV の例：

source,target,value
USA,CHN,540
CHN,USA,520
USA,CAN,400
CAN,USA,420
DEU,NLD,200
NLD,DEU,220

最初の2行 USA,CHN,540 と CHN,USA,520 は、USA ↔ CHN（値 1060）の1本の関係に統合されます。

向いている用途

• 共起・共語：キーワード、タグ、商品の共起行列からトピックの塊とハブ語を把握する。
• 貿易・物流：国家や地域間の双方向の貨物量から、支配的なノードと周辺ノードを見る。
• 引用・共著：論文引用、特許引用、共著ネットワークから中核機関とクラスタを探す。
• 通話・メッセージ：番号やアカウント間のやり取り回数から、異常なハブや環状構造を洗い出す。
• 生態・生物ネットワーク：種間相互作用、タンパク質相互作用、遺伝子共発現。
• 社内のやり取り：部門やチーム間のチケット、承認、メールの流量。
• 人口移動：都市間の転入・転出ペアから双方向の強度を読む。

補足

中心となる考え方は 色が順序を担い、細線が関係を担う ことです。弧の長さは合計に従いますが、色はスペクトル上で連続的にサンプリングされるため色相が順位の目盛りになり、凡例を読む手間が一段減ります。リンクは幅の写像を捨てることで、密なネットワークでも経路をたどれるようにしています。したがって ノード数が中程度（おおよそ10〜60）で関係が密な行列 に最も適します。個々の関係の強弱を正確に比べたい、太さの差が重要な場合はクラシックなコード図が適しており、データが「数が多く小さい側」と「数が少なく大きい側」に分かれる場合はグループ流向コード図をお使いください。

---

最終確認：2026-09-17

この図の読み方

まず色を見ます。最も赤い弧から時計回りにたどると、色相は少しずつ青へ移っていきます。この色帯が順位の目盛りで、最も赤いノードが最大、最も青いノードが最小となり、凡例は不要です。次に弧の長さを見ます。各弧の角度幅は合計に比例し、赤い弧が通常は最長になります。続いて弧の内側の白い仕切りです。これは弧を関係ごとに分割したもので、仕切りが多いほどそのノードの接続が多いことを示します。各弧の中央の黒丸がノードの目印です。最後に円の内部を見ます。青緑の細線1本が1つの双方向関係で、両端は別々の弧のセグメント中点に落ち、中心へ向けて湾曲してから開きます。重ねて見ると、ハブとなるノード（多くの線が集まる）と周辺のノード（1〜2本だけ）が浮かび上がります。中央のピンクのリングはデータを持たない視覚的なアンカーです。