2a:T861,md`

Domain Problem and Data Characterization

1. What **domain** is the visualization coming from? > * Statistics on operating systems usage during 2003 to 2020 2. What domain specific **vocabulary** is used in the work? > * Operating System, Platform, Win10, Win8, Win7, WinXP, Linux, Mac, Chrome OS, Mobile 3. Who is the pertinent **target audience** within this domain? > * People who want to research trends of the popularity of the operating systems 4. What **specific questions** does the target audience hope to answer? > * What trend for operating system popularity can I find? > * When is the specific operating system popular / unpopular during a specific time?

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). > * Research Operating System Platforms(High Level): Gather data and statistics on operating systems > * Compare Operating System Data(Low Level): Compare the data on operating system usage against each other and transform it into a percentage; everything should add up to 100%. 2. What are the data types present in the data (e.g., categorical, continous, etc.)? > * Continuous data, categorical data

Visual Encoding and Interaction Design

1. Which visual encodings and interactions were selected to support the tasks identified in the previous step? > * A line graph where each line is an operating system and the area under it is the percentage usage against other operating systems(where the scale is shown as the y-axis). 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 believe that it is informative and is pretty straight forward.

Algorithm Design

The graph is taken from this [notebook](https://observablehq.com/@mbostock/most-popular-operating-systems-2003-2020). `2b:Ta35,md`

Domain Problem and Data Characterization

1. What **domain** is the visualization coming from? > * Value in $M of Popular Brands 2. What domain specific **vocabulary** is used in the work? > * Global Brand, Value, $M, Sector, Apple, Google, Amazon, Microsoft, Coca-Cola, Samsung, Toyota, Mercedes-Benz, McDonald's, Disney, BMW, IBM 3. Who is the pertinent **target audience** within this domain? > * Competitors, business analyzers or just people who are curious about the current market of brands and their value. 4. What **specific questions** does the target audience hope to answer? > * What are the best leading sectors and their values?

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). > * Research Brands' Values(High Level): Gather data and statistics on brands > * Categorize and Compare Brands' Values(Low Level): Categorize which sectors each brand is part of and compare the data to rank based on the brands' values. 2. What are the data types present in the data (e.g., categorical, continous, etc.)? > * Continuous data, categorical data

Visual Encoding and Interaction Design

1. Which visual encodings and interactions were selected to support the tasks identified in the previous step? > * An animated horizontal bar graph race based on the top 12 values of brands and is color coded based on its sectors. The bars shown is based on the highest value to the lowest(top to bottom) and moves up or down based on the values' rankings. The current year of data that its showing is located on the bottom right of the graph; starting from 2000 to 2019. 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, this shows exactly what the brand names are and their respective value. However, this is suppose to be a bar chart race to show the growth from 2000 to 2019 but I can't seem to show the animation replays. I think that the visualization should show a legend of the colors(which color is assigned to which sectors) as it would be clearer to the audience that way. Other than that, I think it's a cool and informative visualization.

Algorithm Design

The graph is taken from this [notebook](https://observablehq.com/@d3/bar-chart-race-explained). `2c:[{"id":"c29cd15c46158a2561c802aa19d767aabe9351839b185b37e64209b05a9ef5bf7c0a630ae7cda097c7254beab84b116bb6da59f3a9d915fb5ca12d304f5c9ab8","href":"https://static.observableusercontent.com/files/c29cd15c46158a2561c802aa19d767aabe9351839b185b37e64209b05a9ef5bf7c0a630ae7cda097c7254beab84b116bb6da59f3a9d915fb5ca12d304f5c9ab8","name":"NestedModel.pdf","type":"application/pdf","lastModified":1610926773828.987,"size":325073}] 29:{"title":"Visualization Design","cells":[{"id":0,"value":"md`# Visualization Design`","pinned":false,"hidden":false,"mode":"ojs"},{"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 visualization 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"},{"id":12,"value":"downloadButton(munzner_paper)","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"assignment_instructions(\"Visualization Design\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":37,"value":"md`- In your own words, describe each level of visualization design presented in the paper. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"md`There are 4 levels in visualization design as shown in the paper. \n> * __First Level:__ Characterizing the task and data according to a specific target domain. This would mean understanding each domain's vocabulary to describe its data, problem and workflow that solve their problems. \n> * __Second Level:__ Transform the data and problem in the vocabulary into data types and operations that can be transformed into a visualization design. For example, the raw data is needed to be changed into a different form to find the right data type where a visualization representation can address the problem. \n> * __Third Level:__ The transformed data is now designed into a data visualization and also plan out how users will interact with it. \n> * __Fourth Level:__ The creation of the algorithm to carry out the visual encoding and interaction designs that were made in the previous level. `","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":126,"value":"md`> * Each level of visualization design will produce a certain desired output which will be needed to continue towards the next level as it will be used as the next level's input. \n> * __First Level:__ Main vocabulary of the domain is characterized, where the output are detailed questions and instructions that are required to solve the problem.\n> * __Second Level:__ The previous output is further cateogorized and transformed into relevant data to create the visualization, which is the output. Another output is also the description of tasks needed to be done.\n> * __Third Level:__ The instructions and data required are inputted. The output is the design prototype on how the visualization will look like and how the users will interact with it.\n> * __Fourth Level:__ Since the design is inputted, the output will be the completed algorithm that creates the intended design successfully as well as responds correctly towards user interations.\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`- In your own words, describe one _threat_ at each level of visualization design.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"md`> * __First Level:__ Mischaracterized problem - This means that the target users do not have those problems at all as it just may be based on assumptions.\n> * __Second Level:__ Transforming raw data into data types and operations that create visualization designs that do not solve the characterized problems. \n> * __Third Level:__ The design of the visualization does not effectively communicate what it is intended to. The person who's using the system do not understand the abstraction that is presented in the visualization. \n> * __Fourth Level:__ The created algorithm has an inefficient runtime and memory usage. This means that the algorithm is not using the most optimal way to create the visualization or at least in comparison with the previously proposed algorithm.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"md`## Visualization Analysis 1: Most Popular Operating Systems, 2003-2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"osChart","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"md`## Visualization Analysis 2: Best Global Brands 2000-2019`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"raceChart","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"observable_challenges","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"md`I didn't really have much problem completing this tasks but I am still confused on how to alter or use commands from visualizations of other notebooks. For example, in my second visualization analysis, I wanted to put a replay button from the other notebook but is unable to.\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"import {\n assignment_instructions,\n observable_challenges\n} from \"@uw-info474/utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"import { chart as osChart } from \"@mbostock/most-popular-operating-systems-2003-2020\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"import { chart as raceChart } from \"@d3/bar-chart-race-explained\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"munzner_paper = await FileAttachment(\"NestedModel.pdf\").blob()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":71,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2c","stdlib":"1","titling":"auto"}