Link Search Menu Expand Document
DS 4200 S22

Project Overview

The goal of our semester-long service-learning project is to expose students to the real-world research and design process of doing an in-depth visualization design and implementation.

Table of Contents

Introduction

As part of the project, each group of ~3 students will:

  • Work with a real user (the partner).
  • Work with real datasets.
  • Complete a task analysis.
  • Conduct a fact-finding interview.
  • Design and implement an interactive web-based visualization.
  • Solicit and incorporate feedback.
  • Communicate the final project and results through an in-class presentation, webpage, and demo video.

We will be following the Design Study “Lite”: Methodology advocated by Borkin et al. (2017) and Syeda et al. (2020).

It is up to you to identify and propose the partners you will design for, so start thinking now! Who do you know that would benefit from an interactive, web-based data visualization? Acceptable partners include non-profits, governments, and professors & researchers including student researchers. A company partner may do in a pinch, but the focus is on helping those who don’t have the means to easily help themselves.

Warning: Make sure your potential partner already has clean data in a machine-readable format (like CSV or JSON) that they are willing to post publicly online! It can take a really long time for them to go through data cleaning and any privacy implications, and you don’t want to wait on that.

We expect each student to come up with a proposal for a project, which we will together winnow down to the 1/3 that are most feasible and appropriate.

Warning: Make sure your potential partners are aware that your proposed project may not end up being selected.

Aside from the final project deadline itself, there will be a series of intermediate assignment deadlines incorporated in order to keep students on-track with the workload. Separate assignments will be posted with additional information and requirements for each assignment deadline. These assignments are worth a substantial portion of the student’s final grade.

A detailed rubric will be provided for each assignment rather than a rubric for the project as a whole. Each project assignment will assess the project as a whole and not just based on the current deliverable.

Some project assignments are designated as “sentinel” ones (denoted with a star symbol ★ on the schedule) where you will receive more feedback. The other assignments are more to keep you on track and check that you’re making continued progress.

Detailed Requirements

Note: Don’t worry if you don’t understand all these terms! They will be covered during the course. If you have any questions, please ask in class or post a Discussion on Canvas.

Visualization

The interactive web-based visualization must meet these criteria:

Technology

  • Be created using D3.
  • Not use dashboard generation tools for the final product. E.g., no Tableau Web Player, R Shiny, Plotly Dash.
  • Be able to run on your web page.
  • The visualization is responsive, appropriately resizing to changes in the browser dimensions.
  • Be usable with the latest versions of both Firefox and Chrome.
  • Your code passes the W3 validator.
  • There are no errors in the browser console in Firefox or Chrome.
  • The visualization should update within 1 second (ideal target 100ms) of any user interaction, even if to only display partial results, and remain responsive to user inputs during any calculations.
    • You may need to use parallelization, e.g., Web Workers and advanced rendering, e.g., WebGL to achieve this, and/or choose smaller datasets. Try to avoid needing these, if at all possible, by using smaller datasets.
    • Your visualization will be evaluated on a desktop PC with these specifications: CPU: Intel Core i7-6700K @ 4GHz (4 cores, 8 threads). RAM: 32GB. GPU: NVIDIA GeForce GTX 1080. Network: Wired. Browser: Firefox latest version. OS: Windows 10 Professional. Other running software: Minimal.
  • The visualization must be stored in course-provided GitHub repository and the web page hosted from it using GitHub Pages.
  • Each team member must make meaningful commits to the GitHub repository. Every member can contribute differently, but they must all contribute to the code.

Programming

  • You have clear, well-commented, and well-structured code.
  • Comments provide information not present in the code itself and can help organize the code.
  • Proper and consistent indentation. Code inside a block is indented more than outside it.
  • Function and variable names are descriptive of what it does or references and in camel-case (or another consistent scheme).
  • let and const are used instead of var.
  • Semicolons always terminate expressions when possible.
  • Code is organized in short, reusable functions and there is little to no code duplication.
  • Functions avoid side effects and global variables.
  • console.log and any other debugging code is removed.

