Assignment 4: Interactive Visualization

For this assignment, you will explore the issues involved in implementing interactive and animated visualizations. You will build a visualization that enables interactive exploration or storytelling of a dataset of your own choosing and deploy it on the web.

This assignment has two goals: (1) we want you to gain familiarity implementing interaction and animation techniques for visualizations; (2) we want you to think carefully about the effectiveness of specific interaction and animation techniques for your chosen data domain. For example, the zipdecode and NameVoyager applications shown in class apply the interactive technique of dynamic queries – first explored in the HomeFinder application – to the problem of uncovering patterns in zip codes and baby names. Similarly, interaction and animation techniques have also been very effectively used for explorable explanations, including Kernel Density Estimation (KDE) and machine learning concepts.

A critical challenge will be scoping the assignment such that you can complete it within approximately two weeks. Focus on designing a limited yet compelling visualization that enables interactive exploration along a few critical dimensions, and then layer on additional complexity. The NameVoyager application is a nice example that uses a simple but elegant interaction design to enable engaging explorations. A tightly-focused, well-implemented interactive graphic is much preferred to a sprawling design that attempts too much!

Team Registration

For this assignment, you should work in teams of 1-3 students. Although you may work individually, we strongly encourage you to form a team as this assignment asks more from you than the previous ones in roughly the same amount of time. If you are looking for project partners, please post to the #teamsearch Slack channel to find classmates with similar interests! Students taking the class for TQE credit must work individually.

Submit a team registration form as soon as you have formed a team and picked a dataset and no later than Monday 3/29, 12pm ET. Your registration form must include the names and MIT Kerberos of each team member, along with a concise title for your interactive visualization.

After you submit the form, your team will need to setup a GitHub classroom repository as follows:

  1. Make sure you are logged into your github.com account and not github.mit.edu.
  2. Follow this link to start the A4 assignment on GitHub.
  3. On GitHub, you start the assignment by either joining an existing team or creating a new one.
    • Your team name should match the visualization title you submitted as part of team registration. Feel free to either CamelCase or dashify the title as needed.
    • If you have partner(s), the first person from your team to accept the assignment should create the team and the rest should look for the team in the team list and join.
  4. After you start the assignment, a git repo will be created for you for this assignment which you will use for submitting all the deliverables detailed below.

Deliverables

Design an interactive graphic (with any necessary animation techniques) to explore or understand a compelling question for a dataset of your own choosing. In order to determine what subset of the data and which interactive options are most promising, we encourage you to perform additional exploratory analysis. What aspects of the data reveal the most interesting discoveries or stories? Do not feel obligated to try to convey everything about the data: focus on a compelling subset.

Your graphic must include interactions and animations that enable exploration or storytelling. Possible techniques include panning, zooming, brushing, details-on-demand (e.g., tooltips), dynamic query filters, and selecting different measures to display. You are free to also consider highlights, annotations, or other narrative features intended to draw attention to particular items of interest and provide additional context.

Implement your graphic and deploy it to the web. We expect most students will use D3.js for this assignment; however, you are free to use other web-based libraries in addition to or instead of D3. Your graphic should not require customized server-side support; you should simply load data from a static data file or public web API.

You should use GitHub pages to host your visualization from your project repository. We recommend keeping everything (development files and website) in your main branch: either serve your website from the root folder or from the /docs folder. Your repo must also contain the (unobfuscated) source code for your visualization.

On your deployed web page (or in a README.md file), you should also include a write-up with the following components:

  • A rationale for your design decisions. How did you choose your particular visual encodings, interaction, and animation techniques? What alternatives did you consider and how did you arrive at your ultimate choices?
  • An overview of your development process. Describe how the work was split among the team members. Include a commentary on the development process, including answers to the following questions: Roughly how much time did you spend developing your application (in people-hours)? What aspects took the most time?

Remember to acknowledge all appropriate sources not just in your write-up but also directly on your visualization itself (including the source of your data, and any example visualization you drew inspiration from).

Minimum Viable Prototype (Wed, 4/7)

You must have a minimum viable working prototype online by lecture on Wednesday 4/7 (2:30pm ET). Slack days may not be used to extend this deadline. The prototype need not be feature-complete or fully polished, but it should demonstrate the core visual encoding, interactive, and/or animated ideas you wish to ultimately include.

