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 be 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 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 (students taking the class for TQE credit must work individually).
As soon as you have formed a team and chosen a dataset, you must submit a team registration form. Your form must include the names and MIT Kerberos of each team member, along with a concise title for your interactive visualization. If you are looking for project partners, please post to Piazza to find classmates with similar interests! You should submit your team registration by noon on Fri 3/6.
After the proposal deadline, we will assign your team a repository in the 6.894 organization on the MIT GitHub. We will name your repository based on the visualization title you provide in your registration form (so choose wisely!). See below for details about what your repository must contain at submission time.
Design an interactive and/or animated graphic 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 youto 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 master 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.
Your deployed webpage 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?
In light of COVID-19 disruption, we are truncating the A4 timeline. We are skipping the initial submission and peer critique cycle. Instead, we will expect a single final submission due by noon ET on Mon 3/30.
This submission should consist of a complete working prototype.
Your prototype should be accessible on GitHub pages using a URL of the form: https://github.mit.edu/pages/6894-sp20/YOUR-A4-PROJECT-NAME/.
Please submit your work using this form.
Submit your team registration form by noon on Fri 3/6.
You must have a complete working prototype online by noon on Mon 3/16.
You may not use slack days to extend this deadline.
Please submit your work using this form.
Your prototype should be accessible on GitHub pages using a URL of the form: https://github.mit.edu/pages/6894-sp20/YOUR-A4-PROJECT-NAME/.
During week 7 (Mon 3/16 and Wed 3/18), you and your team will give an in-class demo of your project. The goals of these demos will be two fold: (1) it will be an opportunity to show off your hard work; (2) you will give and receive critiques of each other's work. As a result, you will have approximately 5 minutes to introduce us to your dataset, describe your motivations (e.g., what types of exploration/storytelling did you hope to support, what alternative ideas did you consider), and then demonstrate the functionality of your visualization.
5 minutes flies by, so we strongly encourage you to practice your presentation a few times to make sure you cover all the points you want to hit, and feel confident doing so.
If none of your team members will be available to present your work, you may submit a pre-recorded 5 minute video demonstration that covers the above points. If this will apply to you, please contact the teaching staff (6894-staff@mit.edu) as soon as possible.
During this week, you will also be assigned three projects to critique. For each project, 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 to 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 due by noon on Friday, 3/20. 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 7, you will email you all the critiques your team received. You will then have until noon on Monday 3/30 to improve your project, based on this feedback. Resubmissions are optional, and you may use slack days to extend this deadline (the slack days available for your team is the average slack days available for your team members, rounded down). To resubmit your work, please use this form and include a short 1 paragraph description summarizing the changes you made from the initial submission. Resubmissions without this summary will not be graded.
Teaching staff will only begin grading this assignment after the resubmission 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 .