Graph Visualization

Reveal insights with graph visualization to understand the structure and patterns in your data.

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 representing a series of tweets

A graph visualization representing a series of tweets.

Why does graph visualization matter?

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. 

Drag the slider below to see the before and after.

Custom graphics and visualization techniques can transform tabular data into a highly informative graph visualization.

Effective graph visualization increases understanding

Effective graph visualization increases understanding.

Accelerate understanding with graph-based techniques

Graph drawings are becoming an increasingly critical component used by enterprises to understand their data. Graphs are everywhere in the natural world and they are easy for people to understand. There are many, well-vetted graph techniques that are excellent for modeling and problem solving. 

Today, many industries understand the importance of and are benefitting from graph visualization, including Business Intelligence, Digital Transformation, Digital Engineering, Manufacturing, Finance, Life Sciences, and Government.

Tom Sawyer Software has the graph visualization tools and experience to guide you on your graph journey

 

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 React web client framework provides a rich, front-end rendering and interaction which can be integrated into web application environments such as React or Angular applications. In addition, JavaScript APIs support integration at the HTML level.

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. 

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 resonate with the end users of your graph application.

Perspectives provides the following UI customization features:

A swimlane graph of a potential fraud ring.

A swimlane graph of a potential fraud ring.

 

Choose from pre-configured node and edge UIs.

 

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.

 

Use your own images

If you require something other than the out-of-the-box node and edge UIs, you can upload a custom image and use the myriad of style, color, and font options to create a look that aligns with the mental map of your end users.

 

Customize edge UIs.

 

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.

 

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 a result of graph analysis to draw the users attention to and highlight key results.

 

Customize node and edge colors.

 

Customize node and edge colors

Apply brand- or context-appropriate colors to node and edge UIs, including fill color, line color, and font color. Use the color-picker to choose from the standard color palette, or specify the color code. Perspective supports RGB, HSV, HSL, and CMYK color systems.

 

Customize font and font size.

 

Customize font and font size

Add text to your node and edge UIs, including dynamic text from model attributes, labels, and tooltips. Customize the look of text with font type, size, and text orientation. You can also choose to show multiple lines of text or truncate long strings.

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.

Supercharge your graphs with data-driven graphics

 

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.

first640

Zooming in and out shows more or less details for nodes in this graph.

Explore data in more detail with the magnifier tool

Available for both drawing views and map views, the magnifier tool allows users to delve deeper into their graph visualizations by providing an interactive zoom function. Accessed through the magnifier toolbar item or as part of the Select tool, the magnification feature enables users to explore the finer details of their graphs.

Learn more by watching our easy how-to video on using the magnifier tool.

first640

The magnifier tool zooms into a portion of the drawing for closer inspection.

Navigate and maintain your bearings in large graphs with the Overview window

Users will find that maintaining their bearings in large graphs is simple with the Overview window. Resize the selection area to zoom into or out of the drawing, and move the selection area to change your focal position within the graph drawing.
first640

Navigate your graph drawing and zoom in and out with the overview window.

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.

A graph showing a selected node, a highlighted node, and a tooltip.

 

Incorporate graph visualization tools into your application

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.

  • Customizable tools

  • Toolbars

  • Progress indicator

  • Controls for animation, cursor rendering, complexity, tooltips, scroll, and zoom behavior

  • Drawing view preferences that can be used to trigger automatic layout based on model changes or integrator updates

  • Custom mouse click, drag and release actions
Perspectives Designer toolbar customization options.
Perspectives Designer toolbar customization features.

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.

 

Customizable toolbar options

Customizable toolbar options

 

Available toolbar options include:
  • Save as Image

  • Print Setup

  • Print Preview

  • Print

  • Open URL

  • Sign Out

  • Select

  • Pan

  • Navigate Links

  • Overview

  • Undo

  • Redo

  • Marquee Zoom

  • Interactive Zoom

  • Zoom In

  • Zoom Out

  • Zoom Fit

  • Magnifier
  • Layout Styles

  • Apply Analysis

  • Clear Analysis Results

  • Save Drawing

  • Load Drawing

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. 
first640

Graph editing tools

Editing tools are available for adding, deleting, and moving nodes and edges. The tools can be activated through a toolbar option or selection action.

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 the 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.

 

An example application built with Perspectives showing an invokable view dialog.

Advanced customization options

But wait, there's more! Take advantage of these additional graph application customization options.
Advanced JavaScript resources

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.

In addition, React-based APIs support customers in either JavaScript or TypeScript environments.

You can find additional details in the documentation.

CSS Icon

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.

Get started today

Contact us for a demonstration and to learn how to apply graph visualization to your data projects.