Animations

Using animations. you can show dynamic movement of the graph vertices and/or edges. You can apply animations through the settings filter.

Consider the following example which show a graph with the vertices’ stroke width animated:

// This import is not necessary if you are using Oracle JET.
import '@ovis/graph/alta.css';

import Visualization from '@gvt/graphviz';

const vertices = [
  {
    id: 1,
    properties: {
      label: 'blue',
      name: 'Hello',
      age: 10
    }
  },
  {
    id: 2,
    properties: {
      label: 'blue',
      name: 'World',
      age: 20
    }
  },
  {
    id: 3,
    properties: {
      name: 'Some Name',
      age: 30
    }
  }
];

const edges = [
  {
    id: 1,
    source: 1,
    target: 2
  },
  {
    id: 2,
    source: 2,
    target: 3
  }
];

const settings = {};
settings.baseStyles = {
  vertex: {
    label: { text: '${properties.name}' }
  }
};

settings.ruleBasedStyles= [
  {
    target: 'vertex',
    component: 'vertex',
    legendTitle: 'Vertex animation',
    animations: [[
      {
        duration: 1,
        keyFrames: [
          {
            percentage: 0,
            style: {
              strokeWidth: '3px'
            }
          },
          {
            percentage: 50,
            style: {
              strokeWidth: '7px'
            }
          },
          {
            percentage: 100,
            style: {
              strokeWidth: '3px'
            }
          }
        ]
      }
    ]],
    conditions: {
      // This rule is applied to all vertices.
      conditions: []
    }
  }
];

new GraphVisualization({
  target: document.body,
  props: { data: { vertices, edges }, settings }
});

You can configure the animation using the following values:

• duration: Defines the duration of the animation in seconds.

• keyframes: An array representing all the changes that have to be applied to the entity during the animation. The keyframes properties that need to be provided are:

• percentage: Represents at what percentage of the animation duration should the keyframe be applied. To generate smooth animations:

  • Multiple keyframes: Values must start from zero and end in 100.

  • Single keyframe: Percentage value must be 100.

  Note that this option is only meaningful when working with strokeDashoffset.

• style: Styles that need to be applied to the entity at each keyframe. The supported style properties are:

• strokeWidth: Defines the width of the stroke that surrounds the vertices and also the width of the edges. This can be passed as any valid css value (px is recommended).

• stroke: Defines the color of the stroke that surrounds the vertices and the edges.

• opacity: Defines the opacity on a scale of 0 to 1; 0 indicates that the element is completely hidden, while 1 signifies that the element is fully visible with maximum opacity.

• r (applies only for the vertices): Defines the radius of the vertices to which it is applied.

• strokeDashoffset (applies only for the edges): Defines the amount of offset that has to be applied to the dashed pattern on the edges. Negative values make the offset go in the opposite direction. Note that you must apply the dashed pattern to the edges for this animation to be visible. Otherwise, nothing will appear on the graph.

The following example describes how to apply edge animation using strokeDashoffset:

// This import is not necessary if you are using Oracle JET.
import '@ovis/graph/alta.css';

import Visualization from '@gvt/graphviz';

const vertices = [
  {
    id: 1,
    properties: {
      label: 'blue',
      name: 'Hello',
      age: 10
    }
  },
  {
    id: 2,
    properties: {
      label: 'blue',
      name: 'World',
      age: 20
    }
  },
  {
    id: 3,
    properties: {
      name: 'Some Name',
      age: 30
    }
  }
];

const edges = [
  {
    id: 1,
    source: 1,
    target: 2
  },
  {
    id: 2,
    source: 2,
    target: 3
  }
];

const settings = {};

settings.baseStyles = {
  vertex: {
    label: { text: '${properties.name}' }
  }
};

settings.ruleBasedStyles = [
  {
    target: 'edge',
    component: 'edge',
    legendTitle: 'Edge animation',
    style: {
      dasharray: 'dashed'
    },
    animations: [
      [
        {
          duration: 1,
          keyFrames: [
            {
              percentage: 100,
              style: {
                strokeDashoffset: 50
              }
            }
          ]
        }
      ]]
    ,
    conditions: {
      conditions: []
    }
  }
];

new GraphVisualization({
  target: document.body,
  props: { data: { vertices, edges }, settings }
});