Navigate back to the homepage

Front-end Development and Data Visualization

Global Terrorism Visualization

78,433 people were killed due to Terrorism during the past decade. 24,144 in Iraq alone!
Year
2014
Technology
D3.js / JavaScript

Interaction

The Visualization focuses on discovering important trends and events that shaped the history due to Terrorism. It also tries to make user conscious about the number of unnecessary lives lost due to these unfortunate events.

image

We try to accomplish this by showing multiple views of the large dataset -

  • The Global Map view - Shows the world map with color encoded countries according to number of killings over the selected period of time.
  • Country Wise view - Shows circle graphs over the selected period of time.
  • Brushing tool - Shows a bar graph of total killings in every month.

The purpose of all these three views is different. The Map view shows the high level effect on countries due to terrorism, whereas the Country wise view concentrates on comparison, ordering, discovering trends of events between two or more countries, and also it facilitates finding the event which caused the mishap. While these two views focus over a period of time, the Brushing tool helps constantly see the visualization over the full period. It also helps in controlling the other two views.

The visualization features basically three interaction techniques:

1. Brush:

To brush and link multiple views we use a timeline as a background, which starts from first day of Jan, 2000 to Jan, 2011. It supports

  • Expansion of the current selection in either direction,
  • Dragging of the span over the timeline, and
  • Clicking outside the span selects that particular month.

2. Select:

To afford comparison and trend discovery between event happenings in two or more countries users can select countries by clicking them on the world map. This adds the country to the country wise view of the visualization.

3. Hover:

Details on demand - Hovering over a country in the World Map reveals the total number of killings in that country over the period. Also, hovering over a data point in the country wise view reveals more information about the event w.r.t. to the data point.

image

Dataset

The visualization heavily depends upon dataset acquired from Global Terrorism Database (GTD, University of Maryland). It is currently the most comprehensive unclassified data base on over 113,000 terrorist events, occurred between 1970 and 2012 in the world.

Each event consists information on the date, location, number of people killed and injured, weapons used, intention, group or individual involved, target, summary, cites, etc.

The dataset was cleaned before being directly used. Many required values were null or inconsistent. For example, some of the 3 Letter country codes from the database were not matching to that in the Datamap object.

Running Instructions

Access the visualization here. View it in full screen for better experience.

or

Download this repository and run

python -m SimpleHTTPServer 9000

at the root and access the visualization from http://localhost:9000/ using your favorite web browser.

Story Board

We started off with data search and found many datasets which called our attention. But before finalizing on one we briefly explored all of them using Tableau.

Exploration

  • World Map representing countries with more killings (nkill) by more red.

    Sheet 7

  • A time stream representing the trend

    Sheet 5

  • Heat Map of all countries w.r.t. to time, colored according to number of killings.

    Sheet 4

  • Bubble Chart

    Sheet 1

While exploring these charts using Tableau we also simulated them using pages year wise to evaluate various interactions possible.

Sketching

  • During Brainstorm

    S1

  • Final sketch before we started coding

    S2

The top portion is a timeline wherein one can select the months from 2000 to 2010. It is used to brush below two visualizations. It affords all the interactions mentioned above.

Changes between Storyboard and the Final Implementation

There are not any significant changes between the final sketch and the final implementation. Though there were some stubble changes in placement of various elements, the colors, the scale used. But, the overall interaction, views and underlining objective remained the same.

  • Its hard to sketch colors and exactly understand how they will be perceived without an actual running prototype. We didn’t consider the use of log scale for color encoding, until we saw the running visualization.
  • We first envisioned the country wise visualization to be similar to time stream from Tableau (above), but we ended up plotting translucent circles with size dependent upon killings to represent each event.

Development Process

  • The first task was to mutually decide what basic information is needed from the large dataset to produce the designed visualization. The data format was also decided.
  • Then, we hopped onto data cleaning and generated CSVs and JSONs of the required data.
  • We decided the project into three milestones. First, basic world map representing the data. Second, brushed and linked map. Third, select countries and visualize.
  • While, one person was cleaning the data, other was readying the basic front of the world map waiting for the data.
  • The next step, after integrating the data with the map, was to implement the brushing feature.
  • After this, the country selection feature was implemented.
  • Then we briefly worked upon aesthetics and colors of the visualization.
  • Finally, we made trend visualization of the selected countries.

Technologies used

  • D3.js
  • Datamap
  • underscore.js
  • Twitter Bootstrap
  • jQuery
  • Ruby
  • Tableau (for exploration)

Time Consuming Aspects

  • Brainstorming & Designing
  • Learning D3
  • Data exploration and then cleaning
  • Dirty hack to select countries on the Datamap

Future Work

  • Details on demand about the event, upon hovering on circles
  • Show news articles (using NYT API?) based upon events
  • Highlight the countries in selection
  • Optimize algorithm and queries

More articles from Aniket Handa

Reveal Care

Can transparency in health care help us make wise medical decisions?

User Centered Design / UI Prototype / AWS

2014

Skulpturous

Skulpturous is a 3D authoring tool which helps students, artists and possibly designers to model and visualize 3D objects. It uses your full…

Kinect / 3D / Java / OpenNI / OpenGL

2014
© 2014 – 2020 · Aniket Handa
Link to $https://twitter.com/atneikLink to $https://github.com/atneikLink to $https://instagram.com/_aniketLink to $https://www.linkedin.com/in/atneik/