45:["$","title",null,{"children":"Visualization Design, Yousuf | Spring 2020 Info Vis | Observable"}] 4d:T4cd,md`Domain Problem and Data Characterization
This is the first and most upstream level of the nested visualization model. At this level, the designer should learn about the goals and data of their specified target domain; an example of a target domain may be health care. The designer must clearly and thoroughly understand the system requirements of the users who exist in their target domain.
Understanding the target domain requires engaging with users, rather than making assumptions. However, it is important to note that it may be difficult to understanding problems and workspace (existing workflow, data) despite having access to target users, so multiple methods of ethnographic inquiry are required.
An appropriate *output* of this level is either a detailed set of guiding questions about these target users or their actions, which will lead to an input of collection of data in the downstream level.
**Threat:** Incorrectly identifying the problems or misunderstanding the workspace of users exisiting in target domain.
**Validation:** Use multiple methods of enthnographic inquiry to closely interact with target users.`4e:T4fe,md`Operation and Data Type Abstraction
This is the second most upstream level of the nested visualization model. At this level, the designer should transform the problems and data identified in their target domain into more generic and abstract descriptions, as well as transform raw data into data types fit for visualizing. An example of transforming raw data into data types fit dor visualizing could be putting a list of heights of students in a 4th grade class room into a readable summary table.
It is important to note that the goal of abstraction is to reduce cognitive load in visualizations, so decisions about how to transform problems or raw data must be intentional and justified.
Appropriate *outputs* at this level are descriptive operations (generic tasks) and data types, which will lead to an input of visual encodings in the downstream level.
**Threat:** Operations and data types do not help solve problems of users in target domain.
**Validation:** Ensure decisions about abstraction are itentional and justified by allowing users to test and demonstrate whether ot not the system is useful (both short-term or long-term testing, as well as in-lab or field).`4f:T441,md`Visual Encoding and Interaction Design
This is the third level of the nested visualization model. At this level, the designer should create the visual encoding and interaction. Visual encoding is [translating data into visual elements; encoding could be done through the use of size, color, grouping or placement](https://medium.com/@sophiewarnes/whats-visual-encoding-in-data-viz-and-why-is-it-important-7406bc88b4b4). Interaction is [how the viewer communicates with the visual; interaction could be selecting, filtering or viewing](https://www.sciencedirect.com/topics/computer-science/interactive-data-visualization).
An appropriate *output* at this level is encodings and interactions, which will lead to an input of meaningful methods to display the data.
**Threat:** Choosing encoding or interaction techniques which are ineffective in reducing cognitive load.
**Validation:** Ensure decisions about design are itentional and justified through testing via lab studies or image analysis.`50:T969,md`

Domain Problem and Data Characterization

1. What **domain** is the visualization coming from?
LQBT, quality of life, law and government 2. What domain specific **vocabulary** is used in the work?
Protected, unprotected, discrimination, sexual orientation, gender identity, cis-heterosexual
3. Who is the pertinent **target audience** within this domain?
United States citizens, persons identifying as LGBT, voters, lawmakers 4. What **specific questions** does the target audience hope to answer? * What types of protection against discrimination do persons identifying as LGBT receive in my state? * How are persons identifying as LGBT impacted in schools, work, public accomodation, credit-wise or when seeking housing due to their sexual orientation/gender identity? * How many persons identifying as LGBT reside in my state?

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). * High-level: * Domain parameters * Formulate cause and effect (discrimination and gender identity/sexual orientation) * Concretize relationships (states and their protection laws) * Low-level: * Retrieve values (numbers of persons living in each state) * Filter (types of protection) 2. What are the data types present in the data (e.g., categorical, continous, etc.)? * Categorial (protected or not), (number persons identifying as LGBT in each state based on ring size/level) * Continious (percentages experience discrimination)

Visual Encoding and Interaction Design

1. Which visual encodings and interactions were selected to support the tasks identified in the previous step? * Color * Size * Relative placement (on a scale) 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?
I find these encodings to allow users to accomplish their tasks, because they are intuitive ways of communication, there is a descriptive legend to the left as well as descriptive text under each section, and the visual covers a wide range of protection laws.`51:T833,md`

Domain Problem and Data Characterization

1. What **domain** is the visualization coming from?
Government, Economics 2. What domain specific **vocabulary** is used in the work?
Budget, proposal, deficit, spending, department, cut, increase
3. Who is the pertinent **target audience** within this domain?
United States citizens, voters, law-makers, government workers, economists 4. What **specific questions** does the target audience hope to answer? * Which departments will recieve funding from Barack Obama's $3.7 trillion 2013 budget proposal? * To what deparments (social security, energy, education) are the largest cuts and increases? * What types of spending (mandatory, discretionary ) will occur?

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). * Low-level: * Retrieve values (numbers of persons living in each state) * Filter (types of spending) * Sort 2. What are the data types present in the data (e.g., categorical, continous, etc.)? * Categorial (types of spending) * Continious (percentage increase/decrease, department total, all spending)

Visual Encoding and Interaction Design

1. Which visual encodings and interactions were selected to support the tasks identified in the previous step? * Color * Size * Grouping * Relative placement (on a scale) 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?
I find these encodings to allow users to accomplish their tasks, because they are intuitive ways of communication, the information is all-encompassing, there is a descriptive legend, pop-ups with descriptive text and seperate visuals which allow for seamless learning without information overload.`52:[{"id":"c29cd15c46158a2561c802aa19d767aabe9351839b185b37e64209b05a9ef5bf7c0a630ae7cda097c7254beab84b116bb6da59f3a9d915fb5ca12d304f5c9ab8","href":"https://static.observableusercontent.com/files/c29cd15c46158a2561c802aa19d767aabe9351839b185b37e64209b05a9ef5bf7c0a630ae7cda097c7254beab84b116bb6da59f3a9d915fb5ca12d304f5c9ab8","name":"NestedModel.pdf","type":"application/pdf","lastModified":1586464370600.154,"size":325073},{"id":"96821f60f4f22c8ceac482ddaa260d30b1e3262519b868e519a40118c5fdce9f7eff33dd998c8f7e44d5726f743beaa49ad18f101efb7ef93e31e6b951cc69e2","href":"https://static.observableusercontent.com/files/96821f60f4f22c8ceac482ddaa260d30b1e3262519b868e519a40118c5fdce9f7eff33dd998c8f7e44d5726f743beaa49ad18f101efb7ef93e31e6b951cc69e2","name":"budget.png","type":"image/png","lastModified":1586824435213.995,"size":367115}] 49:{"id":"22f1f798a79ad0f5","slug":"visualization-design-yousuf","title":"Visualization Design, Yousuf","thumbnail":"d2ec9e4639c5948d4673356eb72cd9dd6e9b9c5f8ac9093abb7442befbf9ebdf","access_level":"public","create_time":"$D2020-04-09T20:32:50.600Z","update_time":"$D2020-04-14T01:03:03.369Z","view_time":null,"first_public_time":"$D2020-04-14T20:50:20.048Z","has_unpublished_edits":null,"fork":{"id":"c2501a859e515e86","slug":"visualization-design","title":"Visualization Design","owner":{"id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis"}},"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":256,"publish_version":256,"role":null,"authored":false,"authors":[{"type":"individual","id":"e82ff7b39f6354cf","login":"yousufj","name":"","avatar_url":null,"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, Yousuf","cells":[{"id":0,"value":"md`# Visualization Design, Yousuf`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`Algorithm Design
\nThis is fourth and innermost level of the nested visualzation model. At this level, the designer should create an automated system to showcase visual encoding and interactions.
\n\n**Threat:** Poor performance, slow or incorrect algorithm.
\n**Validation:** Conduct tests on the system's performance through measuring time or memory. Test users with still images or videos created to test for correctness.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"md`

Visual 1
\n[Gabrielle Merite's](https://www.behance.net/gabmd) LGBT: unprotected by laws

Visual 2
\n[Shan Carter's](https://archive.nytimes.com/www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?) Four Ways to Slice Obama’s 2013 Budget Proposal

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"image = FileAttachment(\"budget.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"$51","pinned":false,"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":71,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W52","stdlib":"1"}} 44:null

Visual 1\n*[Gabrielle Merite's](https://www.behance.net/gabmd)* LGBT: unprotected by laws

Visual 2\n*[Shan Carter's](https://archive.nytimes.com/www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?)* Four Ways to Slice Obama’s 2013 Budget Proposal

Visual 1
\n[Gabrielle Merite's](https://www.behance.net/gabmd) LGBT: unprotected by laws

Visual 2
\n[Shan Carter's](https://archive.nytimes.com/www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?) Four Ways to Slice Obama’s 2013 Budget Proposal