D3 - Scale and Axes

📌목록

• Introduction
• Scale
• min, max, extent
• Axes
• Conclusion

📌 Introduction

안녕하세요. 오늘은 d3에서의 scale과 axes에 대해서 알아보겠습니다. scale 같은 경우 svg보다 넓거나 높은 값이 나오면 효율적으로 대응을 해주게 됩니다. 퍼센트와 비슷한 개념이라고 보시면 좋을거 같아요. 그럼 한번 시작해보곘습니다.

📌 Scale

먼저 scale은 참 많은 scale을 가지고 있어요.

1. Linear Scale
2. Logarithmic Scale
3. Time Scale
4. Ordinal Scale
5. Band Scales

차례대로 알아 보겠습니다.

1. Linear Scale

기본적인 scale의 문법에 대해서 알기 전에 domain과 range에 대해서 알아야 해요.

domain은 자료 값의 min과 max 입니다. 그리고 range는 변환 될 output의 min과 max값이예요.

Linear Scale이란 이름처럼 linear한 scale을 만들어 주는 함수 입니다. 퍼센테이지로 변환 해주신다고 생각하면 좋을거 같아요. 한번 예제를 보겠습니다.

// 자료 값은 0~828까지로 설정을 해주고 output의 range는 0~400으로 설정을 해줍니다.
const y = d3.scaleLinear().domain([0, 828]).range([0, 400]);

// 그럼 100 은 48의 값이 나오게 됩니다.
console.log(y(100)); // 48

// 반대로 48의 값을 invert를 시키면 100이 나오게 됩니다.
console.log(y.invert(48)); // 100

2. Logarithmic Scale

Logarithmic Scale은 log를 씌운 scale을 말합니다. 인구 증가수와 같이 exponential growth 같은 값들을 나타내기에 좋아요.

const x = d3.scaleLog().domain([300, 150000]).range([0, 400]).base(10);

console.log(x(500)); // 32.9
console.log(x.invert(32.9)); // 500

3. Time Scale

Time Scale은 linear scale의 종류중 하나입니다. 다만 domain이 time이 들어가게 됩니다.

const timeScale = d3
  .scaleTime()
  .domain([new Date(2000, 0, 1), new Date(2001, 0, 1)])
  .range([0, 400]);

console.log(timeScale(new Date(2000, 7, 1))); // 232
console.log(timeScale.invert(232)); // Tue Aug 01 2000

4. Ordinal Scale

Oridinal Scale은 주로 color를 scale로 만들때 사용됩니다.

const color = d3
  .scaleOrdinal()
  .domain(["AFRICA", "N.AMERICA", "EUROPE", "S.AMERICA", "ASIA"])
  //  ⭐️ D3에서 미리 정해놓은 color scheme을 사용해도 좋아요
  // .range(d3.schemeCategory10);
  .range(["RED", "ORANGE", "YELLOW", "GREEN", "BLUE", "INDIGO", "GREY"]);

console.log(color("ASIA")); // BLUE

5. Band Scale

BandScale은 bar chart의 x-axis를 만들때 참 유용합니다.

Band Scale은 ordinal scale과는 다르게 domain에 없는 걸 집어넣게되면 undefined를 return 합니다.

const band = d3
  .scaleBand()
  .domain(["AFRICA", "N.AMERICA", "EUROPE", "S.AMERICA", "ASIA"])
  .range([0, 400])
  .paddingInner(0.3)
  .paddingOuter(0.2);

console.log(band("ASIA")); // 329
console.log(band.bandwidth()); // 54
console.log(band("EDDIE")); // undefined

📌 min, max, extent

min과 max는 data의 min과 max를 반환하는 함수 입니다.

const data2 = [
  { grade: "A", value: 4 },
  { grade: "B", value: 3 },
  { grade: "C", value: 2 },
];

const min = d3.min(data2, (d) => d.value);
console.log("min", min); // 2

const max = d3.max(data2, (d) => d.value); // 4
console.log("max", max);

extent는 min과 max를 한번에 구해줘요. array를 return하게 되고 min과 max를 0 index, 1 index로 반환합니다.

const extent = d3.extent(data2, (d) => d.value);
console.log("extent", extent); // [2, 4]

📌 Axes

axes는 총 4가지가 있습니다.

1. left (axisLeft())
2. right (axisRight())
3. top (axisTop())
4. bottom (axisBottom())

tick size를 통해 눈금을 조절할 수 있어요.

tickInner는 안에 있는 것들이고 tickOuter는 밖의 2군데를 의미합니다. 이모두를 포함하는건 tickSize이예요.

또한 눈금의 갯수나 text를 설정할수도 있습니다.

ticks으로는 눈금의 갯수를 설정할 수 있고, textFormat으로는 text를, tickValue로는 실제 값을 지정할 수 있습니다.

// How many?
d3.axisBottom(scale).ticks(10);

// Text format
d3.axisTop(scale).tickFormat(d3.format(",.0f")));
d3.axisTop(scale).tickFormat(() => "Tick Format");

// Expicit Values
d3.axisTop(scale).tickValues([1, 2, 3, 4, 5]);

📌 Conclusion

오늘은 이렇게 한번 d3의 scale과 axes에 대해서 알아보았습니다. 많이 생소하고 어렵기도 하네용. 한번 실제로 bar chart를 만들어 봐야할거 같아요. 그럼 다음 포스팅에서 만나요 안녕~~🎉