Timeline & Block

Timeline

let spec = {
  "timeline": block
  ...
}

Gemini conducts the animation by following timeline. It takes a block, which is a group of synchronized/concatenated steps or a single step.

block

let syncBlcok = {
  "sync": [ ...steps_to_be_synchronized ],
  "anchor": "start" // or "end" (defulat is "start"). It decides the anchors to synchronzie
}

let concatBlock = {
  "concat": [ ...steps_to_be_played_consecutively ],
  "autoScaleOrder": [ ... ], // optional (default is undefined)
  "enumerator": enumeratorName // optional
}

let singleStepBlock = step;

block is a group of synchronized/concatenated steps or a single step. Here is an example block composing five steps (A,B,C,D,E).

let timeline = {
  "sync": [
    A,
    {
      "sync": [ 
        { "concat": [B, C] }, 
        D 
      ],
      "anchor": "end"
    },
    E
  ]
};

/*
The order of the execution will like this:
|--A--|
|---B---|--C--|
    |----D----|
|----E----|
*/

autoScaleOrder

When a scale changes guide components (e.g., axes and legends) and marks with separate steps, we have to consider if the marks exceed the scales of the guides. For example, imagine a transition of a bar chart where a bar representing 70 with [0, 80] axis changes to 40 with [0, 50] axis. If the axis decreases before the bar decreases, the 70-long bar might exceed the axis. As a result, the animation authors need to modify the order depending on scales and data chagnes.

However, there are situations when data changes are unpredictable. For example, when using live data, or when customers import their own data. For these cases, autoScaleOrder of the concat blocks enables Gemini to search the order to avoid the exceeding problem.

let concatBlock = {
  "concat": [ ... ],
  "autoScaleOrder": [ "the_name_of_the_mark_component", ...],
}

It takes an array of the names of the mark components that should be investigated if they exceed the scale or not. Here is an example.

enumerator

The concat block can specify an enumerator to repeat the defined sub-blocks with enumerated filtering values. It takes name (string) of the corresponding enumerator of enumerators.