• Group size: Assigned teams of 4
  • Demo Day: 2/21 in class
  • Design Doc Due: 2/26, 12pm

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:

  • 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. However, depending on your design, you may choose to allocate your resources in the way you see best.

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. Here are a few sources in which you may find data… but look for something that interests you!

Do something interesting! I implore you to choose a topic that you find interesting and to dig into it. In the past, I’ve found that students sometimes gravitate towards the first cleaned data that they find. Don’t let this limit the value of your output. What is a story that is worth telling with data? What is a story that people should see related to data?

Your Technology

There are a wide variety of data visualization tool you can use. Personally, I find p5js a joy for creative, expressive content (and we may use it again later in the semester)… but feel free to use whatever accomplishes your goals.

  • 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 on your team.

  • 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 (recommended).

  • 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, this is the free version that can connect to a spreadsheet/file to create data visualizations for the web.

Your Two Portraits

  • For Clear Communication: You should construct a series of graphs that tell the story of the data. The properties of the data should align with your chart choice. Together, your charts (AT LEAST 3) should explore the data from different perspectives. For example, Airline on-time performance. While you may not have the degree of interaction of this demo, note how it 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. For example, here is a visual/audio interpretation of data that I created (note: you need audio): 15 Years of Mass Shootings in America.

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. 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. Note that you may run into tensions 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.

Deliverables

  • As always: Your design reflection as a Medium blog post. Like the last assignment, you do not need a demo video. However, if your visualizations contain interactive or animated elements, those should be captured in some way - for example a gif.
    • 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.
  • Both of your designs should be hosted with publicly accessible links. These links should be clearly included into your design reflection.

Tips for Getting Data into p5js

  1. Use the P5js online editor editor
  2. Go through this tutorial to get a sense of what p5 is and how to use it.
  3. If you’re not familiar with javascript arrays, check out this tutorial… otherwise, skip ahead to using csvs in p5js.