US terrorist attacks since 1990, visualized: a combination of the radial chart and dendrogram
I want to share my latest project with d3.js, where I combined two different charts — polar bubble chart and dendrogram — together. (To view the live site, click here!)
The design process was a bit different from usual. I usually began with cleaning and analyzing the data to gain insights. But this time, I already had an ideal visualization on my mind and then looked for suitable data for it.
I am a big fan of “circles” and had always wanted to create a polar bubble chart with d3. My idea was to use radial grid lines to represent the years, slant lines to represent the months, circles to showcase the data points.
Data
Whenever I discover interesting datasets online, I keep records of the data sources along with some potential story ideas in my Evernote.
So this time, I immediately found a suitable dataset for my visualization — the Global Terrorism Database (GTD).
The data contain global terrorist attacks from 1970 to 2018, including details like the date, location, terrorist groups, number of casualties, etc. I narrowed it down to attacks that took place in the United States after 1990.
I cross-compared data from other sources to see if the GTD had missed out on any terrorist attacks before I built the chart.
Visualization
I followed Amelia Wattenberger’s radial chart example in “Fullstack D3 and Data Visualization” to draw the background grids.
The key to drawing the background grids is to convert the abstract years and date into actual coordinates on the chart.
For example, the following code converts each date into a point on a circle:
If you inspect my code carefully, you will find that I used a tricky way to convert the dates. I assumed there are 31 days in every month to make the scaling easier.
The “angleToCoorsScale” function, based on basic trigonometry, is responsible for converting radians to x-y positions.
And then, I converted each year as a radial grid in the background.
After drawing the background grids, I visualized each terrorist incident as a circle and size the circle based on the number of casualties.
Interactivity
Following Schneiderman’s mantra, “Overview first, zoom and filter, the details-on-demand,” I want to showcase relevant information about each attack when readers hover over the circle.
Initially, I planned to draw a rectangular tooltip next to the hovered circle. But after a few experiments, I found myself unsatisfied with the visual since the rigid angles of the rectangle did not fit well with the adjacent circle.
I need elements with a “soft and bouncy” look. Besides, I want the visual encodings to convey the idea that each terrorist attack was a result of many complex factors.
There were various kinds of groups with different claims behind each terrorist attack, and their motives were much complicated than we could imagine.
Eventually, I came up with a tree-shaped prototype, where the relevant information would stem from the hovered circle and expand like tree leaves.
We can use d3.tree() to create this visual. But to make the dendrogram “stem” from the hovered circle, we have to adjust the position of the dendrogram’s parent node to that of the hovered circle.
Since d3.tree() requires “hierarchical” data, my first step is to transform the data structure into a format with node parent and children:
Using d3.hierachy(), I got the ideal hierarchical data, which then was fed into d3.tree() to create the dendrogram:
Next, I adjusted the position of the parent node in the dendrogram so that the “origin” of the dendrogram has the same x-y coordinates as the circle representing the terrorist attack.
I first calculated the coordinates of the selected circle:
Then I modified the positions of the dendrogram nodes and links based on the above cx and cy:
Final result
