Step

Step

let step = {
  "component": { ... },
  "change": { ... },
  "timing": { ... }
}

Steps are units composing the whole transitions. Each of them represents the change of the graphic component (e.g., axis, legends, and data marks) with timing (e.g., duration, delay).

Component

let step = {
  "component": { "__marktype__": "name"}, //or a string
  ...
}

Steps refer to the graphic elements through component. It takes an object which has a key as the role of the referring mark (e.g., "mark", "axis", "legend"), and its value as the unique name of the mark, which corresponds to the name of each Vega component.

There are two special components: view ({component: "view"}) and pause ({component: "pause"}). View is to control the size of the view, and pause is a dummy that do nothing but spends time to give a pause between steps.

Change

let step = {
  ...
  "change": {
    "data": { ... },
    "encode": { ... },
    "scale": [ "x", ... ],
    "marktype": true, // or false
    "signal": [ ... ],
    "enumerator": enumeratorName
  }

}

Property	Type	Description
data	Object	See Data Subsection
encode	Object	See Encode Subsection
scale	Bool / Array	Change the scales of the marks. It takes the names of the scales to change. false will prevent the change. true is the default that will change all the scales that are applied.
marktype	Bool	Change the marktype of the components. Unspecified marktype will use the default (true) values.
signal	Bool / Array	Change the signals used in the encoding of the marks. false will change none of the signals. true is the default which will change every signal.
enumerator	String	Enumerate the changes of the data. It takes name (string) of the corresponding enumerator of enumerators.
sameDomain	Bool	(Only work with axis components.) true/false indicates that the domain unit of the axis will be the same/different. If the domain unit is the same, the axis will be animated to change its scale gradually. If not, it will be animated by fading out and in.

Data

let data = {
  "keys": [ "field1", "field2", ... ],
  "enter": true, // default: true
  "exit": true, // default: true
  "update": true, // default: true
}
// when using the defaults, it is the same as the below:
data = [ "field1", "field2", ... ]

(Only work with mark components.) Control the data changes of mark components. When data change, Gemini join the corresponding data sets and return into three sets (same as D3): enter (inserted data), exit (removed data), and update.

Property	Type	Description
keys	String[]	Unless the data are aggregated, grouped by (like line charts), it requires keys joining old and new data as an array of data fields. The default is: aggregated/grouped -> the groupby fields, otherwise -> index.
enter/exit/update	Bool	true (default) allows enter/exit/update. false ignores it.

Encode

let encode ={
  "update": {
    "x": { ... },
    ...
  },
  "enter": { ... },
  "exit": { ... }
}

encode allows to (manually) set the encoding of the graphic objects for the enter/exit/update data. Each selection can take an encode object (same as Vega marks, axes and legends) which specifies the following visual property of the corresponding marks. If unspecified, it will interpolate the properties to the end visualization. If false is assigned, it will apply the encoding of the start visualization.

Only enter set can take initial property to manually set the initial value of the newly entered data. If it is not specified, Gemini will use default initial values.

Here is an example step that interpolates the newly introduced marks' x attribute from 0 to its final values while fading in (increasing opacity by the default).

let step = {
  "component": {"mark": "a_mark"},
  "change": {
    "data": ["id"],
    "encode": {
      "enter": {
        "initial": {"x": {"value": 0}}
      }
    }
  }
}

Default Values

• update: The defaults are the values from the start and the end visualizations.
• enter, end: The default are the same as the update except for opacity. The exit.opacity and enter.initial.opacity is {"value": 0}.

Timing

let step = {
  ...
  "timing": {
    "duration": ...,
    "delay": ...,
    "staggering": ...,
    "ease": ...
  }
}

Property	Type	Description
duration	Number / Object	(Required) The duration of the step. It can be a number (milliseconds) or an object specifying the ratio to totalDuration in the root. (e.g., {"ratio": 0.3})
delay	Number / Object	The duration of the step. It can be a number (milliseconds) or an object specifying the ratio to totalDuration in the root. (e.g., {"ratio": 0.3}) Default is 0.
ease	String	Name of the ease function. The default is "cubic". (see https://github.com/d3/d3-ease)
staggering	String	Stagger the changes of the marks. It takes name (string) of the corresponding staggering object in staggerings.