A3-JamesHamlin
From CS294-10 Visualization Fa08
Contents |
Storyboard
Data Domain and Visualization
Visualizing the U.S. Foreign Aid Budget
The planned application will provide an interactive visualization of the U.S. foreign aid budget, using data from the government website Greenbook, which has per-country data on the foreign aid budget going back to at least 1997. The goal is to allow the user to view the allocation of the federal foreign aid budget over different uses (e.g. health, food, narcotics, military), over different countries, and over time.
Juxtaposed With User-Provided Per-Country Data
Human rights data from CIRI Human Rights Data Project, which contains human rights data for 195 countries over 25 years, will be juxtaposed with the budget data. If possible, the application will provide a facility for the user to specify a per-country data set of ordinal or quantitative values for an arbitrary number of nominal categories, allowing the investigation of relationships between budget allocation and any country feature of interest. For example, one might use per-country AIDS data to see if funding for HIV-prevention projects is being allocated where it is needed.
This feature is the primary purpose of the visualization, so the proposed interactivity techniques, described below, have been chosen so as to be suitable for the presentation of this aspect of the data.
Interactivity Techniques and Storyboard
Treemap
The primary view will be a treemap, which will naturally represent the hierarchical composition of the foreign aid budget. The root will represent the total budget, intermediate nodes will represent the proportion allocated to budget categories and subcategories, and leaf nodes will represent the proportion of these categories allocated to particular countries (which may appear beneath more than one subcategory). The value of each leaf in the treemap will be used to represent the (ordinal/quantitative) value of a selected category in the secondary data set for the corresponding country. A user can use different categories of the secondary, per-country data for each category of the budget data. The hue of the leaves will represent the applied category. So, for example, one might use a human rights metric on the military aid category, literacy rate on the educational aid category, and HIV/AIDS prevalence on the HIV prevention category. The per-country data may be set for a budget category by dragging one of the colored and labeled bars from the right onto the desired node in the treemap.
The treemap allows a user to easily "drill down" from the high-level picture presented to the budget subcategories. When a subcategory node is clicked, the node expands to fill the whole treemap view.
Details on Demand
Hovering the cursor over a node reveals the particular values associated with that node, such as country, budget allocation, and any secondary values.
Treemap Animation
Allocation changes over time will be represented in the same treemap view space, but changed over time. A slider may be used to select the desired year, or the budget history may be played in the treemap as an animation. Since the temporal aspect of the data is not key to the intended purpose of the visualization, this simple mechanism for depicting time should be sufficient.
Final Writeup
Final Result
The project was implemented in Flex/Flare. It includes most of the proposed features save for the exceptions described below. A treemap displays the foreign aid budget with individual countries as the leaf nodes. Clicking on a node fills the treemap view with the nodes one level down from the current view depth. A button below the treemap view zooms back out. A user can move between years, play through all years from the current year, and select different parts of the human rights dataset used to colorize the treemap.
Changes From Proposal
The most notable change from the proposal is that the user is not able to add her own data to colorize the treemap. But as this was proposed as an optional addition, its absence isn't too problematic. The scrollbar for controlling date was omitted, which hurts usability, but without, as far as I could tell, a ready-to-use scrollbar class in Flare/Flex, implementing such a common UI element from scratch seemed too tedious and banal to spend time on for the project.
Source Code
Compiling the source code requires Flex Builder and the Flare visualization library. The resulting flash movie accesses the online data sets, which are stored on rented server space.
Project Post-mortem
The greatest hassle in the implementation of the project was formatting the data for Flare. The budget data came in several csv files that had to be reformatted and combined to be used in Flare. While implementing the project, the usual problems when learning a new API surfaced, as I searched for the best way to accomplish different things such as treemap zooming.
Process
I began with a small dummy dataset to get the application implementation approximately right. Some distinct parts of the implementation were:
- Joining the two datasets into a single Flare dataset
- Setting up the basic treemap
- Animating the treemap root, including hiding nodes not visualized
- Animating the year of the displayed foreign aid data
- Animating the year of the displayed human rights data
- Hooking everything up to the user interface elements
- Formatting the datasets for use in Flare
- Testing the visualization with the full data and fixing revealed bugs
Roughly how much time did you spend developing your application?
The project took several hours (~10) over a few days to implement.
What aspects took the most time?
Getting up to speed with Flare took the most time, which included iterating through different methods of implementing the visualization features.
