Assignment 3: Visualization Design
In the previous assignment, you created a large number of visualizations but likely stuck with the default design choices the software package (e.g., Tableau) made. In this assignment, you will instead focus on these design choices by sketching 3 visualizations, and then crafting a single visualization from a small dataset. You should, in theory, be able to justify the contribution of every element of the visualization.
Due: Wednesday 2/28, 11:59 pm ET
Submit on Canvas →
Table of contents
The Dataset: U.S. Population, 1900 vs. 2000
Every 10 years, the census bureau documents the demographic make-up of the United States, influencing everything from congressional redistricting to social services. This dataset contains a high-level summary of census data for two years a century apart: 1900 and 2000. The data is a CSV (comma-separated values) file that describes the U.S. population in terms of year, reported sex (1: male, 2: female)*, age group (binned into 5 year segments from 0-4 years old up to 90+ years old), and the total count of people per group. There are 38 data points per year, for a total of 76 data points.
Raw Dataset: CSV
With rounded numbers, to facilitate sketching:
Source: U.S. Census Bureau via IPUMS
*Note: The US Census Bureau is moving towards a less binary model for gender identity, as well as adding questions about sexual orientation.
Phase One: Sketching Visualizations
Why sketch? Why not just dive right into using some visualization tool? Sketching is a quick and cheap form of prototyping—a process of simulating how a finished product could look and work. Prototyping is a critical part of the design process as it allows us to test the feasibility of our ideas early on. A prototype’s “fidelity” refers to how much it is able to convey the look of the final product in terms of its level of detail. By moving from low-fidelity prototypes to higher-fidelity ones, we can develop and polish our ideas gradually, focusing on one particular aspect of the product at a time (Babich, 2017).
But prototyping (and sketching, in particular) is also extremely helpful in generating ideas. Rather than grappling with the functionality and constraints of any given design tool (which can often influence your design process, even implicitly), or committing to any one specific design, sketching allows us to more rapidly explore the space of possible designs. And research has shown that prototyping several ideas in parallel often leads to better outcomes (Dow et al., 2011; Tohidi et al., 2006).
Your Tasks
-
Start by choosing a question you’d like a visualization to answer.
-
Sketch 3 visualizations (with pen and paper!) that you believe effectively tackle the question and that each explore different and diverse design choices. Do not forget to include the title, axis labels or legends as needed.
-
For each sketch, bullet point your rationale for your design decisions. What was your motivation behind generating this sketch? What were you hoping it would communicate? What worked well and what didn’t? What would you like to explore in the next sketch?
-
Write one paragraph that reflects on all 3 of your sketches overall. Compare your designs with each other: what are their strengths and weaknesses? What new directions might you explore in the next phase (e.g., synthesizing elements from every sketch, or describing why one of them is significantly better than the others?).
For this phase, we strongly encourage you to not analyze or visualize the data with visualization software such as Tableau, Vega(-Lite), etc. as these packages are likely to influence or constrain your design thinking.
Instead, we recommend you use the summary with rounded numbers shown above. We do not expect your sketches to include every datapoint, or even accurately represent the data (that’s why we’ve rounded all data values to the nearest 50,000!). Rather, the goal of this phase is to draft different visualization designs. Thus, we do not expect your visualizations to be “perfect,” but rather communicate three ideas that you would be excited to explore in the next phase. Your sketches should, nevertheless, be interpretable without consulting your write-ups.
Tips & Inspiration
-
Don’t use a pencil to sketch—not being able to “undo” your mistakes by erasing them can be remarkably conducive to generating designs.
-
Instead, use a sharpie/marker/felt-tip pen. Thick lines free you from worrying about the fine-grained details and accuracy of your sketch, and instead focus you on sketching the big picture ideas.
-
You may sketch on touchscreen-enabled devices (e.g., iPads) but we do not recommend them for the same reasons as using pencils—it’s too easy to hit “undo.”
-
Experiment with different visual channels! Besides color and shape, sketching makes it easier to explore channels like texture (e.g., dotted patterns, cross hatching, etc.).
-
Data Sketches: A Year of Exotic Data Visualizations — Nadieh Bremer
-
How to Sketch, Doodle, and Draw Data Visualization Drafts by Hand
-
Dear Data – Two friends sent each other hand-drawn visualizations over the course of a year.
-
For further reading, we recommend Bill Buxton’s Sketching User Experiences book (which builds off the paper linked above).
Phase Two: Final Design
Now that you’ve used pen and paper to explore a diverse range of design choices when you’re unconstrained by software, let’s now turn to how we might realize our design ideas to produce the final visualization. You are free to use any graphics or charting tool (or combination of tools) you would like including Tableau, Vega-Lite, Microsoft Excel, Google Sheets, Adobe Illustrator, PowerPoint/Keynote, or Paint.
Your Tasks
-
Once again, start by choosing a question you’d like a visualization to answer. This question could be the same as the one you chose for phase one, or you can pick a new question if you would like.
-
Design a static visualization (i.e., a single image) that you believe effectively answers that question, and use the question as the title of your graphic. We recommend that you iterate on your ideas from phase one, but you may also start from scratch and/or draw on inspiration from other sources.
While you must use the data set given, you are free to transform the data as necessary. Such transforms may include (but are not limited to) log transformations, computing percentages or averages, grouping elements into new categories, or removing unnecessary variables or records. You are also free to incorporate external data as you see fit.
Your submission should consist of a single chart. This means that visualizations that concatenate together many different charts (e.g., a dashboard) are out of scope. However, small multiples displays (i.e., using the same chart but horizontally or vertically faceting across a nominal or categorical data field) are acceptable.
Your chart image should be interpretable without consulting your writeup. Do not forget to include a title, axis labels or legends as needed!
-
Provide a writeup (~2–3 paragraphs) describing your process and design decisions, and how phase one informed your final visual.
In your writeup, you should provide a rigorous rationale for your design decisions. As different visualizations can emphasize different aspects of a data set, your writeup should document what aspects of the data you are attempting to most effectively communicate. In short, what story are you trying to tell?
Document the visual encodings you used and why they are appropriate for the data and your specific question. These decisions include the choice of visualization (mark) type, size, color, scale, and other visual elements, as well as the use of sorting or other data transformations. How do these decisions facilitate effective communication? Just as important, also note which aspects of the data might be obscured or down-played due to your visualization design.
Your writeup should also include a final paragraph reflecting on how phase one may or may not have influenced your design for this assignment. For example, you could discuss to what extent sketching helped inform your final design. What aspects of your sketches did you keep or discard, and why did you make those decisions? Or, how did your sketches help you change course?
Submission Details
Your final submission should take the form of an HTML webpage that consists of your sketches, final visualization, and associated write-ups. To help you put this page together, we’re providing a basic HTML template for you to fill in. You will need to edit the HTML page to add your captions and correctly link your images (for simplicity, we recommend exporting image files to the same local directory as your HTML file).
Please deploy your HTML report to a publicly accessible URL. We recommend GitHub Pages (as described in Lab 1, Part 2) but you are welcome to use any platform of your choice. If you are participating in the labs, your A2 submission can be part of your portfolio (e.g., a subdirectory). Once deployed, please double check that your web page is appearing and rendering correctly at the publicly-accessible URL (e.g. that there are no broken images or links).
Finally, submit this URL on Canvas by the due date: Wednesday 2/28, 11:59 pm ET. You may use up to 3 slack days to extend this deadline (provided you fill out the request form before the deadline).
Grading
The assignment score is out of a maximum of 15 points. Submissions that squarely meet the requirements (i.e., the “Satisfactory” column in the rubric below) will receive a score of 12/15 (80%). We will use the following rubric to grade your assignment. We will determine scores by judging the diversity and creativity of your sketches, the soundness of your ultimate design, and the quality and crispness write-ups. We will also look for consideration of the audience, message, and intended task.
Doing well in this assignment does not require you to be artistic. Rather, high-scoring submissions will demonstrate careful and thorough attention to design detail and robust rationale for design choices.
Component | Excellent | Satisfactory | Poor |
---|---|---|---|
Phase 1: Sketches | Sketches explore a diverse range of designs that go well-beyond standard chart types. (3 points) | Sketches cover a good range of design choices. They exhibit some exploration beyond standard chart types, but could have pushed further in terms of alternate mark types, visual channels, or annotation. (2.5 points) | Sketches cover a relatively narrow portion of the design space, largely retreading the standard chart types. (1.5 points) |
Phase 2: Data Question | An interesting question (i.e., one without an immediately obvious answer) is posed. The final visualization provides a clear answer. (1 point) | A reasonable question is posed, but it is unclear whether the final visualization provides an answer to it. (0.75 points) | Missing or unclear question posed of the data. (0.5 points) |
Phase 2: Mark, Encoding, and Data Transforms | Visual design and data transformation have been used effectively to produce an insightful visualization with a clear takeaway message. (4.5 points) | Visual encoding and data transformation choices are largely expressive and effective, but some issues hinder accuracy or comprehension. (3.5 points) | Inexpressive or ineffective mark, encoding, or data transformation choices have produced a distracting or potentially misleading visualization. (2.5 points) |
Phase 2: Titles, Labels, and Annotations | Titles, labels, and annotations helpfully describe and contextualize the depicted data. (3 points) | Necessary titles and labels are present, but they could provide more context. (2.5 points) | Several titles or labels are missing, or do not provide human-understandable information. (2 points) |
Phases 1 & 2: Design Rationale and Reflection | Well crafted write-ups provide reasoned justification for all design choices with a thoughtful reflection on the impact of phase one sketches. (3.5 points) | Most design decisions are described, but rationale or impact of phase one sketches could be explained at a greater level of detail. (2.75 points) | Missing or incomplete. Several design choices or impacts of phase one sketches are left unexplained. (1.5 point) |
Phases 1 & 2: Creativity and Originality | You exceeded the parameters of the assignment, with original insights or a particularly engaging design. (+1 bonus point) | You met all the parameters of the assignment. (0 points) | – |