2b:null 2c:["$","title",null,{"children":"Visualizations and their Affordances | Kristina's Workspace | Observable"}] 31:[] 2f:{"id":"36deaa382b29664f","slug":null,"title":"Visualizations and their Affordances","thumbnail":"73b4c4fe09b666597ed7e13c4d2d14d70cb9c5446fe786ab8240f9ad6b55084a","access_level":"public","create_time":"$D2023-11-01T20:45:52.458Z","update_time":"$D2023-11-08T05:34:08.930Z","view_time":null,"first_public_time":"$D2023-11-01T20:45:52.458Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"30eb2b5b234fb691","login":"kristina2-ws","name":"Kristina's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/6b9c040726b91dbe608b876f911f1a750ee45e9f76e274a081eacf1c7a611dfa","tier":"starter_2024"},"version":116,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"525ab9ddf5d1f074","login":"kristina2","name":"Kristina","avatar_url":"https://avatars-next.observableusercontent.com/046f6b252df007e436700117af605611573ff5c66ee70e30e3145bbd3be32c3b","tier":null}],"members":[{"type":"individual","id":"525ab9ddf5d1f074","login":"kristina2","name":"Kristina","avatar_url":"https://avatars-next.observableusercontent.com/046f6b252df007e436700117af605611573ff5c66ee70e30e3145bbd3be32c3b","tier":null,"role":"editor"},{"type":"team","id":"30eb2b5b234fb691","login":"kristina2-ws","name":"Kristina's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/6b9c040726b91dbe608b876f911f1a750ee45e9f76e274a081eacf1c7a611dfa","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Visualizations and their Affordances","cells":[{"id":0,"value":"# Visualizations and their Affordances\nAn analysis by Kristina Marmolejo Rodriguez","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"## 1. Animation - zoomable sunburst\nThis animation shows hierarchies of related data. This particular version shows only two layers of the hierarchy at a time, zooming in by clicking a node and zooming out by clicking the center.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"## 2. Interaction - brushable scatterplot\nThis one shows the correlation between horsepower and miles per gallon. It is able to tell you the relationship between two items, one on the y-axis and one on the x-axis. It is able to show individual data points in relation to one another.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"## 3. Analysis - volcano contours\nThis type of analysis is able to show topographical data. The colors represent a change in elevation moving outside into the center.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"## 4. Hierarchies - force-directed tree\nThis visualization shows clusters of hierarchical data and how it all relates on one tree. The most common type of data shown is phylogeny, but other types of data could include the structure of a website and corresponding web pages and links.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"## 5. Networks - sankey diagram\nThis sort of visualization shows the flow of connections in a different way then hierarchies. The size of the threaded connections indicate how much volume/percentage of items are being produced. Nuclear is the largest bar, indicating it is energy being produced in the highest quantity. I've also seen this type of diagram to show college degrees on the left and career individuals entered after college.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"## 6. Bars - the impact of vaccines\nThis visualization shows the trend of Measles in the United States by graphing infection rates from 1930-2010 with the line showing the vaccine introduction plotted as well. The deeper the red color the higher the rates of infection. It is a great way of showing how data trends over a span of time, allowing for multiple points of data to be shown and compared at once.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"## 7. Lines - inequality in American cities\nA graph of this sort is able to show much data at one time. It's a segment of time from 1980-2015. It also has population data, inequality levels, and major cities listed. It is also able to show trends over time, but with a wider cross-section of information to tell a more meaningful story in a succinct way.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"## 8. Area - band chart\nThe band chart is able to show data over time in San Francisco on the x-axis in relation to another variable on the y-axis, in this case temperature. Additional information can be plotted, as this visualization shows upper and lower bands of the daily high and low of temperatures.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"## 9. Dots - bubble chart\nA bubble chart is good for showing non-hierarchical information. The size of the circle depends on its value. The larger the value, the larger the circle and vice versa. The color represents the category that data is associated with (red = data, yellow = physics, purple = query, etc).\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"## 10. Radial - pie chart\nA pie chart best shows percentages at one moment in time. This chart displays the population of the Unites States in 2015 broken out into age groups and their estimated totals of people in that age range. We are able to visually compare the size of one segment to others.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"## 11. Annotation- color legend\nCorrect annotation is key to communicating information so its not confusing to decipher. Color is an important visual aid, as well as the number scale that explains what it corresponds to. It is a quick and and succinct way to compare information, for example the unemployment rates plotted on a map using color: dark blue is high rates of unemployment and light blue is the low rates. \n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"## 12. Maps - solar terminator\nThe area of the map colored blue is currently experiencing nighttime and will change with the daily cycle.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"## 13. Animation - Icelandic population by age, 1841–2019\nThere are many variable shown in this animated area graph. Data can be plotted on the x and y-axis such as age and total population, with red representing surplus female and blue surplus male in Icelandic population. This animation also has time upper and lower limits from 1841 to 2019. Unlike a static graph, animated graphs are more engaging, stimulating and help capture attention.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"## 14. Interaction - index chart\nA graph like this plots multiple data points over time, showing their changes and relation to one another. Hovering over changes the date for comparison, making an interactive graph. The x and y-axis are able to show different variables to compare.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"## 15. Analysis - hexbin map\n3,000 Walmart locations are plotted on this map shoeing by color (red = older and blue = younger) the median year of opening. The hexagon is able to represent the number of stores in the vicinity: larger = more and smaller = less. Many variable can be plotted for comparison and analysis.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"## 16. Hierarchies - treemap\nThis sort of visualization is great for representing hierarchies of information, categorized by color. The size of each rectangle also represent its value. A higher value will be larger and a smaller value will be a smaller rectangle. Labels and totals are also displayed.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"