The visualization should show FTAs over the last 66 years so it was clear that all countries had to be visible, even though they had only one or a few FTA(s).

Unfortunately, if every country in the world (around 250) would be shown, it would be pretty hard to figure out which countries had some FTAs with others. Thus some further data processing removed all countries which had never been involved in any FTAs, at all.

Under these 44 countries are mostly island countries such as New Caledonia and Puerto Rico or remote parts of the world such as the Antarctica.

Defining visual attributes

The radial dendrogram can visualize at least six variables:

line color/opacity/weight, text size/weight/position.

The total amount of FTAs for each country should also have been visible therefore various visual attributes have been tested resulting in introducing another visual element: a circle in front of every text item.

Circles

The circle in front of each country text item visualizes the total amount of FTAs with the circle size. In earlier versions the fill color represented the average depth index of the country but due to user feedback that was later removed so the user could focus and is not overstrained.

Lines

Every FTA is presented as a collection of lines bundled through the hierarchical edge bundling technique and highlighted with a color for visualizing the depth of that FTA. If a FTA has been signed in the past it will be drawn in the back and dimmed. Only the FTAs which are signed at the selected year are visually highlighted.

Line Colors

A great tool for finding some colors is chroma.js by Gregor Aisch which is there to help mastering multi-hued and multi-stops color scales.

The above color scale has been replaced by the one beneath due to user feedback.

Providing only two color areas such as blue for a minor value and red for a major value seemed to be easier understandable than three color areas. Only one colour area has already been tested, such as light blue to dark blue, but didn’t manage to highlight the FTAs with a high depth index accordingly if there are many agreements/lines visualized.

Video discussions with the FTAVis Team

Line positions

Another challenge was the amount of lines and to identify each FTA. We solved that issue by placing the intra-continental agreements outside of the circle. Credits go to the intern of the Bertelsmann Foundation: Quentin Dumont.

Handling performance issues

We tested the visualization on several devices — including tablets — and figured out that the performance of redrawing many lines were bad. One of the ideas was reduce the drawn lines, e.g. remove the lines of the FTAs which were signed before the current selected year.

In the back are the already signed FTAs of the past visible

However, we had a call with one of the data set publishers Andreas Dür — from the Department of Political Science and Sociology, University of Salzburg — and he argued that it is definitely necessary to present all signed FTAs in the background. It would help to understand that FTAs will last over a long period of time.

However, drawing thousand of (SVG) lines in a browser resulted in some serious performance issues. Additionally, for some years there are FTAs with over 100 member countries resulting in drawing heaps of lines for one agreement only. Finally, we had to find a better solution for drawing so many lines at once.

Solution: Drawing many lines faster with Canvas

Another rendering technique in the web which is normally used for drawing many items in the browser is the Canvas technology. There are a lot of discussions about that topic.

At the end, we decided to go with a mixture: Drawing all lines with Canvas and the Nodes (country text and circle items) with SVG so they are easily selectable. There are three layers with different Canvas elements: One for the total amount of FTAs over the whole time period, one for the selected year and one for the selected FTA(s). Therefore, not all Canvas elements had to be redrawn at every stage and some layers can be faded out easily.

There is also an example of a hierarchical edge bundling done with Canvas by Bostock. The transformation from SVG lines to Canvas has been done with the library pathg. It would be better to calculate the lines in Canvas in the first place with libraries e.g. like d3-canvas but pathg is very fast and due to the complex visualisation technique not worth the trouble. Solution: Outsource performance-heavy calculations to Web Workers

Web Workers spawning background scripts in your web application thus the User Interface is still usable during calculations. Here is a nice article about that topic. It has been used especially for the “Total”-Feature and export function.

Intermediate results without the user interface

4. Designing the User Interface

After processing the data and designing the visualization, an interface was needed to offer the user some interaction possibilities to explore the data in more detail.

To keep things simple we decided that the user should filter the data through selecting a specific country and year to find some new patterns and insights. Finally, the visualization should not provide a total overview of all years to the past but rather highlight the “evolution” of the economic development over the last 66 years worldwide and for each country.

Design iterations of the time slider: The first version of the slider was later replaced with a more touch-friendly version

