Step

Step

let step = {
  "component": { ... }, 
  "change": { ... }, //default: change all from the start state to the end state)
  "timing": { ... }, 
  "enumerator": enumeratorName //optional
}

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).

A step can specify an enumerator to repeat with enumerated filtering values. It takes name (string) of the corresponding enumerator of enumerators.

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": { ... },
    "marktype": true, // or false
    "signal": [ ... ]
  }

}

Property	Type	Description
data	Object	See Data Subsection
encode	Object	See Encode Subsection
scale	Object / Bool / Array	See Scale Subsection
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.

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. Here is an example.

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' y attribute from 0 to its final values while fading in (increasing opacity by the default).

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}.

Scale

// for marks and legends
let scale = [ "x", ... ];
// or
scale = {
  "x": { "data": __use_new_data_to_calculate_scale__ }, // (default: true)
  ...
};

Since mark and legend components can use multiple scales, users can specify which scale to change by providing an array of the scale names. false prevents the all scale change. true is the default that change all the scales that are applied.

If the scale change is defined as an object, users can specify whether the new scale will be calculated by the new data or the existing old data. Here is an example using data, where it sets data as false to maintain the y-scale to have all nominal values while being changed (sorted).

// for the axis step
let axisScale = { 
  "domainDimension": "same", // or "diff" (default: gemini automatically infers)
  "data": __use_new_data_to_calculate_scale__ // (default: true)
};

Since axes use only one scale, it only can specify whether change or not. false prevents the change, and true (default) changes.

Using domainDimension, users can indicate that the domain dimension (e.g., cm, kg, the number of data, ...) 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.

Similar as in the mark and legend scale changes, data specify whether the new scale will be calculated by the new data or the existing old data.

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.