Description

This demo shows how to use WebGL2 animations to highlight interesting parts of a graph.

The graph consists of several components, which are calculated after loading the graph. These could also be calculated using the ConnectedComponents class.

(A graph is called connected if there exists an undirected path of edges between every pair of nodes. The connected components of a graph are the maximal connected subgraphs of which the graph consists.)

The currently hovered component (or the rest of the graph) can be highlighted with various WebGL2 animation types.

Note, that the animated items all share the same WebGL2Animation object.

Things to Try

  • Hover over a component and observe the animation.
  • Select different animations types for highlighting the currently hovered component:
    • For the component itself, "Pulse" or "Shake" are fitting animations.
    • Use different "Fade" animations and hide or desaturate a component to bring this component to attention.
  • Note that for fade animations, shorter animation durations are more noticeable.
  • Experiment with other animation configurations, to achieve the desired effect.
Legal Disclosure | Privacy Policy | View on GitHub

Configuration

Animated Graph Parts

Animation Type

Choose one of the available basic animation types.

Animated Elements

Choose the graphical elements of the animated graph part. Not available for 'Shake'.

Fade Type

Choose the fade target. I.e. what to fade to or from. Not available for 'Pulse' and 'Shake'.

Fade Direction

Choose, whether to fade to an effect or away from it. Only available for "Fade" animations.

Fade Colors

Choose two colors that mark the range of color values to or from which a fading animation will change the original colors. That means when color 1 and color 2 are different grey values, the result is a greyscale version of the original graph.


Animation Frequency

Choose the animation frequency. Not available for fade animations.

Animation Magnitude

Choose the animation magnitude. Not available for fade animations.

Animation Duration

Choose the time that the animation will take.

Your browser or device does not support WebGL2.
This demo only works if WebGL2 is available.
Please use a modern browser like Chrome, Edge, Firefox, or Opera.
In Safari, WebGL2 is an experimental feature that needs to be activated explicitly.