D3 homework:

Readings before May 22 (tutorial in class)

These blog posts by the author of D3 provide an excellent introduction to the merits of a library like D3. Please read these before the tutorial.

We will extend the bar chart discussed in part III of the readings during the D3 tutorial. Please try the code there yourself before the tutorial. We will go over the code in detail and of course be happy to answer any questions!

Materials for the tutorial

Homework (due Jun 5th)

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.

Grading

The assignment will be graded out of a total of 100 points.

Part I - 30 points

Part II - 70 points

Grading

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.

We will grade your submission and presentation with the following scheme:

Please prepare a short report. Your report should contain your ideas, approach, some details of your implementation and a screenshot. Also don't forget to submit all files which are necessary in order to run your visualization. The files should be uploaded to CEWebS.

Please make a 10-minute presentation describing your ideas, approach, implementation, a really quick live demo and your experiences while working on part II.
Upload your implementation and presentation-slides to any public accessable web-space (e.g. student's webspace provided by the ZID), so that you can easily demonstrate your visualization.

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.

Procedure

Please put the main visualization in 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 the following through CEWebS:

Late submission

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

Resources

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

Javascript/d3 tutorials

JS programming tools

Mockup tools