Voyager 기술 스택을 살펴보고, 새로 디자인 하려는 기술스택을 정리해 보자. 

  - Voyager 기술 스택 알기

  - 새로운 기술 스택 준비하기 

Voyager 기술 스택

기술 스택 이해를 위해 voyager의 의존성 패키지를 살펴보자. 

  - Typescript

  - React

  - React third part components: datetime, dnd, file-download, modal, spinners, split-pane, tabs, tether

  - Redux: redux-action-log, redux-thunk, redux-undo, reselect

  - common packages: moment, font-awesome

  - vega: vega-datasets, vega-expression, vega-lite, vega-tooltip, vega-typings, vega-util

  - compassql

  - webpack 빌드

React 개발시 사용하는 환경에서 개발되었음으로 알 수 있다. Voyager 설명과 사용방법은 Gitbook을 사용하고 있다. 

  - 로컬 데이터 로딩, URL입력으로 불러오기: JSON, CSV, TSV 파일형식 지원

  - 데이터 Field 자동 분류: quantitative(숫자), temporal(날짜), categorical(문자)

  - quantitative에 대해 min, max, mean등의 함수 적용

  - temporal에 대해 year, month, date, hours등의 함수 적용

Lime 기술 스택

라임은 Voyager의 기능을 흡수하고 내가 사용하고 싶은 UX 를 가미한 서비스이다. 라임은 다음의 기술 스택으로 만들어 보려한다. 

  - React + Redux

  - Meteor

  - MongoDB

  - vega-lite, compassQL

라임 서비스의 SRS(Software Requirements Specification, 소프트웨어 요구사항 명세)는 다음과 같다.

  - 데이터는 Voyager에서 지원하는 형태와 동일하다. 이후 데이터에 대한 수집, 클렌징 작업은 또 하나의 프로젝트가 될 정도의 규모이므로 여기서는 배제한다. 

  - 차트를 디자인한 후, 직접 Vega-lite의 JSON 환경설정을 에디팅 할 수 있도록 한다. 에디터는 Vega-editor를 사용한다. 

  - 원하는 차트 형태가 나왔다면 데이터와 차트 설정을 저장할 수 있다. 

  - 저장한 차트 목록에서 원하는 것을 대시보드화 할 수 있다. 즉, 차트 -> 대시보드 기능을 가진다. 

  - 각 차트와 대시보드는 다른 애플리케이션에 embedding하여 표현할 수 있다. 

  - 대시보드는 생성한 Vega차트를 표현하거나, Text, Image등의 Widget을 제공하여 사용자 정의 정적 표현을 할 수 있다. 

차트 생성

대시보드 생성

어짜피 혼자 개발하는 것이니 한장 짜리 SRS로 시작해 본다.

<참고>

- Voyager Github

- Voyager GitBook

워싱턴 대학의 Interactive Lab실에서 개발한 차트 추천시스템인 Voyager를 다시 디자인하여 Chart 추천시스템을 만들어 보도록 한다. 먼저 Voyager에 대한 다음을 이해하고 가자.

  - Voyager에 대해 알아본다.

  - Voyager 아키텍쳐와  구성요소를 안다.

  - Vega, Vega-lite에 대해 안다.

  - 첨부 동영상을 통해 일반적이 Data Visualization에서 해결하고 싶은 문제에 대해 이해한다. 

Voyager 란?

워싱턴 대학의 인터렉티브 랩실은 데이터 비쥬얼라이제션 관련 연구와 오픈소스를 개발하고 있다. 이중 D3.js기반의 차트 라이브러리인 Vega 와 Vega의 경량버전인 Vega-lite를 개발하였고, 해당 차트를 기반으로 데이터특성에 따른 차트 추천서비스인 Voyager를 개발하였다. 

Voyager의 특징

  - 데이터 특성에 따른 자동 차트 추천

  - 사용자가 직접 차트 구성

즉, 자동 추천에서 인사이트를 얻지 못한다면 사용자가 직접 차트를 드래그앤드롭 방식으로 만들어 확인해 볼 수 있다. 개발자인 햄의 설명을 들어보자.

<참조>

- 워싱턴대의 Vage 관련 소개 페이지

- Vega 홈페이지

- Vega-lite 홈페이지

- Vega Editor

- Voyage 데모 페이지

- Altair 홈페이지

- Voyager 관련 논문 

2015-Voyager-InfoVis.pdf

2017-Voyager2-CHI.pdf

- Reactive Vega Architecture Paper 

2015-ReactiveVega-InfoVis.pdf

- 햄의 Voyager 연구자료

research-statement-1.pdf

- CompassQL 논문

2016-CompassQL-HILDA.pdf