チャートの凡例を簡単に作成できるD3プラグイン「d3 Legend」
主題図やチャートには欠かせない凡例ですが、D3.jsではこの判例も自動的に生成はしてくれないので自分で描画する必要があります。
以外とメンドウな作業なのですが、「d3 Legend」プラグインを使うとd3.scaleの設定から凡例を簡単に生成することができます。
非常に便利なプラグインなので是非つかってみてください。
サンプル
オーソドックスな縦書きの凡例を表示してみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var svg = d3.select('svg'); //チャートを描画する際に使用するスケール(正規化)関数 var colorScale = d3.scale.linear() .domain([0, 100]).range(["skyblue", "darkblue"]); //凡例を配置するグループ要素を追加 var legendView = svg.append("g") .attr("class", "legendQuant") .attr("transform", "translate(20,20)"); //スケールを元に凡例を生成する var legend = d3.legend.color().scale(colorScale); //凡例を描画する legendView.call(legend); |
カスタマイズ
d3 Legendプラグインは、表示する凡例を様々にカスタマイズするメソッドが用意されているのですが、今回は横書きの凡例を表示してみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var svg = d3.select('svg'); //チャートを描画する際に使用するスケール(正規化)関数 var colorScale = d3.scale.linear() .domain([0, 100]).range(["skyblue", "darkblue"]); //凡例を配置するグループ要素を追加 var legendView = svg.append("g") .attr("class", "legendQuant") .attr("transform", "translate(20,20)"); //スケールを元に凡例を生成する var legend = d3.legend.color() .cells(11) //表示するセルの数を指定 .shapeWidth(30) //各セルの横幅を指定する .orient('horizontal') //横向きにする .labelFormat(d3.format('d')) // ラベルの表記を指定 .scale(colorScale); //凡例を描画する legendView.call(legend); |
日本地図に凡例を付けてみる
d3 Legendプラグインを使って実際に都道府県の人口別コロプレス図に凡例を付けてみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
d3.json('http://shimz.me/example/d3js/_geodata/pref_population.geojson' , function(geojson){ //人口の最大値を取得 var population_max = d3.max(geojson.features, function(d){ return +d.properties.population }); //カラースケールを設定 var colorScale = d3.scale.linear().domain([0, population_max]).range(['skyblue', 'darkblue']) //プロジェクション設定 var projection = d3.geo.mercator() .scale(1000) .center([135, 36]) //パスジェネレーター生成 var path = d3.geo.path().projection(projection); var svg = d3.select('svg'); //地図を表示するグループ要素 var mapGroup = svg.append('g') .attr('transform', 'translate('+[-300, 0]+')'); //地図描画 mapGroup.selectAll('path') .data(geojson.features) .enter() .append('path') .attr({ d:path, fill: function(d){ return colorScale(+d.properties.population) } }) //凡例を表示するグループ要素 var legendView = svg.append("g") .attr("class", "legendQuant") .attr("transform", "translate(20,20)"); //スケールを元に凡例を生成する var legend = d3.legend.color() .cells(5) //表示するセルの数を指定 .shapeWidth(30) //各セルの横幅を指定する .scale(colorScale); //凡例のスケールを指定 //凡例を描画する legendView.call(legend); }); |
カテゴリの凡例を表示する
値以外にカテゴリを表す凡例というのもよく使われます。
ここでは各円グラフの色が何を示しているのかを説明する凡例をサンプルとして掲載してみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
//円グラフの半径 var r = 100; //カテゴリ var category = ['リンゴ', 'オレンジ', 'バナナ', 'イチゴ', 'モモ']; //データセットをランダムに表示 var dataSet = d3.range(5).map(function(d,i){ return {category:category[i], value:Math.floor(Math.random() * 10) + 1} }); //カラースケールをオリジナルスケールとして指定する var colorScale = d3.scale.ordinal() .domain(category) //カテゴリを指定 .range([ 'rgb(153, 107, 195)', 'rgb(56, 106, 197)', 'rgb(93, 199, 76)', 'rgb(223, 199, 31)', 'rgb(234, 118, 47)']); var svg = d3.select('svg'); var arcsGroup = svg .data([dataSet]) //pieで変換するために要素１の配列としてデータを渡す .append('g') var pie = d3.layout.pie().value(function(d) { return d.value; }); //値からstartAngle,endAngleを生成する var arc = d3.svg.arc().outerRadius(r).innerRadius(Math.floor(r/2)); //starAnge,endAngleからd要素を生成する var sliceGroup = arcsGroup.selectAll('g') .data(pie) .enter() .append('g') .attr('transform', 'translate('+ [250, 110] + ')' ); //円グラフ描画 var slicePaths = sliceGroup.append('path') .attr({ 'd': arc, 'fill': function(d, i){ return colorScale(category[i]) } }) //凡例を表示するグループ要素 svg.append('g') .attr('class', 'legendLinear') .attr('transform', 'translate(20,20)'); //スケールを元に凡例を生成する var legendLinear = d3.legend.color() .shapeWidth(30) .scale(colorScale); //凡例を描画する svg.select('.legendLinear') .call(legendLinear); |
