d3 : scale 정의역 공역 치역

http://blog.naver.com/PostView.nhn?blogId=magnking&logNo=220947510402

제가 수학 관련 포스팅을 하는 날이 올지는 몰랐네요. 하지만 좋은 프로그래머가 되기 위해서는 수학 역시 일정 수준 이상 다룰 줄 아는 것이 유리하다고 합니다. 

오늘 포스팅할 주제는 정의역, 공역, 치역에 관한 것입니다. 지금 D3(Data-Driven Documents)라는 라이브러리를 공부하고 있는데 어느새 이런 개념들이 스믈스믈 흘러나오네요. 문제를 풀어보거나 한 수준이 아니기 때문에 여기서는 간단한 정의를 중심으로 다루겠습니다.

어디서 나온 용어야?

f: x → y

y = f(x)

수식 비슷한 걸 보니 벌써부터 긴장감이 흐르네요. 위 기호가 의미하는 것은 집합 x에서 y로의 함수를 의미한다고 합니다. 뭐 간단히 설명하면 집합 x와 y가 관계가 있다. 근데 그 관계가 함수(f)에 따라서 연결된다 정도일 듯 합니다. 

집합 x의 원소에 대응하는 집합 y의 원소, 그러니까 만약 집합 x에서 하나의 구성원이 선택이 되었을 때 함수(f)의 과정을 거치고 선택되는 y의 하나의 구성원을 함수 f에 의한 x의 함수값이라고 한다고 하네요.

그러니까 함수 f에 의해서 관계지어진 x와 y 두 집합의 관례를 나타내기 위한 기호인 것이네요. 딱 봤을 때는 이해하기 어려웠지만 길게 설명해야 하는 부분을 함축적으로 표현해 준 것을 생각해보면 매우 효율적인 표현이긴 하네요. 그럼 이제 본격적으로 정의역, 공역, 치역에 대해서 살펴볼까요? 

정의역, 공역, 치역이 뭐지?

정의역(domain (of definition))

정의역읜 함수 f에 의해서 관계지어진 x와 y 집합에서 x집합을 의미합니다. x를 함수 f의 정의역이라고 부릅니다.

공역(codomain)

x와 y 집합 중에 y집합을 의미합니다. y를 함수 f의 정의역이라고 부릅니다. 

치역(range)

그렇다면 치역은 어떤 쪽 집합을 의미할까요? 사실 이건 좋은 질문은 아니지만 굳이 답을 하자면 치역은 y집합에 속합니다. 사실 치역은 f(x)의 함수 값의 집합을 의미하는 것인데 위 식에서 계속 살펴왔던 것 처럼 y = f(x)이기 때문에 y의 부분집합을 의미하는 것이죠.

어떤 곳에서는 한 미팅 프로그램을 예로 들어서 설명을 해 두었더라고요. 남자 참가자들은 정의역이고 여자 참가자는 공역이다. 그런데 여기서 운명이라는 함수에 의해서 남자들에게 선택된 여상들이 치역인 것이라고요. 나름 이해를 도울 수 있는 비유인 것 같습니다.

프로그램에서는 어떻게 등장해?

그럼 이 정의역 치역 공역이 프로그램에서 어떻게 등장하는지 간단하게 살펴볼까요?

const xLinearScale = d3.scaleLinear()

      .domain([0, intonations.length])

      .range([0, svgWidth]);

const yLinearScale = d3.scaleLinear()

      .domain([minIntonation, maxIntonation])

      .range([0, svgHeight]);

위의 코드는 D3라이브러리를 이용해서 그래프를 그리려고 할 때 등장하는 부분입니다. 여기서 domain과 range가 등장하는데요. 도메인에서는 실제 데이터들의 범위를 설정해줍니다. 그리고 range에는 그 데이터들이 화면에서 어떤 구간내에 뿌려질지를 설정해 줍니다. 이렇게 설정만 해주면 여기에 맞는 함수가 생성되어서 실제 범위의 값을 뿌려질 범위에 맞게 변환을 해주게 됩니다. 

우리가 직접 계산을 하지 않아도 컴퓨터가 대신 함수도 생성해주고 값도 뿌려주고 하네요. 그러고보니 컴퓨터가 참 기특하네요. 

태산이 높다하되 하늘 아래 뫼이로다

오르고 또 오르면 못 오를 리 없건만을

사람이 제 아니 오르고 

뫼만 높다 하더라.

수학도 프로그래밍도 결국은 사람을 편하게 하기 위해서 탄생한 학문인 것 같습니다. 그 함축된 의미를 짧은 시간에 파악하기는 쉽지 않지만 조금씩 오르면 분명 정상 근처에 갈 수 있지 않을까요? :) 

(물론 에베레스트 같이 험난한 산에 가기 위해서는 장비를 꼭 잘 갖추셔야 합니다!)

================================================================

https://www.bsidesoft.com/?p=2382

scale

d3의 scale은 쉽게 말해 어떤 범위의 숫자를 다른 범위의 숫자로 변경해주는 함수입니다. 이를 더 확장해 숫자 이 외의 값에도 적용할 수 있습니다만, 우선 숫자의 확장이란 개념으로 접근해보죠.

예를들어 가장 흔하게 사용하는 변경은 백분률입니다. 0에서 4955의 범위가 있을 때 2345가 어디쯤인지 감을 잡기 위해 다음과 같은 방식으로 백분률로 고칩니다.

2345 / 4955 * 100 = 47.32

이를 통해 전체를 100으로 본다면 47정도의 위치에 있는 숫자구나 하는 감을 잡습니다. 이를 구현한게 scale입니다. 이를 코드로 표현하면 다음과 같습니다.

const scale = d3.scaleLinear().domain([0, 4955]).range([0, 100]);

console.log(scale(2345)); //47.32

위에서 예로든 백분률의 경우 1차 비례식을 통해 변환되므로(즉 원하는 숫자에 100/4955 를 곱하기만 하면 되므로) 선형변환이라입니다. 해서 d3.scaleLinear로부터 시작하는 것이죠. 하지만 어떤 수를 다른 수로 변환하는 방법은 다앙해서 d3에서는 다음과 같은 scale함수를 제공합니다.

d3.scaleLinear()

d3.scalePower()

d3.scaleLog()

d3.scaleIdentity()

d3.scaleTime()

이 중 이 글에서는 scaleTime과 scaleLinear를 다룹니다. 일단 위의 함수로 생성된 scale함수는 추가적인 속성을 설정할 수 있는데 그 중 가장 중요한게 domain과 range입니다.

둘 다 배열 1개를 인자로 받고 배열 안에 2개의 원소로 시작과 끝의 범위를 기술합니다. domain이 실제 값의 범위라면 range가 백분률처럼 변환하고 싶은 값의 범위입니다.

재밌는 부분은 range에서 시작과 끝을 반대로 기술하여 역으로 값이 나오게할 수도 있다는 점입니다. 이 방법은 실제로 많이 사용되는데 그래프가 아래서 위로 솓아오르는게 자연스러운 반면 svg의 좌표계는 젤 위가 0이고 아래로 갈수록 증가하는 형태라 값을 거꾸로 기술하는 편이 더 시각적으로 좋기 때문입니다.