2c:null 2d:["$","title",null,{"children":"Week 3 Lab: Fundamental Graphs and Visual Encoding | rk2546 | Observable"}] 32:T4e3,## Part 1: Warm Up - Thinking about Design Choices

Our Task:

Navigate to this Google Form and consider, for each scenario presented:

What we're given: A data scenario & a goal in mind.
Our task: Answer, collectively, the optimal way to:
1. Identify the data domains [Q, C, O, T, Spatial (S)]
2. Graph the data [Bar, Line, Scatter, Matrix, Symbol]

### Exercise 1: - **What we're given:** Monthly sales revenue ($) over the past 12 months for a retail store. - **Goal:** Identify trends over time. ### Exercise 2: - **What we're given:** Population size of different countries. - **Goal:** Compare country population sizes ### Exercise 3: - **What we're given:** Product ratings from 1 to 5 stars collected from customer feedback. - **Goal:** Show frequency of each rating. ### Exercise 4: - **What we're given:** Test scores (0%-100%) of students plotted against hours studied. - **Goal:** Determine the correlation between study time and performance.33:T717,### 2B. Question-Laddering Let's move on from barley and into geodata - specifically, the Gapminder geodata. It's rather easy to have a simple question like: > Which countries have the highest life expectancy? Now, let's consider the next rung of the ladder: **How can we make this question more interesting?**. Here's an example process. You can progressively transform our life expectancy question as so:

Which countries have the highest life expectancy?
↓
How does life expectancy differ across regions?
↓
How has life expectancy changed over time across regions?
↓
Is increasing GDP associated with increasing life expectancy?
↓
Does the relationship between GDP and life expectancy differ between regions?
↓
Which countries have unusually high or low life expectancy given their GDP?

This process of "Question-laddering" is useful for helping to train you with forming meaningful questions and inquiries about data.

[TO-DO]

Take a look at the gapminder data and attempt to form a question ladder.

Form 1-2 questions you have about the data, like we did in Part 2A.
Attempt to form a question ladder that increases in complexity the further down we go.

If you're struggling, consider the following:

Is the question too simple, or not simple enough?
Can we involve more dimension to our question? (i.e. include one or more features into the question)?
Can we form a hypothesis or prediction of the answer to our question? If a hypothesis can be immediately thought of, then maybe the question is too simple.

34:T5c3,### 2C. Considering Different Perspectives Let's take question-forming to an entirely different perspective now. Another crucial way to help form questions is to adopt **personas** with **motivations**. Let's take a look at the Paris Airbnb Data, which aggregates data about Airbnb rentals. If we had to form questions, then we might want to think: |This kind of person (Persona):|Might ask (Motivation):| |:----|:----| |Tourist|Where might I find affordable accommodation? |An Airbnb Code Developer|What characteristics distinguish frequently reviewed listings?| |A Paris Resident|Are Airbnb listings concentrated in particular parts of the city?| |An Airbnb Host|What appears to distinguish higher-priced listings?| |A City-Planner|Are some neighborhoods affected by short-term rentals more than others?| In the industry more particularly, these questions are **crucial** for improving products and analyzing the impact of your products. These question are also important in academia too, though in more indirect ways.

[TO-DO]

With your group, take on the Personas related to Airbnb above and form 2-3 questions you might be motivated to ask, given the data. Debate about the importance of each question and come to a conclusion about which you'd finally select as your primary dataset question.

