-
Notifications
You must be signed in to change notification settings - Fork 6
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).
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.
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. |
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. |
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}}
}
}
}
}
-
update
: The defaults are the values from the start and the end visualizations. -
enter
,end
: The default are the same as theupdate
except foropacity
. Theexit.opacity
andenter.initial.opacity
is{"value": 0}
.
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 . |