[01. D3.js] 002. D3-Scale

728x90

D3.js의 기본 목적은 데이터를 시각화하는 것인데, D3-Scale은 이 과정에서 데이터 값을 적절한 범위로 변환하는 중요한 역할을 한다. 1~10,000 범위의 데이터를 크기가 100인 차트에 표시하기 위해 scale을 조정한다고 생각하면 이해하기 쉽다. 다양한 방식으로 데이터를 scale할 수 있다.

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>

html파일에 위 코드 하나만 추가하면 d3js를 온라인으로 사용할 수 있게 된다.

Linear scales

선형 scale이다. 예를 들면 1~100의 데이터를 1~5,000 또는 100~1,000 등의 범위로 변환시켜준다.

<script>
    const x = d3.scaleLinear().domain([0, 100]).range([0, 500]);
    console.log(x(0), x(100), x(105)); // 0 500 525
    console.log(x.invert(0), x.invert(525)); // 0 105

    const xc = d3.scaleLinear().domain([0, 100]).range([0, 500]).clamp(true);
    console.log(xc(0), xc(100), xc(105)); // 0 500 500
    console.log(xc.invert(0), xc.invert(525)); // 0 100

    const scale = d3.scaleLinear().rangeRound([0, 511]).unknown(999); // range를 설정하고 interpolateRound를 적용
    console.log(scale(0.5)); // 256 (반올림된 결과)
    console.log(scale(NaN)); // 999

    const xn = d3.scaleLinear([0.241079, 0.969679], [0, 960]).nice(40);
    console.log(xn.domain()) // [0.24, 0.98]
</script>

x(100)은 domain 100이 range 500에 해당되는 값이라고 알려주고 invert를 사용하면 range에서 domain값을 구할 수 있다.

clamp(true)는 scale의 출력 값을 도메인의 최소 및 최대 값으로 제한한다.

rangeRound는 출력된 range값을 반올림해준다.

unknown은 정의되지 않은 값을 입력하면 미리 약속된 값을 출력하게 한다

nice(40)은 domain값을 좀 더 읽기 쉽게 조정해준다. 그리고 40은 domain의 간격 수를 조절해서 40으로 나누어지도록 한다.

Time scales

시간을 scale해준다. 시계열 차트에 유용하게 쓰일 수 있다.

<script>
    const x = d3.scaleTime([new Date(2000, 0, 1), new Date(2000, 0, 2)], [0, 960]);
    console.log(x(new Date(2000, 0, 1, 5))); // 200
    console.log(x(new Date(2000, 0, 1, 16))); // 640
    console.log(x.invert(200)); // Sat Jan 01 2000 05:00:00 GMT+0900 (한국 표준시)
    console.log(x.invert(640)); // Sat Jan 01 2000 16:00:00 GMT+0900 (한국 표준시)

    const xu = d3.scaleUtc([new Date("2000-01-01"), new Date("2000-01-02")], [0, 960]);
    console.log(xu(new Date("2000-01-01T05:00Z"))); // 200
    console.log(xu(new Date("2000-01-01T16:00Z"))); // 640
    console.log(xu.invert(200)); // Sat Jan 01 2000 14:00:00 GMT+0900 (한국 표준시)
    console.log(xu.invert(640)); // Sun Jan 02 2000 01:00:00 GMT+0900 (한국 표준시)

    const xz = d3.scaleUtc().domain([new Date("2000-01-01T12:34Z"), new Date("2000-01-01T12:59Z")]).nice();
    console.log(xz.domain()); // ['2000 Jan 01 12 AM', '2000 Jan 01 06 AM', '2000 Jan 01 12 PM', '2000 Jan 01 06 PM', '2000 Jan 02 12 AM']
</script>

2000년 1월 1일 ~ 1월 2일까지의 범위를 0~960으로 scale해준다. nice()도 사용가능하다.

Pow scales

지수함수를 적용한 scale이다. 지수 값에 의해 값을 계산하고 계산된 값을 range에 맞춰 출력한다.

<script>
    const scale = d3.scalePow()
                    .exponent(2)
                    .domain([0, 10])
                    .range([0, 50]);

    console.log(scale(5)); // 12.5
    console.log(scale(10)); // 50
</script>

Log scales

로그함수를 적용한 scale이다. 기본적으로 로그 밑(base)는 10이나 다른 밑을 사용할 수 있다. Log 역시 nice()도 사용가능하다.

<script>
    const xl = d3.scaleLog([1, 10], [0, 960]);
    const xlb = d3.scaleLog([1, 1024], [0, 960]).base(2);
    console.log(xl(5)); // 671.011204162578
    console.log(xlb(500)); // 860.7152913275603

    const x = d3.scaleLog([0.201479, 0.996679], [0, 960]).nice();
    console.log(x.domain()); // [0.1, 1]
</script>

Ordinal scales

불연속적인 domain과 range간의 변환을 해주는 scale이다.

<script>
    const color = d3.scaleOrdinal(["a", "b", "c"], ["red", "green", "blue"]);
    console.log(color('a')); // red
    console.log(color('b')); // green
</script>

a,b,c 순서대로 각각 red, green, blue로 변환된다.

Band scales

Band는 막대그래프를 그릴 때 유용하다. 예시를 보면 한 눈에 이해가 갈 것이다.

<script>
    const x = d3.scaleBand([0, 960]).domain(["a", "b", "c", "d"]);
    console.log(x("b")); // 240
    console.log(x("c")); // 480
</script>

domain이 늘어날수록 밴드의 위치가 조정된다.

Point scales

Band scales에서 Bandwidth가 0인 버전이다.

<script>
    const x = d3.scalePoint(["a", "b", "c"], [0, 960]);
    console.log(x("a")); // 0
    console.log(x("b")); // 480
    console.log(x("c")); // 960
    console.log(x("d")); // undefined
</script>

Quantile scales

데이터 값을 특정 수의 구간(quantile)으로 나누어 매핑하는데 사용된다. 이 scale은 입력 데이터의 분포를 기준으로 구간을 나누고, 각 구간에 해당하는 출력 값을 할당한다. 이는 데이터가 고르게 분포되지 않았을 때 유용하며, 데이터의 상대적인 순위를 기준으로 시각화를 하고자 할 때 자주 사용된다.

<script>
    const scale = d3.scaleQuantile()
                    .domain([0, 100, 500, 1000])  // 입력 값의 범위 설정 (다양한 값 포함)
               	    .range([0, 1, 2, 3]);  // 출력 값의 범위 설정

    console.log(scale.quantiles()) // [75, 300, 625]
    console.log(scale(50));  // 결과: 0 (첫 번째 구간)
    console.log(scale(200)); // 결과: 1 (두 번째 구간)
    console.log(scale(600)); // 결과: 2 (세 번째 구간)
    console.log(scale(1000)); // 결과: 3 (네 번째 구간)
</script>

지금까지 scale에 대해 알아보았다. 이외에 다양한 scale 및 함수들이 존재한다. 더 많은 정보를 알고 싶다면 공식사이트(https://d3js.org/d3-scale)를 방문해 보도록 하자.

728x90