Design 384 - Info Visualizations (Cheng, Winter 2015): The Assignment

Your course project is a data/info graphic narrative that examines one of four assigned topics from this goverment challenge

The final narrative should be presented as a single-page scrolling website.

 The audience for this narrative is the interested general public (i.e., adult readers of The New York Times, viewers of PBS, etc.).

part 1: research

 Begin by researching your assigned topic.

You are looking for a large set of data (or several large sets of data) that you can visualize to tell a compelling story. Alternately (or additionally), you are looking for a complex process that you could explain/visualize with a detailed explanatory diagram/information graphic.

For this challenge, there is ample public data, but it can be time-consuming to gather sources (data gathering is one of the skills you should learn as a result of this class).

As you examine set of data and information, ask yourself the classic “5Ws plus 1H” questions from the field of journalism: Who, What, Where, When, Why, and How? 

• Who is the data about? Who is interested in consuming this data?
• What can the data tell you?
• When was the data collected?
• Where was the data collected?
• Why was the data collected? Why is the data important?
• How was the data collected? How can the data be best visualized to answer all of these questions?

 part 2: info/data graphic development

Based on the data sets and information that you have found, prepare THREE different SKETCHES of data and/or information visualizations. You can create any kind of information/data graphic types that you think are appropriate, including: 

• Tables Area Charts / Pie Charts
• Scatter Plots Bar Charts
• 3-D/Volume Charts Line Graphs
• Isotype Charts Timelines
• Flowcharts Radial Diagrams
• Visual Taxonomies Maps/ Illustrative Diagrams

Guidelines:

1. Each sketch should be made on one sheet of 11x17" paper—or larger—using medium or heavy black marker (no thin or fine lines).
2. Each sketch should include:
1. A descriptive and engaging title for the visualization (i.e., “Gun Crimes in the US”)
2. The actual visualization, drawn by hand, using black marker.
1. This visualization does not have to be 100% accurate, but relative quantities should be correct.
3. One or two sentences that describe the insight made visible by the data/infographic.
1. For example, “Half of all court cases are delayed more than 3 months by X.”
3. Each sketch should visualize a different set of data/information.
4. Each sketch should be based on data that you intend to use in the final website (do not waste time with data that you are not serious about).
5. The sketch should be clear to others with MINIMAL explanation from you.

*All axes and data should be labelled or identified with a key or legend.

 
part 3: website story development

 Based on the data visualizations that you have sketched and refined, propose a compelling story for your website. You will need to tell this story in a series of screens that the user scrolls through.

 To aid in navigation/understanding, it’s best to organize/structure your story in sections. Examples of story structures:

1. Lists
• “15 Facts About Gun Deaths”
2. Question and Answer—a type of list format
• “Questions and Answers: Immigration”
3. Problem/Solution
• “Crime: How it Destroys, What Can Be Done”
4. Compare and Contrast
• “Comparing State Gun Laws Since Newtown”
5. Building Blocks—explaining an issue from simple/general concerns to complex/specific details
• “Dysfunctional Courts, Mired in Delays”

 Begin this phase of the project by creating an initial design draft/wireframe of your website that outlines each section in your overall story.

You can use any software that you wish (we will review options in-class), as long as it results in a digital movie or click-through that can be projected from your laptop during our class critique.

 Your wireframe/paper prototype must contain:

1. A proposed url (i.e., mafiamoney.org)
2. A working title for the overall website (i.e., “How the Mafia Launders Cash”)
• Working titles and sub-headings for each section (i.e., “Part 1: The Problem” and “Part 2: Proposed Solutions”). If you wish, large sections (i.e., Part 1, 2, 3) can contain several smaller chapters—but avoid structures that are overly deep (they are hard to remember).
3. Proposed diagrams for each section/sub-section. Each diagram should be hand-sketched with marker. Precise data/numerical accuracy is not important, but the diagrams should be accurate enough that your classmates can tell what the conceptual insight is from each data/infographic.
4. Text that accompanies each proposed diagram. A title for each diagram, and 1-2 sentences stating the main insight of each data graphic/information visualization.

 The goal is to make sure that you have a logical, compelling story to visually refine and code in the last four weeks of the quarter. 

part 4: visual design and final website production

Once you have determined a specific story and story structure, you need develop a compelling and appropriate visual language.

*Note: you must have “real” text on the website— no lorem ipsum or “greeked” copy. However, you may quote directly from your researched sources.

Please include a bibliography/list of sources at the end of the web-site, with active links/urls.