Interactive Proof-of-Concept

For this milestone, you will develop a working and relatively polished implementation of one interactive visualization that will be part of your final narrative. This visualization will serve as a proof-of-concept by: (1) concretely illustrating how you will address your chosen data question for your target audience; (2) helping you assess the feasibility of your wireframes and scope your project accordingly.

Due: Wednesday, 4/9, 11:59pm ET
Submit on the Google Sheet →

Table of contents

For this milestone, implement one interactive visualization that you plan to include in your final project. You likely explored some initial ideas for this interactive visualization in your FP1 wireframes. But we expect that the nature of these ideas will shift over the course of this milestone—in response to both the complexity of implementation, but also as you better understand what makes interaction techniques more or less effective in exploratory or communicative contexts.

A critical challenge with this milestone will be defining the scope of the interactive visualization such that you can complete it on time (within approximately two weeks). Thus, focus initially on designing a limited yet compelling visualization that enables interactive exploration along a few critical dimensions, and then layer on additional complexity. A tightly-focused, well-implemented interactive graphic is much preferred to a sprawling design that attempts too much!

Deliverables

Your interactive proof-of-concept should:

  1. Be implemented as a web-based visualization using D3.js. (We also recommend using a frontend library—in this class, we’ve taught and favor Svelte; but you’re welcome to use any library of your choice such as React, Vue, etc.)

  2. Use the data that you analyzed, cleaned, and transformed as part of FP1.

  3. Include some non-trivial interaction techniques that enable exploration or storytelling (i.e., interaction that involves more than tooltips). We encourage you to refer back to our Interaction Zoo lectures for some inspiration and code examples. Possible techniques include seeing related items (e.g., brushing & linking), showing more or less detail (e.g., overview + detail), dynamic filtering (e.g., query widgets), exploration (e.g., panning & zooming), or reconfiguration (e.g., selecting new fields to visualize).

  4. Be relatively polished in terms of visual encodings, labeling, styling, and interactive usability (some bugs or performance issues will be tolerated, but the user experience should largely be pleasant).

  5. Be deployed to a publicly accessible URL. We recommend using GitHub Pages (as described in Lab 1, Part 2) but you are welcome to use any platform of your choice. Once deployed, please double check that your web page is appearing and rendering correctly at the publicly-accessible URL (e.g. that there are no broken images or links).

Finally, please bullet point a brief write-up that covers the following aspects:

  • A rationale for and critique of your design decisions. How did you choose your particular visual encodings and interaction techniques? What alternatives did you consider and how did you arrive at your ultimate design? And, how do these design choices help reach your intended audience? What do you think doesn’t work quite as well as you’d hoped, and how might you improve it in future milestones?

  • An overview of your development process and opportunities to improve. 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? How do you hope to improve your process for future milestones?

  • A final project plan. Once this milestone is complete, you will have ~4.5 calendar-weeks (~18 person-weeks) for the remainder of your final project, with an intermediary Minimum Viable Product milestone due mid-way at ~2.5 weeks.

    Given this timeline, develop a project plan that: (a) lists the specific order in which interactive visualization and narrative components will be implemented; (b) breaks this ordering down into a set of manageable tasks; (c) assigns each task to a team member with a corresponding deadline. Every member of the team is expected to contribute equally to all parts of the final project (including data analysis, design, and implementation).

    Your plan should also include a brief paragraph explaining what you will do if something goes wrong. Your description should include some substantive ideas for how you might adapt, pivot, or modify your scope. For instance, which tasks might you consider dropping, or what functionality might fall out of scope?

Grading

This milestone is worth 20 points. Work that squarely meets the criteria (i.e., the “Satisfactory” column in the rubric below) will receive a score of 16/20 (80%). We will use the following rubric to grade your assignment. We will determine scores by judging the quality of your design choices and particularly how compellingly-designed your interaction techniques are.

Component Excellent Satisfactory Poor
Visual Encodings Fully expressive visual encodings are used which effectively reveal the most important features or trends of the underlying data for the intended audience.
(4.5 points)		 Visual encoding choices are largely expressive and effective, but some issues hinder accuracy or comprehension—particularly for the intended audience.
(3.5 points)		 Inexpressive or ineffective mark or visual encodings produce a potentially misleading, confusing, or distracting visualization.
(2.5 points)
Titles, Labels, and Annotations Titles, labels, and annotations helpfully describe and contextualize the depicted data.
(4.5 points)		 Necessary titles and labels are present, but they could provide more context.
(3.5 points)		 Several titles or labels are missing, or do not provide human-understandable information.
(2.5 points)
Interaction Techniques Compelling interaction techniques actively engage in the viewer in a process of meaningful exploration, learning, or storytelling. The techniques enable more effective discovery of interesting trends, patterns, or outliers. No notable bugs or performance issues.
(8 points)		 Interaction techniques do a nice job of engaging the reader. But, some key insights are unnecessarily “hidden” and only revealed on interaction yielding an occasionally frustrating experience. Some bugs or performance issues.
(6.5 points)		 Interaction techniques are overly simplistic and/or do not add much to a reader’s experience beyond the static visualization. Major bugs and/or performance issues hinder the overall user experience.
(5 points)
Design Quality Spacing, layout, typography, and other forms of styling yield a highly polished and aesthetically pleasing experience.
(2 points)		 Initial work on design styling has produced a promising user experience, with some rough edges (e.g., some unstyled elements, or a cluttered display) that can be addressed in the future.
(1.5 points)		 Only minimal attention has been paid to design styling, with several rough edges that together begin to undermine the degree to which a reader wishes to engage with the interactive visualization.
(0.5 points)
Writeup & Project Plan - Crisp write-up provides good justification for important design choices and opportunities for improvement. Project is well-planned with feasible milestones and fair division of labor. Contingencies are mapped out with alternative courses of action brainstormed.
(1 point)		 Write-up is relatively shallow, with rationale for several design decisions poorly described or missing. Project plan is missing or timeline has problems relating to feasibility and/or division of labor. Contingencies are missing or shallow.
(0.5 points)

Example Interactive Visualizations

To help you gauge the scope and complexity you should seek to target, as well as the kinds of interaction techniques we expect to see, we have curated the following list which features both real-world examples as well as student submissions for an older version of this assignment.