No description, website, or topics provided.
JavaScript HTML CSS Shell
Latest commit 327992a Nov 14, 2016 @kanitw kanitw committed on GitHub Update
Failed to load latest commit information.
.vscode Add vscode settings Jul 5, 2016
e2e append new gulp-angular based repo to old master Jan 25, 2015
scripts Correct deploy script, start at 0.1 Aug 16, 2016
src Modify summaries query so that loading it performs correctly! Sep 6, 2016
.bower-postinstall Clean up some horrible bower, font and css stuff. Feb 15, 2015
.bowerrc Clean up some horrible bower, font and css stuff. Feb 15, 2015
.gitignore fix fielddefeditor.spec.js tests May 26, 2015
.jshintignore Fix a bunch of style issues Dec 31, 2014
.jshintrc #271 migrate to mocha May 26, 2015
.travis.yml update travis config Oct 15, 2015
LICENSE Create LICENSE Apr 22, 2015 Update Nov 14, 2016
gulpfile.js remove dev task, just serve Jan 29, 2015
package.json [bump 0.2.1] Sep 6, 2016
protractor.conf.js append new gulp-angular based repo to old master Jan 25, 2015

Voyager 2 -- Alpha

Voyager2 is Tableau-style User Interface for visual analysis with support for partial specification, building on top of Vega-Lite and CompassQL.

This project is an alpha software. We are working on improving its code and documentation. Please subscribe to our mailing list to follow our updates.

Feedbacks are also welcomed. If you find a bug or have a feature request, please create an issue.


Voyager2's development is led by Kanit Wongsuphasawat and Jeffrey Heer at the University of Washington Interactive Data Lab, in collaboration with UW eScience Institute and Tableau Research

Setup Instruction

Install Dependencies

Make sure you have node.js. (We recommend using homebrew and simply run brew install node.)

cd into your local clone of the repository, and install all the npm and bower dependencies (bower will auto-run when npm finishes):

cd voyager2
npm install

Now you should have all dependencies and should be ready to work.


You can run npm start, which serves the site as well as running tests in the background. If you edit any file, our gulp task runner should automatically refresh the browser and re-run tests.

To execute other tasks, either use the npm script aliases npm run lint, npm test, or npm run build, or else install gulp globally with npm install -g gulp and run the tasks directly from gulp.

Development Guide

Folder Structure

We try to follow Google's Angular Best Practice for Angular App Structure and use generator-gulp-angular to setup the project.

All source code are under src/

  • src/app/ contains our main classes
  • src/components contains our other components
  • src/assets/images/ contains relevant images
  • src/data/ contains all data that we use in the application
  • src/vendor contains

@kanitw created gulp/gen.js for help generating angular components. For example, you can run gulp gen -d directiveName and this would create all relevant files including the javascript file, the template file, the stylesheet file and the test spec.

Coding Style

We use jshint as our linter for coding in the project.


We use sass as it is a better syntax for css.


Managing front-end dependencies with Bower requires the bower package to be globally installed:

npm install -g bower

This project depends on Datalib for data processing, Vega-Lite as a formal model for visualization, and Vega-Lite-ui, which contains shared components between Voyager2 and Voyager.

If you plan to make changes to these dependencies and observe the changes without publishing / copying compiled libraries all the time, use bower link.

In each of your dependency repository, run

cd path/to/dependency-repo
bower link

Then go to this project's directory and run

bower link datalib
bower link vega-lite
bower link vega-lite-ui

Now all the changes you make in each repo will be reflected in your Vega-Lite automatically.

Since bower uses the compiled main file, make sure that each repos is compiled everytime you run npm start. Otherwise, you will get errors for missing libraries.

Releasing / Github Pages

gh-pages branch is for releasing a stable version. gh-pages should only contain the dist folder.

Use to:

  1. publish the current version to npm
  2. deploy the current branch to gh-pages and
  3. create a release tag for github and bower.


We used generator-gulp-angular for bootstraping our project.