# 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

``````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

``````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); // 色の指定
``````