A3-SarahVanWart

From CS294-10 Visualization Fa08

Jump to: navigation, search

Contents

Part I: Scoping

Data Domain

Part I. 10/01/2008

For this assignment, I would like to continue using the environmental data that I analyzed in Assignment 2. Again, this dataset comes from Yale and Columbia Universities (http://epi.yale.edu/CountryScores), and gives information about health and environmental indicators worldwide by country. I have pasted a small exerpt of the available fields below:

  • Country Name
  • EPI Peer Group by Geographic Region
  • Population
  • GDP per capita
  • Landlocked Country Dummy Variable
  • Land Area
  • Environmental Performance Index (EPI)
  • Environmental Health
  • Ecosystem Vitality
  • Air Pollution (effects on nature)
  • Water (effects of nature)
  • Biodiversity & Habitat
  • Productive Natural Resources
  • Climate Change
  • Environmental Burden of Disease
  • Water (effects on humans)
  • Air Pollution (effects on humans)

Interactive Visualization Technique

Part I. 10/01/2008

Interactive visualization techniques for this assignment will be modeled after the Baseball Statistics Visualization [Wills 95], where the techniques of brushing and highlighting on one chart are used to highlight corresponding data in other charts. For this specific data domain (environmental indicators), the user will interact with the data by selecting a particular county on one environmental indicator chart, and seeing how that country is ranked (relative to other countries) in the other environmental indicator charts.

Time permitting, I would also like to:

  • Allow the user to select a particular area of the world (via the GoogleMaps API), and have this selection also highlight the charts.
  • Allow the user to select a particular area within a chart and have this this selection also highlight the other charts (and the map).

Research Question

Part I. 10/01/2008

My research question, much like Assigment 2, is:

"Are there any patterns or correlations that we can make about countries' demographic, population, and economic situations and environmental indicators?"

Hopefully, providing some different visualization tools will help users to make further connections between variables.

Storyboard

Part I. 10/01/2008

The process will flow as follows:

  • 4 images will be presented to the user: a map and three different perspectives of environmental data by country.
  • The user will click one of the country-level data points in one of the charts, and the corresponding point will be dynamically highlighted in the other two charts and the country will also be highlighted on the map.
  • A detailed profile of the country will also be presented below the charts (drill-down approach).

Technologies Used

Part I. 10/01/2008

In order to construct this interactive visualization, I plan to use Flash, Flex, Flare, the Google Maps API, and an underlying tab-delimited data file.

Why this Interaction Technique?

Part I. 10/01/2008

In this particular data set, each environmental score is really made up of smaller and more specific scores (air, water, soil) which are all aggregated together. When looking at the higher-level aggregate data, it seems like "brushing" one score to see how this score relates to it's parent or child scores would be useful.

Hopefully, by quickly deconstructing and comparing some of the inputs that go into determining a country's overall environmental index (EPI), certain relationships and patterns can be more easily seen.

Part II: Implementation

The Code

Note: I was afraid to leave something out, so I zipped my entire project folder, which also includes some useless subversion directories. I also did not include references to the Flare libraries, as I assume that you have those locally.

Within this zip file, the following files actually implement the visualization logic:

  • src/BrushingVis.mxml
  • src/infovis/Chart.as
  • src/infovis/MapControl.as

I have also included the Google Maps library in the main directory: map_flex_1_6.swc. To include it in your Flex project,

  1. Properties >> Action Script Build Path >> Library Path >> Add SWC
  2. Browser to map_flex_1_6.swc in Program Files >> GoogleAPI

Description of the Implementation

The final interactive visualization did manage to implement what was proposed in the storyboard in Part I. There is a map of the world, and three different perspectives of environmental data by country. The chart on the top right, the one presenting "Environmental Performance Index" (EPI) data versus GDP data, is a chart of the top-most measure of the environmental ranking in a country, and the bottom two charts (the environmental healh chart and the ecosystem chart) are the two underlying indices that make up the EPI. The interactive visualization provides two ways in which the user can interact with this environmental data:

Method 1

  • Input: The user drags a rectangular shape over the points of interest in one chart. As soon as the drag completes, the visualization generates output.
  • Output:
    • The corresponding points in the other two charts are highlighted
    • The selected countries are highlighted on the map
    • A grid-style tabular display is presented at the bottom of the screen.

Method 2

  • Input: The user selects an area of the world by clicking two points on the map. These two points generate a selection rectangle and the countries contained within this rectangle are selected when the user clicks the "Brush Charts" button (above the map in the header bar).
  • Output: same as in Method 1, except for that all three charts are brushed.


Differences Between Storyboard and Final Implementation

I actually did manage to implement the proposed storyboard. Fortunately, I was even able to implement the optional components: in addition to allowing a user to brush a chart by clicking on a single point, I also added the ability to select more than one point at a time using a zoom box. I was excited about this, because it really allowed for more regional trends to come to the surface. For example, if you begin your zoom by filtering the "Environmental Health" chart, and you start at the bottom left (low index values) and begin to highlight the chart from left to right, you see right away that Africa is by far the least healthy (from a human-centric standpoint):


On the other hand, if you perform similar highlighting on the "Ecosystem Vitality" chart, you can see that areas of Europe and the Middle East are the least healthy (from a ecosystem-centric standpoint):

The Development Process

Having never used Flash, Flex, Flare, or the Google Maps API before, I would say that a good part of the development process was simply setting up the project, learning to use the Flex debugger, importing the Flare libraries and the Google Maps API, and becoming familiar with the Flare and Google objects by browsing through the samples. Once this had been done, the next challenge was getting all of the components to talk to one another. In terms of an effort breakdown:

  • It took about 10-12 hours for me to have a grasp of the basic layout, object, and event structure for Flex, Flare, and the Google API.
  • It took about an hour to geocode my country dataset (Tableau was able to calculate this automatically, but in order to successfully brush the charts from the map, a latitude and longitude pair was needed for each country). Lat/Longs were retrieved from the CIA website.
  • It took me about 8 hours to get brushing to work for the three charts -- it took me a while to figure out how to (1) access each chart's underlying data, (2) keep the selected data in memory while clearing out old data, and (3) making it all work together given a user's combination of brushing choices.
  • It took me about 6 hours to get the Flare charts to talk to the map, and especially to get the map to talk to the Flare charts. My biggest challenge was to create a way for the user to select an area on the Google Map to highlight multiple countries. Unlike Flare, there is no "SelectionControl" in the GoogleMap API, so I had leverage google's "draw polygon" capabilities to allow the user to craft selection rectangles by specifying opposite corners of a rectangle with two mouse clicks. I wanted to use the drag event to create the rectangle, but I couldn't seem to figure out how to override Google's map panning event handler, which is attached to the "onMouseDrag" event. The click-twice-and-press-the-brush-button technique is not as intuitive as I would have liked, but I have no doubt that if given more time, this feature could be made much more user friendly.

Overall, I spent around 30 hours on this application.

One note about a potential Flare bug (for the AxisLayout object): it seems like the chart's boundaries extend past those which were specified in the code for the "bounds" property. The result of this is that there's some sort of invisible overlapping in the charts, and the left-most side of the map and the bottom-left chart are inaccessible to mouseclick / drag events. I needed more time to find a workaround for this -- and it could very well be my code -- but it's worth mentioning.

If there were more time, I would have liked to:

  1. Add the ability for users to dynamically select which data variables to plot against one another. The data is really interesting, and it would be nice to offer users more tools for discovery and experimentation within this 3-charts-and-a-map framework.
  2. Used other charts (not just the AxisLayout object) to present the data -- definately a bar chart, but perhaps a treemap too, since the indicator data is heirarchial.

[add comment]
Retrieved from "http://vis.berkeley.edu/courses/cs294-10-fa08/wiki/index.php/A3-SarahVanWart"