Visualizing Conflict in Africa

Fatalities from conflicts in the DRC and its neighbors

The Visual Analytics team at Axis Group recently won a data viz hackathon with an exploratory visualization tool for analyzing conflict data in and around the Democratic Republic of Congo. I’m very proud of the work that our team did and can’t wait to share the full application as well as blog posts on some of the design and technical lessons we learned along the way. The application needs a little cleanup before it goes live, but in the meantime I’ve received a lot of questions about the solution so I’d like to share some info here as a preview.

The Hackathon

At Qlik’s annual Qonnections conference this year, Qlik Branch partnered with the UN to host a hackathon. The goal of this hackathon was to take an open set of data provided by Qlik and the UN and produce a visual tool for exploring that data set to answer key questions. The UN provided a data set from the Armed Conflict Location & Event Data Project that provided information on conflict events that have happened in Africa in the last 20 years. The event data includes information on associated fatalities, key actors in the events, location and timing, and notes with a description of the event.

The Hackathon participants had 2 weeks to load the data into Qlik’s platform and use the Qlik API’s to produce a visual analysis that the UN could use to answer key questions about the dataset, such as:

  • how have the major actors changed over time?
  • where is the violence happening, and how are civilians impacted?
  • which actors operate across country borders?

For the scope of the project, the UN placed an emphasis on the conflict going on in the Democratic Republic of Congo. The dataset reveals the horrible nature of these conflicts and the effects on innocent civilians. In our visualization design we sought to provide analytical tools for exploring this data while staying true to the reality of the situation and conveying the horrors of the events.

Evolution of the Conflicts Over Time

The dataset provided goes down to the individual event level at its most granular level. This level has participating actors tagged to it – these actors include government forces, political militias, rebels, protestors, etc. We wanted to take this data and use it to show how the conflict has changed over time.

From our initial analysis of the data, one thing became extremely clear: the conflict data is messy because the situation is messy. As we looked at the data from year to year, we saw a constant tide of new actors coming in and out of the picture. Part of our human nature is to be drawn to stories, and in many of our stories there is a common theme of a good guy vs. a bad guy. Unfortunately, reality is much more complex than this and we wanted to convey that complexity to our audience. We also wanted them to feel the cumulative impact of all of this conflict on the region, while giving a user the opportunity to interact with the data and explore it at will.

With that goal in mind, we produced an interactive map that animates the build up of conflicts over the 20 year period from 1997 to 2016:

Animating events year over year in the DRC

The view above behaves like a video and an interactive visualization simultaneously. As the screen animates, you can interact with any data point on the screen, such as hovering the the individual events on the map to see more details in a tooltip. The list of top actors on the right side resorts itself based on year so that you can see the rapid changes in the main perpetrators in the country. In this screenshot, you can see the LRA rise to the top and witness their outpouring of violence on civilians in the top right corner of the country. Key notes from the data set are highlighted in the top left to give some extra details on the kind of violence that is being seen from year to year.

While it animates like a video, you can also stop the animation and go back and forth to any point in time using the line chart. This feature makes it easy to switch between passively observing the evolution and actively exploring the data at key points in time.

The Actor Network

One key question posed in the UN’s Hackathon brief was about the interactions between actors. Specifically, they want to better understand how the actors are fighting or allying with each other and how those relationships change over time.

We wanted to answer this question with a network diagram but wanted to avoid producing a pile of spaghetti that was impossible to interpret. Specifically, we wanted readers to be able to determine:

  • Who are the major plays in the network at any point in time?
  • How are the actors distributed across type of actor?
  • For any given actor, who are they in conflict with and who are they allied with?
  • How do these relationships change year over year?

We decided to implement a network diagram with some clustering and interactivity to help answer these questions.

Actor interactions, colored and grouped by actor type

Each node in our network is sized by their relationship to violence – the bigger the circle, the more fatalities associated with events involving that actor. In order to clean up our network, we clustered the nodes by actor type at the overview level. The clustering allows you to see the amount and size of actors within each group. The clustering immediately brings out some questions that warrant further analysis, such as why there are no interactions between ethnic militias and rebel forces.

Animation is used as the data transitions from year to year to emphasize how the network changes. In the example above, you can see how the ethnic militia groups have a lot of turnover from year to year.

Single actors can also be focused on in the network. Hovering provides a quick glimpse of the actor’s relationships within the larger network. Clicking on the actor brings it into focus at the center of the screen and splits its relationships into two groups: conflicts to the left and alliances to the right.

The Technical Bits

