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!
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:
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:
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).
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/
.
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:
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:
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.
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/
.
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:
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:
Point deductions will be made when projects suffer from:
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.).
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.