Due date: Wed, March 18th at 5pm EST
Everyday we collect mounds of data on a huge range of topics, from environmental sources, the internet, and the health care community, just to name a few. Often this data has multiple measured parameters from which direct, and indirect, relationships are searched for by domain experts. Finding these relationships becomes increasingly difficult as the dimensionality and size of the data increases, requiring tools that facilitate the exploration of multidimensional data.
In this assignment you will learn to use Tableau, a tool for analyzing and visualizing multidimensional datasets, as well as write your own exploratory tool using Processing. The data you will be looking at is from the class survey from the very first homework assignment. Your goal is to find any patterns that exist amoung your fellow classmates.
Part 1: Exploration with Tableau (20 points)
You will first need to install Tableau, and you can find installation instructions here:index.
Next, download the CS 171 Class Survey excel spreadsheet from the course Downloads page. Start up Tableau and open this spreadsheet. Spend some time with the data and the features of Tableau. If you need some help, you can find a wealth of information on the Tableau website.
Once you feel comfortable with the Tableau interface, create visualizations to answer the following questions:
- What is the relationship between operating system and numbers of years of programming experience?
- What concentrations do students who are more comfortable with programming come from?
- What programming languages do experienced programmers use?
- What programming languages do experienced programmers who code the most often use?
- What is the relationship between age, programming language, and programming experience?
In your write-up, include the answers to these questions along with screen shots of the visualizations you created to answer them.
Additional Reading: for those of you interested in learning more about the research that has gone into the Tableau system, you can find a recent paper here.
Part 2: Designing an Interaction (40 points)
Based on your exploration of the class data, choose a task that you would like to address with an interactive visualization. This task should require three dimensions and/or measures that you think have an interesting correlation -- we will call these parameters. At least one of these parameters must be nominal, and at least one must be ordinal. You are going to be designing (and implementing) an interactive visualization to explore these three parameters to (hopefully!) reveal an insight about your fellow classmates. In your write-up, describe the task you are going to address, and create a list of the three chosen parameters along with their respective data types.
You will now design an interaction sketch, which you will turn into an interactive tool using Processing in Part 3, to look at these parameters. Your design will include three types of encodings: spatial, color, and size. One of the parameters you will map to spatial location (ie. the x or y axis); one of the parameters you will map to a color palette; and the third parameter you will map to size. Include in your list of parameters which type of data encoding you will use for each. Remember that certain types of data encodings are better for certain types of data! For the color and size and encoding, include a legend in your design to specify what these values mean. Also, every data point should be visible in your design.
You will next include interaction in the form of mousing over and linked highlighting. Mousing over a data point should reveal some additional information about the student, such as their interesting factoid and home town. Mousing over data points should also link the data to the color/size legends, as well as to other related data points. Linking these views should allow the user to quickly determine what values are encoded for the data point via color and size, and to also help the user located other data points that are similar.
Design your visualization with principles of excellence in mind. You can use any tools available to you (i.e. Photoshop, pen and paper, markers, paint, PowerPoint, Keynote, Matlab, etc.) to generate your design. You do not have to worry about getting all the quantitative information correct, and you may use “ ... “ to indicate more of the same. When choosing colors you may refer to the Color Brewer scales. In your write-up, include the design as a digital image (again, you can digitize print versions using a scanner or digital camera), and a thorough explaination of your design process and visual encoding decisions, and the perceptual and design principles you followed.
Just as you did for the midterm, you should sketch out your interaction design using the simple interaction sketch technique described in class. As shown in class, it may be most effective to use slides to show interactions since you can refer to them by number (e.g., “if you click here then jump to slide 5”) and since you can add notes to each slide. Be creative -- there is no right or wrong way to sketch interactions! Your interaction sketch should be included in your write-up as either a series of annotated images, or, (preferably) as a series of slides, exported to pdf from PowerPoint or Keynote. For the latter option, inlcude a link in your write-up to the pdf file.
Part 3: Interact With Your Classmates (40 points)
Recommended Reading: in the Shiffman book: 17.1 - 17.4 on Strings and fonts in Processing; 18.1 - 18.3 on inputting text files; 5.5 and 5.6 on mouse rollovers and buttons; chapters 3, 7, 8, 9 for more on programming basics.
For this last part of the assignment you are going to bring your interaction design to life!
Using Processing, you will develop a sketch that implements the design you sketched in part 2, using the same class survey data, but in csv format. This format is similar to the tsv format you used in homework 1, only instead of values being separated by tabs, they are separated by commas. You can download the class survey in this form from the course Downloads page. Each element in a row is separated by a comma, and each row is separated by a carriage return.
To read in this data, you’ll need just a few basic commands. First, you can read in a file in Processing using this command:
String[] rows = loadStrings(file);
This command takes a file, and loads the rows of the file into an array of Strings called rows, where a row is defined by a list of characters up to a carriage return (ie. a row in the class survey data file).
You’ll need to parse the elements in each row as the list of characters up to each comma (ie. an entry in the class survey data file). Use this command:
String[] cols = split(rows[i], ',');
which puts each set of characters up to a comma into an array called cols. You can then ask for different elements in the cols array for the parameters you choose to visualize.
It will also be useful to use:
rows.length
to determine the number of data elements in the data set. Remember that the first row contains the names of the parameters.
At this point all of your data will be stored as Strings. You could (if you choose) categorize these strings like:
if ( cols[2].equals( “Mac OS” ) ) {
data_point[i].operating_system = 0;
}
else if( cols[2].equals( “Windows XP” ) ) {
data_point[i].operating_system = 1;
}
...
Some of the data is sequential by nature, and you’ll need to assign an order to the categories in your code.
As long as you implement the design requirements discussed in part 2, you are welcome to build on this design in any way you would like. In your write-up include an applet of your visualization, and discuss what insight(s) you were able to determine about your classmates. Also include a discussion on any additional features you added to your visualize.
Submission Instructions
Your write-up will be as a webpage -- you can use any webpage layout your wish, or, cut and paste the html source from this page and plug in your work. To submit your homework, create a folder named lastname_firstinitial_hw3 and place your webpage write-up and your Processing sketch in this folder -- please make sure that all of the links in your write-up are relative to this folder! Compress the folder (please use .zip compression) and submit on the course iSite page in the HW 3 dropbox.
If we cannot access your work or links because these directions are not followed correctly, we will not grade your work.