[React] Recharts의 Treemap

Recharts 란?

- React 기반의 데이터 시각화 라이브러리

- 간편하게 차트와 시각적 데이터를 화면에 렌더링 할 수 있음

- SVG 기반으로 구현되어 있어 브라우저 호환성 높음

- 다양한 차트 타입 제공

- 바 차트, 선 차트, 원형 차트 등 여러 차트 생성 가능

- 사용자 정의 및 애니메이션 기능 지원됨

 

 

Treemap 개념 

- 데이터를 계층적으로 시각화할 때 사용하는 차트

- 데이터의 크기와 중요도를 표현하는 데 유용

- Treemap의 각 사각형: 특정 범주나 값을 나타냄, 사각형의 크기나 색상이 데이터 특성에 따라 변함

- 복잡한 데이터 셋을 한눈에 쉽게 파악 가능

 

 

Recharts의 Treemap 사용

설치 

npm install recharts 
yarn add recharts

환경에 맞춰 설치 

 

Treemap 컴포넌트

- Recharts의 Treemap 컴포넌트를 사용해 트리맵 차트를 만들기

- data 속성을 통해 데이터 전달

- dataKey, nameKey 등의 속성을 이용해 시각화할 데이터 설정

- *ResponsiveContainer를 함께 사용하면 차트가 화면 크기에 맞춰 *반응형으로 렌더링 됨

 

 

기본 코드 예제

import React from 'react';
import { Treemap, ResponsiveContainer } from 'recharts';

const data = [
  { name: 'Category A', size: 400 },
  { name: 'Category B', size: 300 },
  { name: 'Category C', size: 200 },
];

const ExampleTreemap = () => (
  <ResponsiveContainer width="100%" height={400}>
    <Treemap
      data={data}
      dataKey="size"
      nameKey="name"
      aspectRatio={4 / 3}
      stroke="#fff"
    />
  </ResponsiveContainer>
);

export default ExampleTreemap;

 

실행화면

- dataKey 속성: 사각형 크기 결정하는 키 값을

- nameKey 속성: 각 항목의 이름을 지정해 사용 

 

데이터 생성

const data = [
  { name: 'Category A', size: 400 },
  { name: 'Category B', size: 300 },
  { name: 'Category C', size: 200 },
];

 name: 각 카테고리의 이름

size: 해당 카테고리의 크기

 

Treemap 컴포넌트 구성

const ExampleTreemap = () => (
  <ResponsiveContainer width="100%" height={400}>
    <Treemap
      data={data}
      dataKey="size"
      nameKey="name"
      aspectRatio={4 / 3}
      stroke="#fff"
    />
  </ResponsiveContainer>
);

- ResponsiveContainer : width="100%" , height={400} 을 설정 -> 차트 반응형으로 만듦

-> 차트가 부모 요소의 크기에 맞춰 자동으로 조정됨

* 애니메이션 끄고 싶을 때는

isAnimationActive={false}

  추가하면 애니메이션 작동 하지 않음

 

Treemap

- data: 시각화할 데이터 저장. 여기서는 data 배열이 전달됨

- dataKey: Treemap의 각 요소가 차지할 면적을 결정하는 키 -> size로 지정 이 값에 비례해 면적 결정되도록 함 

- nameKey: Treemap 각 요소에 레이블 표시하는 키

- aspectRatio: 각 요소의 가로 세로 비율 조정 속성 (위 예제 코드에는 4:3 비율)

- stroke: 각 항목의 테두리 색상을 지정 (위 예제에는 흰색으로 지정하여 영역 구분)

 

- 컬러링 및 스타일링 추가 : color 필드 추가 

- 클릭 이벤트 추가 :

const handleClick = (node) => {

setSelectedItem(node.name);

console.log(`Clicked on ${node.name}`);

};

<Treemap

onClick={(node) => handleClick(node) }

... />

- 데이터 계층 구조 추가: children 속성 사용

const data = [
  {
    name: 'Category A',
    children: [
      { name: 'Subcategory A1', size: 100 },
      { name: 'Subcategory A2', size: 200 },
    ],
  },
  {
    name: 'Category B',
    children: [
      { name: 'Subcategory B1', size: 150 },
      { name: 'Subcategory B2', size: 150 },
    ],
  },
];