Final Project

The final project will provide hands-on experience designing, implementing, and deploying interactive visualizations. Your project should address a concrete visualization challenge and should propose a novel, creative solution. The final deliverable will take the form of an explanatory narrative, deployed as an interactive web page. Project teams should consist of 3-4 people.

In addition, you will be responsible for presenting your project and providing feedback to help evaluate the work of your peers. At the end of the quarter we will have a public showcase for you to share your work with both your colleagues and invited guests.

Prior to starting your project, it is helpful to gain a sense of what goes into formulating a successful visualization project and to beware of common pitfalls. We encourage you to read A Nested Model for Visualization Design and Validation by Tamara Munzner. This paper is required reading later in the course, so you might as well get a head start!

Project Theme: Explaining Algorithms

The final project theme is Explaining Algorithms. Your task is to create an interactive web page that explains an important algorithm of your team's choosing, using an interplay of text and visualization to reveal new insights into either how an algorithm works or why it works. We will then combine all of the course projects to form an online book: The UW Atlas of Illustrated Algorithms. Potential algorithms to consider include: network protocols, scheduling protocols, randomized algorithms, the Fast Fourier Transform, Voronoi tesselation, backpropagation, dynamic programming methods, and many other options...

Imagine you are creating this explanation for first-year computer science undergraduates. Use a combination of interactive visualization and explanatory text to convey critical concepts necessary for understanding how an algorithm works, how it might best be applied, and/or the analysis of its performance or correctness. Not all projects need to address all three of these concerns, but each project should address at least one. Talk to the course staff if you have any questions regarding your choice of algorithm and which aspects you wish to convey in your project.

Your explorable explanation for your algorithm should be published as an interactive article on GitHub pages. For your visualizations you are free to use any web-based library, including D3.js, Vega, Vega-Lite, REGL, etc. The article itself should be created using the Idyll language for interactive documents. Keep your source code (Idyll markup, visualization components, etc) in the top-level of your GitHub repo. When ready to publish, run the Idyll compiler and place the output in the "docs" subfolder to publish on GitHub pages. We will share more specific instructions on installing and configuring Idyll for the class once the final project commences.

Your final project should focus on one or more aspects of an algorithm. Here are some possible approaches to take:

• "White box" treatment: Visualize the actual method itself (e.g., visualize changes to internal data structures as an algorithm progresses). This approach focuses on explaining how an algorithm actually works.
• "Black box" treatment: Visualize the effects of different inputs, enable exploration of the input and/or parameter space (e.g., like the Distill t-SNE article). This approach focuses on explaining the behavior of the algorithm from an applied perspective.
• Performance or correctness analysis: Generate empirical distributions of performance results and visualize those to explore algorithm performance. This approach focuses on validating the algorithm: how well does it work and why?

Any one of the above approaches may be sufficient, though combinations are also worth considering. What you choose should depend in part on the scope and complexity of your chosen topic. For example, certain randomized algorithms are very simple in terms of their implementation; it is their analysis that is really interesting. Other algorithms (e.g., Traveling Sales Person, or TSP, solvers) would likely benefit from both a white box treatment (how does it form the path for various examples?) combined with some performance analysis (which method should be preferred?).

Your team should take inspiration from existing efforts. Here are some examples to consider (some of which are also required or optional reading in the course):

• "The Barnes-Hut Approximation" by Jeffrey Heer.
• "Visualizing Algorithms" by Mike Bostock.
• "Up and Down the Ladder of Abstraction" by Bret Victor, as well as other pieces by Bret at worrydream.com.
• Distill.pub: Online journal focused on interactive explanations for machine learning. For example, see "How to Use t-SNE Effectively" and "Attention and Augmented Recurrent Neural Networks".
• Explorable Explanations: A gallery of interactive explanations (or talks about them).

Project Milestones

The final project consists of the following milestones:

• Proposal (Thu 11/09, 11:59pm). Propose your chosen algorithm and team members. Complete the registration form (one per team). We will create a new set of GitHub repos for each project.
• Initial Prototype (Tue 11/21, 11:59pm). Develop an initial prototype of your project and, similar to A3, publish it using GitHub pages. This prototype will be shared with your classmates for peer evaluation and will be used by the course staff to provide feedback on your designs. It is fine if your project is not yet in a "complete" state; however, by this point you should have the structure of your article laid out, working (if rough) prototypes of your main visualizations and interactions, and at least basic descriptive text. Each team should submit the URL for their project on Canvas.
• Peer Evaluation (Mon 11/27, 11:59pm). Provide structured feedback on your peers' final project prototypes, following the same rubric used for your A3 peer evaluations. Individual assignments of people to projects will be posted on the Canvas page for this milestone. Submit evaluations for your assigned projects using the online peer evaluation form.
• Design Feedback Sessions (Tue 11/28 or Thu 11/30). In lieu of lecture, we will have design feedback sessions, in which each project team will have an assigned time slot with the course staff. We will post the time assignments for each team on Canvas. All teams are strongly encouraged to publish their most recent design iteration on GitHub pages prior to their feedback session.
• Deliverables (Wed 12/6, 11:59pm). Informed by peer and staff feedback, publish your final interactive algorithm explainer. You must also produce a demo video (not to exceed 2 minutes in length) that introduces and explains your article. Your video can take the form of a narrated demo of your interactive article, and may include additional content as you see fit. More information about preparing the final deliverables is available here.
• Showcase (Thu 12/7, in class). We will present your demo video to the rest of the class along with a panel of invited judges, who will select projects to receive awards.

The prototype and final interactive article will be submitted and deployed on the CSE 442 GitHub organization. You will be assigned repositories after submitting your proposal. Your video should be posted to Vimeo, and a URL to your video must be submitted via Canvas.