The Volunteers

volunteers4

The Data

For my midterm, I’m using a JSON derived from the data found at icasualties.org, a site that has kept an ongoing record of US and Coalition forces killed in Iraq and Afghanistan since the wars began. Here is an example record showing the information available about each individual:

{
 "name": "Evander E. Andrews",
 "age": 36,
 "hometown": "Solon, Maine",
 "hometown-coordinates": "-69.85839100000001, 44.949502",
 "branch": "U.S. Air Force",
 "rank": "Master Sergeant",
 "stationed": 0, //if 0, information unavailable
 "stationed-coordinates": 0, //if 0, information unavailable
 "unit": "366th Civil Engineer Squadron",
 "conflict": "Afghanistan",
 "date-of-death": "10-Oct-01",
 "place-of-death": "Al Udeid Air Base",
 "pod-coordinates": "51.316563, 25.11792",
 "cause": "Non-hostile - accident"
 }

I originally created this JSON for this project from last semester. It’s a mapping project that required geocoding a very large amount of location data, so I built that in to the JSON. As a result, the data lends itself to location-based visualizations. Here are the hometowns, duty station locations, and places of death for each individual linked on a map:

screen-shot-2016-10-19-at-5-39-24-pm

That said, the absolute most important part of this data is the human lives and stories within it. The data I have does not capture this, but I myself have seen the power of this humanization in my own life. I do not come from a family with a history of military service, and it’s not a career path that I considered until my early 20s. I’ve lived most of my life, and a large number of the years immediately following 9/11, with the same sort of blissful ignorance most people have when it comes to issues of war and service. Though my military experience was incredibly short and unremarkable, it had the effect of taking the abstract and making it real; where there was once just a conception of some people serving somewhere far away from me, there are now faces and names – friends.

I use this particular data for a few reasons. From a technical standpoint, it is available and accurate. The US government has always been transparent when it comes to its war dead. The creator of icasualties.org took it one step further and collected additional information from news reports and other public-facing information. Second, it is a particularly important data set when discussion war. In this present moment, public support for a traditional ground war against ISIS has been increasing – it was this that first inspired me to use this data last semester.

My intentions are complex, however. I’m no pacifist. ISIS has committed unspeakable atrocities against populations in the Middle East and we, as a nation, collectively bear some responsibility for the group’s existence. My own opinions about how best to respond to the situation are conflicted at best, but I think about it much differently knowing that those I care about would be the ones in the fight itself. In presenting this data to the public, I care less about chilling support for war and more about making people more informed about and closer to the human cost of the whole thing.

Design Considerations

In my initial exploration of the data last semester, I discovered that a set this large is a difficult thing to map. As a static tile, it works fine. As an interactive object where dots and lines are connected dynamically to the data they represent, it does not work. It crashes browsers and runs slow. CNN has created an interactive tool, but it is clunky and slow. I used it at times to verify some of the data while cleaning, but don’t consider it a good implementation of this concept.

Because the data doesn’t play nice as an interactive map, especially when lines are added as an additional thing to render, a challenge has been to allow the user to have agency without actually allowing them to touch the map itself. In my first iteration, I did that by allowing users to collectively construct the map using their phones:

screen-shot-2016-10-19-at-5-37-46-pm

Since my midterm in this class is really just another iteration of this project, I want to take some time to discuss what I’ve found to be the limitations of this project. First and most importantly, it’s confusing as hell to users, especially the early ones that didn’t have any map to reference. I also used language that was meant to reference military funeral to give a hint as to the map’s meaning, but “volley” is not a term many people understand (as a result, people think the number of fatalities is much higher than in reality – 20580 is the total number multiplied by three).

The layout is also clunky, and the color is reminiscent of night vision but isn’t entirely attractive. The monospace font is vaguely official/military looking, but isn’t the easiest to read. I need to work more on the design and color palette.

The biggest failure of the above is the way in which the user experience is incredibly limited. A user will only ever be able to add one record at a time to the map, and will therefore only get one story back, and they have no control over which one that will be. It is always the next fatality chronologically. The user journey is, as a result, extremely scripted. In this iteration, I want it to be more open without being overwhelmingly open.

A more minor issue is that the data itself does not contain any personal information about the people that is emotionally resonant. My work around was to finish the experience with a web search. Each of these individuals has a presence on the web through reporting and remembrances. Their stories exist, and I chose to leverage the power of automated web searches as an imperfect way to inject the human behind the data into the project. Since I don’t have the thousands of hours it would take to build these stories myself, this iteration will continue to use this strategy.

Design Choices

Initially, I was interested in telling a story with the data, using the map as an anchor point. I drew a very quick wireframe, but it was light on details since I hadn’t totally finalized a concept.

img_0299

Similar to the color scheme of the last iteration, I started out using a two-color palette. I tried using a dark background with a light map again, but realized when I reversed it that a dark map on a light background created really striking, wispy sort of lines. I wanted colors that would be topical to the data. I worked with digital camo as my inspiration for my 1st two and main colors, and rounded it out with black and bright red as a way to contrast some data points over others.

screen-shot-2016-10-19-at-6-32-55-pm

The first color is the background, the second the main color for the map points, black for unvisited links, and red for points on the map I wish to contrast from others.

For typography, I wanted something thin to mimic the thin lines of the map. I tried three different typefaces, all of which were rather similar.

screen-shot-2016-10-19-at-6-39-09-pm screen-shot-2016-10-19-at-6-39-23-pm screen-shot-2016-10-19-at-6-39-41-pm

To my untrained eye, they all look more or less identical. I was able to get Raleway to look thinnest, however, and decided to use it. It is the only font used throughout, at different sizes and weights.

I gave up quickly on telling a story. Conceptually I’m not ready to be the storyteller of this particular story, and wanted to remain as objective as possible. Since people have told me in the past that they’d appreciate an opportunity to see their similarities with the data, I decided to build something that would allow them to do just that – comparing along first and last name, age, and hometown.

The layout in my wireframe was problematic. I was going to have a long list of names, which was not something that would play well with a long, short div below the map. The map itself is very wide, however, and I didn’t have a ton of room to place anything next to it (this also creates problems with responsiveness – I’m honestly not sure what I can do to make it visible on a phone with a very short width). In the end, however, that’s what I did. I placed inputs for the user’s info below the map, and a narrow scrollable div next to it that populates with names of matches.

Initially, the page draws the data and the text elements fade in.

volunteers1

After the user enters their information and presses enter (there are no instructions about this, I recognize this is not a finished project but just a prototype not meant for public consumption at this stage), the side div begins to populate with names (that are links to web searches on each) while the map draws with two colors this time – the same for non-matches, and the red color for matches.

volunteers3

The matches are sorted by type – names first, followed by hometown, then age. Visited links turn red. The links open a Google search in a new window, where users are free to explore whatever they choose.

screen-shot-2016-10-19-at-6-50-11-pm

Next Steps

There’s a lot missing from this. The interactive piece is the end of a story I’m trying to tell, not the story in itself. Unfortunately, I did not have time to build an entire data story and implement this particular interactivity in the time I had. I also want to think harder about layout. More than anything, I really want to look at ways to make the map itself interactive without reducing its visual power. I will definitely continue to think through the ideal way to visualize and present this data as I move into the future.

Download the code here.

Leave a Reply

Your email address will not be published.