Intermediary implementations

JPC
Quirky Dust
Published in
3 min readApr 22, 2021

--

“But he did not kill her, because in between dream and act there are hindering laws and practical issues, and even melancholy, that no one can explain”
-Willem Elsschot — The Marriage

After all the creative brainstorming in our miroboard, we went from drawing table to workshop. We opted to make our visualizations in D3.js. Not only does its functions match with our initial sketches, it is also well fitted for storytelling. Which is due our somewhat complex data an interesting attribute.

What we discovered is that getting from our miroboard to a D3.js visualization ain’t exactly a walk in the park. D3 has quite a steep learning curve, meaning that we hit quite a few roadblocks along the way. We therefore decided to follow the path that is always advisable when learning a new language: start small, but dream big.

Firstly, we focused on how applicable each D3 chart-type was on our data. One of the first attempts was to create a chord-diagram representing the migration flows between countries. After a lot of head-scratching we soon discovered that this wasn’t a viable option. The outer layer in a chord-diagram has a similar interpretation as a disk in a pie chart, namely that it represents the total migration sum of a certain destination. Our migration flow scores however can be both negative and positive and are always formulated as a relative value (net difference compared to the already present population of LinkedIn users). Since the population sizes are unknown, we also can’t replicate the population amounts. Long story short: while this chart-type is a perfect match in conceptual terms, it doesn’t fit the operalization of our data.

A map with migration data failed to materialize just yet as it still needs quite a bit of tinkering. So we started with a few more feasible features.

As you might recall from our previous blogpost, we had quite a few bubble plot ideas, inspired by Hans Rosling. So we tried to make a few iterations on these, which you can follow in the next two YouTube videos. At this point we have included the parameters country, total migration saldo, number of terrorist event in a given year, year, and region.

Bubble Plot — Iteration 1 [YouTube video]
Bubble Plot — Iteration 2[YouTube video]

We are quite happy that we managed to keep it moving and that our initial hypothesis that a higher prevalence of terrorist events coincides with higher net migration scores. Currently we already included functions such as country tracing, filtering by region, animation of year transitions and tooltips with additional info. However, we’re still looking for a way to make the country tracing track easier to grasp, while we’re also still searching for the most interesting dimension combinations. Hopefully we’ll be able to present a steady progress by our next blog post.

Another idea that we had was to rank countries based on various parameters such as GDP per capita, total terrorist activity, and net migration flow, to see how these are -quite literally- connected.

This plot hints towards a correlation between low GDP per capita and terrorist activity, as well as net emigration. In follow-up versions we will add country labels and interactivity as now the paths between the three axes are not clear and only broad trends can be discerned.

To conclude: on the technical level, this was our first experience with D3.js and each of us had to go through the learning curve. Having a background in Tableau, Qlik and similar tooling programming the charts from its basic components was frustrating at times, given how easy these commercial tools make the basic dashboard setup and layouting. Of course, the creative freedom we are looking for in this course is just not there in the commercial BI tools. We already saw this with our first visualisations, who knows how our investment will pay off later when we implement the more advanced visualizations.

--

--