Interactive Proof-of-Concept

For this milestone, you will sketch out a series of wireframes to help you plan and outline your final project (including helping you organize and divide work between your team members). You will also develop a working implementation of one interactive visualization that will be part of your final narrative, to concretely illustrate how you will address your chosen data question for your target audience.

Due: Monday, 4/8, 9:30am ET
Submit on the Google Sheet →
In-Class Presentations on Mon, 4/8 and Wed, 4/10.

Table of contents

Your Tasks

  1. Deepen your data analysis. Whereas in A2 and FP1, you conducted exploratory data analysis (i.e., balancing depth in analysis with breadth of coverage), with this milestone, you will want to systematically delve into the dataset(s) so as to thoroughly address the data question you and your team posed at the end of FP1. 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.

    At the end of this analysis, you should have a clear idea of what the takeaway insights from your final project be for your target audience, and how you will use the data to support your arguments. Moreover, you should have this data ready for use in building out your final project including cleaning, shaping, and transforming it as necessary.

  2. Wireframe your final project. Think of wireframes as visual outlines: they should communicate the overall narrative structure, visual layout, and interactive flow of your project by providing a step-by-step walkthrough of its main features (for this reason, wireframes are sometimes known as storyboards). How many pages and different visualizations will you have? How will they be laid out, and how will users navigate between them? Then go one step deeper and consider the specific design and capabilities of the visualizations—for example, what kinds of interactive or animation techniques might you use to make things more engaging, and what visualizations remain static? What narrative structure or genre will you be following? How will you use highlights, annotations, or other narrative features intended to draw attention to particular items of interest and provide additional context.

    We encourage you to do this walk-through from the perspective of your target audience. For instance, what device will they use (mobile or website)? What should the takeaway insights or messages be for them, and how is that conveyed at each step?

    You are free to use any tool you’d like to construct the wireframes. In the past, students have often used Figma but hand-drawn sketches are a very viable medium as well. Use the tool which is easiest for your team to collaborate, and focus on conveying the high-level ideas of your project (like with the visualizations you sketched in A2).

  3. Conduct a visual design study. Whereas the wireframes focus on structure, layout, and flow, a visual design study instead helps you establish the “look and feel” of your final project–namely, what fonts and colors will you use, and how do they also help communicate the takeaway message(s) to your intended audience?

    Look through a diverse range of visual media (including photographs, screenshots, magazines, newsprint, graphic novels, etc.) and assemble two slides of inspiration focusing on typography and color respectively. On each slide, collage together examples that you find particularly inspiring, and then use the margins to extract or annotate particular design choices you might be interested in exploring (e.g., specific color palettes and font families, or characteristics that you find interesting such as serifs, tall/short x-heights, etc.). We provide an example of a slide focusing on color in the advice section at the bottom of this page.

  4. Implement one interactive visualization from your wireframes. For this milestone, we are not expecting this visualization to be polished. However, it should provide a convincing proof-of-concept that demonstrates the feasibility of your final project plans. Focus on designing a limited yet compelling visualization that enables interactive exploration along a few critical dimensions, and then layer on additional complexity. Your proof-of-concept should at minimum:

    1. Be implemented as a web-based visualization using D3.js, and render and display correctly.

    2. Use the data you cleaned and transformed as part of the first task.

    3. Implement one piece of non-trivial interactivity (i.e., interaction that involves more than just tooltips). The zipdecode and NameGrapher visualizations are (more polished) examples of the kinds of interactive functionality we hope to see as part of your proof-of-concept implementation. Your interaction(s) should execute relatively bug-free.

  5. Put together a 5-minute presentation to demonstrate your interactive visualization and describe your wireframes. The goal of these presentations will be to provide you with feedback to improve your projects—we will be inviting outside critiques (including from MAPC staff) to offer their suggestions for your projects.

    Your presentation should cover the following content:

    1. On your title slide, include the names of all members of the team, and and crisply state the question you are addressing, who your intended audience is, and what the purpose or goal of your final project is.

    2. (~1 min) Summarize the main results from your data analysis (e.g., via screenshots) and describe what the key takeaway message(s) for your target audience will be.

    3. (~2 mins) Walk us through your wireframes and visual design study. We encourage you to do so by simulating your target audience—i.e., how are they meant to experience things? What do they see first? What must they then do to get to the next view? And so forth.

    4. (~2 mins) Give us a demonstration of your proof-of-concept interactive visualization.

    5. End with a slide that includes a brief list of questions or issues you would like feedback on from your peers, and the course and/or MAPC staff.

    As with FP1, you are welcome to either pre-record your presentation as a 5-minute video and play that during lecture time, or deliver your presentation live.

    (We will be announcing presentation order a week ahead of time and, given the size of the class, we are likely to be split between a few different rooms. If you have any scheduling conflicts or obligations with lecture on Mon 4/8 or Wed 4/10 that we should take into account when planning presentation orders, please let the course staff know as soon as possible.)

