Quantize Scale , Quantile Scale ,[d3.scaleQuantile vs d3.scaleQuantize]

Quantize Scales

정보 이론에서 양자화(Quantize)는 아날로그 데이터, 즉 연속적인 값을 디지털 데이터, 즉 띄엄띄엄한 값으로 바꾸어 근사하는 과정을 뜻한다. d3에서 scaleQuzntize() domain()범위를 range값에 맞춰서 자동으로 domain범위를 나눠서 분류한다. 

예제를 통해서 이해를 해보도록하자.

var quantizeData = [1, 15, 26, 48, 51, 57, 63, 79, 82, 99];
var outputRange = ["red", "green", "deeppink", "blue", "yellow"]
var quantizeScale = d3.scaleQuantize()
                      .domain([0, 100])
                      .range(outputRange);
var svg = d3.select("body").append("svg")
            .attr("width", 500).attr("height", 200)
            .style("background", "pink");
 
var circles = svg.selectAll("circle").data(quantizeData);
circles.enter().append("circle")
        .attr("r", 20)
        .attr("cx", function(d,i){return (i+1)*45;})
        .attr("cy", 40)
        .style("fill", function(d){return quantizeScale(d);});
 
 

range값에 "red", "green", "deeppink", "blue", "yellow" 라는 5사지 색을 지정하였으며 , domain 범위는 0~100상이다.

0~100 범위안에 도메인값이 5가지 컬러값에 고정되서 출력된다. 

red : 0~19

green :  20 ~39

deeppink : 40~59

blue : 60~79

yellow : 80~100

var quantizeData = [1, 22, 26, 39, 51, 57, 63, 79, 82, 99];

Quantile Scale

quantile scale의 목적은 데이터 세트의 값의 실제 분포를 나타내는 클래스를 얻는 것이다. 따라서 건설 중에 값의 전체 목록을 제공해야합니다. 그런 다음 입력 도메인 (이 값으로 정의)을 간격 (퀀 타이들)으로 분할하여 거의 동일한 수의 값이 각 간격에 속하도록합니다.

var quantizeData = [1, 22, 20, 39, 51, 57, 63, 79, 82, 99];
 
var outputRange = ["red", "green", "deeppink", "blue", "yellow"]
var quantizeScale = d3.scaleQuantize()
                      .domain([0,30,60])
                      .range(outputRange);
 
// 추가 
var quntileScale = d3.scaleQuantile()
                     .domain([0,30,60])
                     .range(outputRange);
 
 
var svg = d3.select("body").append("svg")
            .attr("width", 500).attr("height", 200)
            .style("background", "pink");
 
var circles = svg.selectAll("circle");
circles.data(quantizeData).enter().append("circle")
        .attr("r", 20)
        .attr("cx", function(d,i){return (i+1)*45;})
        .attr("cy", 40)
        .style("fill", function(d){return quantizeScale(d);});
 
 
circles.data(quantizeData).enter().append("circle")
        .attr("r", 20)
        .attr("cx", function(d,i){return (i+1)*45;})
        .attr("cy", 100)
        .style("fill", function(d){return quntileScale(d);});

quantile scale와 quantize scale은 동작방식의 비슷하다. 위의 예제에서 domain 영역값을 [0,30]으로 만 정했을경우

결과값은 동일하게 동작한다. domain영역에 60을 추가한 상태로 코드를 실행한결과 위와 같이 컬러의 색분포도가 다르게 나타난다.

domain 값이 [0, 30, 60] 인데, quantile scale 인경우는  1, 22, 20 39 에 각각 red, green, blue값이 표시가되나  quantize scale 에 경우는 domain 값이 1, 22, 20 값을 제외한 나머지 값을 yellow 컬러에 맵핑을 하게 끔나타납니다. domain 값에서 30, 60이어서 30을 넘어가는 나머지숫자를 모두 Yellow로 맵핑되었습니다.

참고 : http://bl.ocks.org/syntagmatic/29bccce80df0f253c97e