双扇型カラーコード図ジェネレーター

無料のオンライン双扇型カラーコード図ジェネレーターです。source,target,value の3列CSVをアップロードすると、砂時計型の2部グラフを生成します。同一円上で12時方向に5つの実色アーク、6時方向に5つの淡色アークが対向する扇を描き、2時・9時方向は開口します。半透明のカラーリボンが中心のくびれで交差し、各セクターは0起点の専用目盛軸を持ちます。5 × 5 のサンプル付き、PNG / SVG 出力とダークモードに対応。

双扇型カラーコード図とは

双扇型カラーコード図は、クラシックなコード図の2部グラフ版で、circlize における bipartite chord plot と同じ配置です。すべてのノードを1つのリングに並べる代わりに、同じ円を対向する2つの扇に分割します。12時方向の扇にソースノード、6時方向の扇にターゲットノードを置き、2時と9時方向に2つの開口を残すことで砂時計のシルエットが生まれます。各ノードは角度幅が総流量に比例する弧帯で、上扇は5つの飽和色（ほぼ黒・クリムゾン・グラスグリーン・ミディアムブルー・シアン）、下扇はその淡色版を用い、黒は淡色化せず共有色として扱います。ソースとターゲットの各関係は半透明のカラーリボンになり、端の幅は値に応じて配分され、開いたくびれを横切る際に中心へ向かって絞られます。つまり図の密度そのものが流量分布を表します。

できること

• CSV をアップロード — source,target,value の3列。各側8ノード・最大120行まで。
• 即時レンダリング — 2つの扇、中心を横切るリボン、各セクターに0起点の専用目盛軸（主目盛10単位）。
• 弧長が流量を表す — セクター幅はノードの総流量、リボンの端幅は個々の値に比例し、手動配置は不要です。
• ライト / ダークモード — ワンクリックで背景を切り替え、書き出しにも選択した背景が反映されます。
• PNG / SVG 出力 — 2倍解像度の PNG とロスレスなベクター SVG、透かしなし。
• ローカル処理 — すべてブラウザ内で処理され、アップロードされません。

使い方

1. ページを開くと 5 × 5 のサンプルが双扇型コード図として表示されます。自分の CSV をアップロードまたはドラッグするか、先に「サンプルを読み込む」を押してください。
2. セクターやリボンにカーソルを合わせると、ノードの合計や個々のフロー値が確認できます。
3. 必要に応じてライト / ダークモードを切り替え、右上のボタンで全画面プレビューも使えます。
4. 「PNG を保存」または「SVG を保存」で画像を書き出します。

CSV 形式の例（カンマ区切り3列、source,target,value ヘッダーは有無どちらでも可）：

source,target,value
C1,R1,14
C1,R2,9
C2,R2,16
C2,R3,7

活用シーン

• チャネルとフロー分析：集客チャネルからコンバージョン結果へ、上流サプライヤーから調達カテゴリへ。
• コスト・予算配分：コストセンターから費用科目へ、部門からプロジェクトへ。
• 要件とテストのカバレッジ：要件から実装モジュールへ、モジュールからテストケースへ。
• マトリクス型アンケート：回答選択肢からオーディエンス属性へ、症状から診断へ。
• 資料・ポスター：目盛軸が組み込まれ値が読み取りやすいため、スライドや報告書の表紙にそのまま使えます。

補足

.csv テキストファイルに対応。source 列と target 列に同じ名前を置くことはできません（厳密な2部データ）。上扇は5つの実色、下扇はその淡色の呼応で、各リボンはソース色相を淡色化した色を不透明度およそ0.7で重ねます。下扇にはさらにパートナー色で分割された細い外周帯が付きます。各セクターの軸は弧の一端で0から始まり、時計回りにそのノードの流入・流出合計まで増加します。上扇の数字は左から右へ、下扇は画面上で右から左へ増加するのが circlize の伝統的な慣例です。小さな数値差を精密に比較したい場合は棒グラフのほうが適しています。

---

最終確認：2026-09-11

この図の読み方

まず色の境界を見てください。12時方向の扇がソース（5つの実色）、6時方向の扇がターゲット（淡色の呼応、黒は共有色）です。セクターが広いほどそのノードの総流量が大きいことを示します。任意のカラーリボンを選ぶと、一端はソースセクターの内縁に、もう一端はターゲットセクターの内縁に接しており、「このソース → このターゲット」と読めます。リボンが太いほど値が大きいことを意味します。各セクターの外側にある目盛軸はそのノード自身の累積フロー目盛で、0から始まり主目盛は10単位ごと、数字は弧の接線方向に沿って並びます。これにより相対的な大小だけでなく、各フローのおおよその値を読み取れます。