35:T86d,--- ## Review of Class and Lab Materials: ### Two Major Steps: 1. What to visualize? - Data selection & Transformation - Which attributes matter for your question? - What level of detail is appropriate? - How should data be aggregated or filtered? - What derived attributes might be useful? 3. How to visualize? - Visual encoding & Design - Which visual channels best represent your data? - How do you map data attributes to visual properties? - What design choices enhance clarity? - How do you avoid misleading representations? ### Two Major Principles: - **Expressiveness**: Show all and only the facts in the data - **Effectiveness**: Information should be readily perceived ### Major Foundations - **Aggregation** - **Temporal Aggregation:** - Year → Month → Week → Day → Hour - **Spatial Aggregation:** - Country → State → City → Neighborhood - **Binning:** - Age: 18-25, 26-35, 36-45, etc. - Income: Low, Medium, High - **Derived Attributes:** - Growth rate from sequential values - Ratios and percentages - **Scales & Axes** - **Scale:** A function mapping data domain to visual range - **Data Domain → Scale Function → Visual Range** - **Linear scales:** Equal data differences = equal visual differences - Absolute differences - Additive changes - Most common choice - **Logarithmic scales:** Equal ratios = equal visual differences - Relative differences - Multiplicative changes - Wide data ranges - **Ordinal scales:** Preserve order, not magnitude ### The Visual Design Process 1. **Understand your question** 2. **Transform data appropriately** 3. **Choose effective visual encodings** 4. **Select appropriate scales** 5. **Test and iterate** ### **Common Pitfalls to Avoid** - **Skipping data exploration:** Visualize without understanding the data - **Chart junk:** Adding visual elements that don’t encode information - **Color overuse:** Using color when position would be more effective - **Ignoring scale effects:** Not considering how scale choices affect perception - **3D when 2D suffices:** Adding dimensions that don’t encode information36:T44f,--- ## Extra Tips and Recommendations ### Different Vega-Lite Chart Types We've already covered several plot types, but Vega-Lite provides a very wide variety of different chart types. We encourage you to look through them if possible. ### Avoid Common Pitfalls - **Skipping data exploration:** Visualize without understanding the data - **Chart junk:** Adding visual elements that don’t encode information - **Color overuse:** Using color when position would be more effective - **Ignoring scale effects:** Not considering how scale choices affect perception - **3D when 2D suffices:** Adding dimensions that don’t encode information - **Always keep it simple!** ### Advanced Vega-Lite Operations We encourage that you follow the expertly-summarized UW Interactive Data Lab, which explicitly covers some advanced techniques and a different perspective on how to formulate Vega-Lite charts.37:[{"id":"ac4ee02664a7b6a5774199598bba431f37a82776bc96ac60c6b58019753e19d6c3e5bc76cd16c064bdc005cfe64c3c2b044fbba01aab3e76908467826ee251cc","href":"https://static.observableusercontent.com/files/ac4ee02664a7b6a5774199598bba431f37a82776bc96ac60c6b58019753e19d6c3e5bc76cd16c064bdc005cfe64c3c2b044fbba01aab3e76908467826ee251cc","name":"5_Fundamental_Graphs_Cheatsheet.png","type":"image/png","lastModified":1758283050201.044,"size":92032},{"id":"53bc48c3f6daa66d43e97ae1c27214767c020c50e4af17f1ea9becf30348f031dc247abdef24e0e75b3fe7700b8c40c21b7c8050b32e6376bf0234ae67b07590","href":"https://static.observableusercontent.com/files/53bc48c3f6daa66d43e97ae1c27214767c020c50e4af17f1ea9becf30348f031dc247abdef24e0e75b3fe7700b8c40c21b7c8050b32e6376bf0234ae67b07590","name":"airbnb_paris.csv","type":"text/csv","lastModified":1758292795589.791,"size":13890800}] 30:{"id":"97a9759186a73bca","slug":"2026-infovis-cse_week-3-lab","title":"Week 3 Lab: Fundamental Graphs and Visual Encoding","thumbnail":"b63526a704a674661de4ccfdb694ba716318013036f4c8fbc149d17b9767acb8","access_level":"public","create_time":"$D2026-09-06T19:18:58.102Z","update_time":"$D2026-09-14T22:38:48.775Z","view_time":null,"first_public_time":"$D2026-09-18T15:48:19.559Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/f4dbf638309ae46a2fdbe9c7c40d1cf5bd31e0cd3ce09ac558ef7a4a8f2d7377","tier":"starter_2024","bio":""},"version":335,"publish_version":335,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddc2916ccfd28b14","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/a17ba87a2618a0219160d264d7e13fdef2d4fb8bd902ae457541c60e7498fc11","tier":null,"bio":""}],"members":[{"type":"team","id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/f4dbf638309ae46a2fdbe9c7c40d1cf5bd31e0cd3ce09ac558ef7a4a8f2d7377","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Week 3 Lab: Fundamental Graphs and Visual Encoding","cells":[{"id":0,"value":"# Week 3 Lab: Fundamental Graphs and Visual Encoding","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"## Lab Goals:\n\n1. Warm up: Practice with Scenarios & Choices\n2. Creating multiple chart types in Vega-Lite\n3. Exploring encoding alternatives for same data\n4. Small multiples and faceting\n5. Combining multiple views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"## Today's Main Topics\n\n- **5 Fundamental Graphs**: Bar Charts, Line Graphs, Scatter Plots, Matrix, Symbol Maps\n- **Principles**: Expressiveness & Effectiveness\n- **Transformation Types**: Aggregation, Filtering, Binning, Deriving, Normalization\n- **Domains & Scales**: Linear, Log, Ordinal","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"FileAttachment(\"5_Fundamental_Graphs_Cheatsheet.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"---\n## Part 2: Forming Questions\n\nLet's stretch our minds a bit. Rather than form charts based on questions given to you, let's instead form our OWN questions based on datasets that are given to you without any context. This is an invaluable skill in most industry and academic positions where you are expected to conduct explorations of your own.\n\nWe have 3 different datasets:\n\n- barley.json from Vega-Lite\n- Paris Airbnb Data\n- Gapminder Geodata\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"We will take each of these datasets and try to form our own questions and observations of them. If you are struggling or daunted by this, consider this (hastily put together) taxonomy of different question types:\n\n| Question type | Prompt |\n| ---------------- | -------------------------------------------- |\n| **Distribution** | What values are common/uncommon? |\n| **Comparison** | How does A differ from B? |\n| **Relationship** | Does A appear related to B? |\n| **Ranking** | Which groups have the highest/lowest values? |\n| **Change** | How does something change across time? |\n| **Variation** | Which groups are more/less consistent? |\n| **Exception** | Is anything surprising or unusual? |\n\nYou can use this table to help inspire you on what kinds of questions we can form about our data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"### 2A. Starting Simple with Question Forming: Barley Data\n\n

[TO-DO]

\n IN PAIRS OF TWO OR THREE, take the barley.json dataset and consider: What an we ask about this dataset?. We'll take 5 minutes for you to:\n

Identify the data features in the dataset and their data types (e.g. quantitative, nominal, temporal, ordinal)
Try to derive as many questions about the data you can form from the data alone. Feel free to use the question taxonomy table for inspiration.

\n\n

[Key Lesson]

It's easy to try to claim from the start \"Let's make a ____ chart with this\", but what is more important is to realize that charts are there to SOLVE a question, not help you form one.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"###","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"import { css, vl} from \"@rk2546/infovis-cse-backend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"css","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"2"}} 31:"$30:body"