Skip to main content Link Search Menu Expand Document (external link)
DSC 106

Final Project

Table of contents

  1. Overview
  2. Theme: Explorable Explanations
  3. Project Milestones
  4. Project Deliverables
    1. Online Visualization
    2. Video Presentation
  5. Rubric
    1. Initial Prototype
    2. Demo Video
    3. Final Deliverables

Overview

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 explorable explanation, deployed as an interactive web page. Project teams should consist of 2-3 people.

In addition to your webpage, you will be responsible for presenting your final results. At the end of the quarter we will have a video showcase for you to share your work.

Prior to diving in, 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.

Theme: Explorable Explanations

Your task is to create an Explorable Explanation: an interactive article that explains a complex subject to the reader. The topic could be a scientific phenomenon, a computer science algorithm, a mathematical concept, a sociological theory, or some other topic that you’re passionate about. Focus on creating one or more interactive diagrams interlinked with explanatory text or annotations. We urge you to focus on a highly visual and/or interactive experience, as opposed to expecting a viewer to read large amounts of article text.

Some useful references are:

Project Milestones

The final project consists of the following milestones:

  • Proposal (Fri 02/23, 11:59pm, Can Use Slip Days). Propose your chosen topic, dataset(s), and team members. Complete the registration form (one per team, Registration Link). We need the following information in the project proposal:

    • Project Title
    • Dataset
    • Brief writeup of what you intend to do (5-10 lines).

  • Initial Prototype (Fri 03/01, 11:59pm, Can Use Slip Days). Develop an initial prototype of your project and, similar to Project 3, publish it using GitHub pages. This prototype will be used by the course staff to provide feedback on your designs. It is expected that your project will not yet be in a “complete” state; however, by this point you should have the structure of your project laid out, rough prototypes of your main visualization(s) and interactions, and at least basic descriptive text. Each team should submit the URL for their project on Gradescope.

  • Demo Video (Fri 03/08, 11:59pm, Can Use Slip Days). You must produce a demo video (not to exceed 2 minutes in length) that introduces and explains your project. Your video can take the form of a narrated demo of your project, and may include additional content as you see fit. We will share the videos in class on 03/14. More information about preparing the video is available in the project deliverables section.

  • Deliverables (Sat 03/16, 11:59pm). Publish your final project web page. You may make final touches to your page after any feedback from our video session. More information about preparing the final deliverables is available in the project deliverables section.

Your video should be posted to YouTube, and a URL to your video must be submitted via Gradescope by Fri 03/08. The links for the complete version of your final project webpage should be submitted on Gradescope by Sat 03/16.

Project Deliverables

To complete your final project, you must provide two primary deliverables:

  • A demonstration video (<= 2 minutes in length) that communicates your project goals and visualizations. YouTube URL due on Gradescope by 11:59pm, Fri 03/08.
  • An interactive visualization web page for your chosen topic. Code and website due on Gradescope by 11:59pm, Sat 03/16.

Online Visualization

Your final project visualizations must be published on GitHub pages. For your visualizations you need to utilize D3.js. Keep your source code (HTML markup, visualization JavaScript code, etc.) in the top-level of your GitLab repo. When ready to publish, place all necessary files in the “docs” subfolder to publish on GitHub pages.

Video Presentation

In addition to your interactive web page, each team must produce a short demonstration video (no longer than 2 minutes!) introducing your project. Your video must communicate the specific topic and goals of your project along with your visualization designs. We expect most videos will use a mixture of static slides and interactive screen capture with overlaid narration. You might consider showing your web page as published on the web. Alternatively, you might create a stripped down version that removes text in favor of spoken narration, bringing more focus and screen space to your visualizations. The initial frame of your video should include your project name and the team members’ names.

Be sure that your video communicates how your visualization designs enable a better understanding of your chosen data. Do not simply enumerate the various features you implemented: focus on what viewers can learn from your visualization(s).

Please carefully read the video production guide for details on how to design and record your video. Your videos should be in MPEG4 (.mp4, .m4v) format. Use appropriate compression to ensure your video file is not unnecessarily large. You will post videos online, so we encourage you to put your best face forward to the world!

Your demo video must be published on YouTube. In addition you must submit a URL linking to your video via Gradescope by Fri 03/08, 11:59pm. We will have a video showcase during our last lecture session on Thu 03/14.

Rubric

Initial Prototype

  • Webpage: 1 Point
  • GitHub Repo: 1 Point
  • Visualization: 3 Points
  • Writeup: 2 Points
ComponentCompleteIncompleteMissing
WebpageThe submitted URL leads to a web page. The URL is missing or leads to a 404 error.
 (+1 point) (+0 points)
Github RepoThe project has a public-facing GitHub repo. No GitHub repo available.
 (+1 point) (+0 points)
VisualizationThe page has at least 1 visualization on the screen with at least 1 working interaction.The page has at least one visualization, but the visualization doesn’t have an interaction.No visualization is working on the page.
 (+3 points)(+1.5 points)(+0 points)
