A second glance on the implementation of our designs
In this post we will discuss the progress we made on implementing our designs from a previous blog post. We were working with Vega , Vega-lite and D3. In the following we present five different implementations.
Implementation 1
This implementation shows the geographical dimension of Al-Qaeda’s activities. It was made in Vega. The code can be found here and the data here. The visual is interactive and includes a tool tip, which lets the user see where attack took place, how many deaths were caused and what attack type was carried out. The size of the point on the map is another visual stimulus as it indicates how many deaths there were.
One can zoom into different regions and drag with the mouse to move on the map. This implementation posed several challenges, as projects the data set on a topological JSON. Signals had to be included to be able to have interaction with the graph. We were thinking of including more information in the tool tip, like year or weapon type, but it became clear that the dataset would be too large to use an interactive graph without lags.
Implementation 2
The terrorist database consists of a lot of different variables, such that we have to find interesting visualizations to bring together a lot of parameters. We have found that using Vega we were able to bring down several dimensions of the dataset into one simple Sunburst diagram. The center of the Sunburst diagram represents the total number of fatalities caused be terrorist organisations that are associated with Al-Qaeda. Moving out one level we have a representation of the total number of fatalities that were caused by each sub-organisation of Al-Qaeda. Moving out further we see what proportion of these attacks were launched at what target types and the weapons that were used.
Looking at the GIF above we see that 4381 fatalities were caused by Al-Qaeda in Iraq. Of those 4381 fatalities, 1134 fatalities occurred in military targets. When moving out further on the Sunburst diagram we see that of those 1134 fatalities, 897 were due to Bombings/Explosions. The tooltip which shows up when the cursor hovers over a field allows for the viewer to investigate the information that is presented in the plot. It has the additional benefit that diagram is not cluttered with too much labeling, as the labeling information is contained in the tooltip.
Implementation 3
One of our initial sketches consisted of a rectangular heatmap with a stacked bar plot on the side. The purpose of the heatmap was to show the evolution of attack figures over time (year and month) while the bar plot attempted to illustrate the change in casualties over the years. Some colleagues from other groups suggested that it would be interesting to inspect how fatalities varied across months. In this sense, following their advice and considering a circular shape for the heatmap, we came up with the visualization above.
The selection of a spiral instead of a rectangle was not an arbitrary decision. We believe that this way both figures, heatmap and bar plot, are better integrated. Another relevant change is the color scale used for the heatmap. Our initial idea was to select a red-green scale but we were advised that this scale could be problematic for color-blind people. In consequence, we shifted to the red-yellow scale as shown above.
The circular bar plot shows the sum of casualties for each month within the period considered (2000–2019). In general, the figures do not seem to differ significantly except for the months of July and September, when there is a peak in casualties. Maybe this is due to the increase in movements of people and greater concentration in public spaces as a consequence of summer holidays. As for the heatmap, while the number of attacks seems to be the similar across months, it can be observed that attack figures have increased over the years.
As a final remark on the visualization, it includes tooltips for both the heatmap and the bar plot, showing the number of attacks and the date in the first case and the number of casualties and fatalities in the latter.
Implementation 4
In this case, we improved the sankey plot presented last time. The previous version was developed using the R package ‘networkD3’. While useful, we thought that more interactivity and features could be added to the visualization if directly using D3, and that is what we did.
This new version of the sankey diagram is better structured since all categories within a variable are grouped together. Although not shown in the image above, the visualization still includes tooltips with attack figures as before. Additionally, when placing the mouse on a given node (rectangle), the paths connecting to that node are highlighted.
Other new features of this visualization include an input selector for perpetrator group names, which facilitates making comparisons between groups. Recall that the purpose of this plot is to answer the question on ‘differences between Al-Qaeda and its affiliates.’ Furthermore, a color pattern input selector was included with the following categories: ‘None’, ‘Input’, ‘Output’, and ‘Input-Output’ (as shown in the picture). This feature, especially if selecting ‘Input’ or ‘Output’, grants users with the possibility to color links in the most interpretable way for them.
Implementation 5
The plot presented here above presents the heatmaps of number of causalities according to the years and the months. The gradient of color, shows the severity of the deceased per attacks. In terms of detection of any seasonality in deadly attacks this is not present. So if anyone suggests that the Al-Qaeda attacks are planned seasonally, they would be wrong.
Another remark here, is the up to 2002 the attacks were not really present (white squares), in the left plot. The deadliest years have been starting from 2011 to 2015. Most specifically the year of 2012 has alarming dark blue squares with a maximal value of approx. 75 deceased per month.
The right side, represents seemingly the same information however it is not the same plot. The decision to present both plots was made in order to see the limits in certain visualizations. The second plot represents the sum of all the deceased. Which means, the scales are different for both plots. These differences affects majorly the results. This is due to the large scale number of causalities of the 9/11/2001 , New York. This extremely deadly event, puts in perspective all other events(relatively smaller). And in this case, we wouldn’t have been able to detect the bad years of 2012 for example. It is however fair to see that since then we haven’t had a scale so grave in terms of terrorist attacks.
This visualization although simple carries a few limits. However, next to each other, we can gather useful information from both plots.
