25:["$","title",null,{"children":"2024 ECS272 Workshop - Visual Encoding Design | Yunhan Wei | Observable"}] 49:T58f,## Design goals You will work with a high-dimensional dataset of cocktail recipes. The dataset includes information such as ingredients, preparation, and flavor profiles. To help spark ideas, we’ve provided two scenarios for inspiration. **You’re welcome to use these as a starting point or come up with your own context to guide your design.** - You're a bartender who needs to find or recommend cocktails based on customer preferences. Customer preferences can be (but are not limited to): time of day, certain ingredients like base spirit, or sugar. Sometimes you also blank on the recipes, so having a visual reminder sounds nice. - You're a home cocktail enthusiast who enjoys making drinks for yourself and loved ones. But recently, you have started to care about staying healthy, so having access to relevant information is important to you. 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 limited time, it is recommended to focus on **one static design**. But you're more than welcome to discuss alternative designs or add interactions. You're welcome to use the internet to look up what certain cocktails/glassware/ingredients look like. But **try not to look for spoilers** like searching "cocktail visualization" :)4a:T483,## Data Description Before we go over individual attributes, here we provide the essential context for cocktails. Cocktails are crafted using several key components:
(1) **Base Spirit** forms the backbone of the drink, providing the primary flavor and alcohol content (e.g., vodka, gin, rum);
(2) **Modifiers** are additional alcoholic ingredients that enrich the cocktail's profile, like fruit-based liqueurs;
(3) **Mixers** are non-alcoholic ingredients that dilute the base spirit and contribute additional flavors, like soda and juices;
(4) **Seasoning** adds depth and complexity to the overall taste, such as bitter or syrups;
(5) **Garnish** adds visual appeals and introduces aromatic elements. They are often considered **optional**.
In cocktails, a **part** is a unit of measurement that represents a relative quantity used to mix ingredients. The 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. 4b:T4f3,In the following data table, **each component is followed by their measures in parts**.
In this dataset, every cocktail is crafted with around 5 or 6 main ingredients.
**For better visibility**, you can go to [here](https://docs.google.com/spreadsheets/d/1Ia5NEtdwkfBvhWQCcHiGQ-XB6SShD0AGe640fBmkf-w/edit?usp=sharing). **YOU CAN ASSUME YOU HAVE ACCESS TO THE COLORS OF THESE INGREDIENTS** Here we provide more 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 the serving glass; - **Shaker & Ice in shaker** - Whether a shaker is required for the recipe and whether it is a dry shake (i.e., without ice). - **Preparation** - The recipe that can be broken down into individual instructions, separated by semicolon. **Main actions** are in CAPS, such as FILL, SHAKE, POUR, and GARNISH. - **Booziness** - A scale of 0 to 10 that indicates the alcohol strength of the cocktail _based on tasting_. 0 means gentle, whereas 10 is boozy. - **Sourness** - A scale of 0 to 10 that focuses on sweetness/sourness/dryness of the cocktail _based on tasting_. 0 means sweet, whereas 10 is sour/dry.4c:[{"id":"5e1cfcf08171def6678487f8e29b3b46b683f0b793807176d34fa9ea985235858af4c69293eda1eb39bbf97349f78f7be2f2093a31a40ca61761ab19074a1bcc","href":"https://static.observableusercontent.com/files/5e1cfcf08171def6678487f8e29b3b46b683f0b793807176d34fa9ea985235858af4c69293eda1eb39bbf97349f78f7be2f2093a31a40ca61761ab19074a1bcc","name":"nobels.jpeg","type":"image/jpeg","lastModified":1728582277426.889,"size":3587686},{"id":"1384702ac35a51650b0869c9b7f29198e3e332430fd99ab4a4b53e0ac3d89b653f52e768c8aa4ce654cd4656185384d1ad0bbfef8dc8b6c64d0477af6157e6b9","href":"https://static.observableusercontent.com/files/1384702ac35a51650b0869c9b7f29198e3e332430fd99ab4a4b53e0ac3d89b653f52e768c8aa4ce654cd4656185384d1ad0bbfef8dc8b6c64d0477af6157e6b9","name":"cocktail@1.jpg","type":"image/jpeg","lastModified":1728582277426.889,"size":357382},{"id":"e58a219a9a2ad955b7e7d3c92dc353fe82248bfbdb0147dbf07408ab836c6ecf61721ef70342347dd219476ceffdfc6fe08ef9da8a7f7490f9430a57104c7f4c","href":"https://static.observableusercontent.com/files/e58a219a9a2ad955b7e7d3c92dc353fe82248bfbdb0147dbf07408ab836c6ecf61721ef70342347dd219476ceffdfc6fe08ef9da8a7f7490f9430a57104c7f4c","name":"Screenshot 2024-10-09 at 14.42.16.png","type":"image/png","lastModified":1728582277426.889,"size":17497},{"id":"793931a674d2042688b573b56fb1cba62c6d317e90f3795354b61a702500d5eca6b8c6c76a7842f0ed956a07b71cac5046d2bbdb98b5904c5582855e0afe3c93","href":"https://static.observableusercontent.com/files/793931a674d2042688b573b56fb1cba62c6d317e90f3795354b61a702500d5eca6b8c6c76a7842f0ed956a07b71cac5046d2bbdb98b5904c5582855e0afe3c93","name":"cocktails.csv","type":"text/csv","lastModified":1728582277426.889,"size":5439}] 29:{"id":"f5eb7ffd289c01b8","slug":null,"title":"2024 ECS272 Workshop - Visual Encoding Design","thumbnail":"05996b596ac4d78c60a3947ba094b1435095f9317bf5243b9bac30d61eeed55e","access_level":"public","create_time":"$D2024-10-10T17:44:37.426Z","update_time":"$D2024-10-10T17:44:37.426Z","view_time":null,"first_public_time":"$D2024-10-10T17:44:37.426Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3bf0b2a87e1a7990","login":"yunhan-wei","name":"Yunhan Wei","avatar_url":"https://avatars-next.observableusercontent.com/fe16213e156c9b297be3f6f61d98b782da4d16a605fdff04cf846fd5462a9a1d","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":166,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"00eebefea15f1123","login":"yunhan-wei","name":"Yunhan Wei","avatar_url":"https://avatars-next.observableusercontent.com/38f464de96731bd55d4c8842f810d6e54f7bdcb29188f33df8b457c70f65641a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"00eebefea15f1123","login":"yunhan-wei","name":"Yunhan Wei","avatar_url":"https://avatars-next.observableusercontent.com/38f464de96731bd55d4c8842f810d6e54f7bdcb29188f33df8b457c70f65641a","tier":null,"role":"editor"},{"type":"team","id":"3bf0b2a87e1a7990","login":"yunhan-wei","name":"Yunhan Wei","avatar_url":"https://avatars-next.observableusercontent.com/fe16213e156c9b297be3f6f61d98b782da4d16a605fdff04cf846fd5462a9a1d","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"2024 ECS272 Workshop - Visual Encoding Design","cells":[{"id":0,"value":"# 2024 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.\n**Group members**: \n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"## 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"nobels = FileAttachment(\"nobels.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"---\n\n## Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"**Response: **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"**Response: **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"**Response: **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"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.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"cocktail1 = FileAttachment(\"cocktail@1.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"photo credit: Elizabeth Villanueva","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":131,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"await FileAttachment(\"cocktails.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"**Presentation**\n\nWhen sharing your group's design with the class, you should start with the purpose of your design, i.e., what is the motivation.\nIs there a specific scenario for your visualization design? Who could be the audience of this visualization?\n\nBriefly explain how to interpret the design. You could also mention whether there are attributes your group considered irrelevant and did not use them, whether there were struggles with design choices, or whether there was information that your group wished to have access to. Anything is welcome.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"**The group's scenario**
\nEdit this cell to add it here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"**The group's design**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"// upload the image here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null