yFiles for HTML Demos

The Event Timeline demo provides a tabular representation of a dynamic, time-dependent graph.

Core Concepts:

• Nodes (Entities): Represented as labeled, parallel horizontal line segments spanning the canvas width.
• Edges (Events): Represented as labeled, parallel vertical line segments connecting the source and target nodes' line segments.
• Temporal Mapping: The x-coordinate of an edge is determined by its timestamp. Edges closer in x-space occur closer in time, while edges further apart occur further apart in time.

You can run this demo online at https://www.yfiles.com/demos/showcase/event-timeline/.

The Large Collapsible Tree Demo demonstrates how to display and manipulate large tree graphs using WebGL as the rendering technique to optimize performance. It is designed to handle up to 250,000 nodes.

Key features include:

• WebGL Rendering: Uses WebGL to maintain high performance with large datasets.
• Layer Manipulation: Users can add or remove layers to control the depth of the tree.
• Animated Transitions: Adding and removing nodes is accompanied by parallel layout and WebGL fade animations.
• Dynamic Scaling: The number of children added to each leaf can be adjusted via a slider control.

The GraphWizard for Flowchart demo demonstrates how to customize graph defaults and input gestures to facilitate the rapid creation of flowchart diagrams using yFiles for HTML.

Key features demonstrated include:

• Context-sensitive input gestures: Managed by a GraphWizardInputMode which filters available actions based on pre-conditions for specific graph items.
• Dynamic Legend: Displays all active actions and their corresponding keyboard shortcuts. The legend is automatically hidden while an action is being executed.
• Contextual UI Buttons: Buttons for specific actions appear near the current model item when an action is active. These can be navigated via the Tab key and activated with Enter.

The Large Graphs Demo demonstrates how to display large-scale graphs by combining WebGL and SVG rendering to balance performance and visual quality.

• WebGL Rendering: Used at small zoom levels (when elements are small on screen) to maintain high performance by rendering many elements efficiently.
• SVG Rendering: Automatically switches in when the user zooms in above a specific threshold. SVG provides high-fidelity vector graphics, crisp text, and detailed node information that WebGL omits.

Users can manually disable SVG rendering via the toolbar if they prefer to use WebGL for all zoom levels.

The Metaball Groups Demo demonstrates how to render metaball-like background visualizations in yFiles for HTML. This technique is used to visually associate nodes with zero or more groups.

Key Characteristics:

• Non-structural Groups: Unlike regular group nodes, these groups do not exist in the underlying graph structure; they are purely a visualization layer.
• Multiple Membership: A single node can belong to multiple metaball groups simultaneously.
• WebGL Requirement: This demo requires WebGL for efficient rendering of the metaball effects.

The Isometric Drawing Demo showcases how to display graphs isometrically in yFiles for HTML, adding a third dimension (height) to the visualization. This technique can be used to represent business data characteristics as height or to enhance visual aesthetics.

Key technical details:

• Rendering: Uses WebGL for performance, but the yFiles for HTML projection feature also supports SVG and HTML Canvas rendering.
• Interactions: Supports the full range of standard yFiles interactions, plus custom handles on nodes to manipulate height.

The Gantt Chart demo demonstrates how to construct a Gantt component using JSON data. The implementation uses tasks to define horizontal lanes and activities.

Key data components include:

• Tasks: Define the horizontal lanes.
• Activities: Assigned to tasks, containing a start date, an end date, and optional lead or follow-up times.
• Dependencies: Modeled as edges between activity nodes.

Visual representations:

• Activity Duration: Rendered as a solid area.
• Lead/Follow-up Times: Rendered with a hatch pattern.
• Dependencies: Rendered as edges connecting activities.

The Hierarchical Subcomponents Demo demonstrates how to use hierarchical layout to arrange selected subcomponents of a graph using various layout styles. It showcases how subcomponents can be treated as distinct units within a larger graph layout.

Key Features

• Multiple Layout Styles: Apply different styles to subcomponents, such as tree, organic, orthogonal, or a hierarchical style with custom settings that differ from the main graph layout.
• Subcomponent Placement Policies: Defines how subcomponents are positioned relative to the rest of the graph. For example, if subcomponents are connected to a single node (indicated by light blue and green colors), the layout engine can place them to the left or right of that node.

The Tree of Life demo is an interactive radial dendrogram visualization designed to show biological relationships (ancestors and descendants) between species.

Key technical features:

• Rendering: Uses WebGL for high-performance rendering of graph elements if supported by the browser. It falls back to SVG rendering if WebGL is unavailable.
• Visualization Type: Radial dendrogram.
• Online Access: Can be run directly via the yFiles online playground.