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 http://www.statistik.at) 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.
A selection of helpful JS/d3/mockup tools that may be helpful