There are two main categories of data animations \u2013 animating locations (moving features) or animating attributes (stationary features). To animate locations, we recommend keeping the renderer fixed and applying a data filter. For animating attributes of stationary features, we recommend using a visual variable or data variable animation.<\/p>\n
Feel free to skip ahead ?<\/p>\n
\u2022 Animating locations<\/a><\/p>\n \u2022 Animating attributes<\/a><\/p>\n <\/a><\/p>\n Animating locations can help you detect patterns or changes in your data. For example, if the location or geometry of your data changes over time, adding an animation can be helpful to understand how\/when the data moved or changed.<\/p>\n <\/a><\/p>\n Data filter animations can be performed by updating a filter on your layer to animate the data. You can filter by attribute, geometry, or time extent, while keeping the renderer fixed.<\/p>\n To perform a data filter animation based on feature attributes or geometry, use Animating temporal data can help to detect a change or pattern over time \u2013 for instance you can see how the location or geometry of features changes over time or for stationary objects, how their attributes change over time.<\/p>\n To animate based on temporal data, use the TimeSlider<\/a> widget. This requires your layer or service to have a date field, or to have The TimeSlider widget<\/a> makes animating temporal data much simpler for the developer. If the service or layer is time enabled (has timeInfo defined) \u2013 then all you need to do is set the TimeSlider\u2019s If Since the layer in this app did not have Data filter animations don\u2019t always have to be done by time \u2013 you can also create an animation by filtering the attributes of a layer. These kinds of animations can be useful when looking at election results<\/a>, demographics, income, etc.<\/p>\n In the following example, we animate the median income in Los Angeles using As the animation slider changes in this sample, we update the effect’s filter based on the minimum and maximum slider values. We want to highlight the features that fall within this filter, so we set the <\/a><\/p>\n Animating attributes can be a useful way to add animations to a layer with fixed geometries or locations, such as maps showing administrative boundaries (countries, states, counties). To animate attributes in your layer, you will update the renderer on each animation frame or slider change. In this type of animation, you would update the visual variable stops of the renderer on each animation frame or slider change while keeping the data variable fixed. In this type of visualization, you are only looking at a single field or column of interest in the table.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1319632,"id":1319632,"title":"ny-buildings","filename":"ny-buildings.gif","filesize":4592787,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/ny-buildings.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/animating-your-data-with-the-arcgis-api-for-javascript\/ny-buildings","alt":"animating building footprints in new york by the year they were built","author":"10062","description":"","caption":"Building footprints in New York City animated by the year they were built.","name":"ny-buildings","status":"inherit","uploaded_to":1319622,"date":"2021-08-06 22:27:08","modified":"2021-08-06 22:28:36","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":640,"height":387,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/ny-buildings-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/ny-buildings.gif","medium-width":432,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/ny-buildings.gif","medium_large-width":640,"medium_large-height":387,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/ny-buildings.gif","large-width":640,"large-height":387,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/ny-buildings.gif","1536x1536-width":640,"1536x1536-height":387,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/ny-buildings.gif","2048x2048-width":640,"2048x2048-height":387,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/ny-buildings.gif","card_image-width":640,"card_image-height":387,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/ny-buildings.gif","wide_image-width":640,"wide_image-height":387}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-vv-color-animate\/"},{"acf_fc_layout":"content","content":" This example shows New York City building footprints visualized by their construction year with animations added to show when the building was built. A slider is set up to move through each year. In the year the building was constructed, the footprint will flash bright blue, then will gradually turn purple as the years continue so we can still see where these existing building footprints are located in the more recent years.<\/p>\n"},{"acf_fc_layout":"content","content":" Let’s take a look at some code to see how this is done. The The Why can’t we just load all the data initially and use a filter to animate through?<\/strong><\/p>\n We’ve tried this – and the performance of the resulting app was severely impacted. This layer contains over 2500 features and about 140 fields. If one point existed for each data value, you would have 350,000 points ? . By updating the data variable, only 2500 features get loaded at a time, instead of 350,000 – so the performance is much better.<\/p>\n","image_reference":false,"layout":"standard","image_reference_figure":"","snippet":"","spotlight_name":"","section_title":"","position":"Right","spotlight_image":false},{"acf_fc_layout":"content","content":" Similar to visual variable animation, data variable animation also uses fixed geometry or locations, but instead of updating the stop of a visual variable, you update the data variable you use to render the layer. This requires you to have a field for each attribute at each time interval. Depending on the amount of data, this may result in a very wide table. This doesn\u2019t always have to be animated by time, it could also be another dimension (like depth).<\/p>\n The following example shows global temperature anomalies over the past 100+ years. This layer contains one field for each year – from 1880 to 2018, and as the slider updates, we update the renderer to point to the field that matches the slider.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1321802,"id":1321802,"title":"Screen Shot 2021-08-11 at 12.41.13 PM","filename":"Screen-Shot-2021-08-11-at-12.41.13-PM.png","filesize":96011,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-11-at-12.41.13-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/animating-your-data-with-the-arcgis-api-for-javascript\/screen-shot-2021-08-11-at-12-41-13-pm","alt":"","author":"10062","description":"","caption":"","name":"screen-shot-2021-08-11-at-12-41-13-pm","status":"inherit","uploaded_to":1319622,"date":"2021-08-11 19:41:50","modified":"2021-08-11 19:41:50","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1256,"height":530,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-11-at-12.41.13-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-11-at-12.41.13-PM.png","medium-width":464,"medium-height":196,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-11-at-12.41.13-PM.png","medium_large-width":768,"medium_large-height":324,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-11-at-12.41.13-PM.png","large-width":1256,"large-height":530,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-11-at-12.41.13-PM.png","1536x1536-width":1256,"1536x1536-height":530,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-11-at-12.41.13-PM.png","2048x2048-width":1256,"2048x2048-height":530,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-11-at-12.41.13-PM-826x349.png","card_image-width":826,"card_image-height":349,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-11-at-12.41.13-PM.png","wide_image-width":1256,"wide_image-height":530}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/sandbox\/?sample=visualization-update-data"},{"acf_fc_layout":"content","content":" The resulting animation can be seen below. The color blue represents areas where it was cooler than normal and the color red shows areas where it was warmer than normal. As we animate through this data, we can see that what was once a cooler world is becoming warmer and warmer. Open the app by clicking on the GIF below and notice the performance as you update the slider – the renderer updates so quickly!<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1321782,"id":1321782,"title":"update-renderer","filename":"update-renderer.gif","filesize":9942516,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/update-renderer.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/animating-your-data-with-the-arcgis-api-for-javascript\/update-renderer-2","alt":"","author":"10062","description":"","caption":"Visualizing temperature anomalies over time.","name":"update-renderer-2","status":"inherit","uploaded_to":1319622,"date":"2021-08-11 19:34:31","modified":"2021-08-11 19:40:15","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":992,"height":576,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/update-renderer-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/update-renderer.gif","medium-width":450,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/update-renderer.gif","medium_large-width":768,"medium_large-height":446,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/update-renderer.gif","large-width":992,"large-height":576,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/update-renderer.gif","1536x1536-width":992,"1536x1536-height":576,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/update-renderer.gif","2048x2048-width":992,"2048x2048-height":576,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/update-renderer-801x465.gif","card_image-width":801,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/update-renderer.gif","wide_image-width":992,"wide_image-height":576}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-update-data\/live\/"},{"acf_fc_layout":"content","content":" The JSAPI also provides support for more advanced animations through custom WebGL layers that can be extended from existing layer types. To get started and learn more about animations with custom WebGL layer views, check out this sample<\/a>.<\/p>\n For more of a deep dive into animating data with a custom layer view, my colleague Dario D’Amico wrote a detailed blog post about visualizing and animating flow with a custom WebGL layer<\/a>. The result is pretty stunning. Check it out!<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1333222,"id":1333222,"title":"animate-flow","filename":"animate-flow.gif","filesize":9544161,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/animating-your-data-with-the-arcgis-api-for-javascript\/animate-flow","alt":"","author":"10062","description":"","caption":"Visualize and animate wind flow in the United States.","name":"animate-flow","status":"inherit","uploaded_to":1319622,"date":"2021-08-23 17:16:54","modified":"2021-08-23 17:17:43","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":762,"height":446,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow.gif","medium-width":446,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow.gif","medium_large-width":762,"medium_large-height":446,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow.gif","large-width":762,"large-height":446,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow.gif","1536x1536-width":762,"1536x1536-height":446,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow.gif","2048x2048-width":762,"2048x2048-height":446,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow.gif","card_image-width":762,"card_image-height":446,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow.gif","wide_image-width":762,"wide_image-height":446}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"sidebar","content":" This blog post was based on a presentation from the 2021 Esri Developer Summit, ArcGIS API for JavaScript: Data-Driven Animations<\/a>, by my colleagues Kristian Ekenes<\/a> and Undral Batsukh<\/a>.<\/p>\n","image_reference":false,"layout":"standard","image_reference_figure":"","snippet":"","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false}],"authors":[{"ID":10062,"user_firstname":"Anne","user_lastname":"Fitz","nickname":"Anne Fitz","user_nicename":"afitz","display_name":"Anne Fitz","user_email":"afitz@esri.com","user_url":"","user_registered":"2019-10-15 00:07:57","user_description":"Anne Fitz is a Senior Product Engineer at Esri, working on the ArcGIS Maps SDK for JavaScript and ArcGIS Arcade. Her expertise primarily focuses on dynamic vector symbology (CIM symbols), data visualization, animation, ArcGIS Arcade integration, and widgets. Anne\u2019s primary goal is to help developers succeed in building geospatial applications, providing them with the tools and knowledge they need to bring their ideas to life. She has been with Esri for over five years.","user_avatar":"\n
\n
Animating locations<\/h1>\n
Data filter animation<\/h2>\n
layerView.filter<\/a><\/code>. This requires having all the data that you want to animate through available in your MapView. Only the features that fall within the given filter will be shown.<\/p>\nTimeSlider widget – filter temporal data<\/h3>\n
timeInfo<\/code> defined.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1319912,"id":1319912,"title":"smoke-forecast","filename":"smoke-forecast.gif","filesize":9824475,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/smoke-forecast.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/animating-your-data-with-the-arcgis-api-for-javascript\/smoke-forecast-2","alt":"","author":"10062","description":"","caption":"Smoke movement animated over the past two days.","name":"smoke-forecast-2","status":"inherit","uploaded_to":1319622,"date":"2021-08-09 17:12:37","modified":"2021-08-09 17:13:52","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":992,"height":534,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/smoke-forecast-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/smoke-forecast.gif","medium-width":464,"medium-height":250,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/smoke-forecast.gif","medium_large-width":768,"medium_large-height":413,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/smoke-forecast.gif","large-width":992,"large-height":534,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/smoke-forecast.gif","1536x1536-width":992,"1536x1536-height":534,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/smoke-forecast.gif","2048x2048-width":992,"2048x2048-height":534,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/smoke-forecast-826x445.gif","card_image-width":826,"card_image-height":445,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/smoke-forecast.gif","wide_image-width":992,"wide_image-height":534}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ubatsukh.github.io\/arcgis-js-api-demos\/devsummit2021\/effect-wildfires\/"},{"acf_fc_layout":"content","content":"view<\/code> property, as shown in the code below, and the TimeSlider will be set to the timeInfo<\/code> of your layer. Once you hit “Play” on the TimeSlider widget, only the features that fall within the TimeSlider time extent will be shown.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1320302,"id":1320302,"title":"timeslider-view","filename":"timeslider-view.png","filesize":65785,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-view.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/animating-your-data-with-the-arcgis-api-for-javascript\/timeslider-view","alt":"","author":"10062","description":"","caption":"","name":"timeslider-view","status":"inherit","uploaded_to":1319622,"date":"2021-08-10 20:00:20","modified":"2021-08-10 20:00:20","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":914,"height":689,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-view-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-view.png","medium-width":346,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-view.png","medium_large-width":768,"medium_large-height":579,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-view.png","large-width":914,"large-height":689,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-view.png","1536x1536-width":914,"1536x1536-height":689,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-view.png","2048x2048-width":914,"2048x2048-height":689,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-view-617x465.png","card_image-width":617,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-view.png","wide_image-width":914,"wide_image-height":689}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/github.com\/ubatsukh\/arcgis-js-api-demos\/blob\/master\/devsummit2021\/effect-wildfires\/app\/main.ts#L133-L145"},{"acf_fc_layout":"content","content":"timeInfo<\/code> is not set in the service or on the layer, then you can animate the data using any date field in your service. Let’s take a look at how to do this with an example showing the spread of the Kincade Fire in 2019.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1322372,"id":1322372,"title":"kincade","filename":"kincade.gif","filesize":7032514,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/kincade.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/animating-your-data-with-the-arcgis-api-for-javascript\/kincade","alt":"","author":"10062","description":"","caption":"Animating the Kincade Fire to show how it spread over time.","name":"kincade","status":"inherit","uploaded_to":1319622,"date":"2021-08-11 23:20:59","modified":"2021-08-11 23:21:29","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":750,"height":470,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/kincade-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/kincade.gif","medium-width":416,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/kincade.gif","medium_large-width":750,"medium_large-height":470,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/kincade.gif","large-width":750,"large-height":470,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/kincade.gif","1536x1536-width":750,"1536x1536-height":470,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/kincade.gif","2048x2048-width":750,"2048x2048-height":470,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/kincade-742x465.gif","card_image-width":742,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/kincade.gif","wide_image-width":750,"wide_image-height":470}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ubatsukh.github.io\/arcgis-js-api-demos\/devsummit2021\/fire-perimeter\/"},{"acf_fc_layout":"content","content":"timeInfo<\/code> defined on the service, we instead use the perimeterdatetime<\/code> field on the service, and manually set the TimeSlider stops<\/code> and fullTimeExtent<\/code>. Then, we watch the timeSlider.timeExtent<\/code> property, and filter the data in the layer by that date using layerView.filter<\/code>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1320402,"id":1320402,"title":"timeslider-manual","filename":"timeslider-manual.png","filesize":58930,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-manual.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/animating-your-data-with-the-arcgis-api-for-javascript\/timeslider-manual","alt":"","author":"10062","description":"","caption":"","name":"timeslider-manual","status":"inherit","uploaded_to":1319622,"date":"2021-08-10 20:27:56","modified":"2021-08-10 20:27:56","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":754,"height":745,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-manual-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-manual.png","medium-width":264,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-manual.png","medium_large-width":754,"medium_large-height":745,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-manual.png","large-width":754,"large-height":745,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-manual.png","1536x1536-width":754,"1536x1536-height":745,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-manual.png","2048x2048-width":754,"2048x2048-height":745,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-manual-471x465.png","card_image-width":471,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/timeslider-manual.png","wide_image-width":754,"wide_image-height":745}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/github.com\/ubatsukh\/arcgis-js-api-demos\/blob\/master\/devsummit2021\/fire-perimeter\/app\/main.ts#L67-L97"},{"acf_fc_layout":"content","content":"Filter data by attributes<\/h3>\n
layerView.effect<\/a><\/code>. Effect allows you to emphasize or deemphasize features that satisfy a given filter. Unlike layerView.filter<\/code>, with effect<\/code> all available features are shown in the map, but an effect is applied to features that satisfy the filter.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1320462,"id":1320462,"title":"median-income","filename":"median-income.gif","filesize":9915736,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/median-income.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/animating-your-data-with-the-arcgis-api-for-javascript\/median-income","alt":"","author":"10062","description":"","caption":"Los Angeles block groups animated by median income.","name":"median-income","status":"inherit","uploaded_to":1319622,"date":"2021-08-10 20:45:47","modified":"2021-08-10 20:46:16","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":740,"height":634,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/median-income-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/median-income.gif","medium-width":305,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/median-income.gif","medium_large-width":740,"medium_large-height":634,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/median-income.gif","large-width":740,"large-height":634,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/median-income.gif","1536x1536-width":740,"1536x1536-height":634,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/median-income.gif","2048x2048-width":740,"2048x2048-height":634,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/median-income-543x465.gif","card_image-width":543,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/median-income.gif","wide_image-width":740,"wide_image-height":634}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/annelfitz.github.io\/DevSummit-presentations\/DS-2021\/plenary\/age-income-in-LA\/"},{"acf_fc_layout":"sidebar","content":"includedEffect<\/code> to bloom<\/code> and saturate<\/code>. To deemphasize the features that don’t satisfy the filter, we blur<\/code> them slightly and reduce their brightness<\/code>.<\/p>\n","image_reference":false,"layout":"code_snippet","image_reference_figure":"","snippet":"function createEffect(min, max) {\r\n featureLayerView.effect = {\r\n filter: {\r\n where: \"MEDHINC_CY > \" + min + \" AND MEDHINC_CY < " + max\r\n },\r\n includedEffect: "bloom(150%, 1px, 0.2) saturate(200%)",\r\n excludedEffect: "blur(1px) brightness(65%)"\r\n }\r\n}","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":"Animating attributes<\/h1>\n
\n<\/a><\/p>\nVisual variable animation<\/h2>\n
animate<\/code> function (shown below) is called every time the slider updates, which updates the year value and passes that value to the setYear<\/code> function. setYear<\/code> updates some UI elements, but more importantly, updates the renderer based on the year value.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1320612,"id":1320612,"title":"Screen Shot 2021-08-10 at 2.06.36 PM","filename":"Screen-Shot-2021-08-10-at-2.06.36-PM-scaled.png","filesize":1823059,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-10-at-2.06.36-PM-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/animating-your-data-with-the-arcgis-api-for-javascript\/screen-shot-2021-08-10-at-2-06-36-pm","alt":"","author":"10062","description":"","caption":"","name":"screen-shot-2021-08-10-at-2-06-36-pm","status":"inherit","uploaded_to":1319622,"date":"2021-08-10 21:35:02","modified":"2021-08-10 21:35:02","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":1315,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-10-at-2.06.36-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-10-at-2.06.36-PM-scaled.png","medium-width":464,"medium-height":238,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-10-at-2.06.36-PM-scaled.png","medium_large-width":768,"medium_large-height":395,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-10-at-2.06.36-PM-scaled.png","large-width":1920,"large-height":986,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-10-at-2.06.36-PM-1536x789.png","1536x1536-width":1536,"1536x1536-height":789,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-10-at-2.06.36-PM-2048x1052.png","2048x2048-width":2048,"2048x2048-height":1052,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-10-at-2.06.36-PM-826x424.png","card_image-width":826,"card_image-height":424,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-10-at-2.06.36-PM-1920x986.png","wide_image-width":1920,"wide_image-height":986}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-10-at-2.06.36-PM-scaled.png"},{"acf_fc_layout":"content","content":"createRenderer<\/code> function updates the values of the stops in the visual variable, so buildings constructed during the current year on the slider are always shown in bright blue, buildings constructed 10 years prior will be shown in magenta, and 50 years prior will be shown in a dark purple. It’s important to note here that only the values of the stops are changing, the colors of each stop stay constant, as does the data field.<\/p>\nData variable animation<\/h2>\n"},{"acf_fc_layout":"sidebar","content":"
Data variable animation by time<\/h3>\n
Looking for more advanced animations?<\/h1>\n
"}],"related_articles":[{"ID":1322972,"post_author":"7921","post_date":"2021-08-31 17:30:08","post_date_gmt":"2021-09-01 00:30:08","post_content":"","post_title":"Visualize and animate flow in MapView with a custom WebGL layer","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"visualize-and-animate-flow-in-mapview-with-a-custom-webgl-layer","to_ping":"","pinged":"","post_modified":"2024-04-12 03:59:02","post_modified_gmt":"2024-04-12 10:59:02","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1322972","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":970071,"post_author":"6561","post_date":"2020-08-13 08:30:22","post_date_gmt":"2020-08-13 15:30:22","post_content":"","post_title":"Animate and explore COVID-19 data through time","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"animate-and-explore-covid-19-data-through-time","to_ping":"","pinged":"","post_modified":"2020-08-19 08:37:55","post_modified_gmt":"2020-08-19 15:37:55","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=970071","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"2","filter":"raw"},{"ID":1196802,"post_author":"10062","post_date":"2021-05-18 10:35:58","post_date_gmt":"2021-05-18 17:35:58","post_content":"","post_title":"Building dynamic web applications with the ArcGIS API for JavaScript","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"building-dynamic-web-applications-with-the-arcgis-api-for-javascript","to_ping":"","pinged":"","post_modified":"2024-04-12 04:01:28","post_modified_gmt":"2024-04-12 11:01:28","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1196802","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":830171,"post_author":"6561","post_date":"2020-04-27 09:00:42","post_date_gmt":"2020-04-27 16:00:42","post_content":"","post_title":"Mapping large datasets on the web","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"mapping-large-datasets-on-the-web","to_ping":"","pinged":"","post_modified":"2020-04-23 16:18:49","post_modified_gmt":"2020-04-23 23:18:49","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=830171","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"3","filter":"raw"},{"ID":1225962,"post_author":"6561","post_date":"2021-05-12 09:00:34","post_date_gmt":"2021-05-12 16:00:34","post_content":"","post_title":"Six ways to visualize change over time in web maps","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"six-ways-to-visualize-change-over-time-in-web-maps","to_ping":"","pinged":"","post_modified":"2024-04-12 04:01:39","post_modified_gmt":"2024-04-12 11:01:39","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1225962","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"2","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-12-at-9.00.39-AM.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/Screen-Shot-2021-08-11-at-4.07.46-PM.png"},"yoast_head":"\n