Team Members: Lynsey Liu, Emily Leland, Patrick Spieker

Design Rationale

Our goal with this prototype was to show the amount of aid Middle Eastern country receives from all of its donors and the change in the country's Human Development Index (HDI) over time. The visualization encodes each recipient country as a square, with the squares placed in the country's roughly corresponding geographic locations in relation to each other. We chose to use this form of encoding rather than a traditional map to make the visualization more organized and easier to view, make smaller countries easier to see, and normalize the sizes so as to not imply any other information about the countries, like population or GDP. The donor countries are represented by equal segments of a circle surrounding the recipient countries. Arrows from donor to recipient countries represent the flow of aid, with the width of the arrow representing the dollar amount of aid, the width being determined on a log scale to reasonably visualize large disparities in amount of aid. We used coloring of the recipient countries to encode our binned values of HDI, according to the legend. Because we wanted to focus on countries receiving aid individually and have a visual comparison of the amounts of aid to the country coming from each donor, we decided to limit the view of the arrows to one selected recipient at a time. All of these elements are viewed together with one year's data at a time and a time scale at the bottom allows you to drag from year to year to see that year's data. Overall, we aim with our design choices to show a visual representation of the flow of aid alongside the well-being of the countries being aided.

Development Process

We started our development process by sitting down altogether and discussing what data we wanted to explore with this prototype and then coming up with a sketch on what our visualization of this data would look like. To first get our data together, Patrick and Lynsey narrowed down and searched for the data sources while Emily wrangled the data into the format we needed, making decisions about which countries to include or exclude along the way. We then broke our vision down into components and individually coded small demos for our assigned component with placeholder data; Patrick worked on the square representations of the recipient countries and the arrows, Lynsey worked on the time scale slider and the ring of donor countries, and Emily added the color encoding and polished the interactions in our visualization. After Patrick added our finalized data set to his code, we put all of our components together and worked on coding the interactions between our components, as well as finalizing details like coloring, arrow width, the HDI legend, and general appearance. The whole development process took roughly 80 hours, with debugging taking the most time.