Page 1

Violence on the Global Stage

Process Book Charlene Hwang & Nathan Lee (CHNLVis) CS171 December 12, 2016

1


Table of Contents Week 1 (11/1-11/7) Project plan Data collection Week 2 (11/8-11/14) Switched datasets Updated visualization ideas Implementation Developed storyline further Week 3 (11/15-11/21) Implementation Updated storytelling (expert feedback) Week 4 (11/22-11/28) Implementation Week 5 (11/29-12/5) Updated storytelling Updated visualization ideas (expert & peer feedback) Implementation Week 6 (12/6-12/12) Implementation Updated storytelling Final product Overview and motivation Questions Data Design evolution Implementation Evaluation

3 13

15 18 23 24

27 28

30

32 32 36

38 40

43 43 46 46 48 52

2


Project Plan Project name: Violence on the Global Stage Team: Charlene Hwang charlenehwang@college.harvard.edu Nathan Lee nlee01@college.harvard.edu Week 1: 11/1 – 11/7

Completed detailed project plan

Motivation Media and political coverage of violence and war around the globe has been ever increasing, leading us to believe that the world has become progressively less safe. We would like to begin by researching the production of military arms over the last decade or so to study trends regarding production of weapons as well as overall military expenditure per country. We would then start with a series of visualizations that either support or refutes this idea that there is increasing violence around the world, potentially due to patterns in weapons production or military expenditures. Next, we would like to move onto researching the frequency and magnitude of conflicts on a global scale over the last few decades and present visualizations that support, refute, or cast a different perspective over this prevailing perception of violence and war. We hope to also analyze whether or not a connection between national military expenditures and global warfare exists, encouraging awareness and commentary about national military spending and increased/decreased global violence. Goals & Tasks Background research: • • •

Choosing topic of interest (military expenditures and fatalities) Study potential trends in area of interest Find quotes and key facts we want to reference in the final product

Data Collection/Wrangling: • •

Identify necessary data sets from reputable sources Clean through data to narrow down focus

Develop story •

Decide relationship we want to study between data sets 3


Identify messages we want to emphasize

Design • • •

Design and develop key visualizations Create interactive storyboard Draft website layout

Implement visualizations • • •

2-3 visualizations for military expenditures dataset 2-3 visualizations for total fatalities dataset 2-3 visualizations combining two datasets and looking for general trends

Website • • • •

Find webpage host Code and layout webpage Combine visualizations and webpage Complete design of webpage (bootstrap, font choice, etc.)

Testing • •

Ensure that webpage is user-friendly Have friends/experts test out webpage

Screencast • •

Develop 1 minute pitch for final project Record 2 minute video explaining purpose of final project + pitch Description of data:

Our data is going to come from 2 main sources. Our first source is the Stockholm International Peace Research Institute. From here we are taking 2 large datasets: one on military expenditures (separated by region or country) from 1988 - 2015 and the other on the top 100 arms producers around the world and their total sales ($) from 2002 - 2014. Our second source is through a collaboration of Uppsala Conflict Data Program (UCDP) at the department of Peace and Conflict Research, Uppsala University, and the Centre for the Study of Civil War at the International Peace Research Institute Sweden, which aggregates comprehensive global conflict data from 1989 to 2015 in terms of overall casualties, type of conflict (state v. state, civil war, one-sided, etc), and the conflicts’ actors. From here we will be collecting data regarding armed conflicts of all types around the world and the number of causalities from each. The number of years we will collect is still unknown at this time (will be at least a couple decades worth).

4


Project Timeline Week 1: 11/03 •

Project proposal

Week 2: 11/07 • • • • •

Data collection complete Background research complete (facts and statistics) Initial design ideas Assign responsibilities Submit project plan

Week 3: 11/14 • • • • • •

Have clean data Get feedback on design ideas Find website host Begin coding general layout of the website Develop storyline a little more Basic layout of visualizations 1 - 4

11/17 Project Prototype V1 (have clean data and is ready to be used in visualizations) Week 4: 11/21 • • • •

Finalize visualizations 1 - 4 Combine visualizations and basic webpage Start developing storyline (with facts & quotes) Basic layout of visualizations 5 - 6

11/24 Project Prototype V2 Week 5: 11/28 • • • •

Finalize visualizations 5 - 6 Basic layout visualization 7 Choose fonts/color palette for website Continue integration and website development

