d3

Ordinal Scale

22 May 2014

range

. domainに指定した序数値を -> range に設定した値に対応させる

.domain(["白", "赤", "黄色", "青"]) -> .range(["#fff", "#f00", "#ff0", "#00f"]);

"白" -> "#fff" , "赤" -> "#f00"

// 色を定義
var colors = d3.scale.ordinal()
               .domain(["白", "赤", "黄色", "青"])
               .range(["#fff", "#f00", "#ff0", "#00f"]);

svg.selectAll(".colors")
   .data(colors.domain()) // domainを読み込む
   .enter()
   .append("rect")
   .attr("class","colors")
   .attr("x", function(d,i){ return 50;}) 
   .attr("y", function(d,i){ return i* 40 + 10;})
   .attr("width", 100)
   .attr("height", 30)
   .style("fill", function(d,i){ return colors(d);}); // domainの色名でrangeの色コードを読む

rangePoints

.rangePoints(interval [, padding])

d3.scale.ordinal()
        .domain([1, 2, 3, 4])
        .rangePoints([0, 300], 0) // return [0, 100, 200, 300] 
        .range();

        .rangePoints([0, 300], 1) // return [37.5, 112.5, 187.5, 262.5]  
        .rangePoints([0, 300], 2) // return [60, 120, 180, 240]  
        .rangePoints([0, 300], 3) // return [75, 125, 175, 225]  
//n: 点の数、 step: 点の間隔 
interval = step * padding / 2 + step * (n - 1) + step * padding / 2
         = step * padding + step * (n - 1)
         = step * (padding + n - 1)

step = interval / (padding + n - 1)

//interval = 300, padding = 2 のとき
300 / (2 + 4 -1) = 60         

rangeBands

.rangeBands(interval[, padding[, outerPadding]])

var o = d3.scale.ordinal()
                .domain([1, 2, 3, 4])
                  .rangeBands([0, 600],1,1)
                  .range();

svg02.selectAll(".bands")
     .data(o)
     .enter()
     .append("rect")
     .attr("class","bands")
     .attr("x", function(d){return d})
     .attr("y", 50)
     .attr("width",60)
     .attr("height",30)
     .style("fill","orange");

d3.jsの組み込み配色

  1. category10
  2. category20
  3. category20b
  4. category20c

<使い方>

// category10の配色を指定
var color10 = d3.scale.category10();
// 色の指定
color10(2) // #2ca02c

// カスタム配色設定 
var custom = d3.scale.ordinal()
               .domain([0,1,2,3,4])
               .range(["#E6FF36","#6CA1FF","#25E885","#E89C25","#FF2929"]);
custom(1); // 色の指定