Assignment #3: Intro to (Web-Based) Interaction

The primary goal for this assignment is to familiarize yourself with a new tool for creating interactive visual artifacts. D3: Data-Driven Documents is a JavaScript library for manipulating documents based on data. The website contains a huge and varied collection of eye-catching and compelling examples.

Note: If you're already a D3 expert, you can choose another new-to-you interaction toolkit. Possibilities include: Processing, OpenGL, or VTK Visualization Toolkit (it doesn't have to be a web-based tool!). Do the same exercises below with the other tool and compare the results and overall usability of the tool to what you would expect to see from D3.

• First, explore some of the examples on the D3 website. Download the files, modify them, test out your changes, and start to read the documentation.

• Brainstorm ideas for an interactive visual artifact. It doesn't necessarily have to be a "visualization" in our strict definition. In fact, you're welcome to be silly & possibly exemplify some of the "bad visualization" traits we identified in class and in Assignment #1, such as pie charts, chart junk, etc.

  Even if it's a silly example, you should still have a story or purpose and a target audience for this visualization. Why is a dynamic interaction beneficial for this task/data?

  There are a variety of different types of "interaction" you may include. For example, pop up text messages, data hide/reveal/emphasize/restructure, font/size/color/transparency change, etc.

• On paper, draft a simple storyboard and/or wizard-of-oz this interaction. Don't get too complicated, since this is a short assignment. Take photos of these drawings and include and include them with your submission. Note: it's ok if you deviate from or change your plan once you tackle implementation.

• Implement that visualization artifact in D3. If your design was overly-ambitious, focus on a couple features or interaction mechanisms that are most interesting to you. You should do some coding for this assignment, but you are encouraged to borrow from examples. Just cite the original source(s) for your work and give credit to the author(s).

• Write a short review of the tool. How quick was the installation and learning to use the tool? What resources were most useful? What sorts of applications/datasets are most appropriate for this tool? What are the limitations of this tool? What are some suggestions/cautions to others who consider using this tool?

How to Submit

• If your assignment is self-contained and portable... great! Submit the interactive artifact. Simple instructions to show off the results should either be included within the artifact or as a separate plaintext or .pdf file.

  Alteratively (if your artifact is not self-contained and portable), take a bunch of screenshots and organize them as either plaintext with separate image files (.png or .jpg) with clear file names, or .pdf with embedded images.

• Make sure the code you wrote is clearly labeled. And that code you borrowed from others (with or without modification) is appropriately labeled and cited. Note: The code does not have to be perfect or documented in detail. We recognize that this is rough prototype work.

• Include your early storyboard/wizard-of-oz sketches. Document how your design ideas changed as you progressed in the assignment.

• Follow the homework server submission instructions to zip up these files and upload your assignment to the homework submission server.

Note: Contact the instructor if you don't have access to the homework submission server.