Civil Wars

• Designed the user experience, interface, and animations of the application
• Created wire frames for both desktop and mobile versions
• Designed the architecture of both the frontend and backend
• Parsed Wikipedia for pertinent information to create a static database for the application
• Programmed the web application using React and Amcharts.js
• Web application is statically hosted through Github Pages

OVERVIEW

Earlier this year, I read that the Syrian Civil War reached its six year mark. I remember sitting there baffled that a Civil War that often made headlines into my news feed was still so foreign to me. I did not know what the two sides fought for, what their demands were, and why hundreds of thousands of Syrians died for it and millions were displaced by it. I set out to try and create an informative application for it at the time to mostly help myself learn the details around the war, but found that real-time/accurate statistics and resources (i.e. APIs) were hard to come by. Fast-forward a few months into the fall, I was taking Software Structures for User Interfaces and an opportunity to create an informative project came about.

For this final project, I decided to expand to a more general tool that focuses on Civil Wars around the world, rather than specifically the Syrian Civil War. I wanted a tool that the user could use to explore the countless wars that countries start internally, and understand the amount of lives that have been lost because of them. Civil Wars are interesting to me because of this aspect of internal conflict: even with a shared sense of national interest, we still find reasons to go after each other.

Civil Wars is a simple web application that explores the geography and amount of casualties (when available) from civil wars dating from the 1800s to the present. It uses Wikipedia's civil war page for a static database, drawing information such as the years of the war, amount of casualties (when available), countries/regions involved, description, etc. It supports both desktop and mobile views and interactions.

PROCESS

Research & Design:

The first phase involved researching the available tools to create this application. The most demanding tool that I needed to find was one that supported a world map. Which APIs support translating input from a database to a colored world map? How flexible is this display and how complicated? After snooping around for awhile, I stumbled onto Ammaps. Once I knew the limits of the API, it was a matter of drawing up wireframes and planning out interactions/animations. I started out with paper prototypes to test out the basic flow (i.e. animations) and view of the application. After the prototyping phase, I moved to finalizing the views using Illustrator. Both mobile and desktop versions were developed.

Software:

Because of the limited time of the project, I decided to go with a simple and static backend. This involved a one-time parsing of the various Wikipedia pages that contained similar structures and information to extract a basic database. Since there's no formal structure to these pages, it was difficult to extract everything from the articles, so the rest of the information had to be manually entered. Since the dataset is rather small, I decided to also stream the data in from a file, rather than an actual database.

Frontend development was done with React.js. A challenge here was incorporating Ammaps into the structure of a React application, as well as incorporating CSS animations. The largest challenge, however, came from the logic behind user interactions. When the user scrolled, the timeline should move forward and tell the API to update the map with the civil wars for that year. The solution that I went with involved two hash maps: one hash map contains the start dates of wars (i.e. wars that started that year) and the other hash map contains end dates of wars (i.e. wars that ended that year). The user interaction for scroll simply moved linearly through the years and filtered in or out wars once they started or ended. Another user interaction involved dragging and dropping the timeline cursor. For this drag and drop, the application loops through from the current year (before the drag) to the after year (at the drop) and first purges through the list to remove the wars that have expired, and then appends the wars that have occurred since the current (this logic is just reversed for dragging backwards in time).

FUTURE

I'd like to expand on this project sometime in the future to move past a static backend. Ideally I'd like to find a more reliable source and way of loading and extracting the data. It might also be interesting to design and develop more interactivity with this application since the application feels rather limited right now.