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 of tweets.
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.
Effective graph visualization increases understanding.
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.
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 resonate 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 a 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.
Available for both drawing views and map views, the new magnifier tool in Perspectives 11.0.0 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 in Perspectives 11.0.0.
Zooming in using the magnifier tool in Perspectives.
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
Clear Analysis Results
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 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.
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.