Project 1

Electric Avenue

Project due 9/24 at 9 pm Chicago time

Project 1 will be an individual project to give people practice with writing an application in Processing for the wall and get everyone ready to contribute to the group projects to come. In this project everyone will learn how to get data into processing, how to write an interactive processing application, how to create an effective user interface for viewing and analyzing this data, and make this work on our classroom touch-wall. This will give everyone a common basis for communication in the later group projects where people will most likely specialize in different tasks.

The project will make use of data from the US Energy Information Administration for the years 1980 through 2009.

The data is available from

We are interested in looking at the following data

We want to investigate how these values change over time, and look at differences among countries and regions of the world

You will be writing your code to run on the wall in the classroom. Solutions that only run on your laptop computer are not acceptable.

Details on the Cyber-Commons wall:

Your visualization and analysis tool should be written in Processing. As this is primarily a graph-based visualization, the Milk / Tea / Coffee example should give you a nice head start on this. As graphs are a very common visualization this will give you a chance to write a set of graphing code that you can reuse and improve in future assignments.

You should start by getting processing installed and doing some initial tests to load in the data and start displaying it. The examples from the Visualizing Data text, many of which are included as examples in Processing itself, are a good starting point.

You will also need to grab the code we use to interface with the wall and its touch-screen. This code makes use of new routines instead of the standard mouse routines from Processing. See the week 2 notes for the google code

Processing is a multi-platform language but there are some differences on different platforms so be sure to test your code and make sure that it runs under the same OS as the wall; VirtualBox is a pretty nice free emulation solution you may want to look into. You may also want to stop by during TA office hours and test your code on the actual wall to make sure it works, that all the controls and reachable, and that the font sizes, line sizes, and colors are appropriate for that size screen and that size room. I highly suggest using scaling factors in your code so you can scale your solutions from desktop/laptop screen sizes for debugging up to wall sizes for your final presentation.

Once you have a basic shell working you should then start to draw some sketches of what the interface might look like and how you want to arrange and display the data. You can use other software to generate statistics about the data if you find that useful but be sure to document that process. Be careful of missing data when you generate statistics.

Your application should start out showing some data - a blank screen is not very inviting. In past terms the students have shown a desire to show an overwhelming amount of the data to the user right away. You should be careful not to overwhelm the user. As Schneiderman said "overview first, zoom and filter, details on demand." Appropriate levels of aggregating data will be very important here.

It is also important to note that 'getting it to work' is just a prerequisite to using the application to find answers to your questions. It is that usage that will give you ideas on how to improve your app to make it easier and more intuitive to find those things.

The application you create should help the user perform the following tasks:

For a C you need ...

For a B you need to add ...

For an A you need to add ...

You should create a set of web pages that describe your work on the project. This should include:
all of which should have plenty of screenshots with meaningful captions. Web pages like this can be very helpful later on in helping you build up a portfolio of your work when you start looking for a job so please put some effort into it.

Be sure to document any external libraries or tools that you make use of - give credit where credit is due.

For some examples of good web pages please see:

You should also create a 2-3 minute YouTube video showing the use of your application including narration with decent audio quality. That video should be in a very obvious place on your main project web page. The easiest way to do this is to use a screen-capture tool while interacting with a scaled-down version of the application, though you will most likely find its useful to do some editing afterwards to tighten the video up. Its also a good idea to have a video like this available as a backup during your presentation just in case of gremlins.
For the future group assignments you may want to shoot this video on the wall itself.

The web page including screen snapshots and video need to be done by the deadline so be sure to leave enough time to get that work done.

I will be linking your web page to the course notes so please send me a nice 1280 x 361 jpeg image of your visualization for the web. This should be named p1.<your_last_name>.<your_first_name>.jpg. 

Each student will show his / her visualization to the class on the wall and describe its features. This allows everyone to see a variety of solutions to the problem, and a variety of implementations. Rehearse your presentation ... several times.

last revision 9/05/12 - added links to good examples of project web pages, and a line about crediting external libraries used