WebGL2 Selection Styles Demo

This demo shows the available selection styles for nodes, edges, and labels in WebGL2 rendering.

In WebGL2, selections can be configured in various ways: There are multiple patterns to choose from, and colors, thickness, and margins are configurable. Additionally, selections can be activated and deactivated using animated transitions, and for the appropriate selection styles, a "marching ants" animation is available, too.

Things to Try

  • Configure the basic pattern used.
  • Experiment with the primary and secondary color and how they are used in the various selection styles.
  • Tweak the thickness and margin of the selection style.
  • Activate transitions, select and deselect various graph elements.
  • Activate the dash animation and select various graph elements.
  • Observe that only styles with repeating patterns along the selection visualization are animated.
  • Change the zoom policy and observe how the rendering of the selection is modified in the corresponding coordinate system.

In this demo, the same selection style is used for all graph elements. This is only a configuration in the demo, since with the API the styles for the different element types can be configured individually. See the updateSelectionStyles function in the demo source code.

Style Properties

Style Pattern

The style pattern defines the basic rendering of the selection visualization.

Style Pattern

Color Scheme

There are two configurable colors for a WebGL2 selection: primary and secondary. The primary color is used for solid strokes, dash patterns and as the inner stroke for border patterns. The secondary stroke is used as the background for dashed patterns and as the outer stroke for border patterns.

Primary
Secondary

Thickness and Margins

Transition and Animation

If transition is activated, the selection is activated and deactivated in a smooth manner. Dash animation activates a "marching ants" animation for dashed or striped styles. Easing configures the course of an animation.

Easing

Zoom Policy

The zoom policy determines in which coordinate system the selection visualizations are rendered. Mixed applies a heuristic in which world coordinates are used at large zoom levels and view coordinates are used at small zoom levels.

Zoom Policy