WriteupThe web page writeup contains at least 4 sentences for each of the following questions (≥8 sentences total): 1. What have you done so far? 2. What will be the most challenging of your project to design and why?The description answered one out of two questions, or didn’t provide at least 4 sentences for each question.The description is missing.
 (+2 points)(+1 point)(+0 points)

Demo Video

The assignment is out of 15 points possible. Submissions that squarely meet the project requirements (Satisfactory column) will get 12/15 points.

ComponentExcellentSatisfactoryNot Satisfactory
Video URL and Length The video is uploaded as a public video on YouTube, and its length is 2 minutes or less.The submitted video URL is broken, or it goes substantially over 2 minutes.
  (+2 point)(+1 points)
Hook The video opens with a hook – an interesting research question or attention-grabbing statement.The video doesn’t open with a hook (e.g. it immediately starts describing the visualization).
  (+2 point)(+1 points)
MotivationThe video explains the motivation for your project – why do you think your visualization is better than other explanations? E.g. for algorithm explorables, what does your visualization allow that other explorables don’t?The video explains the motivation for your project but doesn’t explain what your project does better than other explanations.The video does not contain motivation for the project.
 (+3 points)(+2 points)(+1 point)
Explanation of the visualizationThe video clearly demonstrates all relevant features of the visualization, including its interactions and design choices. The video explains the most interesting features, surprising features, or most challenging features to implement.The video clearly demonstrates all relevant features of the visualization, including its interactions and design choices, but doesn’t mention its most interesting or surprising features.The explanation of the visualization does not sufficiently demonstrate its features.
 (+3 points)(+2 points)(+1 point)
TakeawaysThe video ends with an interesting takeaway and explains why your visualization demonstrates this takeaway effectively. What is the one thing that everyone should learn from your visualization? And why does your visualization succeed at explaining it?The video ends with a takeaway message but the presentation could be improved (e.g. the takeaway isn’t surprising, or focuses too much on the implementation of the visualization).The video does not end with a takeaway message.
 (+3 points)(+2 points)(+1 point)
Viewing experience The video is easy to view: all images are clearly visible and all text is legible.The video is difficult to view (e.g. some images and text are too small to see clearly).
  (+2 points)(+1 points)
Creativity and OriginalityThe submission exceeds the assignment requirements, with original insights or a particularly engaging presentation.The submission meets the assignment requirements. 
 (+1 bonus point)(+0 points) 

Final Deliverables

The assignment is out of 15 points possible. Submissions that squarely meet the project requirements (Satisfactory column) will get 12/15 points.

ComponentExcellentSatisfactoryPoor
Web page URL, video URL, and Repo The web page is publicly viewable on GitHub pages, the project video is linked (or embedded) within the web page, and the repository is publicly available.The submitted web page URL, project video, or repository URL is broken.
  (+1 point)(+0 points)
Hook The project opens with a hook – an interesting research question or attention-grabbing statement.The project doesn’t open with a hook (e.g. it immediately shows a visualization without explanation).
  (+1 point)(+0 points)
StorytellingThe project tells a compelling story. It follows the and-but-therefore structure and also incorporates elements of surprise, personalization, or emotion.The project tells a story – it follows the and-but-therefore structure.The project does not tell a story (e.g. it doesn’t follow the and-but-therefore structure or something similar).
 (+3 points)(+2 points)(+1 point)
Visual EncodingsThe project visualizations do not violate the expressiveness criteria and the design choices (marks and encoding channels) are clear, evocative, and effective.The project visualizations do not violate the expressiveness criteria, but another set of design choices (marks and encoding channels) could have been more effective (e.g. using the area visual channel instead of position when possible).The project visualizations violate the expressiveness criteria (e.g. heavy overplotting, encodings that imply incorrect readings, etc.), and these violations are not addressed using the available interactions (e.g. overplotting that cannot be filtered or zoomed into).
 (+3 points)(+2 points)(+1 point)
InteractionThe interactive elements of the project are polished, bug-free, and enable the reader to discover interesting patterns in the data or the concept being explored.The interactive elements of the project are functional and enable the reader to discover interesting patterns, but a static plot (perhaps with a different encoding) could have conveyed the same information just as effectively.The plot would have been substantially more effective as a static plot without the interaction; or, the interaction has major bugs that preclude use.
 (+3 points)(+2 points)(+1 point)
Annotations The visualizations contain helpful annotations (e.g. text, coloring, shading) that draw attention to interesting findings.The visualizations contain no annotations.
  (+1 point)(+0 points)
Takeaways The project ends with an interesting takeaway and explains why your visualization demonstrates this takeaway effectively. What is the one thing that everyone should learn from your project? And why does your project succeed at explaining it?The project is missing a takeaway, or ends with a takeaway message but the presentation could be improved (e.g. the takeaway isn’t surprising, or focuses too much on the implementation of the visualization).
  (+2 point)(+1 point)
Viewing experience The project is easy to view: all images are clearly visible and all text is legible on a typical laptop screen size.The project is difficult to view (e.g. some images and text are too small to see clearly).
  (+1 point)(+0 points)
Creativity and OriginalityThe submission exceeds the assignment requirements, with original insights or a particularly engaging presentation.The submission meets the assignment requirements. 
 (+1 bonus point)(+0 points)Â