Recommendation

Recommendation

Gemini provides a recommendation feature that enumerates the candidate animation designs of the transition between the given two Vega visualizations in Gemini grammar. It sorts the candidates by their evaluated effectiveness. You can start your animation design by exploring the recommendations first. Then, you can select one of them to customize it.

const recommendations = gemini.recommend(
  sVis,
  eVis,
  options
);

console.log(recommendations.gemSpecs);
// [ geminiSpec1, geminiSpec2, ... ]

Property	Type	Description
sVis/eVis	Vega Spec	The start/end visualization specification in Vega. Currently, Gemini only supports the specs compiled from Unit Vega-Lite Spec.
options	Object	See options subsection

Options

let option = {
  maxStageN: ...,
  axes: {
    __axisName__: { change: { sameDomain: ... } },
    ...
  },
  marks: {
    __markName__: { change: { data: [ ... ] } },
    ...
  },
  totalDuration: ...,
  includeMeta: ...
}

Property	Type	Description
maxStageN	Integer	Set the maximum number of stages of the recommended animation design. The default is 2. To get more sophisticated/complex candidate designs, try 3+.
axes	Object	Set change.sameDomain of the corresponding axis component (__axisName__) . Default is false.
marks	Object	Set change.data of the corresponding mark component (__markName__) . Default is undefined which using the indices of the data as the join key.
totalDuration	Number	The total duration of the recommended animation design. Default is 2000ms.
includeMeta	Bool	Include the meta information such as evaluated costs of each step and the whole design. Default is false.

APPENDIX.1: How It Works

First, Gemini identifies the changes of each corresponding components between the start visualization and the end visualization. It separate the changes into unit changes of each component. Here are the list of the unit changes:

Component	Unit Changes
Mark	marktype, data, scale.y, scale.x, scale.color, scale.shape, scale.size, encode.x, encode.y, encode.color, encode.shape, encode.size, encode.opacity
Axis	scale, add, remove, encode
Legend	scale, add, remove, encode

Then, Gemini enumerates the possible staged timelines with the specified number of stages (= stageN). It permutates the detected unit changes into the stages while eliminating the illegal combinations. After enumeration, it appends the view steps on the stages that change the size of the view.

Finally, Gemini evaluates the enumerated timelines with a heuristic function. It represents a perception cost as the degree of the effort that audiences should pay to identify the changes in the animation. Our heuristic for the cost function assumes that:

• Cost & Capacity: Each change unit has a cost, and people have a capacity per stage for identifying the change units.
• Bundling Effects: Some animated changes are easier/harder to be perceived when they are bundled (synchronized).

We set the costs of the unit changes by considering GraphScape's edit operation costs. For the bundling effects, we consider the design guidelines of Heer & Robertson [2007]'s work and our mere preferences.

APPENDIX.2: Future Works

1. Currently, Gemini can not compare the cost across the animation designs with different numbers of stages. It might be fairly comparable if we assume one more:

• Capacity as f(Duration): The capacity monotonically increases along with the duration of the stage (d cd dur0) while having a positive intercept (c(0) >0).

2. The more nuanced recommendation may be possible by defining more specific unit changes with their costs.