36:["$","title",null,{"children":"Visualization Design - Justin Banusing | Spring 2020 Info Vis | Observable"}] 3e:Tf09,md` - **Domain Problem and Data Characterization** - During the first level, designers have to put themselves into the domain in order to get a handle on user needs, problems and the data involved. While in it, designers should do research and conduct activities like surveys/interviews in order to get a firmer grasp of what they’re dealing with in terms of things like domain-specific terminology, processes and the like. Designers should make no assumptions while doing so; they have to make every possible consideration and concession. - The **output** of this level is essentially the framework for the next level and the rest of the process as a whole. It comes in the form of the detailed questions/problems the designer wants to tackle, which the second level will use as a basis for abstraction into operations and data types. - **Threat:** Conscious/unconscious practices on the part of the designer leading into them working on the wrong problem/issue. This typically comes from a lack of understanding or misrepresentation of the research conducted -- or a lack of research in general. - **Operation and Data Type Abstraction** - In the second level, designers take what they learned in the previous level (data/questions) and transform them into more generic and abstract forms -- specifically descriptors and data types. This is to make them easier to work with as well as better associate them with standard practices. Essentially, think of it as going from something very specific to something more broad and mass-applicable. An example of this is reframing the act of comparing Coke and Pepsi sales over an x number of years into comparing sales numbers between two different products (removing the specificity) - This level’s **output** is the description of the operations and data types the visualization will need/use. It will go on to the next step as an input that will help the designer decide what decisions they’ll need to make to come up with an efficient product. - **Threat:** Perhaps the biggest threat at this level is associating some or all the data with wrong data types. Something along the lines of identifying something that should be continuous as discrete, which will end up deterring everything afterward. - **Visual Encoding and Interaction Design** - In the third level, designers take what they learned from the past two levels and transform them into visuals. Using insights from the second level in particular, designers make decisions on how to visually encode and present the different data pertaining to their problem. An example of this is deciding to use a pie graph to represent how much of a market specific products have a hold on. - The **outputs** for this level are the types of visuals and the interactive elements the user will get on their end. Essentially, how the product will look to the general public. This will be used in the next step as an **input** to know what the algorithms need to fill in and deal with. - **Threat:** A major threat that could happen at this level is a designer choosing a wrong or suboptimal form of visual encoding/presentation for their output. The repercussions of this can range from hard to understand visuals to misrepresented data in its entirety. - **Algorithm Design** - In the fourth level, the designers will use the encodings and interactions they came up with as well as everything they gained from previous levels to guide them in creating an algorithm that will automatically generate visuals that will serve as their final product. - The **output** here is the final product, containing the interactive visuals and the message the user intended to present from the beginning. - **Threat:** A slow algorithm is a major threat that could lead into a bad user experience.`3f:T743,md`## Visualization Analysis For **two visualizations**, you are going to use the Nested Model of visualization design to describe what _you believe_ to be the intention of the work. For each one, you should first _display the visualization_ (either by importing it from a Notebook, or putting an \`\` tag), and then write up the following analysis of the design process:

Domain Problem and Data Characterization

1. What **domain** is the visualization coming from? 2. What domain specific vocabulary is used in the work? 3. Who is the pertinent **target audience** within this domain? 4. What **questions** does the target audience have? Based on those questions you've identified (based on the _audience_, in a particular _domain_), you are ready to move into the next stage in the design model.

Operation and Data Type Abstraction

1. What generic _operations_ are required to answer the question(s) identified above? Indicate whether each operation is a _high-level_ or _low-level_ task, as described by Amar and Stasko. 2. What are the data types present in the data (e.g., categorical, continous)? Based on the required operations and data type, you are ready to consider available encodings.

Visual Encoding and Interaction Design

1. Which visual encodings and interactions were selected to support the tasks identified in the previous step? 2. We'll discuss this more in next week's notebook, but based on your current knowledge, do you believe these encodings and interactions allow users to sufficiently accomplish their tasks?

Algorithm Design

If any information is available on the algorithm design used to build the visualization, please make note of it here (if not, no worries). And remember to do this for **two visualizations**! `40:T776,md`

Domain Problem and Data Characterization

1. **What domain is the visualization coming from?** Corporate world. 2. **What domain specific vocabulary is used in the work?** Short-handed company names, brand value 3. **Who is the pertinent target audience within this domain?** People who want to invest/are invested in the stock market 4. **What specific questions does the target audience hope to answer?** What companies have shown a significant growth over time? What are the values of major companies from the earlier recorded date compared to now? What companies currently hold the most value?

Operation and Data Type Abstraction

1. **What generic _operations_ are required to answer the question(s) identified above? Indicate whether each operation is a high-level or low-level task, as described by Amar and Stasko (in the Munzner paper).** It seems like the only operations involved are retrieving values and sorting/categorizing them by year, company name and category -- which are considered low-level tasks. 2. **What are the data types present in the data?** Continuous: years + value (in theory, of course).

Visual Encoding and Interaction Design

1. **Which visual encodings and interactions were selected to support the tasks identified in the previous step?** On top of naming to show what bar belonged to what company, color encoding was used to denote what category the belonged in (tech, beverage, etc). You can make this connections at a glance typically, but it's only specifically stated when you actually open up the csv. In addition, small white lines are used to encode every 50,000 (in million) milestone. 2. **We'll discuss this more in next week's notebook, but based on your current knowledge, do you believe these encodings and interactions allow users to sufficiently accomplish their tasks?** Yes`41:T675,md`

Domain Problem and Data Characterization

1. **What domain is the visualization coming from?** Esports 2. **What domain specific vocabulary is used in the work?** Hours watched, growth percentage, event names, platform names 3. **Who is the pertinent target audience within this domain?** People who are fans of esports and the industry at large 4. **What specific questions does the target audience hope to answer?** How many hours did people spend watching the major esports tournaments last year? Which tournament had the most viewers? Which game had to most major tournaments with a significant viewerbase? How much have tournaments grown compared to their past iteration?

Operation and Data Type Abstraction

1. **What generic _operations_ are required to answer the question(s) identified above? Indicate whether each operation is a high-level or low-level task, as described by Amar and Stasko (in the Munzner paper).** Data retrieval, sorting and calculating growth. These are low level tasks. 2. **What are the data types present in the data?** Continuous: years + hours watched + growth percentage.

Visual Encoding and Interaction Design

1. **Which visual encodings and interactions were selected to support the tasks identified in the previous step?** They used bar chart visualizations to show the scale of each tournament's viewing hours compared to the last. 2. **We'll discuss this more in next week's notebook, but based on your current knowledge, do you believe these encodings and interactions allow users to sufficiently accomplish their tasks?** Yes`42:[{"id":"c29cd15c46158a2561c802aa19d767aabe9351839b185b37e64209b05a9ef5bf7c0a630ae7cda097c7254beab84b116bb6da59f3a9d915fb5ca12d304f5c9ab8","href":"https://static.observableusercontent.com/files/c29cd15c46158a2561c802aa19d767aabe9351839b185b37e64209b05a9ef5bf7c0a630ae7cda097c7254beab84b116bb6da59f3a9d915fb5ca12d304f5c9ab8","name":"NestedModel.pdf","type":"application/pdf","lastModified":1586839701064.089,"size":325073}] 3a:{"id":"74d747dfd6a5b404","slug":"visualization-design/2","title":"Visualization Design - Justin Banusing","thumbnail":"0fb32200d4ce925e705535a2a402a4fd565045d771eacd12abc6f72d2fa792b2","access_level":"public","create_time":"$D2020-04-14T04:48:21.064Z","update_time":"$D2020-04-14T05:02:05.302Z","view_time":null,"first_public_time":"$D2020-04-14T04:48:29.350Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","bio":"UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues. ","followed_by_you":false,"follows_you":false},"version":127,"publish_version":127,"role":null,"authored":false,"authors":[{"type":"individual","id":"c7dcd3dfe349deac","login":"popi1141","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3a4b205cf9d33c71dcb084bcbd87265602223b6faac34e38fd2f75e685bac938","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualization Design - Justin Banusing","cells":[{"id":0,"value":"md`# Visualization Design - Justin Banusing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`In this notebook, you will learn about the **Nested Model** for visualization design through the following steps: \n1. Carefully Read [this paper](https://www.cs.ubc.ca/labs/imager/tr/2009/NestedModel/NestedModel.pdf) by Tamara Munzner outlining the _Nested Model_ for visualizatoin design. \n2. Answer a series of questions about the academic paper\n3. Use the nested model to analyze two visualizations of your choice (in a way, you will be _reverse engineering_ the design process)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"downloadButton(munzner_paper)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`## Reading Responses\nAfter **carefully** reading the academic paper above, answer the following questions (please use Markdown to provide a clear structure to your answers -- feel free to edit the question cells themselves, or create new cells as you see fit):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`- In your own words, describe each level of visualization design presented in the paper. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`- The major contribution of this paper is framing visualization design as a nested model. Describe how the _outputs_ of each level serve as the _inputs_ to the next level.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`- In your own words, describe one threat at each level of visualization design.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$41","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"munzner_paper = await FileAttachment(\"NestedModel.pdf\").blob()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"downloadButton = (pdf, filename = 'paper') => {\n const button = DOM.download(pdf, filename, `Download ${filename}`);\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"import { chart } from \"@d3/bar-chart-race\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W42","stdlib":"1"}} 35:null