GraphScape(paper) is a directed graph model of the visualization design space that supports automated reasoning about visualization similarity and sequencing. It uses the Vega-Lite language to model individual charts. This repository contains source code for building GraphScape models and automatically recommending sequences of charts.

• Sequence Recommender API
• Sequence Recommender Web Application
• Development Instructions
• Cite Us!

# graphscape.sequence(charts, options[, editOpSet, callback]) <>

Generate recommended sequence orders for a collection of Vega-Lite charts. The return value is a ranked array of potential sequences and associated metadata.

The output is a ranked array of objects, each containing a sequence ordering and related metadata.

var gs = require('./graphscape.js')
var charts = []; // an array of Vega-Lite charts
charts.push({
  "data": {"url": "data/cars.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower","type": "quantitative"},
  }
});
charts.push({
  "data": {"url": "data/cars.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower","type": "quantitative"},
    "y": {"field": "Miles_per_Gallon","type": "quantitative"}
  }
});
var options = { "fixFirst": false };
console.log(gs.sequence(charts, options));

# graphscape.transition(source chart, target chart) <>

Generate a transition from a source Vega-Lite chart to a target Vega-Lite chart. The transition has the minimum edit operation costs.

The output is a ranked array of objects, each containing a sequence ordering and related metadata.

var gs = require('./graphscape.js')
var source = {
  "data": {"url": "data/cars.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower","type": "quantitative"},
  }
};
var target = {
  "data": {"url": "data/cars.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower","type": "quantitative"},
    "y": {"field": "Miles_per_Gallon","type": "quantitative"}
  }
};

console.log(gs.transition(source, target));

The app/ folder contains a sequence recommender web application. Given a set of input Vega-Lite specifications, it produces a recommended sequence intended to improve chart reading and comprehension. To run this app, first you should install bower components:

$ cd app
$ bower install

Next, launch a local webserver to run the application. For example:

$ python -m SimpleHTTPServer 9000 # for Python 2
$ python -m http.server 9000 # for Python 3

To use a custom build of graphscape.js, copy your new graphscape.js file and paste it into the app/js folder.

1. MATLAB is required to solve lp.m.
2. Install npm dependencies via npm install.
3. You can customize rankings of edit operations by modifying lp.js and running the following commands:

$ cd src/rule
$ node lp.js
$ matlab < lp.m
$ node genEditOpSet.js # This will generate editOpSet.js.

# After creating your rankings, you must re-build `graphscape.js` to apply changes.
$ cd
$ npm run test
$ npm run build

If you use GraphScpae in published research, please cite this paper.