Displaying a force directed graph

In this recipe, we will create a graph with some of the characters of the play Hamlet by William Shakespeare. The idea is to visualize the connections between the characters in a fun and interactive way. The type of graph that will be visualized is known as force directed graph.

Getting ready

In order to visualize the connections between the characters, they need to be stored somehow. There is a sample data.json file that is a part of the code examples that you can use. Although we do encourage you to create your own sample data or at least play around with the existing one, but for the purpose of simplicity, we will be using the one provided in the code examples.

How to do it...

We will be creating a JSON file to contain the relation and image information, the HTML, and the accompanying JavaScript.

1. First, we can start with the creation of the data for the recipe. We can define the nodes list, where the object would be placed with the properties name that will...