Week 6: 12/05 • • • •

Finalize visualization 7 Write introduction/about us Complete storyline Implement and finalize visualization 8 IF there’s time

Week 7: 12/12 • • •

Final debugging Video pitch/screencast Project due!!!!!!

12/15 Project Showcase!!!!

5


Example sketches

6


Interaction Storyboard

7


Webpage layout/Storytelling

8


9


10


Feature list

Must-Have

Nice-to-Have

Introduction

Key facts regarding military expenditures and conflicts and background regarding media sensationalism of violence

1: Military Expenditures by Country (areachart)

Stacked area chart with top 5-10 countries’ military expenditures over the full time period, each country separate color Tooltips on mouseover displaying current year and the overall total for that year

2: Military Amount spent $ mapped to shade Click-and-drag for brush, Expenditures by of color (white to red) for each mouseover for a dotted line that Country country, with a timeline area chart quickly scrubs one year at a time (choropleth + on the bottom to brush through to quickly see trends over time timeline) time periods (see the “Household (similar to manually having a Purchases” lab for brushing play-pause button to see the timeline example) map colors change over time as you scrub)

3: Global Conflict Casualties (line chart)

Line chart with total conflict fatalities by year Tooltip on mouseover that shows total casualties for a single year (bubble and vertical line to track mouseover, similar to the Zaatari Refugee homework)

4: Global Conflict Casualties (choropleth + timeline)

Each conflict is encoded to a circle that has size corresponding to the number of casualties and position according to geographic location, with a timeline line chart on the bottom to brush through time periods (see visualization 2)

Same as visualization 2

5: Global Conflict Casualties by Country and

Horizontal stacked bar chart by region (continent) with top 10-15 countries subdivided into each horizontal bar, representing the

Same as vis 2

11


Region (horizontal bar chart)

number of casualties for a given time period Timeline line chart on bottom to brush through (see vis 2)

6: Military Expenditures and Global Conflict Casualties (line chart)

Simple line chart with left and right y-axes, one for $ military and the other for # casualties, both by year Tooltips that display data by year for both $ military and # casualties

7: Military Expenditures and Global Conflict Casualties (scatterplot)

Scatterplot of top 10 countries sorted by either $ military or # casualties, within a certain time period that is selected via dropdown list (1990-1995, 1995-2000, 2000-2005, 2005-2010, 20102015, total)

Slider to select time period (similar to extra credit to FIFA homework)

8. Military Expenditures, Global Conflict Casualties, Types of Conflict, Region of Country (force-directed graph)

Conclusion

Final thoughts & potential trends spotted

About us, next steps, etc.

Screencast

Motivation for project, introduce visualizations

Only if time permits: create force-directed graph with: • Node for each country • Size of node corresponding to military expenditures (eliminate countries with expenditures lower than X amount) • Connections with other nodes for each corresponding conflict • Larger width of connection for number of casualties • Color of connection for type of conflict • Color of node for region of country

12


Team roles Nathan: • • • • •

Implementer: Code half of the visualizations (~3) Trouble shooter: Check for technical failures and debug accordingly Webpage developer: Find website for hosting + main coder for website layout Designer: Make design choices regarding fonts, color schemes, etc. Stress tester: Test final website for possible formatting errors or browser incompatibilities

Charlene: • • • • • • •

Researcher: Research information for background storytelling and facts/quotes for the website Data collector/wrangler: Find and clean data sets (parse through for necessary categories) Coordinator: Set up meeting times and send out calendar invites and handle external communication Submitter: Ensures all deliverables are submitted on time Implementer: Code half of the visualizations (~3) Trouble shooter: Check that integration between visualizations and the website is seamless Screencaster: Develop video narrative of webpage and project overview

Data Collection

Top 100 arms producers

13


Arms expenditures by country

Conflicts and fatalities

14


Week 2: 11/8 – 11/14

Changed and cleaned dataset

After some consideration and discussions with our project TF, Alain, we realized that the scope of our datasets was too large, and it would be too difficult for us to connect our visualizations in a meaningful way by using 3 separate data sets and 7+ visualizations. From there, we decided to solely use the dataset from a collaboration of Uppsala Conflict Data Program (UCDP) at the department of Peace and Conflict Research, Uppsala University, and the Centre for the Study of Civil War at the International Peace Research Institute Sweden, which gave us access to different types of conflicts, the parties involved, and the number of casualties from each. Our data spanned 25 years, so it gave us a pretty wide range of information to work from. However, this also meant that our dataset was over 40 megabytes when we first started working on it. We went through all the data and deleted

