Design for Understanding

• Group size: Teams of 3-4
• Design sprint starts: Wednesday, September 24, in class.
• Design sprint ends: Monday, October 13, in class (demo). Design document due at 11:55 PM.

Overview

Mapping data to visual features is a powerful method for communicating information by leveraging the rapid perceptual pathways in our brain. In this design sprint, you will use visual methods to communicate data - but for different end goals. Your job is to use two different lenses to approach the same dataset:

• Analysis, clear communication, and reasoning: In this framing, you can assume that you have the user’s attention and that they do not need training in traditional charts. Use your knowledge of perception + data representation to construct a series of graphs that give an in-depth, unbiased, clear portrait of your data.
• Persuasive communication and storytelling: In this framing, your goal is to represent the data (visually, through audio, through interaction) in the most compelling way possible. What will have the most long-lasting impact on users? What will they remember?

Since you’ll be working in teams of four (4) for this project, I recommend that you split your team into pairs, with each pair tackling one lens (analyze versus persuade). However, depending on your design, you may choose to allocate your resources in the way you see best.

Examples: Here are some example submissions the Hall of Fame:

• Visualising Academic Performance across States in the USA
• (Emory) Air Travel throughout COVID-19 Pandemic
• (Emory) UX Design and Data Visualiztion: A UFO Case Study

Choose a Dataset

Before you begin, choose a dataset. While you may use any dataset, be aware that cleaning the datasets into a usable format can be a major headache. You can use any dataset that you find online. Here are a few good starting points.

• CORGIS (The Collection of Really Great, Interesting, Situated Datasets): cleaned, well-organized datasets that should be very simple to load into your program.
• Datasets underlying FiveThirtyEight stories: Mostly cleaned, but may come in different formats.
• Data is Plural newsletter: fascinating datasets, but may not be cleaned/curated.
• Kaggle: geared toward machine learning use cases, but cleaned and usually well-tested.
• There’s even more sites on the Resources page

You will need to describe your dataset in your write-up, including any data cleaning you performed, anomalies you discovered, and how the data affected your visualization design choices.

You may NOT use a dataset that’s been used in tutorials. For example, the IMDB dataset, the Les Mis dataset, and iris dataset may not be used. If you can Google “name of dataset data visualization” and see results from Kaggle or articles with “student work” in the body, then this dataset has been visualized to death and it will be difficult to bring a new angle to the visualizations.

Your Technology

Both logical reasoning and persuasive storytelling are valuable perspectives for communicating information, and there are tradeoffs. To help match your tools with your objectives, here are some possible tools.

• d3js: Probably the most popular data visualization library that is both powerful and flexible. However, it also has a steep learning curve - especially for people who are not comfortable with Javascript and web programming. Given the very short timelines of our projects, I would only go this route if you have someone very skilled in web development or who has taken Data Visualization on your team.
  • Labs from CSC 362 Data Visualization to help with learning D3:
    • Lab 1, Lab 2, Lab 3, Lab 4

• Vega or Vega-Lite: These are both templating tools that sit on top of the d3js visualization library. While they are less expressive than d3js, they will allow you to rapidly (hopefully) construct data visualizations. Vega will allow you to be a little more creative and integrate interaction.

• Chart.js: a Javascript library that supports easy creation of basic chart types. This will limit your flexibility, but if you want to use basic charts, it’s a quick way to get rolling.

• P5js: p5js is an expressive, accessible Javascript library that enables pixel-level control. While it is more difficult to construct basic charts than Vega or Vega-Lite, it empowers more creative interpretations of data that are either more abstract or that incorporate sound.

• Tableau Public: heavily used in business intelligence, there is a free version that can connect to a spreadsheet/file to create data visualizations for the web.

Your Two Visualizations

Each visualization should be sufficiently complex, whether that means including sophisticated storytelling techinques or by including several linked charts. See below for more details.

• For Analysis: You should construct a series of graphs that clearly and effectively communicate the data. The properties of the data should align with your chart choice. Together, your charts (AT LEAST 3 DISTINCT VISUALIZATIONS) should explore the data from different perspectives. For this analysis lens, your final “visualization” should really be more like a dashboard of three or more visualizations. For example, Airline on-time performance or the UFO Sightings example. While you may not have the degree of interaction of this demo, the different visualizations gives different perspectives of the same data.

• For Persuasion: There are very few guidelines here. I would encourage you to be creative and optimize for impact. Your design here should include AT LEAST 3 charts OR utilize more sophisiticated persuasion techniques (e.g., storytelling techniques). For example, here is a visual/audio interpretation of data created by Evan Peck (note: you need audio, and you may find this upsetting): 15 Years of Mass Shootings in America (GitHub with the code).

Your Design Process

Before you got to this class, you should have read about the five design-sheet (FdS) approach for information visualization. You should walk through all five stages of FdS during your design process and you should write about this process in your Design Doc Medium post. Make sure to get feedback from other students in the class as part of your design process!

Over the course of the semester, I am going to give fewer and fewer detailed instructions about how to run your design process. This is intentional! As we become more familiar with it, I expect you to be able to apply it yourself to any new technological domain.

Build it.

Just build it! You may use AI (like ChatGPT, Claude, or Gemini) to assist with writing the code. Note that you may run into tension between your imagined visualization and the one that you have time to create. That’s okay! Technical tradeoffs are a reality that any designer must encounter. Adjust your design (as needed), and be sure to discuss these tradeoffs in your design document. Remember, the implementation is only about 20% of your grade and bugs are allowed – it’s far more important to be a contributing team member and to write an excellent design document about the process.

Deliverables

• As always: Your group’s design document as a Medium blog post. Be sure to discuss both visualizations (the analytical collection of three visualizations and the persuasive visualization), including the full project context as well as the scope of your specific contributions. You WILL need a demo video that captures the interactivity in the visualizations. Be sure to reflect on the contrast between the two ways you have chosen to communicate your data. There are certainly tradeoffs between the two.
  • In this design document, you should describe your dataset. What cleaning did you have to do? What challenges did you face when using this data?
  • You should also narrate your Five Design Sheet process and include images of each of the sheets. You only need 5 sheets for the entire group
• Both of your designs should be able to be hosted on the web, either as private GitHub repositories (that I can access) or published at publicly accessible links. That may be a standalone site that hosts your interactive visualization (like GitHub pages or Davidson Domains), or an Observable notebook link, for example. Essentially, I need to be able to click around and interact with your designs. These links should be clearly included into your design reflection (if you’re not publishing the visualizations, then you can include the private GitHub repository link or check with Dr. Williams about alternatives).
• Send a Slack message to all groupmates when the Medium blog link is submitted on Moodle. Only one group member should submit the link on Moodle.**

Grading: Grading will be based on a Design Sprint #2 variation of the the design rubric. Be sure to complete the peer feedback forms linked at the end of the design document guide, which will be a large part of your grade.