Time slider

The user should be able to select a specific year as well as start an animation to obey the development over time. Due to the mobile-optimization we decided to provide three methods of interaction: 1. Draggable time slider for a quick jump to a time range, 2. Forward/backward button to go through each year slowly and 3. Play/pause button for the animation. In an earlier version, the slider and trend highlighter were two separated parts but after some user feedback merged into one. The range slider is based on the Javascript library noUiSlider which is great for mobile use.

Drop-down to select a country

Country selector

The user should be able to select a country in an easy way. Select2 has been chosen for that task. It is a jQuery-based replacement for select boxes and is usable on touch devices. Besides the interaction at the sidebar, the user can also hover over a country item to get a preview or click / touch on a country item to select it.

Line chart (left) was later replaced with a bar chart (center) and finally with a stacked bar chart.

Trend highlighter

It became clear that it was quite a challenge to browse through countries and years to find, e.g., the most FTAs or the highest depth index of a country in one year. Inspired by the paper of Dür, Baccini, and Elsig (2014) we decided to include another small, interactive bar chart for each country to highlight trends and find interesting results or data stories faster. For instance the years with the maximum or minimum amount of FTAs or the deepest FTAs.

In an earlier version, two line charts represented the amount of FTAs and average depth over time but it turned out that the interpolated line was hardly readable for countries which had only a few FTAs over the last 66 years. Therefore, the two charts were replaced with a bar chart so it became clearer in which exact years were the max or min amount of FTAs.

Finally, the two charts were merged into one stacked bar chart and were combined with the time slider. This redesign is due to some user feedback, obeying that users were looking first on the charts to find some interesting years to look at and use the time slider next. Another reason was the creation of a cleaner user interface and to free up some space for the list of FTAs below. The stacked bar chart has been chosen to easily find some interesting patterns due to the fact that every FTA with their color of the depth index are previewed in the graph.

List of trade agreements

In some scenarios there are too many lines so that it is hard to figure out how many and which FTAs are actually shown.

Focus mode on the FTAs in the right sidebar

We decided to not include an interaction method to select a path by hovering/touching it but rather by presenting all FTAs in a separate list.

The FTAs are sorted by the highest depth index and amount of member states thus the most important FTAs are likely to be shown on top.

By selecting a list item additional information are presented such as the agreement type (e.g., Plurilateral and Third Country) or the reason for the specific depth index.

Due to the amount of items a resize/shrink button has been added below the list making it possible to focus on the shown FTAs. Unfortunately, a deep link to the FTAs for even more information is not provided, yet. Even though there is a list of a few agreements by the WTO.

Including a legend

If the user sees the visualization for the first time, some elements are not self-explanatory so some kind of legend is needed.

The interactive legend on the left

Interactive color scale

The definition of the depth index is among the most interesting information in the data set. Therefore, we included an interactive color scale: a bar chart which highlights (higher position) all depth values which are currently visible. Additionally, by hovering over the color all FTAs with that index are highlighted.

Circle size

The circle in front of each country label has been added to provide another dimension of information: the total amount of FTAs until the selected time. The circle should highlight countries which are more or less involved in the “economic exchange”. By hovering over a circle all countries with up to that amount are visually highlighted. Therefore, countries who are not engaged until a specific time frame can be found as well as countries which signed the most FTAs.

5. Providing a Better User Experience

Until that point the data has been processed, the data visualization designed and a user interface to manipulate the data has been created. As one of the final steps, the experience of the visualization had to be improved so the user can have some fun browsing through the data. In the best case, the user would be even more engaged with the data visualization and would recommend it to others.

A preloader is shown for the data visualization

Loading time

The data for the visualization is around 2MB in size and for users with a slow internet connection a preloader has been included implemented with d3.js, too. The preloader should keep the user on the page and provide some information how much longer he or she has to wait.

Mike Bostock created a nice example that demonstrates how to display the progress of an asynchronous request.

Animation

Some simple animations should convey the feeling of using an application instead of a website. After the data has been loaded, the middle radial visualization as well as the sidebar on the left and right are faded in. Some unimpressive animations has also been included such as fading effects by hovering over countries or by changing the selected year.