timingKeyframe

Execute continuous transition animations between different views. Use mark.key and mark.groupKey to associate graphics.

Getting Started

fetch(
  'https://gw.alipayobjects.com/os/bmw-prod/fbe4a8c1-ce04-4ba3-912a-0b26d6965333.json',
)
  .then((res) => res.json())
  .then((data) => {
    const chart = new Chart({
      container: 'container',
      paddingTop: 60,
      paddingLeft: 100,
    });

    chart.options({
      type: 'timingKeyframe',
      direction: 'alternate',
      iterationCount: 4,
      children: [
        {
          // Bar chart
          type: 'interval',
          data: data,
          transform: [{ type: 'groupX', y: 'mean' }],
          encode: {
            x: 'gender',
            y: 'weight',
            color: 'gender',
            // Specify key
            key: 'gender',
          },
        },
        {
          // Scatter plot
          type: 'point',
          data: data,
          encode: {
            x: 'height',
            y: 'weight',
            color: 'gender',

            // Specify the key for the merged bars
            groupKey: 'gender',
            shape: 'point',
          },
        },
      ],
    });

    chart.render();
  });

Options