Created:

Reason:

Tools:

Data:

The Royal Constellations is my October visualization for Data Sketches, my year long collaboration with Shirley Wu. We had chosen the topic of “Presidents & Royals” and really the first thing that came to mind (and stuck) was looking into the family trees of the current royal houses. You always hear that a lot of intermarriage happened, especially in the past, so I was wondering how connected the royals really were. How many hops between relatives would it take to go from King Willem Alexander of the Netherlands to Queen Elizabeth II of the United Kingdom for example?

I only had about 1-2 weeks (of free time) to create this visual because of a vacation in the 2nd half of October, so I didn’t want to spend too much time on the data preparation. Luckily I found a sort-of structured dataset about connections in the European royal families that was from 1992. Well, we’re almost 25 years on so I had to manually add quite a few new additions to the families. The dataset definitely wasn’t perfect either, but more in case of missing links, not in the wrong people being connected, so that was good enough for me.

Because of all the interconnections a network seemed to make more sense than a tree visual, and although d3v4’s updates to the force layout are amazing it still took me a long, long time before I was able to find any kind of useful structure from it. Going to a dark design to represent the idea of stars and constellations came quite late in the creation, but I was actually a bit surprised how well it fitted the design.

Hovering over a “star” (person) will show you how far into the network “6 degrees of separation” will take you (thus 6 generations onwards & backwards). By clicking on a star you fix to that person and by clicking on any of the other stars will show you the shortest path between those two people.

Getting the hover and click (and 2nd click) in there took quite a lot of time (mostly because it was gobbling up far more resources than needed, so I needed to find ways to only fire when needed). It still only really performs well in Chrome (don’t know why…), but there was no more time to try and convert the entire visual to canvas. Ah well, if you have a little patience & are interested in the subject, you can get a lot of interesting insights from the end result :)