Have you ever wondered how to visualize network data? Well, if you are in the visualization business you probably have. In the end it´s all about what you want to achieve with your visualization and what your user is looking for. Let’s see a couple of examples built using D3.js V4 and some network data for The Simpsons First Season.
The first example, a node-link diagram shown, allow us to identify clusters and their size from a hairball of characters and relations. The clusters are based on the number of appearances of a character on The Simpsons first season. This type of visualization is great if you want to compare the size of the groups that make up the whole network, or if you just want to untangle the data to make more “watchable”.
Show Data as:
Show Template
This visualization was built using the D3.js “Force In a Box” plugin, developed by John Alexis Guerra Gómez, which can be found here
The second example is an adjacency matrix. In this visualization, each column / row represent a character, and each filled cell (the intersection of two characters) represent a link between characters, meaning co-occurrence in episodes. Higher color saturation in a cell mean that both characters appear together in more episodes, while lower color saturation in a cell mean that both characters appear together in fewer episodes. Feel free to visualize the data using different orderings.
Order Data by:
This visualization is based on Mike Bostock’s “Les Misérables Co-occurrence” graph which can be found here
Source data: The Simpsons Seasons Networks.