Staggering

Staggering

let staggering = {
  "name": "an_user_defined_name",
  "by": fieldName, // or { "initial": fieldName },
  "order": "ascending",
  "overlap": 1, // should be a number in (-Infinity, 1]
  "ease": "cubic", // or "linear", "quadIn", "quadOut", ...
  "staggering": staggering2
};

The staggering technique, which gives an individual delay to each mark, is usually exploited to limit the number of moving marks and reduce the overlaps between them. Upon these purposes, we allow staggerings to group the movements of the marks by data fields. See some examples here.

Property	Type	Description
name	String	The identifier to be referred from the steps in timeline
by	String / Object	Set the field to stagger by. You can also refer either an initial field (from the datum before changing) or an final field (from the datum after changing) of the moving mark.
order	String	Set the order. Either "ascending" or "descending". (default: "ascending")
overlap	Number in (-Inf, 1]	Determines how much the following mark/group will be overlapped by the preceding marks(/groups). 1: means all marks move at the same time. 0: means marks move one by one without intermission. <0: gives a delay between the end of i-th and the start of (i+1)-th.
ease	String	The ease function assigning the delays and durations of individual marks/groups. For example, if ease is quadOut, the duration of each marks/groups getting short as the animation being progressed. linear is the default such that assigns the same amount of time per mark.
staggering	Staggering Object	Nest the staggering within each group that formed by by.

Here is an example of nesting the staggering such that it starts the moves of each gender at the same time while moving one-by-one according to "name" in ascending way.

let nestedStaggering = {
  "name": "example",
  "by": {"initial": "gender"},
  "overlap": 1,
  "staggering": {
    "by": {"initial": "name"},
    "overlap": 0
  }
}