{"id":199072,"date":"2018-06-05T08:00:08","date_gmt":"2018-06-05T08:00:08","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=199072"},"modified":"2024-11-11T12:37:33","modified_gmt":"2024-11-11T20:37:33","slug":"generate-arcade-expressions-for-data-exploration-web-apps","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps","title":{"rendered":"Generate Arcade expressions for data exploration web apps"},"author":6561,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[777102,22941],"tags":[32551,32521,27491,24581],"industry":[],"product":[36831,36601],"class_list":["post-199072","blog","type-blog","status-publish","format-standard","hentry","category-arcade","category-mapping","tag-arcade","tag-arcade-expressions","tag-jsapi4","tag-smart-mapping","product-js-api-arcgis","product-developers"],"acf":{"short_description":"You don't need an expression builder to take advantage of Arcade as a developer. You can generate expressions in behalf of your users.","flexible_content":[{"acf_fc_layout":"content","content":"<p>About a year and a half ago <a href=\"https:\/\/doc.arcgis.com\/en\/arcgis-online\/reference\/what-is-agol.htm\">ArcGIS Online<\/a> introduced the ability to create data-driven visualizations using <a href=\"https:\/\/developers.arcgis.com\/arcade\/guide\/\">Arcade expressions<\/a>. In this post, I\u2019ll demonstrate how you as a developer can use Arcade to generate renderers with <a href=\"https:\/\/www.esri.com\/software\/arcgis\/smart-mapping\">Smart Mapping<\/a> for data exploration web apps, while keeping the UI simple for your users.<\/p>\n<p>We\u2019ll discuss the fundamentals required for developing a web app with the <a href=\"https:\/\/developers.arcgis.com\/javascript\/\">ArcGIS API for JavaScript<\/a> using Arcade to generate the renderer in the app below.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":199722,"id":199722,"title":"mexico-arcade-app","filename":"mexico-arcade-app.png","filesize":170308,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps\/mexico-arcade-app","alt":"","author":"6561","description":"","caption":"Click the image to launch the app exploring educational attainment in Mexico.","name":"mexico-arcade-app","status":"inherit","uploaded_to":199072,"date":"2018-05-30 21:23:06","modified":"2018-05-30 21:23:36","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":898,"height":595,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","thumbnail-width":213,"thumbnail-height":141,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","medium-width":394,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","medium_large-width":768,"medium_large-height":509,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","large-width":898,"large-height":595,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","1536x1536-width":898,"1536x1536-height":595,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","2048x2048-width":898,"2048x2048-height":595,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","card_image-width":702,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","wide_image-width":898,"wide_image-height":595}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/esri-ts-samples\/visualization\/smart-mapping\/arcade\/"},{"acf_fc_layout":"content","content":"<p>Arcade is an expression language built for evaluating data values client side for labeling, popup content, and data visualization. Since Arcade\u2019s introduction to the ArcGIS platform, many people have used it in innovative ways to visualize their data. If you\u2019re unfamiliar with Arcade, check out a few of the resources below to see examples of how Arcade can be used in your workflows.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/apps\/uncategorized\/introducing-arcade\/\">Introducing Arcade<\/a><\/li>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/use-arcade-expressions-to-map-your-ideas\/\">Use Arcade expressions to map your ideas<\/a><\/li>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/creating-a-predominance-visualization-with-arcade\/\">Creating a predominance visualization with Arcade<\/a><\/li>\n<\/ul>\n<p>In the case of styling layers with Arcade, ArcGIS Online will pass the Arcade expression to the relevant Smart Mapping generator method selected by the user (e.g. color, size, color &#038; size, predominance, etc.). The selected method will treat the expression as an attribute field and generate a style (or renderer) for the layer based on statistics queried from data returned from the expression.<\/p>\n<p>For example, you can write <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/creating-a-predominance-visualization-with-arcade\/\">an expression that returns the winner among a set of competing numeric attributes<\/a>. You don&#8217;t need to add new fields to your service to indicate the winner for each geography. The expression will calculate it client side and return that value for you. This is particularly powerful for election mapping.<\/p>\n<p>We ported support for generating renderers with Arcade to the 4.x series of the ArcGIS API for JavaScript at the <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/arcgis-api-for-javascript-versions-4-7-and-3-24-released\/\">4.7 release in April 2018<\/a>. That means you can now develop data exploration apps with 4.7 that use values from Arcade expressions to generate renderers.<\/p>\n<h2>Some background<\/h2>\n<p>See the flow diagram below (starting from the left), which provides a brief overview of how you can use the Smart Mapping APIs to generate renderers for data exploration apps. The portion in blue indicates the process you should follow including required input parameters, and what to do with the output renderer. The beige steps indicate the internal process the creator method follows for creating the desired renderer.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":199132,"id":199132,"title":"smart mapping process","filename":"smart-mapping-process.png","filesize":99409,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-process.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps\/smart-mapping-process","alt":"","author":"6561","description":"","caption":"Smart mapping functions require a layer, basemap, and data attribute to generate a visualization with optimal defaults for the given attribute.","name":"smart-mapping-process","status":"inherit","uploaded_to":199072,"date":"2018-05-30 16:24:50","modified":"2018-05-30 16:26:23","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":969,"height":542,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-process.png","thumbnail-width":213,"thumbnail-height":119,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-process.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-process.png","medium_large-width":768,"medium_large-height":430,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-process.png","large-width":969,"large-height":542,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-process.png","1536x1536-width":969,"1536x1536-height":542,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-process.png","2048x2048-width":969,"2048x2048-height":542,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-process.png","card_image-width":826,"card_image-height":462,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-process.png","wide_image-width":969,"wide_image-height":542}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Check out the following resources if you are new to Smart Mapping:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-smart-mapping-in-custom-web-apps\/\">Using Smart Mapping in custom web apps<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/visualization-overview\/index.html#smart-mapping-apis\">JS API Guide: Smart Mapping APIs<\/a><\/li>\n<\/ul>\n<p>In the most standard Smart Mapping scenario, all you need is a layer, a basemap, and a field name (and optionally a normalization field). This will create a nice renderer based on the statistics of the data and styled with colors that pair nicely with the basemap. The snippet below demonstrates this pattern using <a href=\"https:\/\/javascript.info\/async-await\">async\/await<\/a>.<\/p>\n<pre><code>\r\n<span\r\n style=\"color: #333; font-weight: bold;\">const<\/span> rendererParams = {\r\n  layer: layer,\r\n  field: <span\r\n style=\"color: #d14;\">\"EDUC01_CY\"<\/span>,  <span\r\n style=\"color: #998; font-style: italic;\">\/\/ Population 14+ without education<\/span>\r\n  normalizationField: <span\r\n style=\"color: #d14;\">\"EDUCA_BASE\"<\/span>,  <span\r\n style=\"color: #998; font-style: italic;\">\/\/ Total Population 14+<\/span>\r\n  basemap: view.map.basemap\r\n};\r\n\r\n<span\r\n style=\"color: #333; font-weight: bold;\">const<\/span> rendererResponse = <span\r\n style=\"color: #333; font-weight: bold;\">await<\/span> colorRendererCreator.createContinuousRenderer(rendererParams);\r\n\r\n<span\r\n style=\"color: #998; font-style: italic;\">\/\/ apply renderer to layer<\/span>\r\nlayer.renderer = rendererResponse.renderer;\r\n<\/code><\/pre>\n<p>While the API is clean, take note of the awkward legend text. By default the field aliases reflect the mathematical operation of normalizing. <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":199492,"id":199492,"title":"field-basic","filename":"field-basic.png","filesize":138204,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/field-basic.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps\/field-basic","alt":"","author":"6561","description":"","caption":"Normalizing field values will display legend values as a ratio, which may be awkward for some visualizations.","name":"field-basic","status":"inherit","uploaded_to":199072,"date":"2018-05-30 18:52:45","modified":"2018-05-30 18:57:31","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":856,"height":599,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/field-basic.png","thumbnail-width":213,"thumbnail-height":149,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/field-basic.png","medium-width":373,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/field-basic.png","medium_large-width":768,"medium_large-height":537,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/field-basic.png","large-width":856,"large-height":599,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/field-basic.png","1536x1536-width":856,"1536x1536-height":599,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/field-basic.png","2048x2048-width":856,"2048x2048-height":599,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/field-basic.png","card_image-width":665,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/field-basic.png","wide_image-width":856,"wide_image-height":599}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/esri-ts-samples\/visualization\/smart-mapping\/arcade\/basic-field.html"},{"acf_fc_layout":"content","content":"<p>This is OK for the sake of defaults. But you can make the legend text more readable by setting the <code>legendOptions<\/code> parameter to something more understandable.<\/p>\n<pre><code>\r\n<span\r\n style=\"color: #333; font-weight: bold;\">const<\/span> rendererParams = {\r\n  layer: layer,\r\n  field: <span\r\n style=\"color: #d14;\">\"EDUC01_CY\"<\/span>,\r\n  normalizationField: <span\r\n style=\"color: #d14;\">\"EDUCA_BASE\"<\/span>,\r\n  legendOptions: {\r\n    title: <span\r\n style=\"color: #d14;\">\"% population without formal education\"<\/span>\r\n  },\r\n  basemap: view.map.basemap\r\n};\r\n<\/code><\/pre>\n<p>That title is better, but the numbers in the legend will still appear as ratios. What\u2019s nice about Arcade is that it gives you flexibility to convert those numbers to percentages, round them, or do anything else client-side without the need to calculate new fields on the service.<\/p>\n<h2>Smart Mapping and Arcade<\/h2>\n<p>Instead of referencing a field and a normalization field in the renderer creator function, you can pass an Arcade expression as a string to the <code>valueExpression<\/code> parameter. This can be a simple one-line expression or a <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/uncategorized\/using-arcade-expressions-in-web-apps\/\">more complex multi-line expression<\/a> from a separate script tag or text file.<\/p>\n<p>The Arcade expression passed to the creator function in the following snippet returns the percentage of the population that doesn&#8217;t have any formal education.<\/p>\n<pre><code>\r\n<span\r\n style=\"color: #333; font-weight: bold;\">const<\/span> rendererParams = {\r\n  layer: layer,\r\n  valueExpression: <span\r\n style=\"color: #d14;\">\"Round( ( $feature.EDUC01_CY \/ $feature.EDUCA_BASE ) * 100 )\"<\/span>,\r\n  valueExpressionTitle: <span\r\n style=\"color: #d14;\">\"% population with no formal education\"<\/span>,\r\n  basemap: view.map.basemap,\r\n  view: view\r\n};\r\n\r\n<span\r\n style=\"color: #333; font-weight: bold;\">const<\/span> rendererResponse = <span\r\n style=\"color: #333; font-weight: bold;\">await<\/span> colorRendererCreator.createContinuousRenderer(rendererParams);\r\n<span\r\n style=\"color: #998; font-style: italic;\">\/\/ apply renderer to layer after the promise resolves<\/span>\r\nlayer.renderer = rendererResponse.renderer;\r\n<\/code><\/pre>\n<p>The rounded numbers make the legend look more clean and readable.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":199542,"id":199542,"title":"","filename":"basic-arcade.png","filesize":175368,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/basic-arcade.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps\/basic-arcade","alt":"","author":"6561","description":"","caption":"Arcade gives you more control over formatting data values, making the legend and popup easier to read.","name":"basic-arcade","status":"inherit","uploaded_to":199072,"date":"2018-05-30 19:11:17","modified":"2018-05-30 19:12:39","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":934,"height":655,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/basic-arcade.png","thumbnail-width":213,"thumbnail-height":149,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/basic-arcade.png","medium-width":372,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/basic-arcade.png","medium_large-width":768,"medium_large-height":539,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/basic-arcade.png","large-width":934,"large-height":655,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/basic-arcade.png","1536x1536-width":934,"1536x1536-height":655,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/basic-arcade.png","2048x2048-width":934,"2048x2048-height":655,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/basic-arcade.png","card_image-width":663,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/basic-arcade.png","wide_image-width":934,"wide_image-height":655}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/esri-ts-samples\/visualization\/smart-mapping\/arcade\/basic-arcade.html"},{"acf_fc_layout":"content","content":"<h2>Generating Arcade expressions<\/h2>\n<p>While the snippets above demonstrate how Arcade expressions can be used to generate renderers for your data, they don\u2019t necessarily illustrate a practical use case for using Arcade to create renderers in a useful data exploration application. Most of the time, you likely won\u2019t have a hard-coded expression either as a string or wrapped in standalone script tags. After all, changing the mapped variable (i.e. the expression) is what data exploration is all about! <\/p>\n<p>There are two approaches to changing the Arcade expression for data exploration purposes. You can:<\/p>\n<p>1. Give the user full control over the expression by developing your own Arcade editor similar to the one used by ArcGIS Online. This would be expensive and time intensive, not to mention it would add a certain degree of complexity to the user experience of your app. <\/p>\n<p>2. You can generate and re-generate Arcade expressions in behalf of the user without exposing them to Arcade at all. You can accomplish this by providing the user with traditional UI elements such as drop downs, text\/number inputs, and sliders to change key parameters used to determine the visualization. You could then use their inputs to generate an Arcade expression for them behind the scenes. This simplifies the data exploration experience for the user and significantly reduces the possibility of allowing the user to create an invalid expression.<\/p>\n<p>See the modified flowchart representing this workflow, where green shapes indicate the new steps in the Smart Mapping development pattern.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":199672,"id":199672,"title":"smart-mapping-with-arcade","filename":"smart-mapping-with-arcade.png","filesize":97560,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-with-arcade.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps\/smart-mapping-with-arcade","alt":"","author":"6561","description":"","caption":"You can use the same Smart Mapping workflow to generate renderers for data returned from an Arcade expression you generate in behalf of your users.","name":"smart-mapping-with-arcade","status":"inherit","uploaded_to":199072,"date":"2018-05-30 20:00:53","modified":"2018-05-30 20:01:49","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":1051,"height":528,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-with-arcade.png","thumbnail-width":213,"thumbnail-height":107,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-with-arcade.png","medium-width":464,"medium-height":233,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-with-arcade.png","medium_large-width":768,"medium_large-height":386,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-with-arcade.png","large-width":1051,"large-height":528,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-with-arcade.png","1536x1536-width":1051,"1536x1536-height":528,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-with-arcade.png","2048x2048-width":1051,"2048x2048-height":528,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-with-arcade.png","card_image-width":826,"card_image-height":415,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/smart-mapping-with-arcade.png","wide_image-width":1051,"wide_image-height":528}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>I wrote <a href=\"https:\/\/ekenes.github.io\/esri-ts-samples\/visualization\/smart-mapping\/arcade\/\">the following app<\/a> in <a href=\"https:\/\/www.typescriptlang.org\/\">TypeScript<\/a> to demonstrate how you can write your own Arcade generator function in a Smart Mapping workflow.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":199722,"id":199722,"title":"mexico-arcade-app","filename":"mexico-arcade-app.png","filesize":170308,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps\/mexico-arcade-app","alt":"","author":"6561","description":"","caption":"Click the image to launch the app exploring educational attainment in Mexico.","name":"mexico-arcade-app","status":"inherit","uploaded_to":199072,"date":"2018-05-30 21:23:06","modified":"2018-05-30 21:23:36","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":898,"height":595,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","thumbnail-width":213,"thumbnail-height":141,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","medium-width":394,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","medium_large-width":768,"medium_large-height":509,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","large-width":898,"large-height":595,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","1536x1536-width":898,"1536x1536-height":595,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","2048x2048-width":898,"2048x2048-height":595,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","card_image-width":702,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-arcade-app.png","wide_image-width":898,"wide_image-height":595}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/esri-ts-samples\/visualization\/smart-mapping\/arcade\/"},{"acf_fc_layout":"content","content":"<p>The concept of the app is simple \u2013 The user can select one of five educational attainment levels to show the geographic distribution of that variable in the map. Behind the scenes, the app generates Arcade expressions for the renderer and the popup, without exposing an expression builder to the user. <\/p>\n<p>The app visualizes various levels of <em>completed<\/em> educational attainment for each city. The dataset actually has a lot more than five educational attainment variables; it contains 15 more refined subcategories including fields such as \u201cnever attended school\u201d, \u201cattended some elementary school\u201d, and \u201cattended preschool\u201d. <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":200012,"id":200012,"title":"service-fields","filename":"service-fields.png","filesize":129434,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/service-fields.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps\/service-fields","alt":"","author":"6561","description":"","caption":"The feature service contains more education fields than I want to map. Arcade can create aggregate fields, allowing me to create a more meaningful visualization.","name":"service-fields","status":"inherit","uploaded_to":199072,"date":"2018-05-30 23:15:46","modified":"2018-05-30 23:17: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":723,"height":303,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/service-fields.png","thumbnail-width":213,"thumbnail-height":89,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/service-fields.png","medium-width":464,"medium-height":194,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/service-fields.png","medium_large-width":723,"medium_large-height":303,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/service-fields.png","large-width":723,"large-height":303,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/service-fields.png","1536x1536-width":723,"1536x1536-height":303,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/service-fields.png","2048x2048-width":723,"2048x2048-height":303,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/service-fields.png","card_image-width":723,"card_image-height":303,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/service-fields.png","wide_image-width":723,"wide_image-height":303}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/services.arcgis.com\/V6ZHFr6zdgNZuVG0\/arcgis\/rest\/services\/Mexico_demographics\/FeatureServer\/0\/"},{"acf_fc_layout":"content","content":"<p>To simplify my app, I  combined those three fields into a single attribute I called \u201cno formal education\u201d since people in all three categories never technically finished an education level. Likewise, on the other end of the spectrum, there are fields for those who completed bachelor\u2019s, master\u2019s, and doctorate degrees. Since those numbers are small on their own, I decided to aggregate them into one variable: \u201cuniversity degree completed\u201d. <\/p>\n<p>That&#8217;s where Arcade can help us. To visualize the percentage of people without formal education, we would need to write the following expression:<\/p>\n<pre><code>\r\n<span\r\n style=\"color: #333; font-weight: bold;\">var<\/span> noSchool = $feature.EDUC01_CY + $feature.EDUC02_CY + $feature.EDUC03_CY;\r\n<span\r\n style=\"color: #333; font-weight: bold;\">var<\/span> total = $feature.EDUCA_BASE;\r\nRound( ( noSchool \/ total ) * <span\r\n style=\"color: #008080;\">100<\/span> );\r\n<\/code><\/pre>\n<p>Rather than write out separate expressions for each category, or ask the user to do it themselves, I wrote a function that generates the expression required to visualize the percentage of the population that attained each education level. The expression appends the <code>$feature<\/code> keyword to field names and aggregates fields to a single value when multiple fields are provided.<\/p>\n<p>The benefit of this approach is that it scales, allowing you to generate more expressions as needed as long as the same expression template is required.<\/p>\n<pre><code>\r\n<span\r\n><span\r\n style=\"color: #333; font-weight: bold;\">function<\/span> <span\r\n style=\"color: #900; font-weight: bold;\">generateArcade<\/span>(<span\r\n>fields: string[], normalizationField?: string<\/span>): <span\r\n style=\"color: #900; font-weight: bold;\">string<\/span> <\/span>{\r\n  <span\r\n style=\"color: #333; font-weight: bold;\">let<\/span> value: string;\r\n  <span\r\n style=\"color: #333; font-weight: bold;\">if<\/span> (fields.length === <span\r\n style=\"color: #008080;\">1<\/span>) {\r\n    value = <span\r\n style=\"color: #d14;\">`$feature.<span\r\n style=\"color: #333; font-weight: normal;\">${fields[0]}<\/span>`<\/span>;\r\n  } <span\r\n style=\"color: #333; font-weight: bold;\">else<\/span> {\r\n    value = fields.reduce( (a: string, c: string, i: number) =&gt; {\r\n      <span\r\n style=\"color: #333; font-weight: bold;\">return<\/span> i === <span\r\n style=\"color: #008080;\">1<\/span> ? <span\r\n style=\"color: #d14;\">`$feature.<span\r\n style=\"color: #333; font-weight: normal;\">${a}<\/span> + $feature.<span\r\n style=\"color: #333; font-weight: normal;\">${c}<\/span>`<\/span> : <span\r\n style=\"color: #d14;\">`<span\r\n style=\"color: #333; font-weight: normal;\">${a}<\/span> + $feature.<span\r\n style=\"color: #333; font-weight: normal;\">${c}<\/span>`<\/span>\r\n    });\r\n  }\r\n  <span\r\n style=\"color: #333; font-weight: bold;\">const<\/span> percentValue = normalizationField ? <span\r\n style=\"color: #d14;\">`( ( <span\r\n style=\"color: #333; font-weight: normal;\">${value}<\/span> ) \/ $feature.<span\r\n style=\"color: #333; font-weight: normal;\">${normalizationField}<\/span> ) * 100`<\/span> : value;\r\n  <span\r\n style=\"color: #333; font-weight: bold;\">return<\/span> <span\r\n style=\"color: #d14;\">`Round( <span\r\n style=\"color: #333; font-weight: normal;\">${percentValue}<\/span> )`<\/span>;\r\n}\r\n<\/code><\/pre>\n<p>This function expects an array of field names (for aggregation if necessary) and a normalizationField. Notice that I don&#8217;t expose a normalize option to the user in the app. You, as the developer, should handle normalization within the code. This is nice because it keeps the user experience as simple as possible.<\/p>\n<p>The app is also written in such a way that it can be configured to work with other layers as long as the developer configures the <code> FieldInfoForArcade<\/code> objects appropriately given the following interface:<\/p>\n<pre><code><span\r\n  style=\"color: #900; font-weight: bold;\">interface<\/span> FieldInfoForArcade {\r\n  value: string,  <span\r\n style=\"color: #998; font-style: italic;\">\/\/ e.g. \"no-school\"<\/span>\r\n  label: string,  <span\r\n style=\"color: #998; font-style: italic;\">\/\/ e.g. \"% with no formal education completed\"<\/span>\r\n  description: string,  <span\r\n style=\"color: #998; font-style: italic;\">\/\/ e.g. \"didn't complete any level of formal education.\"<\/span>\r\n  fields: string[]  <span\r\n style=\"color: #998; font-style: italic;\">\/\/ e.g. [ \"EDUC01_CY\", \"EDUC02_CY\", \"EDUC03_CY\" ]<\/span>\r\n}\r\n<\/code><\/pre>\n<p>Notice also that I use the same expression to update the popupTemplate of the layer. That way, when the user selects a new variable to visualize, they can click any feature and see a nicely formatted popup specific to the selected variable. This keeps unnecessary information from appearing in the popup when there is only one variable of interest.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":200062,"id":200062,"title":"popup-gif","filename":"popup-gif.gif","filesize":1130617,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/popup-gif.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps\/popup-gif","alt":"","author":"6561","description":"","caption":"The Arcade expression generated for the renderer can also be used to display the feature's value in the popup. This is accomplished by updating the popup template each time a new expression is generated. ","name":"popup-gif","status":"inherit","uploaded_to":199072,"date":"2018-05-30 23:39:30","modified":"2018-05-30 23:41:05","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":480,"height":315,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/popup-gif.gif","thumbnail-width":213,"thumbnail-height":140,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/popup-gif.gif","medium-width":398,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/popup-gif.gif","medium_large-width":480,"medium_large-height":315,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/popup-gif.gif","large-width":480,"large-height":315,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/popup-gif.gif","1536x1536-width":480,"1536x1536-height":315,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/popup-gif.gif","2048x2048-width":480,"2048x2048-height":315,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/popup-gif.gif","card_image-width":480,"card_image-height":315,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/popup-gif.gif","wide_image-width":480,"wide_image-height":315}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/esri-ts-samples\/visualization\/smart-mapping\/arcade\/"},{"acf_fc_layout":"content","content":"<h2>Try it out!<\/h2>\n<p>You might also ask, \u201cCan\u2019t I just use JavaScript to do all of this work for me?\u201d Yes, you can do that, but using JavaScript instead of Arcade will limit the visualization to the scope of the app. Arcade can run on multiple systems throughout the ArcGIS platform, so the generated expression can be saved to the layer and consumed in other web apps and even ArcGIS Pro if needed.<\/p>\n<p>Hopefully, you&#8217;ve learned something new and have been inspired to write your own functions for generating Arcade expressions for data exploration apps. In fact, we already do this for some Smart Mapping functions in the API. Stay tuned to learn more about how we generate Arcade expressions internally in our Smart Mapping methods.<\/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":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/mexico-card.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/02\/SunGlint_Banner.jpg"},"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>Generate Arcade expressions for data exploration web apps<\/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\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Generate Arcade expressions for data exploration web apps\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps\" \/>\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=\"2024-11-11T20:37:33+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\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Generate Arcade expressions for data exploration web apps\",\"datePublished\":\"2018-06-05T08:00:08+00:00\",\"dateModified\":\"2024-11-11T20:37:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"arcade\",\"arcade expressions\",\"jsapi4\",\"smart mapping\"],\"articleSection\":[\"Arcade\",\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps\",\"name\":\"Generate Arcade expressions for data exploration web apps\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2018-06-05T08:00:08+00:00\",\"dateModified\":\"2024-11-11T20:37:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generate Arcade expressions for data exploration web apps\"}]},{\"@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":"Generate Arcade expressions for data exploration web apps","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\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps","og_locale":"en_US","og_type":"article","og_title":"Generate Arcade expressions for data exploration web apps","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-11-11T20:37:33+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\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Generate Arcade expressions for data exploration web apps","datePublished":"2018-06-05T08:00:08+00:00","dateModified":"2024-11-11T20:37:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps"},"wordCount":8,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["arcade","arcade expressions","jsapi4","smart mapping"],"articleSection":["Arcade","Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps","name":"Generate Arcade expressions for data exploration web apps","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2018-06-05T08:00:08+00:00","dateModified":"2024-11-11T20:37:33+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-arcade-expressions-for-data-exploration-web-apps#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Generate Arcade expressions for data exploration web apps"}]},{"@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":"June 5, 2018","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/02\/SunGlint_Banner.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":32551,"name":"arcade","slug":"arcade","term_group":0,"term_taxonomy_id":32551,"taxonomy":"post_tag","description":"","parent":0,"count":113,"filter":"raw"},{"term_id":32521,"name":"arcade expressions","slug":"arcade-expressions","term_group":0,"term_taxonomy_id":32521,"taxonomy":"post_tag","description":"","parent":0,"count":27,"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":24581,"name":"smart mapping","slug":"smart-mapping","term_group":0,"term_taxonomy_id":24581,"taxonomy":"post_tag","description":"","parent":0,"count":81,"filter":"raw"}],"category_data":[{"term_id":777102,"name":"Arcade","slug":"arcade","term_group":0,"term_taxonomy_id":777102,"taxonomy":"category","description":"","parent":0,"count":98,"filter":"raw"},{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2683,"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":361,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":761,"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\/199072","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=199072"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/199072\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=199072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=199072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=199072"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=199072"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=199072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}