§01-12Data Visualization
chord / arc diagram
項目間の関係を円周上の弧と帯で結んで示す。
複数の項目がどれとどれだけ結び付いているかを一枚で見せる。移動や取引のような双方向の流れを、表より直感的に把握したいときに使う。
実装のポイント
円周上に各カテゴリの弧を量に比例して割り当て、弧同士を二次ベジェのリボンで結ぶ。ホバーで関係する帯だけ残して他を薄くすると読みやすい。
- 特徴
- チャート
- デモで使っているもの
- SVG
§01-12Data Visualization
項目間の関係を円周上の弧と帯で結んで示す。
複数の項目がどれとどれだけ結び付いているかを一枚で見せる。移動や取引のような双方向の流れを、表より直感的に把握したいときに使う。
円周上に各カテゴリの弧を量に比例して割り当て、弧同士を二次ベジェのリボンで結ぶ。ホバーで関係する帯だけ残して他を薄くすると読みやすい。