Name: graphscape
Owner: UW Interactive Data Lab
Description: A directed graph model of the visualization design space, using Vega-Lite.
Created: 2016-01-15 03:50:47.0
Updated: 2017-11-17 14:56:39.0
Pushed: 2017-05-08 15:16:41.0
Size: 14029
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
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.
# 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.
| Parameter | Type | Description |
| :——– |:————-:| :————- |
| charts | Array | An array of Vega-Lite unit charts. |
| options | Object | { "fixFirst": true / false }
fixFirst: indicates whether the first chart in charts should be pinned as the first chart of the recommended sequence (true) or not (false).|
| editOpSet | Object | (Optional) Specifies custom rules for calculating sequence costss |
| callback | Function | (Optional) function(result) { ... }
A callback function to invoke with the results. |
The output is a ranked array of objects, each containing a sequence ordering and related metadata.
| Property | Type | Description |
| :——– |:————-:| :————- |
| charts | Array | The given input charts.
If options.fixFirst was false, a null specification for an empty chart is included as the first entry. |
| sequence | Array | Order of indexes of input charts. |
| transitions | Array | Transitions between each pair of two adjacent charts with id. |
| sequenceCost | Number| Final GraphScape sequence cost. |
| sumOfTransitionCosts | Number | Sum of transition costs. |
| patterns | Array | Observed patterns of the sequence.
Each pattern is consist of pattern, appear, coverage, and patternScore.
pattern : An array of transition ids composing the pattern.
appear : An array of indexes of transitions where the pattern appears in the sequence. coverage : How much the pattern cover the sequence.patternScore : Final pattern score, which is the same as coverage now. |
| globalWeightingTerm | Number | Global weighting term. |
| filterSequenceCost | Number | Filter sequence cost. |
| filterSequenceCostReasons | Array | Sum of filter value change score
Increment of value : +1
Decrement of value : -1
Otherwise : 0|
gs = require('./graphscape.js')
charts = []; // an array of Vega-Lite charts
ts.push({
ata": {"url": "data/cars.json"},
ark": "point",
ncoding": {
"x": {"field": "Horsepower","type": "quantitative"},
ts.push({
ata": {"url": "data/cars.json"},
ark": "point",
ncoding": {
"x": {"field": "Horsepower","type": "quantitative"},
"y": {"field": "Miles_per_Gallon","type": "quantitative"}
options = { "fixFirst": false };
ole.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.
| Parameter | Type | Description | | :——– |:————-:| :————- | | source chart | Object | A Vega-Lite unit chart. | | target chart | Object | A Vega-Lite unit chart. |
The output is a ranked array of objects, each containing a sequence ordering and related metadata.
| Property | Type | Description | | :——– |:————-:| :————- | | mark | Array | Edit operations in mark category. | | transform | Array | Edit operations in transform category. | | encoding | Array | Edit operations in encoding category. | | cost | Number | Sum of all costs of edit operations in this transition. |
gs = require('./graphscape.js')
source = {
ata": {"url": "data/cars.json"},
ark": "point",
ncoding": {
"x": {"field": "Horsepower","type": "quantitative"},
target = {
ata": {"url": "data/cars.json"},
ark": "point",
ncoding": {
"x": {"field": "Horsepower","type": "quantitative"},
"y": {"field": "Miles_per_Gallon","type": "quantitative"}
ole.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:
app
wer install
Next, launch a local webserver to run the application. For example:
thon -m SimpleHTTPServer 9000 # for Python 2
thon -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.
lp.m.npm install.lp.js and running the following commands: src/rule
de lp.js
tlab < lp.m
de genEditOpSet.js # This will generate editOpSet.js.
ter creating your rankings, you must re-build `graphscape.js` to apply changes.
m run test
m run build
If you use GraphScpae in published research, please cite this paper.