{"id":76511,"date":"2017-04-13T05:00:37","date_gmt":"2017-04-13T05:00:37","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/visualizing-data-in-web-apps-leveraging-the-platform\/"},"modified":"2018-03-26T21:12:42","modified_gmt":"2018-03-26T21:12:42","slug":"visualizing-data-in-web-apps-leveraging-the-platform","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform","title":{"rendered":"Visualizing data in web apps: leveraging the platform"},"author":6561,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[25891,27491,33311,31291,24581,26521,32751],"industry":[],"product":[36831,36601],"class_list":["post-76511","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-arcgis","tag-jsapi4","tag-platform","tag-renderers","tag-smart-mapping","tag-visualization","tag-web-apps","product-js-api-arcgis","product-developers"],"acf":{"short_description":"The ArcGIS API for JavaScript contains powerful visualization capabilities that bring your data to life on the web. Some of these include...","flexible_content":[{"acf_fc_layout":"content","content":"

The ArcGIS API for JavaScript<\/a> contains powerful visualization capabilities that bring your data to life on the web. Some of these include using unclassified or classified color, size, opacity, and any combination of them to visualize numbers; unique symbols for categorical data; heatmaps, dot density, and others for showing locations and spatial patterns. What makes the API powerful is the relatively simple and condensed code it takes to create thought-provoking visualizations.<\/p>\n

As stated in the Visualization Overview<\/a>, you can create most visualizations in one of three ways:<\/p>\n

1. Use the “change style” option in ArcGIS Online<\/a>
\n2. Create a custom styling or data-exploration app using the Smart Mapping API<\/a>
\n3. Manually defining renderers using JavaScript<\/a><\/p>\n

This post will focus on how to consume visualizations created in ArcGIS Online<\/a> within custom web apps.<\/p>\n

What makes the ArcGIS API for JavaScript unique compared to other APIs is its integration with the ArcGIS platform, including ArcGIS Online<\/a>, Portal for ArcGIS, and ArcGIS Pro. This integration allows you to load a layer or web map into any of those products, configure its properties (including data-driven visualizations), save those configurations, and publish them to a portal that can be accessed by custom web apps.<\/p>\n

That means you can create impressive visualizations without having to write a line of code! Simply use the ArcGIS Online map viewer or the visualization tab to explore your data and create a visualization. The following resources provide tips for how to use the tools in ArcGIS Online to create good visualizations in a few easy steps:<\/p>\n

1. How to Smart Map in 3 easy steps<\/a>
\n2. How to Smart Map: Color (story map)<\/a>
\n3. How to make smart color choices in your maps<\/a>
\n4. Use Arcade expressions to map your ideas<\/a><\/p>\n

For more details on how to visualize data in ArcGIS Online, check out the documentation for the change style workflow<\/a>.<\/p>\n

Create and load a web map<\/h2>\n

Let’s briefly review the basic workflow for creating a visualization in ArcGIS Online and loading it into a custom web app. Open this dataset<\/a> in the ArcGIS Online visualization tab. Click the “change style” icon and explore the data by creating visualizations based on color, size, or both.<\/p>\n

\"\"<\/a><\/p>\n

After exploring the data, I created this web map<\/a> showing the percent of average household income used for car payments compared with the percentage of household income spent on car payments paid to interest. Check it out here<\/a>.<\/p>\n

\"\"<\/a><\/p>\n

Once you create a visualization you like, you can either save it to the service layer…<\/p>\n

\"\"<\/a><\/p>\n

…or save the web map and use the renderer saved to the layer item within the web map.<\/p>\n

\"\"<\/a><\/p>\n

Once the visualization is saved, you simply need to load the layer or web map into your app. It takes just a few lines of code in the 4.x ArcGIS API for JavaScript. If loading a web map that may contain one or more layers, simply reference the item ID of the web map in the portalItem<\/a> property of a new WebMap<\/a> instance. Then reference the WebMap instance in the map property of the MapView…<\/p>\n

\/\/ load the web map<\/span> var<\/span> webmap = new<\/span> WebMap({ portalItem: { \/\/ autocasts as new PortalItem()<\/span> id: \"7e49cad78c63409aa9a483fc83ff927e\"<\/span> } }); \/\/ Set the WebMap instance to the map property in a MapView.<\/span> var<\/span> view = new<\/span> MapView({ map: webmap, container: \"viewDiv\"<\/span> }); <\/code><\/pre>\n
\"\"<\/a><\/p>\n
Load a layer<\/h2>\n
If you only need to add a single layer to an already existing map instance, simply save the visualization to the layer in ArcGIS Online and load the layer with its portal item ID or its service URL. This is done with the fromPortalItem()<\/a> method on the Layer<\/a> base class.<\/p>\n
Layer.fromPortalItem({\n  portalItem: { \/\/ This is a layer item ID, not a web map ID<\/span>\n    id: \"8444e275037549c1acab02d2626daaee\"<\/span>\n  }\n}).then(function<\/span>(layer<\/span>)<\/span>{\n  map.add(layer);\n});<\/pre>\n
View the full sample here<\/a>.<\/p>\n
This method will create a layer instance of the appropriate type (e.g. FeatureLayer<\/a>, MapImageLayer<\/a>, ImageryLayer<\/a>, etc.), which is ready once the promise resolves. If you already know the desired layer type, you can alternately use the portalItem<\/a> property to create an instance of the layer using the portal item ID.<\/p>\n
var<\/span> layer = new<\/span> FeatureLayer({\n  portalItem: { \/\/ autocast as esri\/portal\/PortalItem<\/span>\n    id: \"8444e275037549c1acab02d2626daaee\"<\/span>\n  }\n});\n\nmap.add(layer);<\/pre>\n
How it works<\/h2>\n
When you configure a visualization and save it to a web map or web layer, the visualization is stored as JSON according to the Web map specification<\/a>. The portal item ID is unique to the JSON representing the web map or layer item you configured in ArcGIS Online. The JSON is saved to the portal and loaded in web apps when the ID is used to query for it.<\/p>\n
To see this in action, open the sample application referenced above<\/a> and open the browser’s developer tools. Open the Network traffic tab and search for “data”. You may have to refresh the page to see the appropriate log.<\/p>\n
\"\"<\/a><\/p>\n
Preview the first item and drill into the properties of the JSON. This is the web map resource the app loads from ArcGIS Online. You can see the JSON saved for the configured visualization, any popup configurations, and other information about the webmap and its layers.<\/p>\n
Conclusion<\/h2>\n
The JavaScript API’s integration with the ArcGIS platform can be a major time-saver when it comes to visualizing and presenting data-driven visualizations. Take advantage of it. Embrace it. Simplify your code. And leverage the power of the ArcGIS platform.<\/p>\n"}],"authors":[{"ID":6561,"user_firstname":"Kristian","user_lastname":"Ekenes","nickname":"Kristian Ekenes","user_nicename":"kekenes","display_name":"Kristian Ekenes","user_email":"KEkenes@esri.com","user_url":"https:\/\/github.com\/ekenes","user_registered":"2018-03-02 00:18:32","user_description":"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.","user_avatar":""}]},"yoast_head":"\nVisualizing data in web apps: leveraging the platform<\/title>\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\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visualizing data in web apps: leveraging the platform\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2018-03-26T21:12:42+00:00\" \/>\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\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Visualizing data in web apps: leveraging the platform\",\"datePublished\":\"2017-04-13T05:00:37+00:00\",\"dateModified\":\"2018-03-26T21:12:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform\"},\"wordCount\":8,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"ArcGIS\",\"jsapi4\",\"Platform\",\"renderers\",\"smart mapping\",\"Visualization\",\"Web Apps\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform\",\"name\":\"Visualizing data in web apps: leveraging the platform\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2017-04-13T05:00:37+00:00\",\"dateModified\":\"2018-03-26T21:12:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visualizing data in web apps: leveraging the platform\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\",\"name\":\"Kristian Ekenes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png\",\"caption\":\"Kristian Ekenes\"},\"description\":\"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.\",\"sameAs\":[\"https:\/\/github.com\/ekenes\",\"https:\/\/www.linkedin.com\/in\/kristian-ekenes\/\",\"https:\/\/x.com\/kekenes\"],\"gender\":\"male\",\"jobTitle\":\"Principal Product Engineer\",\"worksFor\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Visualizing data in web apps: leveraging the platform","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\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform","og_locale":"en_US","og_type":"article","og_title":"Visualizing data in web apps: leveraging the platform","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2018-03-26T21:12:42+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Visualizing data in web apps: leveraging the platform","datePublished":"2017-04-13T05:00:37+00:00","dateModified":"2018-03-26T21:12:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform"},"wordCount":8,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["ArcGIS","jsapi4","Platform","renderers","smart mapping","Visualization","Web Apps"],"articleSection":["Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform","name":"Visualizing data in web apps: leveraging the platform","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2017-04-13T05:00:37+00:00","dateModified":"2018-03-26T21:12:42+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/visualizing-data-in-web-apps-leveraging-the-platform#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Visualizing data in web apps: leveraging the platform"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b","name":"Kristian Ekenes","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png","caption":"Kristian Ekenes"},"description":"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.","sameAs":["https:\/\/github.com\/ekenes","https:\/\/www.linkedin.com\/in\/kristian-ekenes\/","https:\/\/x.com\/kekenes"],"gender":"male","jobTitle":"Principal Product Engineer","worksFor":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes"}]}},"text_date":"April 13, 2017","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/08\/Newsroom-Keyart-Wide-1920-x-1080.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":25891,"name":"ArcGIS","slug":"arcgis","term_group":0,"term_taxonomy_id":25891,"taxonomy":"post_tag","description":"","parent":0,"count":209,"filter":"raw"},{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":33311,"name":"Platform","slug":"platform","term_group":0,"term_taxonomy_id":33311,"taxonomy":"post_tag","description":"","parent":0,"count":2,"filter":"raw"},{"term_id":31291,"name":"renderers","slug":"renderers","term_group":0,"term_taxonomy_id":31291,"taxonomy":"post_tag","description":"","parent":0,"count":9,"filter":"raw"},{"term_id":24581,"name":"smart mapping","slug":"smart-mapping","term_group":0,"term_taxonomy_id":24581,"taxonomy":"post_tag","description":"","parent":0,"count":81,"filter":"raw"},{"term_id":26521,"name":"Visualization","slug":"visualization","term_group":0,"term_taxonomy_id":26521,"taxonomy":"post_tag","description":"","parent":0,"count":45,"filter":"raw"},{"term_id":32751,"name":"Web Apps","slug":"web-apps","term_group":0,"term_taxonomy_id":32751,"taxonomy":"post_tag","description":"","parent":0,"count":21,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2701,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":363,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":765,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/76511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/6561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=76511"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/76511\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=76511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=76511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=76511"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=76511"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=76511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
I also added a Legend to the app to make sure the story is clear. Here’s the final app<\/a>. Notice how little code is required<\/a> for depicting a somewhat complex data visualization with multiple visual variables, one of which uses an Arcade expression<\/a> to calculate values on the fly.<\/p>\n