15


unnecessary columns—keeping only information regarding conflict name and ID number, location by latitude and longitude as well as country, parties involved (aggressor and defender), and casualties from each conflict. Casualties were separated into four groups: aggressors, defenders, unknown, and civilians. Our data was first organized by day so we also aggregated all the data into monthly counts of fatalities by conflict.

Name Conflict_new_id

Conflict_name

Side_a

Side_b

Description A unique dyad id code for each individual conflict in the dataset. Further note that this variable will be the main identifier in all other related datasets and UCDP releases. Name of the UCDP conflict to which the event belongs. For non-state conflicts and one0sided violence, this is the same as the dyad name The name of Side A in the dyad. In state-based conflicts always a government. In one-sided violence always the perpetrating party. The name of Side B in the

Format integer

String(999)

String(9999)

String(9999) 16


Latitude Longitude Country Region

Date_start Deaths_a

Deaths_b

Deaths_civilians

Deaths_unknown Best_est

dyad. In state-based always the rebel movement or rivaling government. In one-sided violence always civilians. Latitude (in decimal degrees) Longitude(in decimal degrees) Name of the country in which the event takes place Region where the event took place. One of the following: Africa, Americas, Asia, Europe, Middle East The earliest possible date when the event has taken place. The best estimate of deaths sustained by side a. Always 0 for one-sided violence. The best estimate of deaths sustained by side b. Always 0 for one-sided violence. The best estimate of dead civilians in the event. For non-state or state-based events, this is the number of collateral damage resulting in fighting between side a and side b. For one-sided violence, it is the number of civilians killed by side a. The best estimate of deaths of persons of unknown status The best and most likely estimate of total fatalities resulting from an event. It is always the sum of

Numeric(9,6) Numeric(9,6) String(999) String(999)

Date(YYYY-MM-DD) Integer

Integer

Integer

Integer Integer

17


Isocc

deaths_a, deaths_b, deaths_civilians, and deaths_unknown. The ISO 3-letter code of the country where the event takes place.

String(3)

Updated visualizations

Because we changed our plans in terms of our datasets, we had to re-draw our visualizations and storyboard. We wanted to make it a bit simpler so we decided to go with 4 visualizations rather than 7+ as we did previously. Visualization Description Stacked area chart - Data aggregated by year or month - Users have the option of seeing total fatalities separated by region Timeline/bar chart by month - Fatalities broken down by month with small boxes to represent deaths - Users can scroll left and right to see trends over time Personalized bar chart - Breakdown of different types of fatalities (side_a, side_b, civilians, unknown) with each icon in the bar chart representing a number of deaths - Users can use a dropdown to choose the time period to view Globe with fatalities - Interactive and will show conflicts appearing as small dots on the globe - Planning on using a play pause button to let users see conflicts occurring as time goes on - The size of dot should correspond with the number of deaths in the conflict

18


Updated visualizations

19


20


Updated Interactions

21


22


23


Implemented visualizations

We began implementing our visualizations and developed the draft for the stacked area chart and globe. The stacked area chart is divided by region currently (by color) and the globe is functional (can spin).

24


Developed storyline

Landing page: - Split the home page into 9 boxes o Center box has the title in black w/ a white background and a button that says explore o Other 8 boxes are all newscasts reporting on violence around the world § 9/11: https://www.youtube.com/watch?v=1Tx0dXsZW2s § Paris attacks: https://www.youtube.com/watch?v=1P0FiwWUl8E § Boston bombings: https://www.youtube.com/watch?v=X0EFYK0sjCY § Ukraine attack: https://www.youtube.com/watch?v=guGnS9bfy9o § Gaza battles: https://www.youtube.com/watch?v=6KVHPR3mfG0 § Assassination of politician: https://www.youtube.com/watch?v=MqRZ-_zRFsU § Shots fired black lives matter protest: https://www.youtube.com/watch?v=93QTRR4l9VA § Sandy hook shooting: https://www.youtube.com/watch?v=nPpEpNk519U § Orlando shooting: https://www.youtube.com/watch?v=ayguIkJiTgA Page 1: - Headline: “Violence exists… but past decades were far more violent” – Steven Pinker - Subtitle: Is this true? - Black background white text - Scroll to continue to next page Page 2: - Introduction o Talk about media representation of violence and perception that the world is now less safe; present the alternative opinion that our world is actually more peaceful now - List key facts Page 3: - Stacked area chart (left) o Fatalities aggregated by year and users have the option of choosing an area chart split by region or by type of fatality o Option to brush to look at more detailed data

