While browsing through network visualization examples, most of the ones that caught my eye were related to movies, series, and shows.

There are a couple of projects that inspired me, firstly was “THE DARK SIDE AND THE LIGHT” by Kirell Benzi. The piece has 20010 nodes and 66425 edges. The colorful edges are fanning out from the center, almost creating a flower. The visualization piece is just so eye-catching!

The second project – Marvel Cinematic Network by Tristan Guillevin stood out to me because of its interactivity. While users are free to interact with the viz however they want upon entering the website, once they click on “Phase One”, they are guided through the storyline.

THE DARK SIDE AND THE LIGHT

Marvel Cinematic Network

The examples above had me thinking about the series and shows that I enjoy watching. And Bridgerton came up!

It seemed like a perfect choice – the story centers around the character’s relationships. Set in London in the Regency era, the story focuses on the Bridgerton family. The story technically has 8 main characters – the 8 Bridgerton siblings. Each of them have a dedicated novel, where the story follows their journey to finding love.

I have only watched the series, and even then the relationships are complicated and intermingled. I have heard that the love lines are even messier in the books.

I was searching on the internet to see if anyone had created a dataset for this movie. However, I wasn’t able to find anything relevant to my project.

I decided to manually create my network dataset!

To begin my process, I started by noting down the characters from the Business Insider interactive site. Then I would cross reference it with the information on Bridgerton Wiki. This workflow was very effective as I was able to double-check my information from two sources. Luckily the Bridgerton Wiki site was well documented, the hyperlinks helped reducing time of scanning through the whole page.

I recorded my findings in Google Sheets. I created an edge table, with 6 columns: source, target, type, weight, label, and house (I soon realized that I would have to manually add a house column into the node spreadsheet generated by Gephi).

The graph type is Undirected, as between people, most often they both know each other. I decided to rank my connection type based on the themes of the show.

Romance (5) ranks first as the story starts and follows along the main character’s journey to find love.

Family (4) comes in second. Because of the time period that this series was set in, there was a lot of emphasis on loyalty, duty, and respect within a household. (In this case, only immediate family counts as family).

Friends (3) are ranked as 3rd. While there aren’t many friendships formed in the duration of the series, those that are formed, contribute heavily to the development of the story.

Acquaintances (2) is a broader category. I included exes, casual friends, and distant cousins in this category.

Working (1) included employer/employee relationships. These are typically side characters, however, they make a recurring appearance in the show/novels.

I noticed that there were a lot of distant cousins, exes, frenemies, and love affairs which made it complicated to rank. Does a sister-in-law count as family or acquaintance? Does a deceased partner count as a romance or family?

Another complication I had was how to categorize people into houses, as I was cross-referencing my sources, there were female characters who changed their last names.

Link to the first iteration (pw: network)

I am quite proud of my first iteration of this project. The visuals are inspired by vintage newspapers, with a modern twist of pastel pops of colors.

My data was still incomplete at this point with 40 nodes and 105 edges. There were also duplicates, as I was counting connections twice. I realized that I had some typos as well (Simon Bassett, instead of Simon Basset.) The project was getting visually dense, as there as a lot of text. The labels also felt like they were overcrowding the nodes.

Gephi Workflow

I started to manually add the house column within Gephi. Luckily, I also found typos (Basset) that I made in the Google Sheets.

The new addition of the data clearly shown in this comparison image. I have also added colors for different families that mary into the Bridgerton and Featherington families – instead of categorizing them as “others”. the Bridgerton family (pink in both images) still unsurprisingly stays in the middle of the visualization – serving as the glue to the different characters and storylines.

While Daphne and Simon are the main characters of the first book/season, Simon’s node is quite small based on his connection. This is because he doesn’t have family or siblings and our two main characters only have one child together. Daphne also doesn’t have many connections outside of her family.

There are a moderate amount of connections between the Featherington and the Bridgerton households, most of them are friendships (Aside from Penelope and Colin who got married). However, Eloise and Marina are connected through Phillip Crane and his children. They formed a connection after Marina passed away.

I found it fascinating that both maids – Mrs. Wilson and Mrs. Varley (in green) both ended up locating in the middle of each households connections. While the weight of the connection is the lowest (1), They are equally as connected to every family member in each household – resulting in this placement.

Figma

After having the general shape of my visualization, I added its shape outline to my wireframe. This provided a general guide to where I should place my interactive components. I found that personally I tend to get overly excited and then lost while I am designing. Therefore I have made a habit of creating wireframes and sketches to keep myself grounded.

For styling and layout, I kept it relatively similar to my first round of revisions but added a proper grid system to keep things legible.

Finally in Figma, I created my components. I thought it was necessary to include the legend since it is hard to interpret which color is what (aside from the three highlighted families).

Then I created components to show the family members of each selected household. The ones in black are important to the storylines. Finally, I wanted to include a bar chart of average degrees, to portray how the Featherington’s importance to the storyline, even if they are not the main leads.

link to prototype

My final product is a Figma prototype. Since I wasn’t able to make the network graph to be interactive on it’s own, I am really happy with the interactivity on the Figma prototype! All the elements that are shaped as a button are clickable – click through it to explore my project!

Overall, I am very satisfied with my project. I feel like the revisions that I made were worthwhile. The interactive aspect of the prototype makes the project a lot more engaging to the users. It was really fun to use Figma to animate my components.

I would love to continue on expanding on this project as if I ever get the chance to read the novels, I can add even more nodes to my dataset!

As it is my first time using Gephi, I think that the program is pretty intuitive for users. I love that the visualizations that the program produces are very adjustable. The SVG export function was definitely very useful.

1. For my dataset, I could adjust the weight and the type of connections. (adding ‘siblings’, ‘children’, and ‘parents’, instead of only using ‘family’)

2. I am hoping to create a 3D interactive visualization someday

3. I could add more data visualizations about this network by using pop-ups within the prototype