데이터 시각화의 세계: 다양한 자바스크립트 라이브러리

데이터 시각화란?

데이터 시각화는 데이터값을 정량화할 수 있는 속성으로 나타내 그래픽으로 표현한 결과물입니다. 이를 통해 복잡한 데이터를 숫자나 통계치보다 직관적으로 이해할 수 있으며, 추세, 패턴, 상관관계 등을 한눈에 파악할 수 있습니다. 이는 비즈니스 전략 수립이나 과학적 연구뿐 아니라, 다양한 분야에서 의사 결정을 내리거나 이해관계자들 간에 합의를 끌어내는 데 중요한 역할을 합니다.

 

데이터 시각화 예시

Rose Diagram (출처: https://www.tableau.com/ko-kr/learn/articles/best-beautiful-data-visualization-examples)

플로렌스 나이팅게일(Florence Nightingale)의 Rose Diagram은 데이터 시각화의 효과를 알 수 있는 좋은 사례입니다. 1850년대에 크림 전쟁 중에 군인 사망률은 계속 증가하고 있었습니다. 간호사뿐만 아니라 통계학자로 유명한 나이팅게일은 사망의 원인을 분석하고 문제를 해결하기 위해 데이터 시각화를 활용했습니다.

 

각 부채꼴은 월별 영국 군인의 사망자 수를 나타내며, 붉은색은 부상으로 인한 사망, 파란색은 예방할 수 있는 질병이나 비위생적인 환경으로 인한 사망, 검은색은 기타 원인에 의한 사망을 나타냅니다. 나이팅게일은 부실한 의료 조건이 많은 죽음의 원인임을 파악하고, 위생 조치를 통해 사망자 수를 줄일 수 있을 것이라는 인사이트를 얻었습니다. 오른쪽의 장미 차트는 전쟁 중 영국군 병원과 수용소에서 위생 조치가 시행되기 전의 것이고, 왼쪽의 차트는 이후의 것입니다. 간단한 공중 보건 조치로 많은 생명을 구할 수 있었고, 이 과정에서 데이터 시각화의 역할이 상당히 중요했음을 알 수 있습니다.

 

데이터 시각화 라이브러리

Pixabay 차트 이미지 (출처: https://pixabay.com/ko/illustrations/%EA%B7%B8%EB%9E%98%ED%94%84-%EC%B0%A8%ED%8A%B8-%ED%86%B5%EA%B3%84-%EB%8D%B0%EC%9D%B4%ED%84%B0-6249047/)

데이터값을 시각적으로 표현하기 위해서는 각 데이터 값에 어떤 시각적 특성을 부여할지 결정하고, 도형이나 색상으로 어떻게 나타낼지 고려해야 합니다. 데이터 시각화를 다양하게 구현하는 데 도움을 주는 세 가지 자바스크립트 오픈 소스 라이브러리를 함께 살펴보겠습니다.

 

Chart.js

Chart.js 차트 예시 (출처: https://www.chartjs.org/)

Chart.js는 초보자도 상대적으로 쉽게 사용할 수 있는 간단하고 직관적인 라이브러리입니다. 문서화가 잘 되어 있어 예제 샘플 소스 코드만 활용해도 기본적인 차트 유형(선 그래프, 막대그래프, 원형 차트 등)을 구현하여 빠르게 개발할 수 있습니다. MIT License를 따르고 있어 상업적인 용도로의 사용, 수정, 복제, 배포가 가능하며, 라이센스 및 저작권 고지가 필요합니다.

 

$.get('data.json').done(function(data) {
   // Structure of data:
   // { // "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
   // "label": "# of Votes",
   // "votes": [12, 19, 3, 5, 2, 3]
   // } const ctx = document.getElementById('myChart');

        new Chart(ctx, {
          type: 'bar',
          data: {
             labels: data.labels,
             datasets: [{
             label: data.label,
             data: data.votes,
             borderWidth: 1
    }]
  },
  options: {
       scales: {
          y: {
            beginAtZero: true
           }
         }
       }
    });
});

 

Chart.js의 데이터 로딩 시 jQuery와 같은 함수를 통해 비동기적으로 외부 데이터를 가져올 수 있습니다.

 

ECharts

EChart 차트 예시 (출처: https://echarts.apache.org/examples/en/index.html)

ECharts는 대규모 데이터 시각화에 적합한 라이브러리로, 다양한 차트 유형과 풍부한 기능을 제공합니다. 대시보드나 실시간 데이터 시각화 등 복잡한 시나리오에 적합하며, 다국어 지원과 커스터마이징이 용이합니다. 그러나 사용자가 원하는 기능을 찾기 어려울 수 있고, 상대적으로 가벼운 차트에 비해 성능이 느릴 수 있습니다. ECharts는 Apache License 2.0을 따르고 있습니다. 개인 및 상업적인 용도로 자유롭게 사용할 수 있고 소스 코드 수정, 재배포, 판매가 가능하지만, 마찬가지로 라이센스 및 저작권 고지가 필요합니다.

 

var myChart = echarts.init(document.getElementById('main'));

$.get('data.json').done(function(data) {
   // Structure of data:
   // {
   // categories: ["Shirt","Wool sweater","Chiffon shirt","Pants","High-heeled shoes","socks"],
   // values: [5, 20, 36, 10, 10, 20]
   // }
myChart.setOption({
    title: {
      text: 'Asynchronous Loading Example'
    },
    tooltip: {},
    legend: {},
    xAxis: {
        data: data.categories
   },
   yAxis: {},
   series: [
      {
        name: 'Sales',
        type: 'bar',
        data: data.values
       }
     ]
  });
});

 

Chart.js와 마찬가지로 ECharts의 데이터 로딩 시에도 jQuery와 같은 함수를 통해 비동기적으로 외부 데이터를 가져올 수 있습니다.

D3.js

D3.js 차트 예시 (출처: https://observablehq.com/@d3/gallery?utm_source=d3js-org&utm_medium=nav&utm_campaign=try-observable)

D3.js는 데이터 주도형 문서(D3: Data-Driven Documents)의 약자입니다. SVG를 이용하여 유연하고 동적인 시각화를 제공하며, 데이터와 HTML, CSS를 연결하여 상호작용성을 높일 수 있습니다. 그러나 초기 학습 곡선이 높고, 낮은 수준의 API를 제공하여 직접 모든 것을 제어해야 하는 점이 복잡할 수 있습니다. D3.js는 OpenBSD 베이스로 개발된 ISC License를 따르고 있습니다. 상업적인 용도로 사용할 수 있으며 소스 코드 수정과 재배포가 자유로우나, 마찬가지로 라이센스 및 저작권 고지가 필요합니다.

 

const data = await d3.text("hello-world.txt"); // "Hello, world!"
const data = await d3.csv("hello-world.csv"); // [{"Hello": "world"}, …]
const data = await d3.json("hello-world.json"); // { "Hello": "world", … }

 

d3.text(), d3.csv(), d3.json() 등의 메서드들은 D3.js 라이브러리의 일부로, 다양한 형식의 데이터를 가져오고 처리할 수 있는 기능을 제공합니다. 이러한 메서드들을 사용하여 데이터를 원하는 형태로 가공하고 시각화할 수 있습니다.

 

인실리코젠의 프로젝트 적용 사례

인실리코젠에서 진행한 프로젝트에서 표현된 데이터 시각화의 사례입니다.

 

한국원자력연구원: 국가 방사선 반응지도 모델링 플랫폼

방사선 예측 분석 기능 시각화: Chart.js 사용 사례 (출처: https://rrm.kaeri.re.kr/rrm/#!/retrieve/foodDetail/22288)

네트워크 시각화: d3.js 사용 사례 (출처: https://rrm.kaeri.re.kr/rrm/#!/network/)

 

ibreeder: 디지털 육종 플랫폼

기상예보 시각화: echart.js 사용 사례 (출처: 인실리코젠의 디지털 육종 플랫폼, ibreeder)

 

마치며

데이터 시대에서 데이터의 중요성은 점점 더 주목받고 있습니다. 중요한 데이터의 가치를 최대로 활용하기 위해서는 효과적인 시각화가 필수적이며, 다양한 시각화 방법은 데이터를 이해하고 전달하는 데 큰 도움이 됩니다. 제가 소개한 자바스크립트 라이브러리를 활용해서 데이터를 더 풍부하게 표현해 보셨으면 좋겠습니다.

 

참고자료

• "Tableau-Rose diagram", 2023년 11월 23일 접속, https://www.tableau.com/ko-kr/learn/articles/best-beautiful-data-visualization-examples
• "Pixabay-차트이미지", 2023년 11월 23일 접속, https://pixabay.com/ko/illustrations/%EA%B7%B8%EB%9E%98%ED%94%84-%EC%B0%A8%ED%8A%B8-%ED%86%B5%EA%B3%84-%EB%8D%B0%EC%9D%B4%ED%84%B0-6249047
• "Chart.js", 2023년 11월 23일 접속, https://www.chartjs.org/
• "ECharts-Example", 2023년 11월 23일 접속, https://echarts.apache.org/examples/en/index.html
• "D3.js-D3 gallery", 2023년 11월 23일 접속, https://observablehq.com/@d3/gallery?utm_source=d3js-org&utm_medium=nav&utm_campaign=try-observable
• 데이터 시각화 교과서, 클라우스 윌케 지음, 권혜정 옮김, 책만, 979-11-89909-10-9

---

 

EDITOR

이미정

Daejeon Branch · Junior Developer