25


-

Explanation + quotes (right) o Discuss trends and note the big peaks we can see in the data

Page 4: - Timeline/bar chart (left) o A joint visualization between a timeline and a bar chart (instead of actual bars we want it to use icons to represent a certain number of fatalities) o As users mouse over the time line, the bar chart will also update - Quotes + facts (right) o Discuss number of civilian casualties o Look at focus of media during conflicts like these Page 5: - Duplicate timeline x-axis but no bars-- have markers for news headlines instead o Provide links for people to explore how media talks about events o Eritrean War of Independence 1961 – 1991: http://www.nytimes.com/1989/08/18/world/carter-to-bringtogether-ethiopian-foes.html o Angola Civil War 1975 - 2002: http://www.sahistory.org.za/article/angolan-civil-war-1975-2002brief-history o Sudan Coup June 1989: http://www.nytimes.com/1989/07/01/world/military-coup-insudan-ousts-civilian-regime.html o Tiananmen Square Massacre June 1989: http://www.history.com/this-day-in-history/tiananmen-squaremassacre-takes-place o Gulf War August 1990 – February 1991: http://www.nytimes.com/1991/02/24/world/war-in-the-gulf-warsummary.html o Algerian Civil War December 1991 – February 2002: http://www.algeriawatch.org/en/articles/1997_2000/paradox_democracy.htm o Somali Civil War 1991 - 2008: http://www.theatlantic.com/magazine/archive/2008/12/timelinesomalia-1991-2008/307190/ o Bosnia War 1992 -1995: https://history.state.gov/milestones/19932000/bosnia o Afghan Civil War 1992 – 1996: https://www.onwar.com/aced/chrono/c1900s/yr92/civilafghanista n1992.htm o Rwanda Genocide April 1994 – July 1994: https://www.theguardian.com/world/1994/apr/09/rwanda

26


o Konkomba/Nonumba 1994 – September 2002: https://www.justice.gov/sites/default/files/eoir/legacy/2014/09/25 /Konkomba-Nanumba%20conflict.pdf o Iraqi Kurdish War May 1994 – November 1997: http://www.nytimes.com/1996/09/04/world/the-endless-battleiraq-the-kurds-and-the-united-states.html o Ethiopia-Eritrea War May 1998 – June 2000: http://www.globalsecurity.org/military/world/war/eritrea.htm o

Page 6: - Interactive globe (left) o With play/pause button and dots to represent each conflict - Facts (right) o Potentially have facts pop up on the right with big conflicts Page 7: - Conclusion/trends that we’ve seen - Links to our sources and places people can get more information Page 8: - Author bios - Process book

27


Week 3: 11/15 – 11/21

Updated visualization ideas

We had originally planned for a static timeline with newspaper articles linked for the users to get more information, but we decided to change it into visualization. Additionally, we changed the stacked area chart so that we would only show the data by region and not by fatality since it would be a bit redundant with the other visualizations.

Implemented visualizations

We continued developing our visualizations this week. The tooltips on the stacked area chart are now much more functional. Continuing with the globe, we have appended the conflicts onto the globe as red dots but unfortunately they don’t yet spin with the globe (although they do transition in). The whole visualization was lagging a bit as there were 130,000 points being appended, so we ended up aggregating this data and reducing it to 20,000 points instead. Lastly, we started the newspaper timeline visualization and have made it interactive. Next step for this one is to find articles.

28


Updated storytelling (round 2)

After Skyping with our Project TF again (Alain), we realized that the storytelling aspect of our project wasn’t necessarily that cohesive and understandable. Thus we decided to change the focus slightly. We shifted the focus

29