Grading

This milestone is worth 25 points. Work that squarely meets the criteria (i.e., the “Satisfactory” column in the rubric below) will receive a score of 20/25 (80%). We will use the following rubric to grade your assignment. We will determine scores by judging the quality of your data analysis, wireframes, and design study; how compelling your proof-of-concept interactive visualization is; and, finally, the clarity of your in-class presentation.

Component Excellent Satisfactory Poor
Data Analysis Results Your results demonstrate a thorough and systematic analytical treatment of the data question, with no stone left unturned. This thoroughness may emerge from a variety of ways including: (a) advanced data transformation; (b) synthesizing across multiple datasets; (c) drawing on external datasets.
(7 points)		 Sufficient analysis has been conducted to provide your target audience with some nice takeaway insight(s). But, targeting additional depth would have yielded a richness and texture to the details.
(6 points)		 It is not clear how the conducted analysis helps address the data question, or leaves the audience with some crisp takeaway message(s). Incorrect analysis may have been conducted in parts.
(5 points)
Wireframes The wireframes richly depict the narrative structure and flow of your final project. They clearly communicate an effective plan for executing the necessary work between team members.
(7 points)		 Your wireframes do a good job of describing your final project. But, there are occasional missing details that make it difficult to robustly understand how your intended audience will experience your final project. These missing details also hinder how easily you will be able to plan and divide work amongst the team.
(6 points)		 Your wireframes are very rough, making it difficult to understand your final project’s narrative structure, or how your intended audience will experience them. They are not especially helpful in planning design and implementation details, or dividing labor between team members.
(5 points)
Visual Design Study The design study explores a diverse range of visual media. Typographic and color inspiration are well-extracted and communicated.
(1 point)		 The design study offers some nice inspiration, but could have drawn from a more diverse range of sources.
(0.5 points)		 Design study is missing or incomplete (e.g., only focuses on color or typography, or draws from a very limited pool). Specific inspiration is not identified or is poorly communicated.
(0.25 points)
Proof-of-Concept Interactive Visualization Although some rough edges remain, your prototype demonstrates a very compelling experience. Visual encodings and one or more interaction techniques are thoughtfully designed, allowing your intended audience to richly explore or understand the data and leave with clear takeaway(s).
(8 points)		 Your prototype demonstrates a promising experience for your target audience. An interesting set of visual encodings and interaction techniques are being designed. But, they are occasionally distracting, or your target audience will need to expend effort in unsatisfying ways to grasp the takeaway message(s).
(6 points)		 Several rough edges or only a partial implementation makes it difficult to assess the experience your target audience would have with this visualization. Your prototype exhibits one or several of the following issues: (a) it does not use data relevant to your project; (b) it have a severe bug that cuases it to fail to display, or for interaction to fail in consequential ways; (c) it uses clearly ineffective visual encodings; (d) it does not include any interaction techniques, or the interaction techniques it uses are overly simplistic (e.g., tooltips);
(5 points)
In-Class Presentation Your presentation is crisp, perhaps even exciting! Narration is clear and flows smoothly. Slides are well-designed and easy to follow.
(2 point)		 The presentation is clear, and we understand the goals of your project. However, some presentation issues around the format, narration, or slide design hinder easy comprehension.
(1.5 points)		 Your presentation is difficult to follow and/or doesn’t hold together. You may have gone over the time limit. Narration rambles and/or is difficult to follow. Slides are text-heavy, making poor or inadequate use of images or visual media.
(0.5 points)

Helpful Resources

Wireframing and Storyboarding Tutorials

Example Visualization Design Processes

Example Wireframes & Design Studies