-
Notifications
You must be signed in to change notification settings - Fork 6
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 enumerator
to repeat with new filtering values. It takes name
(string) of the corresponding enumerator of enumerators
.
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": { ... },
"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. |
| 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}
.
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.
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 . |