D3 척도와 축 - 선형 척도, 순서형 척도, 묶음 척도, 영역과 여백, x축과 y축(axis)

https://d3js.org/d3-scale

d3-scale | D3 by Observable

 

 

선형 척도

x값을 넣었을 때 f(x)로 결과값을 나타내는 것

선형척도(scaleLinear)

const x =d3.scaleLinear();
x.domain([0,10]);
x.range([0,100]);

console.log(x(0)); // 0
console.log(x(10)); // 100

d3의 scaleLinear를 호출하면 선형척도 함수를 반환한다.

x는 domain과 range 메서드로 값을 설정한다.

 

f(x) = y = x * 10으로 인해 0을 넣으면 0이 되고, 10을 넣으면 100이 된다.

이게 가능한 이유는 domain과 range를 설정해줘서 가능했다.

 

 

domain과 range

domain 0이 range의 0에 대응되고,

domain의 10이 range의 100에 대응된다.

 

domain([최소,최대])

• 입력 데이터, 데이터 값을 기반으로 최소(0) - 최대값
• [domain]은 숫자배열
• 배열 내 요소는 2개 이상(일반적으로 2개)

range([최소,최대])

• 출력 데이터, 보여주고 싶은 최소-최대값
• [range]는 숫자, interpolator(색상,문자 등) 배열
• 배열 내 요소는 2개 이상(일반적으로 2개)

 

순서형 척도(scaleOrdinal) & 묶음 척도(scaleBand)

- 숫자값을 사용하지 않는 정성적 데이터를 위한 척도 (영화 이름 같은 척도)

 

순서형 척도

const ordinal =d3.scaleOrdinal()
                  .domain([1,2,3,4,5])
                  .range([6,7,8,9,10])

console.log(ordinal(1)); // 6
console.log(ordinal(3)); // 8

- domain에 정의된 배열이 range 배열과 동일한 인덱스로 요소가 매핑됨

- 카테고리형

-range에는 보통 색상값을 넣음

 

묶음 척도

const band = d3.scaleBand()
               .domain([1,2,3,4,5])
               .range([1,100])
               
console.log(band(1)); // 1
console.log(band(5)); // 80.2
console.log(band.bandwidth()); //19.8

- 균일한 band로 range를 나눈다.

- 전체 Range를 일정한 구간으로 나눈다.

- 정량이든 정성이든 모두 활용 가능

 

 

 

영역과 여백, x축과 y축(axis)

척도와 축을 정하기 전에 정해야하는 것이 영역과 여백이다.

 

처음에 svg의 영역으로 아래와 같이 지정했고,

 

각 이미지를 그릴때 아래와 같이 지정해줬다.

이렇게 지정하고 translate로 각각 값을 상수로 이동하게되면 나중에 꼬이게 될 수 있다.

 

 

영역과 여백 설정하기

d3는 척도를 가지고 차트를 그릴 때 

영역에 대한 설정이 필요하다.

실제 차트를 그리는 영역과 여백을 분리해서 작성하면 좋다.

위 처럼 margin과 width,height를 지정하면 svgGroup 데이터를 설정하는 부분에서 알기 쉽게 지정할 수 있다.

그리고 차트는 g 태그안에 그려지게 된다.

 

이를 통해 하드코딩한 값을 바꿔줄 수 있다.

 

 

축(axis)

https://d3js.org/d3-axis

d3-axis | D3 by Observable

axis는 아래와 같이 대부분 사용된다.

• axisTop(scale)
• axisLeft(scale)
• axisBottom(scale)
• axisRight(scale)

const xAxis = d3.axisTop(x)
                 .ticks(4)
                 .tickFormat(function(d,i) {return `${!!d ? Math.floor(d/10000) : d}만명`})

ticks는 tick의 개수를 설정하고

tickFormat은 tick이 어떻게 출력될지 지정해 줄 수 있다.

이렇게 설정하고나서 실행하면 출력이 되지 않는다.

아래와 같이 call을 넣어줘야한다.

svgGroup.append('g')
         .call(xAxis);

 

y축도 만들어준다.

const yAxis = d3.axisleft(y)

svgGroup.append("g")
          .call(yAxis);

y축은 y척도에서 이미 아래와 같이 지정해 주었다면 간격과 위치에 대해서 신경쓰지 않아도된다.

const band = d3.scaleBand()
               .domain(nameList)
               .range([0,height])
               .paddingInner(0.2)

 

 

척도와 축은 많은 옵션이 있다.

나중에 꼭 탐구해보자