, ,

This tutorial demonstrates how to use Kumu to make an interactive relationship graph for character co-occurence network in Les Misérables.

[iframe src=”https://embed.kumu.io/29becd08f89339d0204672d126a70167″%5D

The data and sample visualisation can be found on: https://bl.ocks.org/mbostock/4062045

I tried both Kumu and Google Fusion Table for visualisation and found that though Kumu has some data format requirements and we need to do some pre-processing before importing the data, the graph produced by it is much more visually attractive and the platform allows more functions. In this post, I mainly focus on the use of Kumu, a web-based data visualisation tool for tracking and visualising relationships, which helps users to organise complex information into interactive relationship maps, according to the official website.

The final product can be found here: https://embed.kumu.io/8935f7dc189958f7ccfbcde39899f9a8

Key steps

Copy the json codes from https://bl.ocks.org/mbostock/4062045 to Open Refine. Use Open refine to turn the codes for “nodes” and “links” separately into two .xls files.

Since Kumu can only import .xlsx files, export these two .xls files into .xlsx format

Change the name of the columns according to Kumu’s requirement (e.g. For “Elements”, change column names to “Label” and “Type”). Combine these two tables into one file and rename two sheets as “Elements” and “Connections” accordingly.

Import this new file to Kumu

Colour different groups by different colours using Element Decoration Builder

Change the width of each connection in Connection Decoration Builder according to the “links_value” and adjust the width scale to what you think is clear and pretty

Change the space in the layout as it is too tight at the moment. To achieve this, go to Layout Settings and make it less dense in the Preset

Make the connection curves straight by changing the settings under “Settings – Connection settings – Default curvature” (This step is not a must. If you think it’s prettier to have curves, you can keep the original setting.)

Add some description to this graph if you want. This description supports markdown syntax and can easily embed images.

Get a link to share under Embeds and it’s done!

Findings from this network visualisation

Les Misérables has abundant characters with plenty and various kinds of inter-connections, which is probably one reason making the novel impressing. It’s easy to notice three characters strongly connect to each other and form a triangle – Marius, Valjean and Cosette – while Javert and Fantine also being in important positions. Four groups of characters complicatedly interact with each other inside the group (purple, yellow, light-blue and orange coloured groups), from which we can tell these groups are the class/part of society Hugo wanted to describe with details, while other marginal characters supporting the story and being less important.

Alternative: Google Fusion Table

As I mentioned at the beginning, we can also use Google Fusion Table for relationship visualisation, but it is not as good-looking as Kumu and allows less adjustments. You may want to have a try with Google Fusion Table. Below is

[iframe src=”https://bit.ly/2B6Mml5″%5D

See the project on Google Fusion Table: https://www.google.com/fusiontables/DataSource?docid=1g0ET-jlM03w6c9h0qCf-LhPwXsdKMFkMfMd3p7FG

Basically this method is what I used to create the relationship graph at first. However, after finding it incapable of adding colours to different groups, I turned to Kumu as shown above.