Smooth edges between circular nodes

This note provides Processing code for connections with the aim of displaying edges between weighted nodes in a good-looking style. The two versions have different advantages and shortcomings. Below, you’ll find interactive examples, the source code, and a case study.

The visual style was chosen for good legibility, while the smooth junctions between the circles and the connection aim for an aesthetically pleasing look of connectedness. It was also chosen to make it easier discernible whether a connection merely passes under a circle, i.e. points to another node in the same direction. Through the enlargement of the line in proximity of a node, it aims to make it clearly visible to which circle the line belongs to. The lines connect two nodes transparently, in order to not obstruct underlying information .

Gum Connection

Displays smooth connections between two independent sized circles. The connection simulates a gummy appearance by adapting the thickness based on size of and distance between two circles.

Drag mouse (left button) to set position of one center of the interactive red connection. Drag mouse horizontally (right button) to set size of interactive connection. Press ‘d’ to switch debug display.

Interactive sketch, GumConnectionApp.zip

Note that for nodes in close proximity you probably want to adapt the maxDistance property.

Weighted Connection

Displays connections with a fixed width between two independently sized circles. Can be used as visual representation of weighted edges between two weighted nodes.

Drag mouse (left button) to set position of one center of interactive connection. Drag mouse (right button) to set size of interactive connection. Press ‘d’ to switch debug display. Press ‘c’ to switch connection bending for circles in close proximity.

Interactive sketch, WeightedConnectionApp.zip

Note that for nodes in close proximity you either want to cut off the connection (to simply get two overlapping circles), or use the bending mechanism in order to force the display of the weighted edge (but that easily results in weird distortions).

Case studies

Muse – Interactive Exploration of Geospatial Network Visualization

This project visualizes collaboration between scientific institutions. A visual connection is shown if authors from two institutions published at least one paper together.

In the first prototype, the connection between affiliations does not directly represent the number of co-written papers. The visual style of the connections varies depending on the overall number of published papers of both the selected institution (with outgoing edges) and the related institutions (incoming edges). As a user study has shown, participants were under the impression that the connection width visualized the number of co-written papers.

Thus, in our second prototype the thickness of the connections varies depending on the total number of co-published papers of the selected institution with the related institutions.

More information on our first and second prototype.

GeoWiki

Extracts geographical places from Wikipedia articles for selected topics, and shows them in a sequential way to visualize tempo-spatial patterns. As an example this projects displays information about the different artists and teachers of the Bauhaus.

(Also check out my tutorial on Processing geo information for the workshop.)

MealTweet

The code could be used also for other purposes, e.g. for a glyph showing different data values. The following shows the normalized amounts of tweets for a specific category.

This project visualizes the locations of tweets mentioning occasions when food is eaten (i.e. breakfast, lunch, and dinner) in order to visualize cultural differences in meal times.