D3 LineScale

수치형 값을 다른 범위의 수치형 값으로 매핑하는걸 scale이라고 한다.

d3의 scale은 입력영역을(domain) 출력 범위(range)에 매핑한다.  기존의 간격을 새로운 간격으로 변환한다. 

D3.js scale은 함수이기 때문에 하나의 입력 도메인의 출력 범위에 매핑 할 수있을뿐만 아니라 함수는 도메인의 숫자를 범위의 출력으로 변환할 수 있다. 

입력데이터가 0~10,000 사이의 숫자인경우 이 값을 0~100 사이의 숫자 간격으로 변환하고 싶다고 가정하자.

1.원래 간격의 가장 큰 숫자가 무엇인지 알아냅니다 (-> 10000).

2.원래 간격의 가장 작은 숫자가 무엇인지 알아냅니다 (-> 0).

3.원래의 두 간격 수 (-> 10000 - 0 = 10000)의 차이를 계산합니다.

4.새 간격에서 가장 큰 숫자가 무엇인지 알아냅니다 (-> 100).

5.새로운 간격에서 가장 작은 숫자가 무엇인지 알아 낸다 (-> 0)

6.두 개의 새 간격 수 (-> 100 - 0 = 100)의 차이를 계산합니다.

7.새 간격 차이 (-> 10000 / 100 = 100)와 원래 간격 차이

8.이는 원래 간격의 100 단위가 새 간격의 1 단위와 같음을 나타냅니다.

9.이것을 선형 스케일링이라고합니다 (y = mx + b, 여기서 b = 0 및 m = 1/100)

10 이 예에서 x = 10000이면 100으로 나눠 y = 100이됩니다.

D3.js Scale Linear

d3.js는 d3.js 스케일 선형 함수를 사용하여 자동으로 scale작업을 수행한다. 

d3.scaleLinear()

.domain([최소값, 최대값])

.range([최소값, 최대값])

함수의 동작은 시각화할 데이터의 대상이 domain() 이고, 반환되는 값이 range()이다. 

var numbers = [3100, 250, 35, 1800, 90, 140];
        var width = 600;
        var height = 500;
        var myScale = d3.scaleLinear()
                        .domain([0, 3100])
                        .range([0, 500]);
        for(var i= 0;i <numbers.length;i++)
            {
                console.log(numbers[i] + " : " + myScale(numbers[i]));
            }
        var svg = d3.select("body").append("svg")
                    .attr("width", width)
                    .attr("height", height)
                    .style("background", "pink");
        var rectangles = svg.selectAll("rect").data(numbers);
        rectangles.enter().append("rect")
                    .attr("width", 25)
                    .attr("height", function(d, i){return myScale(d);})
                    .attr("x", function(d,i){return (i*28);})
                    .attr("y", function(d,i){return height - (myScale(d));})
                    .style("fill", "indigo");

numbers 배열에  해당하는 sclale 값에 변화는 아래와 같다. 

3100 : 500

250 : 40.32258064516129

35 : 5.64516129032258

1800 : 290.32258064516134

90 : 14.516129032258066

140 : 22.58064516129032

[Scale 적용결과 ]

var numbers = [31, 25, 35, 18, 90, 14];
var myScale = d3.scaleLinear()
                        .domain([0, 90])
                        .range([0, 100]);

데이터 범위를 변경해서 실행해보았습니다. numbers 배열에 값은 14~90 범위내에 숫자로 변경하였습니다. 

domain 값을 0,90 range 값을 0,100으로 설정한 후 실행한다.

[range 값을 0,100으로 실행한경우]

var numbers = [31, 25, 35, 18, 90, 14];
var myScale = d3.scaleLinear()
                        .domain([0, 90])
                        .range([0, 100]);

[range 값을 0, 1000 으로 변경한경우 ]