{"id":456272,"date":"2021-09-07T13:09:16","date_gmt":"2021-09-07T20:09:16","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcuser&#038;p=456272"},"modified":"2021-09-07T13:09:16","modified_gmt":"2021-09-07T20:09:16","slug":"change6ways","status":"publish","type":"arcuser","link":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/change6ways","title":{"rendered":"Six Ways to Visualize Change Over Time in Web Maps"},"author":1031,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","castos_file_data":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","_links_to":"","_links_to_target":""},"categories":[10722,25002],"tags":[238221,475592,475792,1281,168462],"arcuser_issues":[475582],"class_list":["post-456272","arcuser","type-arcuser","status-publish","format-standard","hentry","category-arcgis-api-for-javascript","category-developers-corner","tag-arcgis-developer","tag-arcuser-summer-2021","tag-change-detection","tag-visualization","tag-web-maps","arcuser_issues-au-summer-2021"],"acf":{"short_description":"Use ArcGIS API for JavaScipt tools to answer what, how much, when, and where questions about raw data through visualization.  ","pdf":{"host_remotely":false,"file":456282,"file_url":""},"flexible_content":[{"acf_fc_layout":"blockquote","content":"Data visualization is an attempt to answer questions about raw data. These questions typically start with words like what; how much; when; and of course, where. In addition to these, people frequently ask questions about how a data variable changes over time. These could be questions such as the following:\r\n<ul>\r\n \t<li>How did population change from 2010 to 2020?<\/li>\r\n \t<li>Over the last 30 years, has the climate been warmer or cooler?<\/li>\r\n \t<li>Where has voter turnout increased or decreased since the last election?<\/li>\r\n<\/ul>\r\nIn this article, I demonstrate six ways to visualize change over time using the ArcGIS API for JavaScript with the following approaches:\r\n<ol>\r\n \t<li>Toggle layer visibility<\/li>\r\n \t<li>Swipe widget<\/li>\r\n \t<li>Side-by-side views<\/li>\r\n \t<li>Stacked rings<\/li>\r\n \t<li>Above-and-below theme<\/li>\r\n \t<li>Animations<\/li>\r\n<\/ol>"},{"acf_fc_layout":"image","image":456322,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":456332,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>1 Toggle Layer Visibility<\/h2>\r\nThe classic way to compare change is to display the data in separate layers and toggle each layer\u2019s visibility on and off. I created an <a href=\"https:\/\/bit.ly\/2RYeQwc\">app\u00a0 that visualizes average educational attainment for Mexico<\/a> in 2010 and 2020 by adding both layers to a GroupLayer with an exclusive visibility mode property. That makes it easy for the user to toggle layers off and on using the LayerList widget as shown in Listing 1.\r\n\r\nThis approach works well when two layers differ greatly, and those differences can easily be spotted when layer visibility changes. This is generally true of choropleth maps (maps that use polygons with a fill color). This approach is not as effective when the layers use graduated symbols."},{"acf_fc_layout":"image","image":456312,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":456352,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>2 Swipe Widget<\/h2>\r\nUsing the Swipe widget is another way to compare how data changes over time. It is very similar to toggling layer visibility, but instead the Swipe handle is dragged to view the change, like turning the page of a book. View <a href=\"https:\/\/bit.ly\/34LSJvm\">this app<\/a>, which visualizes household statistics for Mexico, to see how the Swipe widget works.\r\n\r\nTo create this experience, construct a Swipe widget instance as shown in Listing 2. Then reference layers under leadingLayers and the other layer under trailingLayers. Since the color ramps in each layer should match to make a fair comparison, only the style information for one of the layers is displayed in the legend.\r\n\r\nLike toggling layer visibility, this technique works well when layers differ significantly, but with the Swipe widget, data from the same feature for both time periods can be compared by straddling the feature with the Swipe handle. The swipe experience can be easily added to ArcGIS StoryMaps apps.\r\n\r\n&nbsp;"},{"acf_fc_layout":"image","image":456362,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":456372,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":456382,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>3 Side-by-Side Views<\/h2>\r\nSometimes viewing data in side-by-side views can be the most effective technique for comparing change over time because it doesn\u2019t require any user interaction. The user can see all the data in one glance and determine which scenario is better or worse over time.\r\n\r\nBecause this approach requires a lot of visual scanning between two views, it does not work well when the differences between two visualizations are subtle. The side-by-side views approach works best with small-scale phenomena that change significantly over time. In most cases, the toggle or swipe approaches are more effective. Displaying two layers in side-by-side views can be effective for showing the difference between two layers at a single glance.\r\n\r\nThis example, <a href=\"https:\/\/bit.ly\/3ihUGb1\">Capacity Analysis<\/a>, is an ArcGIS Online configurable app template that uses side-by-side views to compare the output of two models predicting the demand for hospital beds as a result of the COVID-19 pandemic.\r\nYou can also use the side-by-side view technique to show data for more than two time intervals. However, since most browsers support no more than 16 WebGL rendering contexts (one context is required per view), a single app is limited to no more than 16 views. The app, <a href=\"https:\/\/bit.ly\/3vLxB4v\">U.S. High Tide Flooding Probability Scenarios through 2100<\/a>, uses six views to compare data representing the probability of high-tide flooding for the next 100 years.\r\n\r\n&nbsp;"},{"acf_fc_layout":"image","image":456392,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":456402,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>4 Stacked Rings<\/h2>\r\nStacked rings can be used to show a variable\u2019s value in one year compared to that in another year. Rings of the same size indicate the variable experienced little or no change from the previous year. To implement this technique, set the style for the marker symbol to none and represent each year with different colors. The size variable configuration (i.e., stops) must be identical between the two layers. This technique can be difficult for users to understand, so use it with caution. It works best with small, dispersed datasets and will not be as successful in layers that have dense, overlapping icons."},{"acf_fc_layout":"image","image":456412,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":456422,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>5 Above-and-Below Theme<\/h2>\r\nTo view growth or decline over time at one glance, use the above-and-below theme for color and\/or size. This approach involves calculating the change between the two variables (either as total change or as percent change), and visually indicating that difference with a single renderer.\r\n\r\nIt requires writing an ArcGIS Arcade expression to calculate the difference between two fields in the same layer. Set a midpoint of zero in the renderer break points using a color visual variable (shown in Listing 3) or by using a ClassBreaksRenderer (shown in Listing 4) to give the renderer distinct above-and-below symbols.\r\n\r\nAlternatively, use the above-and-below theme in the univariate color and size smart mapping module and let the ArcGIS API for JavaScript pick the color scheme, symbols, and break points as shown in Listing 5. This approach only shows the delta between the two data values, not the totals for each year. If viewing the value of the variable for each year is important, then add an option that allows the user to toggle between both values for the change between years and the totals for each year.\r\nSee an example using the <a href=\"https:\/\/bit.ly\/2URmOsf\">above-and-below theme<\/a>."},{"acf_fc_layout":"image","image":456472,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":456462,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>6 Animations<\/h2>\r\nAnother way to view change over time is to create a data animation. This is effective for showing subtle, compounding changes over long periods of time. As opposed to the other approaches, which only compare change between two dates, this technique allows the user to view change for many\u2014even hundreds\u2014of time periods.\r\n\r\nThis example, <a href=\"https:\/\/bit.ly\/ 3iaw2ZN\">Global Temperature Anomaly to 1880\u20132020<\/a> doesn\u2019t use TimeSlider for filtering features with a date field. As shown in Listing 6, TimeSlider is used as a tool for updating the layer\u2019s renderer to point to a new attribute field (or Arcade expression) at each slider move. Updating the field name in the renderer to the column containing data for the selected year is the only change\u2014no other renderer changes should be made.\r\n\r\nC"},{"acf_fc_layout":"image","image":456502,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":456532,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Combinations<\/h2>\r\nThe approaches listed in this article can be combined. For example, a layer that already visualizes change in a smaller time interval using the above-and-below theme can be animated, showing change over time. <a href=\"https:\/\/bit.ly\/3yZlWRp\">The National Park map<\/a>\u00a0 illustrates the use of the above-and-below theme with animation to visualize changes in year to year visits to US national parks.\r\n<h2>A Word of Caution<\/h2>\r\nWhen comparing data that changes over time in two separate layers, the same renderer and visual variable configurations must be used for both layers to ensure that the comparisons make sense. The same stops and break points must be assigned to the same colors and sizes.\r\n<h2>Conclusion<\/h2>\r\nThe ArcGIS API for JavaScript provides many ways to visualize change over time. All of them are valid. The approach you choose depends on the final user experience you want. The next time you need to map a variable as it changes over time, try several of the approaches listed in this article because the best option may not be the first one you consider."}],"references":null},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>ArcGIS API for JavaScript can visualize answers to time change questions<\/title>\n<meta name=\"description\" content=\"Developers can use developer tools in the ArcGIS API for JavaScript to uncover answers in raw data through visualization.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/change6ways\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Six Ways to Visualize Change Over Time in Web Maps\" \/>\n<meta property=\"og:description\" content=\"Developers can use developer tools in the ArcGIS API for JavaScript to uncover answers in raw data through visualization.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/change6ways\" \/>\n<meta property=\"og:site_name\" content=\"Esri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2021\/08\/change6ways_banner.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Esri\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/change6ways\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/change6ways\",\n\t            \"name\": \"ArcGIS API for JavaScript can visualize answers to time change questions\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\"\n\t            },\n\t            \"datePublished\": \"2021-09-07T20:09:16+00:00\",\n\t            \"description\": \"Developers can use developer tools in the ArcGIS API for JavaScript to uncover answers in raw data through visualization.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/change6ways#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/change6ways\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/change6ways#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.esri.com\/about\/newsroom\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Six Ways to Visualize Change Over Time in Web Maps\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/\",\n\t            \"name\": \"Esri\",\n\t            \"description\": \"Esri Newsroom\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/82e5143bcdebadf8fd64d84e503ca468\",\n\t            \"name\": \"Monica Pratt\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/\",\n\t                \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg\",\n\t                \"contentUrl\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg\",\n\t                \"caption\": \"Monica Pratt\"\n\t            },\n\t            \"description\": \"Monica Pratt is the founding and current editor of ArcUser magazine, the executive editor of ArcNews magazine, the editor of Esri Globe and head of the Publications team at Esri. She has been writing on technology topics, specializing in GIS, for more than 30 years. Before joining Esri in 1997, she worked for newspapers and in the financial industry.\",\n\t            \"sameAs\": [\n\t                \"https:\/\/x.com\/ArcUser\"\n\t            ],\n\t            \"url\": \"\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"ArcGIS API for JavaScript can visualize answers to time change questions","description":"Developers can use developer tools in the ArcGIS API for JavaScript to uncover answers in raw data through visualization.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/change6ways","og_locale":"en_US","og_type":"article","og_title":"Six Ways to Visualize Change Over Time in Web Maps","og_description":"Developers can use developer tools in the ArcGIS API for JavaScript to uncover answers in raw data through visualization.","og_url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/change6ways","og_site_name":"Esri","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","og_image":[{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2021\/08\/change6ways_banner.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@Esri","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/change6ways","url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/change6ways","name":"ArcGIS API for JavaScript can visualize answers to time change questions","isPartOf":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/#website"},"datePublished":"2021-09-07T20:09:16+00:00","description":"Developers can use developer tools in the ArcGIS API for JavaScript to uncover answers in raw data through visualization.","breadcrumb":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/change6ways#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/about\/newsroom\/arcuser\/change6ways"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/change6ways#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/about\/newsroom"},{"@type":"ListItem","position":2,"name":"Six Ways to Visualize Change Over Time in Web Maps"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/about\/newsroom\/#website","url":"https:\/\/www.esri.com\/about\/newsroom\/","name":"Esri","description":"Esri Newsroom","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/82e5143bcdebadf8fd64d84e503ca468","name":"Monica Pratt","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg","contentUrl":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg","caption":"Monica Pratt"},"description":"Monica Pratt is the founding and current editor of ArcUser magazine, the executive editor of ArcNews magazine, the editor of Esri Globe and head of the Publications team at Esri. She has been writing on technology topics, specializing in GIS, for more than 30 years. Before joining Esri in 1997, she worked for newspapers and in the financial industry.","sameAs":["https:\/\/x.com\/ArcUser"],"url":""}]}},"sort_order":"14","_links":{"self":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/456272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser"}],"about":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/types\/arcuser"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/users\/1031"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/456272\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/media?parent=456272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/categories?post=456272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/tags?post=456272"},{"taxonomy":"arcuser_issues","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser_issues?post=456272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}