TUMO Creative Technologies
Personal Geographies: Exploring Your Community Through the Lens of Data Visualization
Day 4 (January 15th, 2021)
1
https://tumopersonalgeographies.github.io/
Iterinary for Today’s Class:
Hand-drawn Sketching Presentations
Benefits of Sketching Digitally
Design Matrix Template
Introduction to Adobe XD
Introduction to Tableau
What are the benefits of translating our
handmade sketches into digital mock-ups?
Although handmade sketches offer a powerful tool for rapid prototyping— allowing data scientists to compare a wide range of visualization types before narrowing down their search— these sketches are beholden to a few fundamental weaknesses…
3
What are the benefits of translating our
handmade sketches into digital mock-ups? (cont.)
Digital mock-ups, on the other hand, obviate a lot of these aforementioned issues, while still offering a more time-affordable alternative as compared to fully-functional, interactive visualizations.
4
What are the benefits of translating our
handmade sketches into digital mock-ups? (cont.)
Source: Shirley Wu
Visualization Title: “Film Flowers: Top Summer Blockbusters Reimagined as Flowers”
5
What are some guidelines that can help
orient the digital sketching process?
Figure 4.1: Digital Sketching Design Matrix | |
Which dataset am I working with? | Enter your response here… |
What is my research question? | Enter your response here… |
What are my target variables? | Enter your response here… |
What type of data visualization will I create? | Enter your response here… |
What marks and channels will I use? | Enter your response here… |
What colors, fonts, and other design features are appropriate? | Enter your response here… |
Which Gestalt principles will I incorporate? | Enter your response here… |
6
Example of a filled out design matrix
Credit: Ethan McFarlin, James Parker, David Hacker, “There's No Place Like Home: Exploring the Housing Landscape through Maslow's Hierarchy of Needs”
Housing TV Show Design Matrix | |
Which dataset am I working with? | Movie metadata scraped online from IMDb |
What is my research question? | How has the popularity of different housing TV shows fluctuated over time? |
What are my target variables? | Date released (categorical), episode count (quantitative) |
What type of data visualization will I create? | Bee cluster map |
What marks and channels will I use? | Marks: dots Channels: color, position |
What colors, fonts, and other design features are appropriate? | Colors: smooth gradient between #CFE0FD and #DFAAFB Fonts: Montserrat, Sans-serif |
Which Gestalt principles will I incorporate? | Proximity, Similarity, Closure, Figure/Ground |
7
Activity 4.1: Applying the design matrix in
practice (10 minutes)
Source: American Community Survey 2010-2012 Public Use Microdata Series, FiveThirtyEight
College Major Analysis Design Matrix | |
Which dataset am I working with? | A dataset about unemployment and employment rates from the American community survey. |
What is my research question? | What is the most or least popular major? |
What are my target variables? | Major, total number |
What type of data visualization will I create? | Histogram |
What marks and channels will I use? | Marks: Bars, text Channels: Color, shape/height |
What colors, fonts, and other design features are appropriate? | Different colors for each major category that appeal to the meaning of each one |
Which Gestalt principles will I incorporate? | Similarity, Closure, Continuation |
8
Activity 4.2: A brief introduction to
Adobe XD (20 minutes)
As a group, we will watch the following video to familiarize ourselves with Adobe XD’s interface. It provides an introduction into the layout of the interface and some of the software’s unique features. Please take notes throughout and don’t hesitate to raise your hand if you have any questions about the software’s functionality.
Afterwards, you will have 10 minutes to read the next article linked to in today’s Google Doc about creating a bar graph in XD.
Activity 4.3: Guided design mock-up in
Adobe XD (15 minutes)
To practice sketching in Adobe XD, we will create a high-fidelity sketch using the dataset from Activity 4.1, which covers post-graduation data for different college majors.
10
Activity 4.4: Creating mock-ups in Adobe XD
(1 hour)
Using the hand-drawn sketches you created in Activity 3.5 as a guide, please convert all 3 of your drawings into digital mock-ups in Adobe XD. Please feel out a design matrix for each beforehand and work with the same partner that you were paired with before…
11
Break ends at 6:30pm
12
Activity 4.5: A brief introduction to
Tableau (10 minutes)
In a similar fashion to Activity 3.6, we will proceed by watching another video to learn about Tableau’s interface. It offers a summary of the software’s applications in data cleaning, analysis, and visualization.
Please take notes throughout and don’t hesitate to raise your hand if you have any questions about the software’s functionality.
Activity 4.6: Guided Tableau dataset analysis
(10 minutes)
In a similar fashion to Activity 4.6, we’ll now put the college major data to the test in Tableau together as a class. Along the way, please pay attention to…
14
Activity 4.7: Individual Tableau projects (1 hour)
Taking your hand-drawn and digital sketches in Adobe XD, you’ll now import the same dataset in Tableau and come up with 5 creative visualizations for your dataset. Make sure that all axes are labeled appropriately and that you cite the data source (or its author) as a caption.
15
Activity 4.8: Exploring Tableau dashboards
(20 minutes)
Now that you’re familiar with how Tableau can be used to create visualizations at a rapid pace, we’ll now turn our attention to how a series of graphs can all be presented in a single dashboard.
For this activity, we’ll tune into a YouTube tutorial all about setting up Tableau dashboards. Please take notes along the way and don’t hesitate to raise your hand if you have any questions.
16
17
Thank You
for your attention