[Chart 추천 서비스] Voyager 소개와 개념
Chart 추천 서비스워싱턴 대학의 Interactive Lab실에서 개발한 차트 추천시스템인 Voyager를 다시 디자인하여 Chart 추천시스템을 만들어 보도록 한다. 먼저 Voyager에 대한 다음을 이해하고 가자.
- Voyager에 대해 알아본다.
- Voyager 아키텍쳐와 구성요소를 안다.
- Vega, Vega-lite에 대해 안다.
- 첨부 동영상을 통해 일반적이 Data Visualization에서 해결하고 싶은 문제에 대해 이해한다.
Voyager 란?
워싱턴 대학의 인터렉티브 랩실은 데이터 비쥬얼라이제션 관련 연구와 오픈소스를 개발하고 있다. 이중 D3.js기반의 차트 라이브러리인 Vega 와 Vega의 경량버전인 Vega-lite를 개발하였고, 해당 차트를 기반으로 데이터특성에 따른 차트 추천서비스인 Voyager를 개발하였다.
Voyager의 특징
- 데이터 특성에 따른 자동 차트 추천
- 사용자가 직접 차트 구성
즉, 자동 추천에서 인사이트를 얻지 못한다면 사용자가 직접 차트를 드래그앤드롭 방식으로 만들어 확인해 볼 수 있다. 개발자인 햄의 설명을 들어보자.
Voyager에서 보여지는 차트는 Vega-lite를 기반이며 이는 쉬운 문법을 통해 차트를 자동 생성해 준다. 또한 Vega 전용 웹 에디터를 제공하고 있어 직접 수정하며 체험해 볼 수 있다. Voyager와 에디터는 Standalone으로 로컬에 설치해 사용할 수도 있다. Voyager의 추천 핵심 엔진은 CompassQL이다. 위 동영상에 이어 좀 더 자세한 설명을 보도록 하자.
- Vega-lite: a Concise Grammer of Graphics
- CompassQL: Visualization Query Language & Engine
- Voyager 2:
- Altair: Python 버전 Vega
시간이 되면 Voyager 2 관련 논문도 보자. 위 동영상에서 미래의 모습으로
- Natural Language Interfaces: Configuration 을 좀 더 친화적으로...?
- Automated Design for Interactive Dashboard: 대시보드 자동생성
- Suggestions for Plotting APIs: Configuration시 Linting 을 좀 더 잘 해주기
- layer-1: Vega-lite로 차트 제공
- layer-2: CompassQL 로 차트 추천 엔진 배치
- layer-3: Application인 Voyager 2 제공 (Voyager는 2015년 소개된 v1이고, Voyager 2는 2017년 소개된 v2 이다)
중간의 설명을 요약해 보면
- 수동적인 차트 추천과 차트 추천을 보완하는 대화식 시스템을 연구한다
- 데이터에서 추천을 (Specification and Recommendation) 위한 차트 사양을 만들기 위해 새로운 언어와 시스템을 만든다.
- Vega-lite: 차트를 그리기 위한 문법언어
- Voyager: Vega-lite와 CompassQL을 사용한 서비스 개발
D3.js 와 Typescript 기반으로 개발되었고, Vega의 복잡한 문법을 좀 더 친화적으로 가볍게 만든 차트 문법을 제공하는 Vega-lite가 있다. Vega-lite문법으로 차트를 설정하면 최종적으로 Vega 문법으로 변환되어 차트가 그려진다.
- 현재 v3.0.0-rc10 활동이 활발하다
- 테스트 해본 결과 20만건의 데이터를 그리는데 4~5초 가량 걸리고 Canvas기반으로 그려진다.
- Vega와 Vega-lite 기반으로 Voyager, Polestar, Altair, Lyra, Wikipidia 등에서 사용하고 있다.
Vega-lite 소개 영상을 보도록 하자.
- 베가 라이트는 상호 작용하는 멀티 View 그래픽을 정의하기 위해 표현이 간결한 언어를 가지고 데이터 분석 탐색을 용이하게 하는 것이 목표이다.
(facilitate exploratory data analysis with an expressive yet concise language to specify interactive multi-view gaphics)
- 즉, Single View도 있고, Multi View도 있지만, 특히 Multi View가 상호작용토록 자동으로 만들어준다.
- 설정에서 여러 컴포넌트를 조합할 수 있다. (selection)
- Multi View가 상호작용하는 동작 설명 (single, project, bind, multi, interval, hover, nearest)
흥미로운 주제로 Multi Chart에 대한 Reactive System 구현에 대한 동영상과 페이퍼도 참조해 보자.
- Vega & Vega-lite 둘다 나옴
- 한 컴포넌트의 Selection이 다른 컴포넌트에 영향을 주는 관계 (Interactive relation)
<참조>
2015-Voyager-InfoVis.pdf- Reactive Vega Architecture Paper
'Chart 추천 서비스' 카테고리의 다른 글
| [Chart 추천 서비스] React + Meteor + Redux + Typescript + EUI 환경 구성 (0) | 2018.12.10 |
|---|---|
| [Chart 추천 서비스] Voyager 기술 스택과 신규 서비스 SRS (0) | 2018.12.07 |