Skip to main content

Homework 4: Make Something Interactive

In this assignment you will familiarize yourself with a tool for creating interactive visual artifacts. D3: Data-Driven Documents is an open-source JavaScript library for manipulating documents based on data. The website contains a huge and varied collection of eye-catching and compelling examples.

  • 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 Homework #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. Scan or 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 one or two 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. Cite the original D3 examples and source code for your work and give credit to the author(s). Explain what work you have done to extend and/or combine work from these sources.

  • 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

  • We will attempt to run your D3 artifact when grading the assignment. So make sure you include all of the necessary files.

  • Include a .pdf report with instructions to use/demo the artifact. You may include screenshots of the results in the .pdf.

  • 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.

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