데이터 시각화?
복잡하거나 방대한 데이터를 시각적인 형태로 표현해 정보를 좀 더 직관적으로 이해하고 분석할 수 있도록 만드는 과정
보통 시각화하는 방법 중 대표적인 예로는
- 선 그래프
- 막대 그래프
- 원형 차트
- 텍스트를 이용한 시각적 표현
현대 사회에 방대한 데이터들로 인해 이제 데이터 시각화는 짧은 시간에 한 눈에 정보를 얻는 걸 선호하는 현대인들의 필수적인 요소라 생각했다. 그래서 분명 데이터 시각화의 중요성을 점점 중요해질거라 생각하여 이번 기회에 한번 시각화를 도전해봤다.
visx (visualization component)
막상 데이터 시각화를 어떻게 해야할지 감이 안잡혀 먼저 react 라이브러리를 찾아봤는데 visx라는 쉬운 레벨의 시각화 기본 요소들을 모아놓은 컴포넌트를 찾았다.
쉬운 레벨이라고는 하나 해당 docs를 참고하면서 내가 원하는 시각화를 얻을 수 있도록 조정해야 한다.
visx에서 제공하는 시각화 요소들
이 외에도 굉장히 많으니 나에게 필요하다고 생각하는 요소를 사용
visx gallery
해당 사이트에서 예시 코드를 제공하기에 이를 이용해서 개발을 하시면 됩니다.
트렌딩 데이터 시각화
그래서 visx를 이용해 tmdb api에서 제공하는 현재 가장 인기 있는 영화, tv쇼의 데이터를 시각적으로 표현
여기서 사용한 라이브러리는 visx의 WordClouds입니다.
api에서 데이터를 불러오는 부분은 react-query를 이용해서 처리했고 visx에서 어렵지 않게 해당 데이터를 라이브러리에 input으로 넣어주면 처리가 됩니다.
react-chartjs-2
다음으로는 현재 youtube에서 핫한 영화 예고편들의 조회수를 한번 시각화 해보았습니다. 이번에는 visx가 아닌 많은 개발자들이 사용하고 있는 react-chartjs-2라 라이브러리를 사용
해당 라이브러리의 장점은 개발자들이 원하는대로 커스텀하는데 자유도가 높은 점이라고 한다.
아직 시각화 결과가 만족스럽지 않아 좀 더 수정해야하지만, 2개의 라이브러리를 사용해본 결과, 확실히 visx가 처음에 사용하기에는 적절한 레벨의 라이브러리라고 느꼈다.
하지만 이미 정해진 디자인에서 벗어나지 못한다는 단점이 있어 실제 어떤 데이터를 이용해 시각화할지 모르는 실무에서는 사용이 많이 어려울것이라 생각한다.
또한 데이터 시각화를 위해서는 우선 데이터가 정확한지 검증하는 단계가 필요하다. 이번에 시각화하는 과정에서도 내가 원하는 데이터를 찾고, 이것이 정확한 데이터가 맞는지 확인하는 과정이 가장 중요했다고 생각한다.
