28:null 29:["$","title",null,{"children":"Analysis of Visualizations and their Affordances | JASMINE CHU's Workspace | Observable"}] 2e:[] 2c:{"id":"360122d9fdc92ea1","slug":null,"title":"Analysis of Visualizations and their Affordances","thumbnail":"6c1cbf24d49e64283f560a72a467b23799eb2c147fe3ed0c5fb325841876fd0b","access_level":"public","create_time":"$D2023-10-31T19:48:00.575Z","update_time":"$D2023-10-31T21:30:14.353Z","view_time":null,"first_public_time":"$D2023-10-31T19:48:00.575Z","fork":{"id":"bfb05b72bb951c8a","slug":"gallery","title":"D3 gallery","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6046f507f84ab4c4","login":"jasmine-chu-ws","name":"JASMINE CHU's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/7acbbee8738e897bb99814a10bd6a585d08de746e7c8a48a92a5e3195f193384","tier":"starter_2024"},"version":1196,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"50ff860ccc38d237","login":"jasmine-chu","name":"JASMINE CHU","avatar_url":"https://avatars-next.observableusercontent.com/01dc8b59652f588a38e6574b6076d7d5ced6bf23e946ef627859079f90c54200","tier":null}],"members":[{"type":"individual","id":"50ff860ccc38d237","login":"jasmine-chu","name":"JASMINE CHU","avatar_url":"https://avatars-next.observableusercontent.com/01dc8b59652f588a38e6574b6076d7d5ced6bf23e946ef627859079f90c54200","tier":null,"role":"editor"},{"type":"team","id":"6046f507f84ab4c4","login":"jasmine-chu-ws","name":"JASMINE CHU's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/7acbbee8738e897bb99814a10bd6a585d08de746e7c8a48a92a5e3195f193384","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Analysis of Visualizations and their Affordances","cells":[{"id":0,"value":"# Analysis of Visualizations and their Affordances","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1097,"value":"What data can it display? How many variables can it accommodate? What does your example show? What sorts of questions can this type of visualization address?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":521,"value":"## Cluster Scatterplot\n${previews([\n{\n path: \"@d3/scatterplot-tour?intent=fork\",\n thumbnail: \"d18023b5df31a426d5d9f0d2e4f1fd7954a905b478787977ec576bd01f8e9024\",\n title: \"Scatterplot tour\",\n author: \"D3\"\n}\n])}\n\n
*What data can it display?*
\nScatterplots can display the relationship between two quantitative variables.\n
*How many variables can it accommodate?*
\nThis visualization can accommodate 2 variables.\n
*What does your example show?*
\nThis example shows data that are in clusters. This visualization zooms in and out to show the big picture and the smaller information in each cluster.\n
*What sorts of questions can this type of visualization address?*
\nThis type of visualization can help find relationships between variables and the correlation at a bigger scale.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1117,"value":"## Bar Chart\n${previews([\n{\n path: \"@d3/bar-chart-race?intent=fork\",\n thumbnail: \"b43c7847e13508c9b9bdff7e827e2998da03b8e6e4093a2f6a8d5de90c9a72c7\",\n title: \"Bar chart race\",\n author: \"D3\"\n}\n])}\n\n
*What data can it display?*
\nThis animated bar chart can display data with values that correspond with time.\n
*How many variables can it accommodate?*
\nThis visualization can accommodate 2 variables. (value and time e.g.year)\n
*What does your example show?*
\nThe example shows the value (in $M) of the top global brands from 2000 to 2019. The movement shows which brands were worth more than others in a certain year.\n
*What sorts of questions can this type of visualization address?*
\nThis visualization can help see which value is the greatest or least at a certain time period.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":538,"value":"## Index Chart\n\n${previews([\n{\n path: \"@d3/index-chart/2?intent=fork\",\n thumbnail: \"87220c31b9e2456687bc19579ff96d5dc8b7707be21de5a380df79a9176ffd94\",\n title: \"Index chart\",\n author: \"D3\"\n}\n])}\n\n
*What data can it display?*
\nThis index chart can display data with values that correspond with time.\n
*How many variables can it accommodate?*
\nThis visualization can accommodate 2 variables.\n
*What does your example show?*
\nThe example shows the weekly price of several technology stocks from 2013 to 2018 relative to each stock’s price on the highlighted date. The chart changes when you hover over it to see that change in stock prices.\n
*What sorts of questions can this type of visualization address?*
\nThis visualization can help with things like analyzing the movement of stock prices and then using it to predict future prices.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":164,"value":"## Density Contours\n\n${previews([\n{\n path: \"@d3/density-contours?intent=fork\",\n thumbnail: \"96a132291395b98ebe551971b5dab56f2c0440ee09b3071641480a378d24a997\",\n title: \"Density contours\",\n author: \"D3\"\n}\n])}\n\n
*What data can it display?*
\n
*How many variables can it accommodate?*
\nThis visualization can accommodate 2 variables.\n
*What does your example show?*
\nThe example shows the relationship between idle and eruption times for Old Faithful.\n
*What sorts of questions can this type of visualization address?*
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":294,"value":"## Tree\n${previews([\n{\n path: \"@d3/tree-of-life?intent=fork\",\n thumbnail: \"4947ed7ee51a82ee3ea09baa2fb7a2c2abd111f888fdfde96693e493c48f8d4d\",\n title: \"Phylogenetic tree\",\n author: \"D3\"\n}\n])}\n\n
*What data can it display?*
\nThis can display data that have hierarchy. Data where a multiple values can have the same root.\n
*How many variables can it accommodate?*
\nThis visualization can accommodate 1 variable.\n
*What does your example show?*
\nThe example shows a phylogenetic tree. It shows how bacteria, eukaryota, and archaea branch out. \n
*What sorts of questions can this type of visualization address?*
\nThis visualization shows how things are related to each other and how they are ranked in a tree.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":221,"value":"## Temperature Scatterplot\n\n${previews([\n{\n path: \"@d3/global-temperature-trends?intent=fork\",\n thumbnail: \"1c7c0e607ef45cf35efa05d291f056b3ccffde40a7833c12c1b72321d7e7006a\",\n title: \"Global temperature trends\",\n author: \"D3\"\n}\n])}\n\n
*What data can it display?*
\nThis scatterplot displays temperature data.\n
*How many variables can it accommodate?*
\nThis visualization can accommodate 2 variable.\n
*What does your example show?*
\nThe example shows global temperature trends from 1880 to 2010. Not only is the trend shown by a pattern, but it also uses color.
*What sorts of questions can this type of visualization address?*
\nThis visualization showcases temperature trends in a very clear way, so it will be very helpful for questions that uses trend data. For example, predicting the temperature for the next 10 years to propose solutions for global warming.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1142,"value":"## Map\n\n${previews([\n{\n path: \"@d3/spike-map/2?intent=fork\",\n thumbnail: \"3ca25b589618b503e391b0ba48eab612c427ba9faa7abdb5ec9befff5a5841d5\",\n title: \"Spike map\",\n author: \"D3\"\n}\n])}\n\n
*What data can it display?*
\nThis map displays geographical and quantitative data.\n
*How many variables can it accommodate?*
\nThis visualization can accommodate 2 variable.\n
*What does your example show?*
\nThe example shows estimated population by county in 2016. The red spikes are the population in that county. The higher the spike, the larger the population.\n
*What sorts of questions can this type of visualization address?*
\nOne way we can use this visualization is to solve overcrowding problems. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":326,"value":"## Vector Field\n\n${previews([\n{\n path: \"@d3/vector-field?intent=fork\",\n thumbnail: \"379f6a77c7dc953d5ed5e3711f1d567fcc49f81774c5e912725550b14425e786\",\n title: \"Vector field\",\n author: \"D3\"\n}\n])}\n\n
*What data can it display?*
\nThis scatterplot displays wind data.\n
*How many variables can it accommodate?*
\nThis visualization can accommodate 2 variable. (geographical and wind speed)\n
*What does your example show?*
\nThis map shows the speed (size) and direction (orientation and color) of simulated wind.
*What sorts of questions can this type of visualization address?*
\nWe can use this visualization for storm forecasts. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":145,"value":"---\n\n## Appendix\n\nThe code below powers the gallery above. Want to add something to the gallery? Fork this notebook and [send a suggestion](/@observablehq/suggestions-and-comments)!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":855,"value":"count = links.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":603,"value":"links = Generators.observe(notify => {\n let length = 0;\n const observed = () => {\n const links = document.querySelectorAll(\"a[title]\");\n if (length !== links.length) {\n length = links.length;\n notify(Array.from(links, a => a.href).sort());\n }\n };\n const observer = new MutationObserver(observed);\n observer.observe(document.body, {childList: true, subtree: true});\n observed();\n return () => observer.disconnect();\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"function previews(notebooks) {\n return htl.html`

${notebooks.map(preview)}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"function preview({path, title, author, thumbnail}) {\n return htl.html` event.currentTarget.firstElementChild.style.borderColor = \"#1b1e23\"} onmouseout=${event => event.currentTarget.firstElementChild.style.borderColor = \"#e8e8e8\"}>\n

\n`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1067,"value":"document.querySelector(\"base\").target = \"_blank\"","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"