React를 활용해서 데이터시각화 하기, 차트 라이브러리들

데이터 시각화(data visualization)란, 데이터를 그래프, 차트, 맵 등의 시각적인 형태로 표현하는 것입니다. 데이터 시각화는 데이터의 패턴, 트렌드, 상관관계 등을 쉽게 파악하고, 인사이트(insight)를 얻을 수 있게 해줍니다. 데이터 시각화는 웹 개발에서도 중요한 역할을 하며, 다양한 도구와 라이브러리가 존재합니다.

React로 데이터 시각화를 구현하려면, React와 호환되는 차트 라이브러리(chart library)를 사용해야 합니다. 차트 라이브러리란, 다양한 종류의 차트를 쉽게 만들고 커스터마이즈할 수 있게 해주는 라이브러리입니다. React와 호환되는 차트 라이브러리는 많이 있지만, 여기서는 다음의 세 가지 라이브러리를 소개하겠습니다.

 

Recharts

Recharts는 React 기반의 D3.js를 활용한 차트 라이브러리입니다. D3.js는 데이터 시각화를 위한 자바스크립트 라이브러리로, SVG, Canvas, HTML 등을 사용하여 다양한 형태의 차트를 만들 수 있습니다. Recharts는 D3.js의 강력한 기능을 React의 컴포넌트 방식으로 쉽게 사용할 수 있게 해줍니다. Recharts는 선형 차트(line chart), 막대 차트(bar chart), 파이 차트(pie chart), 레이더 차트(radar chart) 등 다양한 종류의 차트를 제공하며, 애니메이션(animation), 툴팁(tooltip), 범례(legend) 등의 기능도 지원합니다. Recharts의 장점은 React와 D3.js의 장점을 모두 가지고 있다는 것이고, 단점은 D3.js에 의존성(dependency)을 가지고 있다는 것입니다.

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { name: 'Jan', uv: 400, pv: 2400, amt: 2400 },
  { name: 'Feb', uv: 300, pv: 1398, amt: 2210 },
  { name: 'Mar', uv: 200, pv: 9800, amt: 2290 },
  { name: 'Apr', uv: 278, pv: 3908, amt: 2000 },
  { name: 'May', uv: 189, pv: 4800, amt: 2181 },
  { name: 'Jun', uv: 239, pv: 3800, amt: 2500 },
];

function MyChart() {
  return (
    <LineChart width={400} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="uv" stroke="#8884d8" />
      <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
    </LineChart>
  );
}

export default MyChart;

 

 

Nivo

Nivo도 React 기반의 D3.js를 활용한 차트 라이브러리입니다. Nivo는 Recharts와 비슷하게 다양한 종류의 차트를 제공하고, 애니메이션, 툴팁, 범례 등의 기능도 지원합니다. Nivo의 장점은 Recharts보다 더 많은 종류의 차트를 제공하고, 디자인과 스타일링이 더 세련되었다는 것입니다. Nivo의 단점은 Recharts와 마찬가지로 D3.js에 의존성을 가지고 있다는 것입니다.

import React from 'react';
import { ResponsiveBar } from '@nivo/bar';

const data = [
  { country: 'USA', value: 300 },
  { country: 'Germany', value: 200 },
  { country: 'France', value: 100 },
  { country: 'Japan', value: 400 },
];

function MyChart() {
  return (
    <ResponsiveBar
      data={data}
      keys={['value']}
      indexBy="country"
      margin={{ top: 50, right: 50, bottom: 50, left: 50 }}
      padding={0.3}
      colors={{ scheme: 'nivo' }}
      axisBottom={{
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
      }}
      axisLeft={{
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
      }}
      enableGridY={true}
      labelSkipWidth={12}
      labelSkipHeight={12}
      animate={true}
      motionStiffness={90}
      motionDamping={15}
    />
  );
}

export default MyChart;

 

Victory

Victory는 React와 React Native를 위한 차트 라이브러리입니다. Victory는 D3.js를 사용하지 않고, React의 컴포넌트만으로 차트를 구현합니다. Victory는 선형 차트, 막대 차트, 파이 차트, 스캐터 플롯(scatter plot) 등의 기본적인 차트를 제공하며, 애니메이션, 툴팁, 범례 등의 기능도 지원합니다. Victory의 장점은 D3.js에 의존성이 없고, React Native에서도 사용할 수 있다는 것입니다. Victory의 단점은 Recharts나 Nivo보다 차트의 종류가 적고, 디자인과 스타일링이 덜 다양하다는 것입니다.

import React from 'react';
import { VictoryPie } from 'victory';

const data = [
  { x: 'Apples', y: 35 },
  { x: 'Bananas', y: 40 },
  { x: 'Oranges', y: 55 },
  { x: 'Berries', y: 30 },
  { x: 'Grapes', y: 25 },
];

function MyChart() {
  return (
    <VictoryPie
      data={data}
      colorScale={['#FF5722', '#FF9800', '#FFC107', '#FFEB3B', '#CDDC39']}
    />
  );
}

export default MyChart;