Network Graphs

A network graph is a chart that displays relationships between elements (nodes) using simple links. Network graphs allows us to visualize clusters and relationships between the nodes quickly. These graphs are often used in industries such as life science, cybersecurity, intelligence, etc.

Creating a network graph is straightforward. This demo shows five nodes and the relationship between them. Node one has a relationship with nodes three, four, and two. Node five also has a relationship with nodes two and four, but it does not have a relationship with node three. 

To replicate this chart, all you have to do is to create a table of relationships following this structure ['from', 'to']. In this example the table looks like:

data: [
  ['Node 1', 'Node 2'],
  ['Node 1', 'Node 3'],
  ['Node 1', 'Node 4'],
  ['Node 4', 'Node 5'],
  ['Node 2', 'Node 5']
]

Here’s another demo with a little more complexity. The nodes represent the Indo-Europen language tree with links representing relationships between the languages.

Notice the use of colors to help the reader to see the clusters quickly. The orange color represents the Italic language, whereas the green and pink colors represent the Celtic and the Indo-Iranian languages, respectively.

To add a color to a node, use the nodes option that is basically an array to access any node using its id:

nodes: [{
      id: 'Indo-Iranian',
      color: indoIranianColor
    },
    ...

The color property has the node’s color; in this case, the variable indoIranianColor. The colors of the nodes are defined into variables for more flexibility and maintenance in the first line:

var celticColor = "#7becb2",
  italicColor = "#ecb27b",
  indoIranianColor = "#ec7bb6";

Another way to visualize the connections and the nature of the nodes is by adding the size variable to the networking graph; the node’s size helps to classify the categories of the node. The demo below illustrates South Korean domestic flight routes. The nodes represent the airports that are classified into three main categories:

• Airports with more than 50 direct destinations.
• Airports with more than 10 direct destinations.
• Airports with less than 10 direct destinations.

The colors and sizes help readers quickly identify airport size relative to each other. Size can also be used as an accessibility aid, as it allows people who are color blind to get the data story, even if they can’t tell colors apart.

You can also use a monochrome chart for making the visualization more accessible. However, personally, I prefer the one with different sizes and colors, since it makes life easier for all readers.

Even though networking graphs are simple to create and pleasant charts to share, they might be very complex and hard to understand if they display a significant number of nodes. There is no exact amount of nodes to avoid, but try to use different colors, sizes, and of course, your common sense to make your chart easy to read as much as you can :)