Design

  • Be a bespoke (custom-designed) visualization—not from an off-the-shelf library. Don’t copy the entire design from an existing visualization. Individual visualization components may be copied from elsewhere (with attribution).
  • Representation of data is a thoughtful combination of useful existing techniques OR is bold and original.
  • Include a minimum of two different views with different visual encodings. How many views and visual encodings employed will depend on the data and tasks.
  • Use consistent encodings across views.
  • The visualization must include interactivity concepts such as brushing and linking or detail views. (If you have any doubt about how/if to include these based on your task analysis, please ask the teaching staff).
  • Demonstrate a mature visual and interaction design, with evidence for iterative improvement.
  • Include appropriate legends and explanatory text. Annotations would be amazing, but are not required.

Effective

  • Demonstrate appropriate and effective use of basic visual encodings: spatial layout, color, size, shape, etc.
  • Provide a fair representation of the underlying data.
  • Be aesthetically pleasing and clear.
  • Have few to no usability issues.

Data

  • Use data set(s) with substance and depth. There is no min/max size requirement.
  • Present compelling data and convey useful information.

Useful

  • The data / visualization should address an interesting question relevant to the partner or their users and convincingly solve target user tasks.

Your web page

Must include the following written sections:

  • Title: Just a sentence, followed by a list of group members and the class information per the provided template.
  • Abstract: Summary of user needs, motivating questions, and the solution in simple English (not an academic abstract).
  • The interactive visualization: Included as part of this page.
  • Final Video: Embedded MP4 demo video using the HTML5 <video> tag..
  • Acknowledgements: List here where any code, packages/libraries, text, images, designs, slides, etc. that you leverage come from. Please see the Academic Integrity Policy on the Syllabus for more details.
  • Additional non-required sections may be added to the website to thoroughly explain/frame the final project.

In-class presentation

Each group will prepare a short in-class presentation.

  • The presentation should be ~5 minutes in duration. (It cannot exceed 8 minutes, including Q&A.)
  • Pending time constraints, each group will have ~3 minutes after their allotted presentation time to answer questions from the audience and receive feedback. Additional feedback will be provided by the instructional staff afterwards in writing.
  • Each member of the group must speak for approximately equal portions of the presentation.
  • The presentation must include either a live-demo of the visualization or a pre-recorded video demonstration of the visualization (but with no audio—narration must be live). The demo video option is highly recommended because they are faster, you can still make eye contact with the audience while it plays, and there is little risk of technical hicups.
  • The presentation must be created using Google Slides and should not require any local files. I.e., any member of your team or the teaching staff should be able to run all your presentation materials. As the presentations will be conducted remotely, using Google Slides ensures that if you are unable to share your screen, someone else can instead.

Final video

Each group will prepare a 3-minute demonstration video of their interactive visualization.

Submission Requirements

  • It must be 3 minutes long.
  • The video must include a 5-second title slide listing, in this order:
    • The name of the project, i.e., Project Group ##: Topic with your two-digit group number ## and topic.
    • The full names of the group members.
    • The text `DS 4200 Spring 2022—Prof. Cody Dunne, Northeastern University

Content

  • The video should include a video screengrab (e.g., with Camtasia) of the visualization in action.
  • The video should clearly step the viewer through how to use the tool in enough detail to understand encodings, data, and interactions.
  • The video must include audio narration which is clear, loud enough, and contributes to the explanation.
  • The video must include annotations to highlight areas of interest.
  • Overall, the video should be enough for the viewer to understand the software and demonstrate the major components.

Format

  • The video should be encoded with the H.264/MPEG-4 AVC codec. You can use Handbrake to convert between formats.
  • The video should be high enough resolution (either 1280x720 / 720p or 1920x1080 / 1080p) and 16x9 aspect ratio with few to no compression artifacts (e.g., text and thin lines should be clearly readable). Letterboxed or upscaled video does not meet the requirements.
  • It must be embedded on your web page using the HTML5 <video> tag.

Example Projects

To give you an idea of what we’re looking for, here are some examples from our previous courses at various levels as well as other projects:

Here are some other example design studies (that is the type of project we are doing—a design study).*

© 2022 Cody Dunne. Released under the CC BY-SA license