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.
You've heard the saying "a picture is worth a thousand words" and it's no different when dealing with large amounts of data. Graph visualization allows us to literally see the data and its connections.
But not every graph visualization is created equally.
By applying advanced graph visualization techniques such as custom, data-driven UIs, a graph can provide context to your data and enable meaningful analysis in a way that reading tabular data or unformatted graphs cannot.
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:
We help our customers navigate these questions and more, nearly every day.
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.
Tom Sawyer Software has spent decades perfecting graph visualization techniques in our graph platform, Perspectives.
Perspectives is a low-code graph visualization and analysis development platform that enables developers to create custom graph applications to visualize their connected data.
Perspectives is optimized with high-speed graphics capabilities and HTML5 canvas graphics. Its extensive graph visualization customization features and advanced rendering framework provide flexibility in how nodes and edges are represented and ensure high performance when rendered in your graph application.
Perspectives also includes a tool chest of features that end users of your graph visualizations will find essential as they navigate the graph visualizations.
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.
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.
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.
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.
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.
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.
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:
A graph showing a selected node, a highlighted node, and a tooltip.
Once the visualizations are in front of your end-users, having additional tools at their disposal can enhance their experience and support them as they work with visualizations.
Perspectives platform provides these features that you can include in the resulting application.
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.
Save as Image
Print Setup
Print Preview
Open URL
Sign Out
Select
Pan
Navigate Links
Overview
Undo
Redo
Marquee Zoom
Interactive Zoom
Zoom In
Zoom Out
Zoom Fit
Layout Styles
Apply Analysis
Clear Analysis Results
Save Drawing
Load Drawing
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.
Editing tools are available for adding, deleting, and moving nodes and edges. The tools can be activated through a toolbar option or selection action.
At Tool — the user clicks a location in the drawing view to create a new node.
Between Tool — the user clicks a source node and then drags the mouse to the target node to create a new edge.
Delete Tool — the user selects the elements and uses this tool to remove elements from the drawing view.
Reconnect Tool — the user drags one end of the edge to a new node to change the source or target node of an existing edge.
Perspectives includes customizable dialogs for several types of user interactions:
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.
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.
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.
Copyright © 2023 Tom Sawyer Software. All rights reserved. | Terms of Use | Privacy Policy
Copyright © 2023 Tom Sawyer Software.
All rights reserved. | Terms of Use | Privacy Policy