Interactive Diagram Visualization
Designing a nice user experience for viewing and editing network data
Diagrams (or graphs) provide an intuitive way of describing complex relationships between a collection of items. They usually consist of a set of nodes (or vertices) and edges (or links) that connect different nodes to describe a specific relationship. Additional text labels add further value to the elements.
Diagrams benefit from adding interactivity to them. Due to the descriptive nature of this data format, it is easy for users to navigate it, focus on local structures, or identify transitive connections. Ideally, it also allows the user to modify the given data model without any technical knowledge.
Utilizing a Sophisticated Visualization Solution
A comprehensive visualization solution provides all the means to create a diagram tailored to user’s requirements while it also allows creating interactive diagram applications with high-quality functionality.
yFiles is a commercial diagramming library that provides all the necessary tools to develop applications that can create, visualize, and automatically arrange the elements of a diagram. Users can benefit from the versatile interaction capabilities of the library that allow them to easily create, edit, and handle diagrams with simple mouse, keyboard, and touch gestures. It also provides built-in support for fundamental interaction operations like zooming and panning, undo/redo, etc. However, everything about the interaction is extensively customizable to the user’s requirements in case the built-in gestures don’t suffice.
How to Explore Diagrams With Growing Complexity
With growing size and complexity, a static diagram becomes increasingly harder to grasp. It also requires a lot of space, and thus, textual annotations become very small and sometimes entirely unreadable, making most of the information useless.
Basic navigation features like zooming, panning, and scrolling provide immediate relief. These features help the users to orient themselves in a large graph but also allow them to inspect specific details of the diagram.
yFiles provides an out of the box solution for intuitive navigation. It also allows detailed adjustments to the overall experience, e.g., collapsing/expanding of grouped elements, adding a drill-down interaction, showing a local neighborhood and many more.
Interactive Diagram Creation
Creating diagrams with image editing software can be very tedious and often requires in-depth knowledge of the software even for simple drawings. A custom diagramming application can simplify this process so that anyone can quickly create a diagram with just a few clicks.
yFiles built-in editor capabilities allow users to edit diagrams with keyboard, mouse, or touch interaction. For example, nodes can be created by just clicking the empty canvas while relationships with merely a simple drag gesture from one item to another. Furthermore, text can easily be added to selected elements, as well. The Diagram Editor sample application highlights the basic diagram creation capabilities.
All aspects from higher-level gestures down to specific details are highly customizable. For example, limit node creation to particular areas, or only allow deletion of unconnected nodes.
Aligning Elements
Interactively created diagrams with software not tailored towards diagram creation often yields chaotic and not very well aligned results. The perception of those diagrams is mostly negative, and the contained information is sometimes not readable anymore.
Alignment guidelines help to arrange diagram items interactively without running an automatic layout by providing useful lines and position hints to which diagram elements snap.
Alignment guidelines can either align the items to each other or provide a global grid to which they can be aligned. Furthermore, yFiles allows defining arbitrary guidelines, e.g., adding movable lines that may be dragged from a ruler visualization.
Undo and Redo
A core aspect of creating diagrams is to easily modify the outcome and try to find the best possible arrangement and styling of the elements. In this context, it is helpful if the user can undo or redo changes. However, providing an undo-redo engine can become a real challenge because the diagram must be valid when undo or redo the recent changes.
In custom application scenarios, there may even be more complex changes and states that need to be considered during interactive diagram creation. Therefore, yFiles does not only provide a basic undo-redo mechanism but also allows detailed adjustments for more complex use cases.
Copy and Paste
A commonly used feature in interactive applications is the clipboard for actions like cut, copy, paste, or duplicate diagram items. The clipboard enables the user to quickly create and extend existing diagrams without the need for re-applying specific attributes or styles to new items.
The built-in clipboard of yFiles does not only provide all common clipboard actions but also allows for in-depth customization. For example, it considers the context in which the element is copied, or offers a direct copy of an attached business data.
Drag and Drop into Diagrams
A vivid way of creating diagrams is to drag and drop elements onto the canvas. This interaction is familiar to the user and does not need a particular introduction due to the visual feedback.
yFiles supports drag and drop items from a palette onto the canvas. Dropping a node onto a group node will also automatically create the new node as a child of the group. Snap lines help the user to align new items during the gesture.
The BPMN Diagram Editor sample utilizes a palette to provide the different BPMN entities for easy drag and drop into the diagram.
Selecting Items
Creating and editing diagrams can be accelerated by selecting multiple items at once and applying a specific action to the entire selection.
With yFiles, the user can select items with a single click or use marquee (rubber-band) selection to select multiple items with a single gesture. Selected items can be manipulated and moved as a whole.
Similar to all other features mentioned above, it is possible to customize the selection mechanism. The application can easily add specific rules to decide if and which item can be selected.
Add a Context Menu For Improved Accessibility
A sophisticated application gets more and more crowded with a growing set of tools and features, although many of them are only applicable in a specific context. A context menu can help to reduce the overall complexity and visual clutter as well as guide the user during the interactive diagram creation.
yFiles supports context menus on arbitrary diagram items. The context menu can contain entries depending on the selected item, its type, its business data, or anything else.
Besides the basic context menu, the flexibility of the yFiles provides adding contextual toolbars to elements, as demonstrated in the Contextual Toolbar sample application.