Please submit your work on Canvas. Your prototype should be accessible on GitHub pages using a URL of the form: https://6859-sp21.github.io/cool-interactive-vis/.

In-Class Presentations and Peer Critique (Week 8)

During the lecture on Wednesday 4/7 (2:30pm ET), we will split the class into multiple parallel sessions to watch demos of your A4 work so far and conduct peer design critiques. Your team should create a 5 minute video presentation that covers the following content:

  1. (~1 min) A short introduction to your dataset and goals of your project: what is it that your visualization is trying to help a reader with, and why it is important?
  2. (~2 mins) A demonstration of your A4 project so far.
  3. (~1-2 mins) A discussion of some of the key design decisions you’ve made so far (e.g., did you do any exploratory data analysis and did it reveal something interesting? Why did you pick these particular visual encodings, or interaction and animation techniques? What alternative ideas did you explore or are you considering? Etc.)
  4. (~30 secs) A brief list of questions that you would like your peers in the class to comment on as part of their critique

After each presentation, we will have a 1-2 minute Q&A session.

During this week, each of you individually will also be assigned three projects to critique. For each project you are assigned, we would like you to not only pay close attention to the in-class presentation but also spend some time interacting with the visualization itself. You should then compose a critique following the structure we’ve used in class (“I like… I wish… What if…?”) and cover the following concerns:

  • Visual Encodings. Are expressive and effective visual encodings applied? How well do they reveal the most important features or trends of the underlying data? Is critical data easily seen, or is it unnecessarily “hidden” and only revealed in response to interaction? Is the target audience likely to understand the visualization?
  • Interaction & Animation Techniques. Do the supported interaction and animation techniques enable more effective discovery of interesting trends, patterns, or outliers? Do they engage the viewer in a process of meaningful exploration or learning? Are they well-implemented, without notable performance issues or usability problems?
  • Design Quality. Assess the overall design quality in terms of organization and presentation. Are elements appropriately titled or labeled? Is there appropriate spacing, layout, legible type, and other forms of design styling? Is it clear where to begin viewing/interacting with the design? Is the overall display confusing or cluttered? How successful is the prototype in meeting the intended goals?

Critiques should be about 2-3 paragraphs, and all three critiques will be Thursday 4/8, 11:59pm ET. Submit each critique individually using this form. We will grade your critiques on how thoughtfully you’ve engaged with the team’s visualization, and how constructive and actionable your feedback is.

Final Submission (Mon, 4/12)

At the end of Week 8, we will email you all the critiques your team received. You will then have until Monday 4/12, 11:59 pm EST to improve your project based on this feedback, as well as continue to implement and polish any features that did not make it for the MVP submission. You may use slack days to extend this deadline (the slack days available for your team = the average slack days available for your team members, rounded up).

Make your final submission on Canvas. The final submission should consist of a complete working prototype and writeup as detailed under Deliverables. Your visualization should be accessible on GitHub pages using a URL of the form: https://6859-sp21.github.io/cool-interactive-vis/.

Grading Criteria

The teaching staff will only begin grading this assignment after the final submission deadline has passed. Your grade in this assignment will be broken down into three components:

The Visualization

Visualizations that squarely meet the requirements for the assignment will receive a score of 8.5 out of 10. Going beyond the call of duty can net additional points, for example:

  • advanced interaction or animation techniques
  • novel visualization elements
  • effective multi-view coordination
  • thoughtful and elegant graphic design
  • insightful & engaging exploration or narrative experience

Point deductions will be made when projects suffer from:

  • errors or broken features
  • clearly ineffective visual encodings
  • lack of exploratory or narrative interaction or animation techniques
  • overly simplistic or distracting interaction or animation techniques
  • confusing interface design
  • incomplete or insufficient write-up

The In-Class Presentation

Presentations will be graded on a check, check-plus, check-minus scale. We will consider how well you describe your dataset and motivations, and how compelling the demonstration of your visualization was (e.g., did your demo have a narrative arc, did you highlight interesting insights your visualization helps uncover, etc.).

Peer Critique

Each critique you write will be worth a point, for a total of 3 points. We will assess how thoughtfully you’ve engaged with the visualization, and how constructive and actionable your feedback is. Fractions of a point will be deducted for critiques that are shallow, do not offer much constructive feedback, or otherwise indicate that.