What is graph visualization?
Graph visualization is a way to visually represent the connections between entities in data. Typically, entities are represented as nodes and the connections between nodes are represented as edges. The resulting picture of these nodes and edges is a graph.
Graphs are everywhere, spanning use cases such as the graph of connections in a computer network, a social network, a fraud ring, steps in a process, or an organizational hierarchy.
A graph visualization where different visual treatments are used to distinguish between different types of entities and connections.
Graph and data visualization best practices
Graph and data visualization can be daunting if you are new to the concept and thinking about including graphs as part of your digital transformation or data analysis initiative.
There are a number of aspects you should consider as you start down this path:
- What is the best and most intuitive way to visually and graphically represent your data?
- Is there a common mental image shared by the people who will be looking at the graph?
- What do users want to gain from the data and graph drawing?
- Are there additional tools or information to help users draw meaningful conclusions from the visualizations?
We help our customers navigate these questions and more, nearly every day.
Graphics Specialized for Your Graph Data Application
Perspectives is optimized with high-speed graphics capabilities and HTML5 canvas graphics to create the best in class graph visualizations for your application. You can use Perspectives HTML classes embed the visualization components into your web application and when the HTML class is assigned to any HTML tag, such as <span> or <div>, the tag will be interpreted as a component, regardless of its type.
With Perspectives, you can create beautiful visualizations of your graph data
Perspectives advanced node and edge user interfaces (UIs) enable you to easily define a distinctive graphical appearance and interactive behavior for graph elements that resonates with the end users of your graph application.
Perspectives provides the following UI customization features:
A swimlane graph of a potential fraud ring.
Choose from pre-configured node and edge UIs
Many out-of-the-box node and edge UIs are provided with the Perspectives Designer. Choose from Activity Diagram, Class Diagram, Network, Organizational Chart, and Basic Shapes for nodes.
Edge types include straight, flowing, curved, dashed, with and without arrows, and more.
Use your own images
Customize edge UIs
Using edge templates, you can customize the style, line thickness, color, add arrows, crossing style, and more to be as precise as your visualizations demand. When edge direction matters, configure edge UI properties differently for source and target nodes.
Apply different node and edge templates to highlight key entities
Multiple node and edge templates give you flexibility to apply different UI templates in different situations. Node UIs can show status, properties, or adjust size or color from the data or as result of graph analysis to draw the users attention to and highlight key results.
Customize node and edge colors
Customize font and font size
Supercharge your graphs with data-driven graphics
When dealing with dynamic data, it's essential to provide visual clues to users that highlight important aspects of the graph elements. For example, you may want to highlight capacity or load, as seen in this microwave network example.
You can define node and edge UI element properties that are evaluated when a UI is displayed. Using expressions that consist of functions, the UI can be rendered differently based on drawing element properties and attributes.
In this example, nodes are colored by location, edges are colored by load, and edge thickness reveals capacity so users see trouble spots at a glance.
Configure UIs with different levels of detail
Seeing the super structure of the graph is important, but you don't want it cluttered with unreadable information.
Perspectives supports level of detail UIs so you can show more or less information as users zoom in to or out of the graph drawing.
Zooming in shows more details for nodes in this graph.
Enhance graph drawings with visual cues
Sometimes it's the small details that can make a big difference to your end users. Perspectives provides a comprehensive set of options that add additional value to your graph visualizations, including:
- HTML-formatted tooltips
- Selection highlighting
- Hit-testing
- Hover effects
A graph showing a selected node, a highlighted node, and a tooltip.
Customizable toolbar options
Each application built with Perspectives can have multiple toolbars that are fully configurable and are tailored for the context in which they are used.
And, mnemonics and shortcuts can be defined to activate toolbar items.
Graph animations
Animation can help users preserve their mental map of the graph. When a user runs one of the graph layout styles, the layout can be animated as elements change position on the screen and the layout switches from one style to another.
Make your application interactive with dialogs, context menus, and invokable views
Perspectives includes customizable dialogs for several types of user interactions:
- Showing information
- Asking the user for confirmation
- Asking the user for input
You can also create a customizable, invokable dialog which can contain a drawing, inspector, table, tree, timeline, map, or chart view.
A context menu consists of a hierarchy of menu items that can be invoked with selection of a node or edge, and you can choose from the prebuilt menu items that come with Perspectives, or you can use Perspectives APIs to add your own menu items.
An example application built with Perspectives showing an invokable view dialog.
Advanced customization options
Advanced JavaScript resources
For even more configurability, Perspectives supports JavaScript functions to invoke commands in your web application, such as Layout, ActivateTool, RunAnalyzer, OpenHtmlDialog, and many more.
JavaScript callback functions are supported, and you can use JavaScript functions when developing a web application in pure HTML or JavaScript, or when using Dojo, JQuery, Ext-JS, or another JavaScript framework to host Perspectives data visualizations.
You can find additional details in the documentation.
Cascading Style Sheets (CSS)
When incorporating visualization into your existing application, you can use CSS to style your visualization components.
Inherit from your application CSS to adjust content size, spacing, color, and font or add decorative features, such as animations or split content into columns.