3 Quick Ways To Perfect Graph Edge Labels

By Kristin Petersen on March 19, 2020

Stay up to date

Stay up to date

Back to the main blog
Kristin Petersen

Kristin Petersen

Content Manager

You gather your data, choose the best layout, and find an analysis method that gets your users the insight they need. But before you can declare victory, you need to assign meaning to the objects in your graph. Adding labels to nodes and edges might seem easy enough, but sometimes—especially with graph edge labels—their placement can cause readability issues. Since a “messy” presentation can compromise the message and meaning of your graph visualization, you’ll want to do all you can to prevent these.

Graph Edge Labels that are rotated, centered, and placed over each edge.

How to Perfect Graph Edge Labels

As with most elements of graph visualization, there’s a vast and complicated science behind each and every element and algorithm. Graph labeling is no exception; there are mathematical theories that govern the methodology behind various types of labels. However, Tom Sawyer Perspectives Designer allows you to make simple changes quickly and easily without peeking behind the curtain to see the science within.

To ensure information displays without overlapping or compromising the structure of your graph, you need to keep your edges—and the labels attached to them—as neat as possible. Tom Sawyer Perspectives takes great care in placing graph edge labels where it makes the most sense based on the layout. But, you can also use edge label settings to ensure the words you bring into your visualization add value.

1. Rotate the Graph Edge Labels

First, instead of placing the edge label horizontally across the edge, you can rotate it to follow the edge. By allowing the label to follow the edge itself, you remove visual clutter that can distract the eye and minimize the effectiveness of your graph.

Differences between rotating graph edge labels
Graph edge labels NOT rotated vs rotated

To rotate the edge labels: select the Edge Label drawing template and then set the Rotated option under Size and Position to Yes.

2. Change the Graph Edge Label Region

The Graph Edge Label Region specifies where the label sits relative to the edge itself—above, below, left, right, and over. Using the Over option places the label within the edge itself. As a result, white space between edges increases, giving the graph a little room to breathe.

Graph Edge Label Above vs Graph Edge Label Over
Graph edge label above vs over

To set the edge labeling region: in the drawing view definition for an edge model element, add the Set Edge Label Layout Properties action and select the preferred Region option.

3. Choose the Best Edge Label Association

Finally, examine where your edge label displays relative to its end nodes. For some graphs, displaying an edge label close to the source or target makes functional sense. But for many, the label location is arbitrary. Use your best judgment to choose where the labels display along the edges in your graph.

Graph edge labels placed at Source, Center, and Target
Graph edge labels placed at Source, Center, and Target

To set the edge labeling association: in the drawing view definition for an edge model element, add the Set Edge Label Layout Properties action and select the preferred Association option.

Get started today to build perfected edge labels in Tom Sawyer Perspectives.

About the Author

Kristin Petersen is the Marketing Content Manager at Tom Sawyer Software. She has 17+ years of technical writing and editing experience in both the public and private sector, and transitioned into Marketing where she brings her strong technical background, writing experience, and creativity. She earned her Master of Science in Technical Communication from Drexel.

Submit a Comment

Stay up to date with the latest articles directly in your inbox