of our intro to shocking the user rather than simply looking at media first. To follow up, we decided to frame all of our visualizations around a separate question and then end with a conclusion based on the data we presented. Intro: - Use familiar things in order to draw attention and shock the user (things like video clips and newspaper headings) - We would need to create this from scratch by pulling Youtube videos and taking screenshots - Using this bit of sensationalism ourselves would, in our opinion, cause the user to feel a sense of urgency regarding this topic of conflicts and violence around the world. Questions - We want to continue and ask the user about their own lives - What have you seen? - Is this really happening? - Is it just an overabundance of media coverage? Media coverage - We want to say that media coverage of violence is not proportional to what actually happens - Present facts about media coverage and potentially quotes - Finish off by asking -- is the world really more violent? This is the main question that we are trying to answer. Visualizations - Begin by showing the timeline and asking: What has actually happened? - Continue with the stacked area chart: What are the trends? - Continue with the globe: Where is this happening? - End with personalized bar chart: Who is being affected? Conclusion - We want to conclude by presenting our own opinion on what has happened based on our data - Maybe quote a couple papers or other independent research - Include links where users can study this topic more or read about it online/in print themselves if they are interested

30


Week 4 11/22 – 11/28

Updated visualization plan

Unfortunately, the globe at this point in time did not seem feasible to us anymore. We were having difficulties placing all the conflicts on the same path but at the same time still rotate it with the globe. Additionally, with transitions in and out, the globe was still lagging too much and was not that useful. Instead, we decided to transform this idea into a 2D map of the world.

Implemented visualizations

For our timeline, we made it so the dots representing each year could be interactive and people could see different articles. We collected the articles and wrote summaries for each but have not implemented them internally within the website yet. As mentioned previously, the globe was no longer feasible to us so we implemented a 2D map with conflicts. These conflicts transition in and out as well as have different sizes depending on how many fatalities there were. Lastly, we finished the personalized bar chart visualization that also is the multi-view visualization that we have. We have a smaller stacked bar chart timeline that is connected to coffins. We had hoped to fill the coffins with bodies that represented how many deaths there were, but we ended up deciding to fill them with blood instead, thinking that this was equally impactful. We made the choice to restrict users to 1 – 4 years of brushing data in our timeline because we wanted to make sure what they were seeing was useful but not too convoluted either.

31


32


Week 5 11/29 – 12/5

Updated storytelling

As discussed earlier, we wanted to create a video from scratch that utilized a bit of sensationalism in order to draw the user’s attention. We decided to splice together a few key video clips as well as show an overlay of newspaper headlines in order to create a sense of familiarity and draw people into our story.

Updated visualization ideas

In class on Thursday, we received peer feedback on our visualizations and collected some pretty good comments. Because we had not yet completed the storyline, and our introduction wasn’t that clear, students were a bit confused about the purpose of our project until they got to the second visualization. Additionally, one common element was that it needed to be more intuitive how they could interact with the visualizations. For instance, it was difficult for them to figure out that they could interact with the timeline at all, and they didn’t realize that the map was interactive as well. We have decided to add instructions with each visualization in some form (either in a small paragraph of text or offer a “help” button).

33


We also received some specific advice for our stacked area chart. Because we allowed them to see a tooltip when they hovered over each region, which also made the entire area change color, they wanted it to be clickable as well, so we wanted to update that accordingly. Lastly, users wished to have the option to go back to older visualizations to see them again, so we wanted to implement a navigation bar at the top of the page too. Additionally, we received expert feedback from our project TF. Firstly, in terms of storytelling he suggested that we change the video clips we were using so that it wouldn’t mislead viewers into thinking the focus of our presentation was about terror attacks. He also made some style comments regarding incorporating the color red to help convey the association of violence. Because he suggested actual visual cues rather than simply instruction, for the timeline, we’re adding a glow in order to direct the user towards the circles at the bottom of the page while we will be adding a plus and minus zooming indicator on the map.

34


35


36


Implemented visualizations

As mentioned above, we received a lot of constructive feedback this week. We made a couple of the edits that were suggested to us, which includes adding a navigation bar at the top of the page for user convenience. We also updated our timeline with the ability to click each region individually so that viewers can examine each area separately. This can be done also through the legend we added in which users can choose to show only specific regions and customize it as they wish. Lastly, we added a plus and minus sign to the map as a visual cue for scrolling in and out.

37


38


Week 6 12/6 – 12/12

Implemented visualizations

