by Observable d3-chord
弦圖可視化圖形中一組節點之間的流程，例如有限狀態之間的轉換機率。上方的圖表顯示一個來自 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
];弦圖透過排列人口，以起始顏色沿著圓周排列，並在每種顏色之間繪製色帶，來視覺化這些轉換。色帶的起始和結束寬度與具有各自起始和結束顏色的人數成正比。色帶的顏色（任意）是兩個值中較大的顏色。
請參閱下列其中一個：