Assignment III

Creating interactive visualizations

The purpose of this assignment is to provide you with a hands-on experience of building interactive visualizations on the web and also to provide you with further practice in designing visualizations of data. The visualization framework/toolkit you will use is D3. You are supposed to use the provided dataset, but we'd also like it if you come up with your own additional ideas/datasets. Additionally you will create a simple paper prototype. In this part, the data set is more complex with many variables. The data set consists of information about whiskeys. (There is no requirement of sampling them all personally, but I am not holding you back either!)

The bottom of this assignment contains a list of D3 resources that may be helpful.

To begin, we have created a skeleton or template of the assignment in the GitHub repository for you to start with. The visualization shown in the template consists of two drop downs and an update button. Once the user chooses an attribute to show on the x-axis, say profit, and for the y-axis, say region, clicking on the update button should show a barchart with accumulated sum of profits over the different regions.


Part I - Play with D3
Take the matriculations-dataset (download, taken from STATcube - Statistical Database or a dataset of your choice and use D3 in order to create an interactive visualization. If you have problems to start, take the provided template and play with it to get a feeling how the toolkit is working.
To get an idea of how a solution could look like, watch this video!

Part II - Interaction with multivariate data
Take the whiskey-data set (download) and develop several (at least 3) simple paper prototypes which enables the user to interactively explore the multivariate data. It is important that you try to use different approaches and compare them among each other.
You don't need to faithfully and accurately map each variable, but you should provide enough detail so that the idea of your visualization is clear. A key to this assignment is to figure out what you want to represent (and what to omit) and how to represent that. You may have to abstract and summarize different aspects of the data --- think carefully about this! On the back of your paper, or on another sheet, briefly explain your visualization well enough so that we can understand what you have done.
Your visualization should not be restricted to bar charts. You should be exploring more complex relationships within the data than a simple list!
Next, implement the paper prototype most appropriate with D3 and write a report summarizing the results, the pros and cons of all of the prototypes, your decision (why you implemented a specific prototype) and any discrepancy between the original prototype and your implementation.


The assignment will be graded out of a total of 100 points. You can gain extra credit points (up to 20) as a bonus for doing some fancy data-aggregation and -processing within JavaScript.

Part I - 30 points

Part II - 70 points

Part II Prototype/Implementation:
We will evaluate the effectiveness of your visualization for communicating the fundamental aspects of the data set. Does it give the viewer a good understanding of the different characteristics of the data? Here, we are looking for both effectiveness and creativity. (We do realize that people have differing levels of design ability and experience. Here, we are looking for a good effort, not necessarily some conference paper-worthy new idea. Perhaps you can apply some of the ideas that you've learned from class so far.) The purpose of this assignment is to provide you with experience in the analysis of data like this and the design of visualizations to present the data.


Please do not change the index.html file. If you want to create separate pages that's fine but please make sure that they are all linked off the index.html page itself. Submit through the Assignment3 repository on GitHub:

Late submission

Late Submissions are possible, yet they will be penalized. Academic Honesty


A selection of helpful JS/d3/mockup tools that may be helpful

Javascript/d3 tutorials

JS programming tools

Mockup tools