This project presented new technical challenges that our team hadn’t faced before, and I’m looking forward to sharing how we overcame those challenges in future posts. These posts will include:

  • Using to map out thousands of events animating over time
  • Setting up an animation timer with pause, jumping forward and backward, and replay with a combination of d3-timer and RxJS
  • Creating piece-wise animation functions to calculate the visual state of events on our map at any point in time
  • Using d3-force from v4 of d3 to create our network diagram
  • Cleaning up our mapping data to get the appropriate region polygons for our choropleths

The 3 Best Things I Saw at Qonnections 2017

Qonnections 2017 was this past week, and it was a whirlwind of a conference. Qlik debuted all kinds of new features and plans for their products that left a big impression on the attendees. As a developer who focuses on Qlik’s APIs, there were 3 things that stood out to me the most:


Qlik demonstrated a new visualization framework that they are creating called Picasso. Picasso is a declarative approach to custom visualization. As a developer, you write a JSON spec that describes what your visualization should look like. Picasso is then able to parse that spec and output a visualization to either SVG or Canvas. It is very similar to Vega-lite, although it appears to have better support for responsive design.

If Picasso is executed properly, it should enable developers to build custom charts much faster than they can today, and also easily share and modify charting code as well. Very much looking forward to playing with this one.

Offline mode

During Josh Good’s talk on his 5 favorite things coming in June, Vinay Kapoor had the audacity to interrupt with a 6th favorite thing. He didn’t disappoint as he showed the Qlik Engine running offline on mobile devices. Via a Qlik Sense native app, he was able to sync his mobile app with a QVF on a server and then use that app offline, taking full advantage of the Associative Model. The ability to run QIX on a mobile device has huge implications for what the Engine can be used for – I can imagine a future where you build a mobile app that has nothing to do with dashboarding but uses the QIX Engine to power its data experience.

The Diversity and Quality of the Hackathon Submissions

I attended the very first Qlik Hackathon in Orlando in April 2014. Qlik Sense and its APIs had just been released, so the developers assembled that day found themselves facing an uphill battle as they wrestled with a brand new technology. Some interesting solutions came out of that day – two that I specifically recall are Ralf Belcher and Torben Seebach implementing a D3 chord diagram working in an extension, and Jason Mondesir and myself creating a table with minigraphics that could be adjusted by the user. While these solutions were a good first step, they were just the tip of the iceberg for what could be accomplished with the APIs.

Fast forward a few years and you can see the massive progress of the Qlik web dev community in the latest Hackathon. This year’s challenge was to visualize conflict data from Africa, and the results from the 6+ teams dazzled. They included a cloud heat map with MapBoxGL, a search bot, a refugee migration map, and several variations on network diagrams.

A few of the Hackathon submissions

It was amazing to see how far the community has come and the creative solutions they produced with the APIs. I can’t wait to see what’s next from this group.

I’m also super proud of the Axis Group team for taking home the Hackathon’s top award and want to recognize the following people who contributed significantly to the project but weren’t recognized at the conference: Gen Ellsworth, Liza George, Manasvi Lalwani, Jessie Lian, Scott Reedy, and Tim Wright.

Making QlikView Dance with Error Bars

While my life these days tends to center around Qlik Sense and it’s APIs, occasionally QlikView pops its head back into the picture.

At Axis Group, we employ UX designers with a specialization in data visualization that work with users to understand their challenges and then produce designs for dashboards that can best help them address their problems. While these designers try to stay within the constraints of whatever technology will be used for implementation, sometimes they create a chart that is just on the fringes of feasibility.

I received an email on such a chart the other day that needed to be implemented in QlikView. The design showed this chart:

The chart plots events that happen over time in a dot plot. The part that the developer was unsure about was the markers on the x-axis. The question was, could we produce this design pixel perfect in QlikView?

After some exploration, the answer turns out to be yes. We used a combo chart to produce the dots, which gave us access to an additional feature: error bars. In QlikView, error bars can be defined with a central point and a line above and below that central point. They look like a capital serif “I”:

In our scenario, we want to use the middle part of the error lines while hiding the ends to produce the effect of a marker on the axis. So how to hide the ends?

The bottom end of the error bar can be hidden by placing it directly on top of the x-axis and matching the colors so that it blends into the axis. This overlay gives the illusion that the error bar is protruding from the x-axis. We use a static y-axis min to match the static value we set for our error bar bottom so that they always match.

That leaves the top of the error bar. This piece can be hidden with a well-placed reference line. We create a reference line that is white to match the chart background and place it at the same location at the top of the error bars, which covers them.

What’s remaining is the middle of the error bar. After setting the y-axis min and max to match the spacing we want and hiding elements we don’t need like the y-axis and legend, we get the following:

There are a number of creative uses for error bars that you can leverage in QlikView to make some unique chart forms that don’t come out of the box. Check out the QVW to play more with this example.