From CS294-10 Visualization Sp11

Jump to: navigation, search


Interactive Overview

The interactive shows how much of people's spending goes towards food, by country, using per capita data. The initial map has labels for the percentage numbers, which are clickable. Clicking a number will open a box that tells you which country it is, as well as some other contextual data: the total per capita household expenditures, and the per capita per person food expenditures.

Data Choice and Interactive Technique

I chose to create an interactive map showing the percentage of household expenditures that goes to food, by country. I initially thought of a few possible ways to do this: a bar graph, showing percentages of countries in ascending or descending order; by circles, with size corresponding to percentage; with concentric circles, with the larger circle being total expenditures and the smaller being food.

In the end, because this was an interactive project, I chose to do a simple map, and make the percentage numbers clickable for more information about which country it was, and a couple other contextual statistics for that country. I also felt that there were really two layers to the information - the simple percentages and then the numbers that provided larger context, such as total household expenses and per capita food spending. It seemed to make sense to me to separate out these layers visually and interactively, by making the contextual information accessible only through clicking, by choice, once the overview information of percentages by country had been absorbed.

While some of the other ideas I had to show this information might have conveyed more information in an immediate visual way, for example by comparing countries, I thought some flexibility for the user might be lost, as well as some aesthetic value. I think it could also be arguable that using a map, which is a visual record that already has meaning to viewers, could communicate some information in a more memorable way than, say, visual representations that correspond to the size of the percentage or relationships between countries.

This presentation gives the user control over which and how much information to absorb - there's a lot, so most people probably aren't necessarily going to want to read all of it, or probably won't remember it. This way, they can look at just the countries that interest them, or the numbers that stand out.


I originally did my storyboards by hand, but roughly recreated them in one image here:


Development Process

I knew I would be doing my project in Flash, since I'm not a programmer and that's one of the only tools I'm familiar with where I could create something interactive. That being said, I'm definitely not a Flash pro, so some of the changes of my project were due to me not being able to do things technically that I would have liked to do. I also entered all of the data manually, which is obviously hugely inefficient and probably unnecessary if I'd had the skills to use a programming language that could parse the data for me. I also suspect that there were numerous ways I could have been more efficient with the Flash programming itself, but it's an accomplishment for me to just produce something that mostly works, so I'll leave it at that for this assignment.

Overall, I pretty much stuck to my original plan. This is probably because the plan was pretty simple to begin with. The only changes I made were minor aesthetic choices, or choices about what aspects of the data set I wanted to include.

Issues I Ran Into

One of the biggest problems I had, which I did realize from the beginning but didn't come up with a great way to solve, was that I'd have a lot of numbers, and a big map, and would have to try and find a way to fit the numbers on the map so that they were readable and clickable. The colors of the map were also an issue - how to find a color for the numbers that would work with each color of the map. I used a stock image map and didn't change the colors, but in retrospect, if I were going to do it again, I think I might change the color palette of the map so that I could use one color for the numbers that would work for all of it. I think it turned out okay, but that the numbers could be a little more readable.

Also, I realized only halfway through my project that the map I had chosen looked nice, but was not entirely accurate - some countries are not outlined at all and lumped together with other countries, and some portions of countries are different colors when really they are the same country (e.g. Alaska and the continental US). Inaccuracy is not ideal for a data visualization.

Entering the data manually was the major issue I had. The cumbersomeness of the project did affect little stylistic choices I made - I was going to have the numbers (buttons) go bold and get bigger when the mouse rolled over them, but when I realized the only way I knew how to do it was manually for each number, I abandoned that idea as not worth the time it would take.

Time Distribution

I spent most of my time (probably about 50%) on entering data. Maybe about 10% was finding and deciding on a data set - I forced myself to commit earlier this time - and about 15% was storyboarding and pre-planning, including finding the map image and icon images. The other 25% was spent on the coding and little touches required to put the interactive together. That might have been less if I hadn't made a few careless errors that were time consuming to fix, and also had trouble figuring out one aspect I had trouble with - how to make the boxes close.

Final Product


Executable interactive: File:FoodSpending.swf

[add comment]
Personal tools