[D3.js] scaleLinear 함수

참고 : [D3.js] Scale 함수 사용

scale 관련 함수들이 D3.js에 보시면 다양한 함수들이 나와 있습니다. 그중에서도 대표적인 함수가 scaleLinear 함수이고 위 참고 링크 예제를 보시면 scaleLinear 함수를 사용하여 Scale를 설정하는 방법이 나와 있습니다. 오늘은 이 scaleLinear 함수에 대해서 간단히 살펴보고 이 함수와 유사한 scalePow, scaleLog 함수에 대해서도 살펴 보도록 하죠.

1. scaleLinear 함수

수학식 : y= mx + b
D3코딩 : d3.scaleLinear()

예)

    var data = [1,2,3,4,5,6,7,8,9,10];

    var scale_Linear = d3.scaleLinear().domain([1, 10]) //y = mx + b
              .range([0, 100])
                            
    data.forEach(function (d){console.log(scale_Linear(d)); });

[결과]

이미지 형태로 살펴보면,

alt

2. scaleLinear와 유사한 함수들

(1) scalePow() 함수

수학식 : y = mx^k + b
D3코딩 : d3.scalePow()

예)

    var data = [1,2,3,4,5,6,7,8,9,10];

    var scale_Pow = d3.scalePow().domain([1, 10]) // y = mx^k + b
              .range([0, 100])
                            
    data.forEach(function (d){console.log(scale_Pow(d)); });

[결과]

이미지 형태로 살펴보면,

(2) scaleLog () 함수

수학식 : y = m log(x) + b
D3코딩 : d3.scaleLog()

예)

    var data = [1,2,3,4,5,6,7,8,9,10];

    var scale_Log = d3.scaleLog().domain([1, 10]) //y = m log(x) + b*
              .range([0, 100])
                            
    data.forEach(function (d){console.log(scale_Log(d)); });

[결과]

이미지 형태로 살펴보면,

alt

마무리

오늘 실험한 함수들은 scaleLinear(), scalePow(), scaleLog() 함수들에 대해 간단히 실험을 하였습니다. 각 함수들은 어떤 수학식을 가지고 있는지를 잘 정리하고 나중에 적절하게 사용해 봐야 겠네요. 아직은 이 세 함수에 대해 정확히 어떤 상황에서 각 함수들을 사용하는지 약간 애매 합니다. 그래도 대충 그림으로 살펴보면 각 선이 어떤식으로 그려지는지 시각적으로 어느정도 구분하여 이해 할 수 있었네요. 약간은 Linear과 Pow가 비슷한 선이 그려졌고 위 실험에서는 차이점을 시각적으로 보여지지 않았서 약간 애매한 부분이 있고 Log는 차이나게 그려져서 확실히 구분 할 수 있었습니다.

아직은 어디에 어느 함수인지는 많은 예제들을 살펴보면서 사용방법을 정리해야 겠네요.

[D3.js] scaleLinear 함수 | Ecency