作成者Observable

外観

d3-chord ​

29,630 black0k5k10k15k20k25k20,230 blond0k5k10k15k20k40,290 brown0k5k10k15k20k25k30k35k40k9,850 red0k5k11,975 black → black5,871 black → blond 1,951 blond → black8,916 black → brown 8,010 brown → black2,868 black → red 1,013 red → black10,048 blond → blond16,145 brown → blond 2,060 blond → brown6,171 blond → red 990 red → blond8,090 brown → brown8,045 brown → red 940 red → brown6,907 red → redフォーク ↗︎

コード図は、グラフ内の一連のノード間のフロー（たとえば、有限状態間の遷移確率）を視覚化します。上記の図は、Circosの髪を染めた人々の架空のデータセットを示しています。

D3のコードレイアウトは、サイズが_n_×_n_の正方形の_行列_を使用してフローを表します。ここで、_n_はグラフ内のノードの数です。各値_matrix_[ _i_][ _j_]は、_i_番目のノードから_j_番目のノードへのフローを表します。（各数値_matrix_[ _i_][ _j_]は負ではない必要がありますが、ノード_i_からノード_j_へのフローがない場合はゼロにすることができます。）

上記では、各行と列は髪の色（黒、ブロンド、茶色、赤）を表します。各値は、ある色から別の色に髪を染めた人の数を表します。たとえば、5,871人が黒髪でブロンドに染め、1,951人がブロンド髪で黒に染めました。行列の対角線は、同じ色を維持した人々を表します。

js
const matrix = [
  // to black, blond, brown, red
  [11975,  5871, 8916, 2868], // from black
  [ 1951, 10048, 2060, 6171], // from blond
  [ 8010, 16145, 8090, 8045], // from brown
  [ 1013,   990,  940, 6907]  // from red
];

コード図は、円の円周に沿って開始色で母集団を配置し、各色の間にリボンを描画することにより、これらの遷移を視覚化します。リボンの開始幅と終了幅は、それぞれの開始色と終了色を持っていた人の数に比例します。リボンの色は、任意に、2つの値の大きい方の色です。

以下のいずれかを参照してください

  • コード - コード図のレイアウト
  • リボン - コード図の形状プリミティブ