2c:null 2d:["$","title",null,{"children":"2026 ECS272 Workshop - Visual Encoding Design | yunhsinkuo | Observable"}] 32:T48d,## Design goals You will design a visualization using a high-dimensional dataset of cocktail recipes, including ingredients, preparation details, and flavor-related attributes. To help spark ideas, consider one of the following scenarios (or define your own): - **Bartender**: You need to find or recommend cocktails based on customer preferences (e.g., certain ingredients, sweetness, time of day). Sometimes your brain goes blank on the recipes, so a visual reminder might be helpful too. - **Home enthusiast**: You enjoy making cocktails at home. Sometimes, your family wants you to balance enjoyment with health considerations. Sometimes, you feel a home bar menu would be fun for everyone because you could pretend you're a bar bartender. You can refer to [the gallery](https://observablehq.com/@observablehq/plot-gallery) for visualization inspirations. Due to time constraints, focus on **one static design**. But you're more than welcome to discuss alternative designs or add interactions. You're welcome to look up what certain cocktails/glassware/ingredients look like. But **try not to look for spoilers** like searching "cocktail visualization" :)33:T44b,In the following data table, **each component is listed with its quantity in parts**.
In this dataset, every cocktail contains 5-6 main ingredients.
**For better visibility**, you can go to [here](https://docs.google.com/spreadsheets/d/1Ia5NEtdwkfBvhWQCcHiGQ-XB6SShD0AGe640fBmkf-w/edit?usp=sharing). **You may assume that ingredient information is available** Mre explanations for certain attributes: - **Occasion** - The time the cocktail is usually served; - **Ice in glass** - Whether ice is required for the serving glass and the ice type; - **Glassware** - The type of serving glass; - **Shaker & Ice in shaker** - Whether a shaker is required and whether it is a dry shake (i.e., without ice). - **Preparation** - Step-by-step instructions separated by semicolons. **Main actions** are in CAPS (e.g., FILL, SHAKE, POUR, and GARNISH). - **Booziness** - A scale of 0 to 10 indicating alcohol strength _based on tasting_. (0=gentle, 10=strong/boozy). - **Sourness** - A scale of 0 to 10 reflecting sweetness vs. sourness/dryness _based on tasting_. (0=sweet, 10=sour/dry).34:[{"id":"5e1cfcf08171def6678487f8e29b3b46b683f0b793807176d34fa9ea985235858af4c69293eda1eb39bbf97349f78f7be2f2093a31a40ca61761ab19074a1bcc","href":"https://static.observableusercontent.com/files/5e1cfcf08171def6678487f8e29b3b46b683f0b793807176d34fa9ea985235858af4c69293eda1eb39bbf97349f78f7be2f2093a31a40ca61761ab19074a1bcc","name":"nobels.jpeg","type":"image/jpeg","lastModified":1768843194755.643,"size":3587686},{"id":"e58a219a9a2ad955b7e7d3c92dc353fe82248bfbdb0147dbf07408ab836c6ecf61721ef70342347dd219476ceffdfc6fe08ef9da8a7f7490f9430a57104c7f4c","href":"https://static.observableusercontent.com/files/e58a219a9a2ad955b7e7d3c92dc353fe82248bfbdb0147dbf07408ab836c6ecf61721ef70342347dd219476ceffdfc6fe08ef9da8a7f7490f9430a57104c7f4c","name":"Screenshot 2024-10-09 at 14.42.16.png","type":"image/png","lastModified":1768845239180.273,"size":17497}] 30:{"id":"08ebacfea5013b4b","slug":"2026-ecs272-workshop-visual-encoding-design","title":"2026 ECS272 Workshop - Visual Encoding Design","thumbnail":"f00b9e6ba3258d7aa49ebdf596ab6cc790f7f9ad73c20176f5b3cdeeaf1fc988","access_level":"public","create_time":"$D2026-01-19T17:17:39.924Z","update_time":"$D2026-01-20T16:34:39.983Z","view_time":null,"first_public_time":"$D2026-01-19T17:20:18.416Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"8866ec4562bf16d9","login":"yunhsinkuo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/30b4b8b10734956ebf08d4f7a4af5e4bf3b8ef04bae40a075fceb3ae40d5f398","tier":"starter_2024"},"version":77,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bd5bcf6548c41c14","login":"yunhsinkuo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/30b4b8b10734956ebf08d4f7a4af5e4bf3b8ef04bae40a075fceb3ae40d5f398","tier":null}],"members":[{"type":"team","id":"8866ec4562bf16d9","login":"yunhsinkuo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/30b4b8b10734956ebf08d4f7a4af5e4bf3b8ef04bae40a075fceb3ae40d5f398","tier":"starter_2024","role":"editor"},{"type":"individual","id":"bd5bcf6548c41c14","login":"yunhsinkuo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/30b4b8b10734956ebf08d4f7a4af5e4bf3b8ef04bae40a075fceb3ae40d5f398","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":14,"collection":null,"type":"notebook","body":{"titling":"auto","title":"2026 ECS272 Workshop - Visual Encoding Design","cells":[{"id":0,"value":"# 2026 ECS272 Workshop - Visual Encoding Design\n\nIn this workshop, you will work with your classmates to explore the visual encoding design space together. \n\nThere are two parts to this workshop:
\n(1) Profile a given visualization and answer questions and
\n(2) Draft a visualization design of a high-dimensional dataset on paper. \n\nWhile we will ask some groups (if not all) to share their work with the class, feel no pressure and let your creativity run wild!\n\n**Submission**: Each group forks this notebook and shows their work in that fork. (Please ensure the visibility is set to public)
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"**Group members**: (add names here!)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"---\n\n## Part 1. Decode This Visualization\n\nThe following visualization explores the story of Nobel prize winners from 1901 to 2012.
\nThis visualization won the [Information is Beautiful awards](https://www.informationisbeautifulawards.com/) in 2013.
\n\n\nLook at this visualization and discuss it with your teammates to answer the following questions:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"nobels = FileAttachment(\"nobels.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"---\n\n## Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"1) List at least 2 marks or channels used in this visualization. For each, provide one instance and describe the type of information it represents in that context.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"**Response: **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"2) What do you think is the main message the authors are trying to convey? Which part of the design or information supports this message?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"**Response: **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"3) If you were the author, what changes would you make to this visualization (e.g., in terms of visual design or user interactions) and why?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"**Response: **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"---\n\n## Part 2. Design a Visualization\n\nNow, you will work with your teammates to draft a visualization design for a dataset **on paper**. \nFor the presentation purpose, please **take a photo of your design** and upload it as an image to your group notebook.\n\nIn this part, your design can focus on **representing the data structure**, i.e., no need to encode the actual data values.\n\n(photo credit: Elizabeth Villanueva)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"cocktail1 = FileAttachment(\"cocktail-1.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"## Data Description\n\nCocktails are crafted using several key components:
\n(1) **Base Spirit**: the primary alcohol content (e.g., vodka, gin, rum) that defines the core flavor;
\n(2) **Modifiers**: the additional alcoholic ingredients (e.g., fruit-based liqueurs) that add complexity or secondary flavors;
\n(3) **Mixers**: the non-alcoholic ingredients (e.g., soda and juices) that dilute the base spirit and contribute flavor;
\n(4) **Seasoning**: the ingredients (e.g., bitters and syrups) that add depth or balance;
\n(5) **Garnish**: the optional elements (e.g., fruit peels) that enhance visual appeal and aroma.
\nIn cocktails, a **part** is a unit of measurement that indicates proportions rather than absolute volume.\n\nThe typical process of making cocktails involves measuring and combining the ingredients, often using a **shaker** with ice to chill and mix the components thoroughly. Depending on the recipe, some cocktails are built directly in the glass without shaking.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"screenshot20241009At144216 = FileAttachment(\"Screenshot 2024-10-09 at 14.42.16.png\").image({width: 500})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"await FileAttachment(\"cocktails.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"## Presentation\n\nWhen presenting your group's design, touch on the following:\n- purpose and motivation\n- usage scenario and potential audience\n- how to interpret the design\n- (optional) design decisions and tradeoffs (e.g., attributes you didn't use, design challenges)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"**The group's scenario**
\nEdit this cell to add it here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"**The group's design**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"//upload images here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"