チャートの凡例を簡単に作成できるD3プラグイン「d3 Legend」

最終更新日

d3_Legend

凡例とは?

主題図やチャートには欠かせない凡例ですが、D3.jsではこの判例も自動的に生成はしてくれないので自分で描画する必要があります。
以外とメンドウな作業なのですが、「d3 Legend」プラグインを使うとd3.scaleの設定から凡例を簡単に生成することができます。
非常に便利なプラグインなので是非つかってみてください。

サンプル

オーソドックスな縦書きの凡例を表示してみました。
d3_Legend1

カスタマイズ

d3 Legendプラグインは、表示する凡例を様々にカスタマイズするメソッドが用意されているのですが、今回は横書きの凡例を表示してみました。
d3_Legend2

日本地図に凡例を付けてみる

d3 Legendプラグインを使って実際に都道府県の人口別コロプレス図に凡例を付けてみました。

d3_Legend3

example

カテゴリの凡例を表示する

値以外にカテゴリを表す凡例というのもよく使われます。
ここでは各円グラフの色が何を示しているのかを説明する凡例をサンプルとして掲載してみました。

d3_Legend4

example