d3.js advent calendar 8日目

d3.js advent calendar 8日目

Colors

d3で色の扱う方法は以下の3つです

  • 離散値・名義などまたは様々な色を使う:d3.scale.categoryXX
  • 連続値・グラデーション:d3.scale.linear / d3.interpolate
  • Colors APIを利用する

d3.scale.categoryXX

d3.scale.ordinal()のrangeにCynthia Brewerの色配列を適用したプリセット。これはordinalなデータや、名義などのデータに適用することが容易です。

  • d3.scale.category10(): d3.scale.ordinal.range(category10)
  • d3.scale.category20(): d3.scale.ordinal.range(category20)
  • d3.scale.category20b(): d3.scale.ordinal.range(category20b)
  • d3.scale.category20c(): d3.scale.ordinal.range(category20c)

色を増やしたい場合

こんなかんじで増やしてください

var getColor = function(){
d3.rgb(
0|Math.random()*255,
0|Math.random()*255,
0|Math.random()*255
); var colors = ;
var colors =
;
while(colors.length != 100){
var c = getColor();
if(colors.indexOf(c) == -1){
colors.push(c);
}
}

グラデーションが欲しい場合: d3.scale.linear()

d3.scale.linear()およびd3.interpolate()は数値だけではなく色にも対応しています。これを利用すれば、次のようにしてグラデーションを取得することができます。

実例

var color = d3.scale.linear().range(["#000000", "#00FF00"]);
color(Math.random()>); // e.g. #00C300
var color2 = d3.interpolate("#000000", "#0000FF");
colors(Math.random()); // e.g. #000059

実例2:多色のグラデーション

例えばヒートマップなどで青→白→赤にしたい時とかは次のようにします

var heat = d3.scale.linear().domain([0, 0.5, 1]).range(["#0000FF", "#FFFFFF", "#FF0000"]);
heat(Math.random()>);

Color API

順番は前後しますが、Color APIの便利なところをつまんでおきます

  • rgb.brighter(): d3.rgb()で作ったcolorを明るくします
  • hsl.brighter(): d3.hsl()で作ったcolorを明るくします
  • rgb.darker(): d3.rgb()で作ったcolorを暗くします
  • hsl.darker(): d3.hsl()で作ったcolorを暗くします

linear周りのグラデーションやoridnalのcategoryXXは便利なので多用しています