Network graph

A network graph is a chart that displays relations between elements (nodes) using simple links. Network graph allows us to visualize clusters and relationships between the nodes quickly; the chart is 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 1 has a relationship with the nodes 3, 4, and 2. The node 5 also has a relationship with nodes 2 and 4, but not with node 3.

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 languages 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 the 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 chart 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 🙂

Remark
Here is an example of a network graph that uses both color and size to make a large set of data easy to understand.