We began finishing up the last additions to our visualizations. On the timeline, we found information regarding the largest conflicts of each year from 1989 – 2015 as well as a photo for each. We also added tooltips and edited the styling of the stacked area chart. As for the map, we implemented a play/pause and restart button for users to interact with the data as well as tooltips when they hover over each conflict. The tooltips have information regarding the main actors of the conflict, the year it began, and the number of casualties. We made a style choice to spread the map out onto the entire page because we felt it could add more detail when users zoomed in and out (larger space allows for more maneuverability).

39


40


Updated storytelling

In our intro video, we changed the video clips in order to encompass a broader range of conflicts rather than just terrorist attacks as well as the newspaper headlines we used. Based on our TF’s suggestions, we added red text to our info pages in order to continue the motif of conflicts and violence throughout the entire project. Also, in order to add some background information and add a more informational aspect to our work, we added intro pages to each of the main visualizations. This also gave us a chance to do a bit of summary and add to the storytelling before showing our visualizations. With each visualization we also add in key facts about the most notable things on the page as well as instructions on how to use the visualization, as requested by our peers and our project TF.

41


42


Final Product

Overview and Motivation War and violence saturate our news and social media. With the increasing media sensationalism of violence around the world, many believe that the world has become progressively less safe. Studies show that overexposure to this kind of news results in elevated levels of fear and anxiety about the future. We wanted to take a more objective look at the conflicts in the past 27 years and use a data-driven approach in order to increase awareness about the reality of this situation. We were inspired by simply our own experiences seeing the overwhelming coverage of violent occurrences on our social media. We had read blurbs of a book written by Steven Pinker that stated that all forms of violence had actually decreased, contrary to popular opinion. Questions Originally, our scope of our project was much larger than it is now. We wanted to study not only conflicts world wide but also military expenditures and how arms production affected violence. We quickly realized that it would be very difficult to produce meaningful visualizations while still trying to combine all of these datasets. So from there, we narrowed our focus to only include conflicts. We focused our website around 5 main questions: what have you seen, what’s happened, where in the world, which regions, and who’s been affected. These questions were displayed before each of their respective visualizations in order to provide a sort of “introduction” before users start interacting with them.

43


44


45


Data

We ended up using a dataset that was a collaboration of Uppsala Conflict Data Program (UCDP) at the department of Peace and Conflict Research, Uppsala University, and the Centre for the Study of Civil War at the International Peace Research Institute Sweden, which aggregates comprehensive global conflict data from 1989 to 2015 in terms of overall casualties, type of conflict (state v. state, civil war, one-sided, etc), and the conflicts’ actors. Our dataset was simply too large, so we ended up deleting all information except for that related to: actors in the conflict, number of fatalities (and type), and location. We started off our initial data analysis by using a stacked area chart in order to ensure that our original hypothesis was correct—that on average, the world was not actually getting more violent. As the stacked area chart affirmed our thinking, we knew we could move forward with this idea. Design & evolution After initially narrowing our focus down to four different unique visualizations, these designs also adapted over time due to both feasibility and more effective implementation. The globe visualization eventually was converted to a 2d world map due to the vast difficulties in combining the different interaction elements together (spinning the globe automatically and manually, updating the conflict bubbles geographically to be updated with the rotating view, and a

46


play/pause button). The 2d world map also had the benefit of allowing the viewer to see the entire globe at once and compare one region’s activity to another simultaneously.

Our original plan for the multi-view visualization involved a zoomable and scrollable stacked bar chart showing the different types of casualties, while a brush tool would control an interactive bar chart with a custom graphic clipping to show data for the specified time period. Instead, we split these ideas into three different components: a broad-view, brushable timeline on the bottom, a zoomed view on the top left, and a series of coffins filling with blood as a custom bar chart on the top right. In this way, the user brushes over the timeline to see the zoomed view on the top left while observing the number of deaths for that time period on the top right. Using three different components allowed for clearer understanding of the overall visualization and an easier-to-use user interface. In terms of actual design choices, we made very deliberate decisions based on what we learned in class. The timeline visualization uses the blinking subtitle text to quickly catch the viewer’s eye so that he/she immediately understands how to interact with the visualization by hovering over the timeline circles. The timeline also uses a bright red to easily attract attention, but then fades opacity while a circle is hovered to bring the focus back to the content itself. The titles, headlines, and text use appropriate sizing as a form of design layering to direct the reader, while the blue source text is easily recognizable as a way to link to external material. The map visualization also uses blinking text to help the viewer access the play button quickly. The conflict circles are colored red to match the theme of

