여러분은 데이터가 어떻게 시각화되는지 궁금했던 적 없으셨나요? 이번 글에서는 숫자가 이미지로 바뀌는 과정, 데이터 시각화 과정의 규칙을 시각화 라이브러리로 알아보겠습니다.
본격적인 이야기에 앞서 ‘데이터 시각화’와 ‘데이터 시각화 라이브러리’의 정의를 짚고 넘어가 볼까요?
데이터 시각화(Data Visualization), 데이터 안에 숨겨진 패턴과 변화를 쉽게 이해할 수 있도록 시각적으로 전달하는 과정
뉴스 젤리
라이브러리(library), 컴퓨터 이용의 효율화를 꾀하기 위해서 이용자가 필요에 따라서 사용하는 표준화된 프로그램 및 서브루틴의 모임
– 정보통신용어 사전
‘시각화 라이브러리 (또는 차트 라이브러리)’는 데이터를 차트로 시각화하기 위한 코드를 함수나 클래스와 같은 로직을 이용하여 묶어 놓은 것으로 중복되거나 자주 쓰는 코드를 쉽게 재사용할 수 있습니다. 뿐만 아니라 다양한 차트의 옵션을 제공해 조건에 맞는 차트를 만드는데 유용하게 사용됩니다.
일반적으로 시각화 라이브러리를 이용해 차트를 그리려면, 사용자는 차트가 요구한 규칙에 따라 원본 데이터를 입력해야 합니다. 몇 가지 대표적인 시각화 라이브러리 – 1) 구글, 2) 하이차트(Highchart), 3) 베가 라이트(Vega-Lite), 4) 데이지(DAISY) -를 통해 각 시각화 라이브러리는 어떤 특징을 갖고 있는지, 어떤 규칙으로 데이터가 차트로 변환되는지 등을 알아보겠습니다. 라이브러리의 특징을 비교하기 위해 산점도 차트를 예제로 하여 설명하겠습니다.
1. 구글 차트 라이브러리
구글 차트 라이브러리는 총 29종의 기본적인 차트를 제공합니다. 각 차트별로 다양한 유형의 예제가 있어 사용자는 이를 손쉽게 사용할 수 있습니다. 멀티 터치(손가락 2개를 사용하여 차트를 확대, 축소 가능한 기능)를 지원하고 호환성이 좋은 이유로 모바일에서도 용이하게 작동한다는 것이 장점입니다. 구글 차트 라이브러리의 산점도 코드 구조를 살펴볼까요?
구글 차트 라이브러리는 크게 1) 데이터를 입력하고 2) 옵션을 설정하는 2가지 부분으로 나뉩니다. 시각화하고 싶은 데이터를 “var data”의 지정된 형태에 따라 입력합니다. 이때 원본 데이터를 “[ ‘x축’ , ‘y 축’ ]”의 규칙에 따라 입력해야 합니다. 차트 디자인을 변경하려면 “var option”을 설정합니다. “title”을 수정하면 X, Y 축의 이름을 수정할 수 있고, X와 Y 축의 최소값(minValue)과 최대값(maxValue)을 입력해 축의 범위를 조절할 수도 있습니다.
“var chart”의 “visualization.” 뒤에 “SactterChart”라고 적혀있는 부분을 다른 차트 이름으로 변경하면 이 외 다양한 형태의 차트로 시각화할 수 있습니다. 위의 산점도 예제에 포함되어 있지 않는 범례나 툴팁 등의 옵션을 사용하고 싶은 경우에는 “Advanced Usage”를 참고하면 필요에 맞는 차트를 만들 수 있습니다.
2 하이차트 라이브러리
구글 차트 라이브러리는 무료지만, 하이차트 라이브러리는 광고 목적이 아닐 시에만 무료로 사용 가능합니다. 아이폰과 아이패드를 포함한 모바일 브라우저와 멀티 터치 줌을 지원하는 것이 특징입니다. 이와 같은 이유로 페이스북, 트위터 등 많은 기업에서 사용하고 있습니다.
하이차트의 산점도 차트 라이브러리 예제를 보면 구글 차트와 비슷한 형태이지만 몇 가지 옵션이 포함되어 있습니다. 코드의 첫 번째 줄을 보면 차트 종류(type)와 줌(zoom) 타입을 설정할 수 있게 되어 있습니다. 예를 들어 Y 축은 고정하고 X축만 확대하고 싶으면 줌 타입을 “zoomType: ‘x’”라고 지정하면 됩니다. 제목과 소제목(subtitle), X와 Y 축의 이름을 변경하고 싶으면 “text” 뒤에 작성합니다.
뿐만 아니라 범례 (legend)는 레이아웃과 위치, 배경 색상 등을 설정할 수 있습니다. 예로 범례 리스트를 가로로 나열하고 싶으면 “layout: ‘horizontal’”로 수정합니다. 범례의 위치를 가로(align), 세로(verticalAlign)로 배치할 수 있으며, x와 y 값을 입력해 정확한 위치에 놓을 수 있습니다. “plotOption”에는 각 변수의 점의 크기를 지름(radius)으로 변경할 수 있습니다. 또한 툴팁(tooltip)의 X와 Y 값의 단위를 “{point.x}”와 “{point.y}” 뒤에 적어 설정할 수 있습니다. 범례의 배경과 X, Y 축의 변수(점) 등의 색(-Color)을 변경할 때 색깔 코드를 삽입해 원하는 색깔로 변경 가능합니다.
하이차트도 구글과 마찬가지로 데이터를 X축과 Y 축의 변수를 테이블 형태로 변형하여 입력해야 합니다.
3. Vega-Lite 라이브러리
기존의 시각화 라이브러리는 어떤 유형의 차트를 그릴 것이냐에 따라 입력값을 설정해야 하지만, 베가 라이트(Vega-Lite)는 차트가 만들어지는 시각화 과정에 대한 규칙을 문법으로 적용해 차트를 그립니다. 예를 들어 기존 차트 라이브러리에서 막대 차트를 그리려면, 막대 차트 유형에 맞는 형태로 데이터를 입력해야 합니다. 하지만 베가 라이트에서는 시각화하기 위해 필요한 데이터 변수가 무엇인지 입력한 후, 이를 표현할 시각화 요소로 “bar”(막대)를 입력하면 됩니다.
위의 이미지에서 볼 수 있듯이 시각화 요소를 ‘원(circle)’, ‘선(line), 막대(bar) 등으로 입력함에 따라 시각화 형태가 달라지는 것을 확인할 수 있습니다. 베가 라이트는 데이터 시각화 원리를 바탕으로 차트를 그려주기 때문에, 한가지 문법으로도 다양한 차트를 구현할 수 있다는 것이 장점입니다. 즉, 차트 라이브러리가 지정한 테이블 형태로 데이터를 변환할 필요 없이 시각화 형태를 변경할 수 있기 때문에 높은 수준의 라이브러리라고 볼 수 있습니다.
뿐만 아니라 JSON을 사용해 데이터를 필드명과 해당 값으로 정리하는 베가 라이트의 스키마($schema)를 활용하면 차트 형태로 변환하는 과정 또한 간편합니다. “data:”에 데이터 세트를 JSON에서 불러온다는 명령을 한 후, “encoding”에는 차트를 만드는데 필요한 데이터 변수(필드)를 각각 X, Y 축의 “field”에 지정합니다. 데이터 필드의 유형은 수치를 포함하면, “quantitative”로 설정하고, 그렇지 않으면 “nominal”로, 순서를 나타내면 “ordinal”, 시간을 나타내면 “temporal”으로 설정합니다.
그 외에도 위 이미지를 통해 볼 수 있듯이 베가 라이트(Vega-Lite)는 각 코드에 마우스 오버를 하면 코드에 대한 설명이 툴팁으로 제공되기 때문에 참고하기 좋습니다.
4. 데이지(DAISY) 라이브러리
뉴스 젤리도 데이터 시각화 툴인 데이지(DAISY)를 개발자가 쉽게 사용할 수 있도록 데이지 시각화 라이브러리를 오픈소스로 제공하고 있습니다. 기본적인 차트 막대, 트리맵, 마커 맵 등을 비롯하여 총 8개종의 차트를 공통된 문법에 의해 제공하며, 옵션 설정으로 총 25종의 차트를 사용할 수 있습니다.
데이지는 베가 라이트 라이브러리와 마찬가지로 차트별 테이블 형태에 맞춰서 데이터를 변형해야 하는 번거로움 없이 데이터 그대로를 차트 제작에 활용할 수 있는 구조를 갖추고 있습니다. 이런 기능을 ‘집산 기능’이라고 하는데 차트를 생성 시 독립 변인으로 작동하는 범주(dimension)와 종속 변인으로 작동하는 수치(measure) 값을 어떤 데이터 필드로 사용할 것인지 정의하는 것을 말합니다. 각 범주별 데이터를 합산, 최소, 최대, 평균, 중앙값(median)으로 계산해 별개의 데이터를 생성할 수 있으며, 이는 옵션을 이용하면 됩니다.
산점도 차트를 예로 살펴보면, X축과 Y 축 각각, 2개의 수치 데이터를 활용하므로 “measures”에 “최고기온(℃)” 과 “최저기온(℃)”을 입력합니다. 각 차트별로 집산 기능과 옵션에 대한 설명이 되어있는 데이지 라이브러리의 “Documents”를 참고하면 유용하게 사용할 수 있습니다.
지금까지 대표적인 시각화 라이브러리와 이를 이해하기 위해 산점도 차트를 예로 살펴보았습니다. 겉으로 보기엔 똑같아 보이는 차트더라도 어떤 시각화 라이브러리를 사용하는지에 따라 데이터가 차트로 만들어지는 과정에 다소 차이가 있음을 알 수 있습니다. 그동안 블로그에서 주로 데이터 시각화 콘텐츠, 시각화 인사이트를 주로 이야기 해왔는데, 차트가 만들어지는 과정에 대한 궁금증을 갖고 계셨을 분들에게 흥미로운 이야기가 되리라 생각합니다.
나아가 뉴스젤리의데이터 시각화 솔루션 데이지(DAISY)는 본문을 통해 언급한 시각화 라이브러리 데이지를 바탕으로 한 솔루션으로, 직접 이용해보시면 데이터 시각화 원리에 대한 이해를 더할 수 있으리라 생각합니다. 데이지를 직접 사용해보시고 싶으신 분은 링크로 이동해 사용해보세요 🙂
By 브랜드팀 김주연