47


violence while popping out noticeably, and the radius of the circle also encodes the relative number of casualties for each conflict. The tooltip layers on top of the visualization to be easily seen over the other content, but use transparency to allow the user to see more material appearing on the map simultaneously. Finally, the play/pause and reset buttons allow for custom interactivity. The regions visualization uses a stacked area chart to layer the data in a clear manner. Increasing opacity of a given area on hover communicates the interactive element of the chart, and expanding the view to individual areas allows for better clarity on one region’s data. Finally, the vertical line with tooltips give a more detailed view. The casualties visualization begins with the overall stacked bar chart timeline with 4 different colors corresponding to the 4 different categories of death. In addition, the explanation text at the top is also deliberately colored to doubleencode the colors corresponding to casualty type. The coffins are relatively sized according to the total number of deaths for each category. After pressing the GO button, the timeline moves to the bottom and the coffins move to the right, allowing space for the zoomed view of the stacked bar chart to appear. By deliberately timing the order and movement of the three different components, the user can understand that the timeline and coffins are the primary interactive components, while the zoomed view fits with the previous two. The light box that appears over the timeline allows for brushing a specific time period, while the zoomed view and coffins reflect the selected time. The blood in the coffins offers a unique, memorable, and possibly morbid way to visualize the data. Finally, we make sure to note that the y-axis shifts relative to the currently viewed data in the explanation notes to avoid lie-factor. Implementation Visualization 1: We begin with a timeline showing an overview of the most significant conflicts each year from 1989 to 2015. This allows users to see individual headlines when interacting with the timeline circles as well as view external sources to provide background and context to the reality of violence around the world.

48


Visualization 2: Our second visualization is our world map. We take a broad view of the data by displaying the map with different sized bubbles corresponding to the relative number of deaths per conflict. Users have the option of zooming in and out in order to do more in depth examinations of the conflicts (each bubble also has a tooltip with more information). We have a play/pause button so viewers can see overall trends around the world. We intend them to see that the majority of conflicts are actually quite small, and the frequency of conflicts have not significantly increased over time.

49


Visualization 3: With our third visualization, we wanted to take a closer look at the trends in the different regions of the world. Users can interact with this visualization by looking at the tooltip or clicking on an individual region to see it expand. From there, they have the option to add in other regions for comparison by using our legend. With this view, we want to show that there has been a relative consistency of conflict deaths over the last decade (a few large spikes corresponding with the Rwandan Genocide and the first and second Congo Wars.).

50


Visualization 4: Our last visualization uses a combined view in order to demonstrate the breakdown of different conflict deaths. The filling coffins represent the different casualty types, with the number of civilian deaths accounting for the majority of deaths. Users can brush through the timeline at the bottom of the page, which we’ve restricted to 1 – 4 years because we wanted to make sure the data they were seeing was meaningful but would 51


not overcrowd the bar chart area. The colors in the bar chart correspond to the coffins on the right.

Evaluation When first approaching the topic of “conflicts on the global stage,” we weren’t quite sure what direction we wanted to take in terms of our story and mission statement. One of the first visualizations we created was the stacked area chart by region, which immediately gave us the insight that besides the spikes of the

52


1994 Rwandan Genocide and the First/Second Congo Wars, the last decade had seen a relatively consistent number of conflict deaths—all despite the growing media attention and sensationalism towards the topic. After gaining this insight, we began forming questions for our visualizations to answer: “what’s happened, where in the world, in which regions, and who’s been affected.” We implemented each of our visualizations to directly answer each question. While we believe that our visualizations do an effective job of answering each posed question, there are a few instances for which some more in-depth views could be helpful—for instance, perhaps seeing the names of the conflicts in a given brushed area of the multi-view visualization, or advanced tooltips for the stacked area chart to see more details of particular events that occurred at major spikes (instead of only seeing a few text explanations). Given more time, we would definitely work to have more of the data accessible at any given visualization to allow the viewer to make better connections between each perspective.

53

[Documentation] Violence on the Global Stage (Process Book)  

CS171 (Data Visualization) Final Project: Process Book

Read more
Read more
Similar to
Popular now
Just for you