{"id":1128282,"date":"2021-02-03T09:00:41","date_gmt":"2021-02-03T17:00:41","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1128282"},"modified":"2021-02-02T23:30:23","modified_gmt":"2021-02-03T07:30:23","slug":"visualize-diverging-datasets-with-size-in-web-maps","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps","title":{"rendered":"Visualize diverging datasets with size in web maps"},"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":[738191,22941],"tags":[756562,31291,756582,24581],"industry":[],"product":[36831,36601],"class_list":["post-1128282","blog","type-blog","status-publish","format-standard","hentry","category-developers","category-mapping","tag-proportional-symbols","tag-renderers","tag-size","tag-smart-mapping","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Leverage the above-and-below color and size theme to visualize diverging datasets, such as change over time.","flexible_content":[{"acf_fc_layout":"content","content":"<p>The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/\">ArcGIS API for JavaScript<\/a> (JS API) version <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\/\">4.18<\/a> added support for generating renderers with <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-sm-size-themes\/\">size themes<\/a> in web mapping applications. This includes generating proportional symbols for visualizing diverging data above and below a meaningful inflection point.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1128672,"id":1128672,"title":"detroit-circles","filename":"detroit-circles.png","filesize":164897,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/detroit-circles","alt":"Change in the number of households by Census tract in Detroit. Solid blue circles show areas that had an increase in households; hollow red circles show areas that experienced a decline in the number of households.","author":"6561","description":"","caption":"Total change in the number of households by census tract in Detroit. Solid blue circles show areas that had an increase in households; hollow red circles show areas that experienced a decline in the number of households.","name":"detroit-circles","status":"inherit","uploaded_to":1128282,"date":"2021-02-01 17:55:49","modified":"2021-02-01 21:40: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":945,"height":685,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles.png","medium-width":360,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles.png","medium_large-width":768,"medium_large-height":557,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles.png","large-width":945,"large-height":685,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles.png","1536x1536-width":945,"1536x1536-height":685,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles.png","2048x2048-width":945,"2048x2048-height":685,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles-641x465.png","card_image-width":641,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles.png","wide_image-width":945,"wide_image-height":685}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-sm-size-themes\/"},{"acf_fc_layout":"content","content":"<p>The following size themes were implemented in the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-smartMapping-renderers-univariateColorSize.html#createContinuousRenderer\">createContinuousRenderer<\/a> methods of the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-smartMapping-renderers-univariateColorSize.html\">univariateColorSize<\/a> and <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-smartMapping-renderers-size.html\">size<\/a> smart mapping modules.<\/p>\n<ul>\n<li><a href=\"#above\">Above<\/a><\/li>\n<li><a href=\"#below\">Below<\/a><\/li>\n<li><a href=\"#above-and-below\">Above and below<\/a><\/li>\n<\/ul>\n<p>These themes are well suited for data variables that have a meaningful inflection (middle) point. For example, when mapping the change in population between two years, the significant inflection point would be zero. (i.e. Where did the population increase or decrease in this time span?)<\/p>\n<h2>Why size themes are needed<\/h2>\n<p>The concept of <em>themes<\/em> has been part of smart mapping&#8217;s color renderers since smart mapping was <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/introducing-smart-mapping\/\">first introduced<\/a>. Until version 4.18 of the JS API, themes were not part of the process of making a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Proportional_symbol_map\">proportional symbol map<\/a> (or continuous size). By default, the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-smartMapping-renderers-size.html#createContinuousRenderer\">continuous size renderer creator<\/a> assigns the minimum data value to the smallest symbol size and the maximum data value to the largest symbol size.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1129422,"id":1129422,"title":"Screen Shot 2021-02-01 at 3.09.30 PM","filename":"Screen-Shot-2021-02-01-at-3.09.30-PM.png","filesize":11563,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-3.09.30-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/screen-shot-2021-02-01-at-3-09-30-pm","alt":"Size slider with vertical histogram","author":"6561","description":"","caption":"By default, the smart mapping continuous size renderer (proportional symbols) assigns the highest data value to the maximum symbol size and the lowest data value to the smallest symbol size. This is most effective in right skewed datasets such as this one.","name":"screen-shot-2021-02-01-at-3-09-30-pm","status":"inherit","uploaded_to":1128282,"date":"2021-02-01 23:10:04","modified":"2021-02-01 23:15:19","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":616,"height":458,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-3.09.30-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-3.09.30-PM.png","medium-width":351,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-3.09.30-PM.png","medium_large-width":616,"medium_large-height":458,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-3.09.30-PM.png","large-width":616,"large-height":458,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-3.09.30-PM.png","1536x1536-width":616,"1536x1536-height":458,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-3.09.30-PM.png","2048x2048-width":616,"2048x2048-height":458,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-3.09.30-PM.png","card_image-width":616,"card_image-height":458,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-3.09.30-PM.png","wide_image-width":616,"wide_image-height":458}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>While this default &#8220;lets the data speak for itself&#8221;, it only looks good for datasets skewed toward the right.<\/p>\n<p><em>Click the image to view a larger version of this map<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1129222,"id":1129222,"title":"nps-2019","filename":"nps-2019.png","filesize":117474,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2019.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/nps-2019","alt":"Total visits to U.S. national parks in 2019 mapped in Map Viewer beta. This suggested default works well because the data is skewed to the right, making the size variation subtle, but effective. It properly emphasizes parks that had a lot of visits.","author":"6561","description":"","caption":"Total visits to U.S. national parks in 2019 visualized in Map Viewer beta. The suggested size range works well for this layer because the data is skewed to the right. It effectively emphasizes parks that had a lot of visits.","name":"nps-2019","status":"inherit","uploaded_to":1128282,"date":"2021-02-01 22:45:54","modified":"2021-02-03 07:12:34","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":1812,"height":802,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2019-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2019.png","medium-width":464,"medium-height":205,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2019.png","medium_large-width":768,"medium_large-height":340,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2019.png","large-width":1812,"large-height":802,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2019-1536x680.png","1536x1536-width":1536,"1536x1536-height":680,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2019.png","2048x2048-width":1812,"2048x2048-height":802,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2019-826x366.png","card_image-width":826,"card_image-height":366,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2019.png","wide_image-width":1812,"wide_image-height":802}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2019.png"},{"acf_fc_layout":"content","content":"<p>However, this high-to-low approach doesn&#8217;t work well for datasets that more closely follow a normal distribution. The example below isn&#8217;t as effective because most of the data values are assigned similar sizes in the middle range, making spatial patterns difficult to see.<\/p>\n<p><em>Click the image to view a larger version of this map<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1129252,"id":1129252,"title":"unemployment-high-to-low","filename":"unemployment-high-to-low.png","filesize":293079,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-high-to-low.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/unemployment-high-to-low","alt":"Unemployment rates in U.S. counties (January 2020). Note the distribution as portrayed by the histogram. Normal distributions such as this one aren't effectively visualized in a high to low size theme.","author":"6561","description":"","caption":"Unemployment rates in U.S. counties (January 2020). Note the distribution as portrayed by the histogram. Normal distributions such as this one aren't effectively visualized in a high to low size theme.","name":"unemployment-high-to-low","status":"inherit","uploaded_to":1128282,"date":"2021-02-01 22:46:17","modified":"2021-02-01 22:52:53","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":1808,"height":804,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-high-to-low-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-high-to-low.png","medium-width":464,"medium-height":206,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-high-to-low.png","medium_large-width":768,"medium_large-height":342,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-high-to-low.png","large-width":1808,"large-height":804,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-high-to-low-1536x683.png","1536x1536-width":1536,"1536x1536-height":683,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-high-to-low.png","2048x2048-width":1808,"2048x2048-height":804,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-high-to-low-826x367.png","card_image-width":826,"card_image-height":367,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-high-to-low.png","wide_image-width":1808,"wide_image-height":804}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-high-to-low.png"},{"acf_fc_layout":"content","content":"<p>Maps with normal data distributions are more effective when the minimum size is assigned to features with a data point closer to the dataset average.<\/p>\n<p><em>Click the image to view a larger version of this map<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1129232,"id":1129232,"title":"unemployment-middle","filename":"unemployment-middle.png","filesize":252372,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-middle.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/unemployment-middle","alt":"Unemployment rates in U.S. counties (January 2020). Note the position of the lower breakpoint as portrayed by the histogram. Spatial patterns are more visible when the smallest symbol size is assigned a value closer to the data average.","author":"6561","description":"","caption":"Unemployment rates in U.S. counties (January 2020). Note the position of the lower breakpoint as portrayed by the histogram. Spatial patterns are more visible when the smallest symbol size is assigned a value closer to the data average.","name":"unemployment-middle","status":"inherit","uploaded_to":1128282,"date":"2021-02-01 22:45:59","modified":"2021-02-01 22:55:30","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":1804,"height":780,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-middle-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-middle.png","medium-width":464,"medium-height":201,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-middle.png","medium_large-width":768,"medium_large-height":332,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-middle.png","large-width":1804,"large-height":780,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-middle-1536x664.png","1536x1536-width":1536,"1536x1536-height":664,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-middle.png","2048x2048-width":1804,"2048x2048-height":780,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-middle-826x357.png","card_image-width":826,"card_image-height":357,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-middle.png","wide_image-width":1804,"wide_image-height":780}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/unemployment-middle.png"},{"acf_fc_layout":"content","content":"<p>When mapping a variable as it changes over time, the default high-to-low theme doesn&#8217;t communicate anything meaningful or intuitive to the user. <\/p>\n<p>In the map below, zero is the meaningful inflection point; the map reader most likely wants to see which parks experienced a decrease in visits from the previous year in contrast to the parks that experienced an increase in visits.<\/p>\n<p><em>Click the image to view a larger version of this map<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1129242,"id":1129242,"title":"nps-2018-2019","filename":"nps-2018-2019.png","filesize":128575,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2018-2019.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/nps-2018-2019","alt":"Total change in U.S. national park visits (2018-2019). Note the histogram shows a significant number of negative values. The high-to-low size theme doesn't adequately show which parks lost visitors and which ones gained visitors.","author":"6561","description":"","caption":"Total change in visits to U.S. national park (2018-2019). The histogram shows a significant number of negative values. The high-to-low size theme doesn't adequately show which parks lost visitors and which ones gained visitors from the previous year.","name":"nps-2018-2019","status":"inherit","uploaded_to":1128282,"date":"2021-02-01 22:46:10","modified":"2021-02-03 06:24:38","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":1814,"height":805,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2018-2019-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2018-2019.png","medium-width":464,"medium-height":206,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2018-2019.png","medium_large-width":768,"medium_large-height":341,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2018-2019.png","large-width":1814,"large-height":805,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2018-2019-1536x682.png","1536x1536-width":1536,"1536x1536-height":682,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2018-2019.png","2048x2048-width":1814,"2048x2048-height":805,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2018-2019-826x367.png","card_image-width":826,"card_image-height":367,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2018-2019.png","wide_image-width":1814,"wide_image-height":805}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/nps-2018-2019.png"},{"acf_fc_layout":"content","content":"<p>Size themes are important for helping map authors and developers inuitively explore proportional symbol visualizations more appropriate for each of these scenarios.<\/p>\n<h2>Explore each size theme<\/h2>\n<p>Let&#8217;s explore each size theme (<code>above<\/code>, <code>below<\/code>, and <code>above-and-below<\/code>) using the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-sm-size-themes\/\">Size visual variable themes<\/a> sample from the JS API documentation. This sample uses the following <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/arcade\/\">Arcade expression<\/a> to calculate the change in households from 2000 to 2010. (Sorry, 2020 Census data isn&#8217;t available yet ?).<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #998;font-style: italic\">\/\/ TOTHU10 = Total households in 2010<\/span>\r\n<span style=\"color: #998;font-style: italic\">\/\/ TOTHU00 = Total households in 2000<\/span>\r\n$feature.TOTHU10 - $feature.TOTHU00\r\n<\/code><\/pre>\n<p><a name=\"above\"><\/a><\/p>\n<h3>Above<\/h3>\n<p>In a map showing change over time, the <code>above<\/code> theme answers the question: <em>Where did the number of households <strong>increase<\/strong> from 2000-2010?<\/em> Simply provide the layer, view, expression or field name, and theme to the <code><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-smartMapping-renderers-size.html#createContinuousRenderer\">createCountinuousRenderer<\/a><\/code> method.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">const<\/span> params = {\r\n  layer,\r\n  view,\r\n  theme: <span style=\"color: #d14\">\"above\"<\/span>,\r\n  valueExpression: <span style=\"color: #d14\">\"$feature.TOTHU10 - $feature.TOTHU00\"<\/span>,\r\n  valueExpressionTitle: <span style=\"color: #d14\">\"Increase in number of households 2000-2010\"<\/span>\r\n};\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> { renderer } = <span style=\"color: #333;font-weight: bold\">await<\/span> sizeRendererCreator.createContinuousRenderer(params);\r\nlayer.renderer = renderer;\r\n<\/code><\/pre>\n<p><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-sm-size-themes\/live\/\"><strong>View the live app<\/strong><\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1128682,"id":1128682,"title":"above","filename":"above.png","filesize":154095,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/above.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/above","alt":"Areas in Detroit that experienced an increase in households from 2000-2010.","author":"6561","description":"","caption":"Areas in Detroit that experienced an increase in households from 2000-2010.","name":"above","status":"inherit","uploaded_to":1128282,"date":"2021-02-01 17:55:56","modified":"2021-02-01 23:21:17","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":955,"height":687,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/above-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/above.png","medium-width":363,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/above.png","medium_large-width":768,"medium_large-height":552,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/above.png","large-width":955,"large-height":687,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/above.png","1536x1536-width":955,"1536x1536-height":687,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/above.png","2048x2048-width":955,"2048x2048-height":687,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/above-646x465.png","card_image-width":646,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/above.png","wide_image-width":955,"wide_image-height":687}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/above.png"},{"acf_fc_layout":"content","content":"<p>This map shows size variation only in census tracts that experienced an increase in households (where the expression returned a value greater than zero). All other tracts are given a symbol with the smallest size. <\/p>\n<p><a name=\"below\"><\/a><\/p>\n<h2>Below<\/h2>\n<p>The output renderer created with the <code>below<\/code> theme inverts the size variable to emphasize where the variable diverges the most in a negative direction from the inflection point. Again, the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-smartMapping-renderers-size.html#createContinuousRenderer\">createContinuousRenderer<\/a> method correctly assumes the inflection point is zero. This theme answers the question: <em>Where did the number of households <strong>decrease<\/strong> from 2000-2010?<\/em><\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">const<\/span> params = {\r\n  layer,\r\n  view,\r\n  theme: <span style=\"color: #d14\">\"below\"<\/span>,\r\n  valueExpression: <span style=\"color: #d14\">\"$feature.TOTHU10 - $feature.TOTHU00\"<\/span>,\r\n  valueExpressionTitle: <span style=\"color: #d14\">\"Decrease in number of households 2000-2010\"<\/span>\r\n};\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> { renderer } = <span style=\"color: #333;font-weight: bold\">await<\/span> sizeRendererCreator.createContinuousRenderer(params);\r\nlayer.renderer = renderer;\r\n<\/code><\/pre>\n<p><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-sm-size-themes\/live\/\"><strong>View the live app<\/strong><\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1128692,"id":1128692,"title":"below","filename":"below.png","filesize":142755,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/below.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/below","alt":"Areas in Detroit that experienced a decrease in households from 2000-2010.","author":"6561","description":"","caption":"Areas in Detroit that experienced a decrease in households from 2000-2010.","name":"below","status":"inherit","uploaded_to":1128282,"date":"2021-02-01 17:56:04","modified":"2021-02-01 23:22: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":958,"height":693,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/below-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/below.png","medium-width":361,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/below.png","medium_large-width":768,"medium_large-height":556,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/below.png","large-width":958,"large-height":693,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/below.png","1536x1536-width":958,"1536x1536-height":693,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/below.png","2048x2048-width":958,"2048x2048-height":693,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/below-643x465.png","card_image-width":643,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/below.png","wide_image-width":958,"wide_image-height":693}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/below.png"},{"acf_fc_layout":"content","content":"<p>This theme only shows size variation in features that experienced a decrease in households from 2000-2010.<\/p>\n<p><a name=\"above-and-below\"><\/a><\/p>\n<h3>Above and below<\/h3>\n<p>The <code>above-and-below<\/code> theme allows you to show areas that experienced either an increase or a decrease in households (population) over time in the same map.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">const<\/span> params = {\r\n  layer,\r\n  view,\r\n  theme: <span style=\"color: #d14\">\"above-and-below\"<\/span>,\r\n  valueExpression: <span style=\"color: #d14\">\"$feature.TOTHU10 - $feature.TOTHU00\"<\/span>,\r\n  valueExpressionTitle: <span style=\"color: #d14\">\"Change in number of households 2000-2010\"<\/span>,\r\n  symbolOptions: {\r\n    symbolStyle: <span style=\"color: #d14\">\"arrow\"<\/span>\r\n  }\r\n};\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> { renderer } = <span style=\"color: #333;font-weight: bold\">await<\/span> univariateColorSizeRendererCreator.createContinuousRenderer(params);\r\nlayer.renderer = renderer;\r\n<\/code><\/pre>\n<p><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-sm-size-themes\/live\/\"><strong>View the live app<\/strong><\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1128662,"id":1128662,"title":"detroit-arrows","filename":"detroit-arrows.png","filesize":158718,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-arrows.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/detroit-arrows","alt":"Total change in number of households by census tract in Detroit (2000-2010).","author":"6561","description":"","caption":"Total change in number of households by census tract in Detroit (2000-2010).","name":"detroit-arrows","status":"inherit","uploaded_to":1128282,"date":"2021-02-01 17:55:42","modified":"2021-02-01 23:24:04","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":956,"height":692,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-arrows-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-arrows.png","medium-width":361,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-arrows.png","medium_large-width":768,"medium_large-height":556,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-arrows.png","large-width":956,"large-height":692,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-arrows.png","1536x1536-width":956,"1536x1536-height":692,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-arrows.png","2048x2048-width":956,"2048x2048-height":692,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-arrows-642x465.png","card_image-width":642,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-arrows.png","wide_image-width":956,"wide_image-height":692}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-arrows.png"},{"acf_fc_layout":"sidebar","content":"<p>The <code>above-and-below<\/code> theme is only available in the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-smartMapping-renderers-color.html\">color<\/a> and <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-smartMapping-renderers-univariateColorSize.html\">univariateColorSize<\/a> smart mapping modules.<\/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":"<p>This theme is characterized by a distinct <em>above symbol<\/em> and a <em>below symbol<\/em> that are reinforced with a diverging color scheme. You can opt to color the symbols with solid binary colors (one color for above and one for below) or with a continuous color ramp.<\/p>\n<p>The <code>above-and-below<\/code> theme equips you with 12 predefined symbol pairs for representing the diverging pattern. These are specified in the <code>symbolStyle<\/code> option of the <code>symbolOptions<\/code> parameter.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">const<\/span> params = {\r\n  layer,\r\n  view,\r\n  theme: <span style=\"color: #d14\">`above-and-below`<\/span>,\r\n  valueExpression: <span style=\"color: #d14\">`$feature.TOTHU10 - $feature.TOTHU00`<\/span>,\r\n  valueExpressionTitle: <span style=\"color: #d14\">`Change in number of households 2000-2010`<\/span>,\r\n  symbolOptions: {\r\n    <span style=\"color: #998;font-style: italic\">\/\/ Other symbol styles include the following:<\/span>\r\n    <span style=\"color: #998;font-style: italic\">\/\/<\/span>\r\n    <span style=\"color: #998;font-style: italic\">\/\/ \"caret\" | \"circle-caret\" | \"arrow\" | \"circle-arrow\" |<\/span>\r\n    <span style=\"color: #998;font-style: italic\">\/\/ \"plus-minus\" | \"circle-plus-minus\" | \"square\" | \"circle\" |<\/span>\r\n    <span style=\"color: #998;font-style: italic\">\/\/ \"triangle\" | \"happy-sad\" | \"thumb\"<\/span>\r\n    symbolStyle: <span style=\"color: #d14\">\"arrow\"<\/span>\r\n  }\r\n};\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> { renderer } = <span style=\"color: #333;font-weight: bold\">await<\/span> univariateColorSizeRendererCreator.createContinuousRenderer(params);\r\nlayer.renderer = renderer;\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":1128352,"id":1128352,"title":"symbol-styles","filename":"symbol-styles.png","filesize":62409,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/symbol-styles.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/symbol-styles","alt":"The above-and-below theme allows you to select one of 12 symbol pairs for representing above and below patterns for a variable. All of the symbol pairs in this image are available in the initial release of size themes.","author":"6561","description":"","caption":"The above-and-below theme allows you to select one of 12 symbol pairs for representing above and below patterns for a variable. All of the symbol pairs in this image are available in the initial release of size themes.","name":"symbol-styles","status":"inherit","uploaded_to":1128282,"date":"2021-01-30 02:06:34","modified":"2021-02-01 23:26:47","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":613,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/symbol-styles-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/symbol-styles.png","medium-width":389,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/symbol-styles.png","medium_large-width":768,"medium_large-height":515,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/symbol-styles.png","large-width":914,"large-height":613,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/symbol-styles.png","1536x1536-width":914,"1536x1536-height":613,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/symbol-styles.png","2048x2048-width":914,"2048x2048-height":613,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/symbol-styles-693x465.png","card_image-width":693,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/symbol-styles.png","wide_image-width":914,"wide_image-height":613}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/symbol-styles.png"},{"acf_fc_layout":"content","content":"<p>I choose different symbol pairs depending on the theme of my map. For example, I prefer the <code>circle<\/code> pair in the above-and-below household map because the hollow rings on the negative side of the ramp convey a feeling of emptiness, similar to how a neighborhood might feel if it experienced a significant decrease in population. <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1128672,"id":1128672,"title":"detroit-circles","filename":"detroit-circles.png","filesize":164897,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/detroit-circles","alt":"Change in the number of households by Census tract in Detroit. Solid blue circles show areas that had an increase in households; hollow red circles show areas that experienced a decline in the number of households.","author":"6561","description":"","caption":"Total change in the number of households by census tract in Detroit. Solid blue circles show areas that had an increase in households; hollow red circles show areas that experienced a decline in the number of households.","name":"detroit-circles","status":"inherit","uploaded_to":1128282,"date":"2021-02-01 17:55:49","modified":"2021-02-01 21:40: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":945,"height":685,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles.png","medium-width":360,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles.png","medium_large-width":768,"medium_large-height":557,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles.png","large-width":945,"large-height":685,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles.png","1536x1536-width":945,"1536x1536-height":685,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles.png","2048x2048-width":945,"2048x2048-height":685,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles-641x465.png","card_image-width":641,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/detroit-circles.png","wide_image-width":945,"wide_image-height":685}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-sm-size-themes\/live\/"},{"acf_fc_layout":"content","content":"<p>You can also specify your own above and below symbol pair. The following example uses a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-WebStyleSymbol.html\">WebStyleSymbol<\/a> with a house shape. I chose the same symbol shape for both the above and below symbols since color already communicates the above-and-below pattern.<\/p>\n<details>\n<summary>Click to expand snippet<\/summary>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">const<\/span> houseSymbol = <span style=\"color: #333;font-weight: bold\">new<\/span> WebStyleSymbol({\r\n  name: <span style=\"color: #d14\">\"house\"<\/span>,\r\n  styleName: <span style=\"color: #d14\">\"Esri2DPointSymbolsStyle\"<\/span>\r\n});\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> params = {\r\n  layer,\r\n  view,\r\n  theme,\r\n  valueExpression: <span style=\"color: #d14\">\"$feature.TOTHU10 - $feature.TOTHU00\"<\/span>,\r\n  valueExpressionTitle: <span style=\"color: #d14\">\"Change in households (2000-2010)\"<\/span>,\r\n  defaultSymbolEnabled: <span style=\"color: #333;font-weight: 500\">false<\/span>,\r\n  colorOptions: {\r\n    isContinuous: <span style=\"color: #333;font-weight: 500\">false<\/span>\r\n  },\r\n  symbolOptions: {\r\n    symbols: {\r\n      above: houseSymbol,\r\n      below: houseSymbol.clone()\r\n    }\r\n  }\r\n};\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> { renderer } = <span style=\"color: #333;font-weight: bold\">await<\/span> univariateRendererCreator.createContinuousRenderer(params);\r\n\r\nlayer.renderer = renderer;\r\n<\/code><\/pre>\n<\/details>\n<p><a href=\"https:\/\/codepen.io\/kekenes\/full\/XWNbKNx\"><strong>View the live app<\/strong><\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1131882,"id":1131882,"title":"Screen Shot 2021-02-02 at 10.11.38 PM","filename":"Screen-Shot-2021-02-02-at-10.11.38-PM.png","filesize":123075,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-10.11.38-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/screen-shot-2021-02-02-at-10-11-38-pm","alt":"Change in total number of households in Detroit (2000-2010). This map uses a house web style and a diverging color ramp with size to indicate how much the number of households increased or decreased over the course of the decade.","author":"6561","description":"","caption":"Change in total number of households in Detroit (2000-2010). This map uses a house web style and a diverging color ramp with size to indicate how much the number of households increased or decreased over the course of the decade.","name":"screen-shot-2021-02-02-at-10-11-38-pm","status":"inherit","uploaded_to":1128282,"date":"2021-02-03 06:12:16","modified":"2021-02-03 06:13:33","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":913,"height":549,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-10.11.38-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-10.11.38-PM.png","medium-width":434,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-10.11.38-PM.png","medium_large-width":768,"medium_large-height":462,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-10.11.38-PM.png","large-width":913,"large-height":549,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-10.11.38-PM.png","1536x1536-width":913,"1536x1536-height":549,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-10.11.38-PM.png","2048x2048-width":913,"2048x2048-height":549,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-10.11.38-PM-773x465.png","card_image-width":773,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-10.11.38-PM.png","wide_image-width":913,"wide_image-height":549}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-10.11.38-PM.png"},{"acf_fc_layout":"content","content":"<h2>3D size themes<\/h2>\n<p>Size themes even work with volumetric symbols in <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-views-SceneView.html\">3D scenes<\/a>. Here\u2019s the same map visualized with cylinders.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">const<\/span> params = {\r\n  layer,\r\n  view,\r\n  theme,\r\n  valueExpression: <span style=\"color: #d14\">\"$feature.TOTHU10 - $feature.TOTHU00\"<\/span>,\r\n  symbolType: <span style=\"color: #d14\">\"3d-volumetric\"<\/span>\r\n  <span style=\"color: #998;font-style: italic\">\/\/ use '3d-volumetric-uniform' for spheres<\/span>\r\n};\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> { renderer } = <span style=\"color: #333;font-weight: bold\">await<\/span> univariateRendererCreator.createContinuousRenderer(params);\r\n\r\nlayer.renderer = renderer;\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":1128702,"id":1128702,"title":"3d","filename":"3d.png","filesize":171529,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/3d.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/3d-3","alt":"Change in total number of households, Detroit (2000-2010). Color indicates if there was a decrease or increase in households. Cylinder height indicates the magnitude of the change.","author":"6561","description":"","caption":"Change in total number of households, Detroit (2000-2010). Color indicates if there was a decrease or an increase in households. Cylinder height indicates the magnitude of the change.","name":"3d-3","status":"inherit","uploaded_to":1128282,"date":"2021-02-01 18:00:38","modified":"2021-02-03 06:37:54","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":1399,"height":593,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/3d-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/3d.png","medium-width":464,"medium-height":197,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/3d.png","medium_large-width":768,"medium_large-height":326,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/3d.png","large-width":1399,"large-height":593,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/3d.png","1536x1536-width":1399,"1536x1536-height":593,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/3d.png","2048x2048-width":1399,"2048x2048-height":593,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/3d-826x350.png","card_image-width":826,"card_image-height":350,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/3d.png","wide_image-width":1399,"wide_image-height":593}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/full\/zYoGBwy"},{"acf_fc_layout":"image","image":{"ID":1128722,"id":1128722,"title":"Screen Shot 2021-02-01 at 10.01.52 AM","filename":"Screen-Shot-2021-02-01-at-10.01.52-AM.png","filesize":152249,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.01.52-AM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/screen-shot-2021-02-01-at-10-01-52-am","alt":"Change in total number of households, Detroit (2000-2010). Color indicates if there was a decrease or increase in households. Sphere volume indicates the magnitude of the change.","author":"6561","description":"","caption":"Change in total number of households, Detroit (2000-2010). Color indicates if there was a decrease or increase in households. Sphere volume indicates the magnitude of the change.","name":"screen-shot-2021-02-01-at-10-01-52-am","status":"inherit","uploaded_to":1128282,"date":"2021-02-01 18:02:12","modified":"2021-02-01 23:52:22","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":1392,"height":583,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.01.52-AM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.01.52-AM.png","medium-width":464,"medium-height":194,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.01.52-AM.png","medium_large-width":768,"medium_large-height":322,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.01.52-AM.png","large-width":1392,"large-height":583,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.01.52-AM.png","1536x1536-width":1392,"1536x1536-height":583,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.01.52-AM.png","2048x2048-width":1392,"2048x2048-height":583,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.01.52-AM-826x346.png","card_image-width":826,"card_image-height":346,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.01.52-AM.png","wide_image-width":1392,"wide_image-height":583}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/full\/ZEBGOKj"},{"acf_fc_layout":"sidebar","content":"<p>Only points can be used to generate size visualizations with smart mapping methods for 3D scenes.<\/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":"<h2>Customize the visualization<\/h2>\n<p>While the smart mapping methods generate good default renderers, you should always deliberately make decisions to represent the data in the best way possible. Don\u2019t use the renderer creator methods as a crutch. Use them to get started, then make modifications to the output renderer as necessary.<\/p>\n<p>I will use national park visitation data to demonstrate how to modify the suggested renderer to match desired sizes and colors to meaningful values.<\/p>\n<h2>Color<\/h2>\n<p>The <code>colorScheme<\/code> parameter in the renderer creators allows you to override the default red-blue diverging color scheme. Since green colors dominate official national park maps, I used the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/esri-color-ramps\/\">Esri Color Ramps<\/a> guide page to find a scheme that best matches my subject. I found one named <em>Green and Brown 1<\/em> which seemed to fit the bill.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1128732,"id":1128732,"title":"Screen Shot 2021-02-01 at 10.04.57 AM","filename":"Screen-Shot-2021-02-01-at-10.04.57-AM.png","filesize":67728,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.04.57-AM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/screen-shot-2021-02-01-at-10-04-57-am","alt":"The Esri Color ramps guide allows you to search hundreds of color ramps based on theme, color, and background.","author":"6561","description":"","caption":"The Esri Color ramps guide allows you to search hundreds of color ramps based on theme, color, and background.","name":"screen-shot-2021-02-01-at-10-04-57-am","status":"inherit","uploaded_to":1128282,"date":"2021-02-01 18:06:24","modified":"2021-02-03 07:20:52","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":997,"height":767,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.04.57-AM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.04.57-AM.png","medium-width":339,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.04.57-AM.png","medium_large-width":768,"medium_large-height":591,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.04.57-AM.png","large-width":997,"large-height":767,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.04.57-AM.png","1536x1536-width":997,"1536x1536-height":767,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.04.57-AM.png","2048x2048-width":997,"2048x2048-height":767,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.04.57-AM-604x465.png","card_image-width":604,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-01-at-10.04.57-AM.png","wide_image-width":997,"wide_image-height":767}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/esri-color-ramps\/"},{"acf_fc_layout":"content","content":"<p>Use the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-smartMapping-symbology-color.html#getSchemeByName\">getSchemeByName<\/a> function to provide the <code>createContinuousRenderer<\/code> method with the required colors and symbol properties for your desired color scheme.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">const<\/span> colorScheme = colorSchemes.getSchemeByName({\r\n  geometryType: layer.geometryType,\r\n  name: <span style=\"color: #d14\">\"Green and Brown 1\"<\/span>,\r\n  theme: <span style=\"color: #d14\">\"above-and-below\"<\/span>\r\n});\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> params = {\r\n  layer,\r\n  view: mainView,\r\n  theme: <span style=\"color: #d14\">\"above-and-below\"<\/span>,\r\n  valueExpression: <span style=\"color: #d14\">\"$feature.F2019 - $feature.F2018\"<\/span>,\r\n  colorOptions: {\r\n    colorScheme,\r\n    isContinuous: <span style=\"color: #333;font-weight: 500\">false<\/span>\r\n  },\r\n  symbolOptions: {\r\n    symbolStyle: <span style=\"color: #d14\">\"circle-arrow\"<\/span>\r\n  }\r\n};\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> { renderer } = <span style=\"color: #333;font-weight: bold\">await<\/span> univariateRendererCreator.createContinuousRenderer(params);\r\n<\/code><\/pre>\n<p><em>Click image to view larger version of the map<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1128742,"id":1128742,"title":"2019-total-change","filename":"2019-total-change.png","filesize":115853,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/2019-total-change.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/2019-total-change","alt":"Total change in visits to national parks from 2018-2019.","author":"6561","description":"","caption":"Total change in visits to national parks from 2018-2019.","name":"2019-total-change","status":"inherit","uploaded_to":1128282,"date":"2021-02-01 18:08:25","modified":"2021-02-02 00:04:14","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":1404,"height":745,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/2019-total-change-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/2019-total-change.png","medium-width":464,"medium-height":246,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/2019-total-change.png","medium_large-width":768,"medium_large-height":408,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/2019-total-change.png","large-width":1404,"large-height":745,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/2019-total-change.png","1536x1536-width":1404,"1536x1536-height":745,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/2019-total-change.png","2048x2048-width":1404,"2048x2048-height":745,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/2019-total-change-826x438.png","card_image-width":826,"card_image-height":438,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/2019-total-change.png","wide_image-width":1404,"wide_image-height":745}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/2019-total-change.png"},{"acf_fc_layout":"content","content":"<p><a href=\"https:\/\/ekenes.github.io\/national-parks\/apps\/2-total-change.html\"><strong>View live app<\/strong><\/a><\/p>\n<h2>Visualize change over time<\/h2>\n<p>Perhaps the most common scenario for the above and below size theme is to map how a variable changes over time. Of course there are other applicable scenarios as my colleagues <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/size-maps-turbocharged\/\">Mark, Jim, and Lisa demonstrated in this post<\/a>. But I\u2019ll focus on change over time here.<\/p>\n<p>I created a series of apps to visualize how park visitation numbers changed over time from 1905-2019. In each of the examples, I added a slider to explore how park visits changed from year to year.<\/p>\n<p>You can visualize total change, percent change, or change in combination with other variables, like total visits. Each approach is valid depending on the story you want to tell.<\/p>\n<h3>Total change<\/h3>\n<p><strong>Total change<\/strong> simply represents the total increase or decrease of a variable, such as population, votes for a political party, or park visits.<\/p>\n<p><em>Click image to view larger version of the map<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1128362,"id":1128362,"title":"total-change","filename":"total-change.png","filesize":116884,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/total-change","alt":"Total change in visits to national parks from 2013-2014. Size indicates the magnitude of the change relative to other parks.","author":"6561","description":"","caption":"Total change in national park visits from 2013-2014. Size indicates the magnitude of the change relative to other parks.","name":"total-change","status":"inherit","uploaded_to":1128282,"date":"2021-01-30 02:06:44","modified":"2021-02-03 06:53:05","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":1497,"height":727,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change.png","medium-width":464,"medium-height":225,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change.png","medium_large-width":768,"medium_large-height":373,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change.png","large-width":1497,"large-height":727,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change.png","1536x1536-width":1497,"1536x1536-height":727,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change.png","2048x2048-width":1497,"2048x2048-height":727,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change-826x401.png","card_image-width":826,"card_image-height":401,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change.png","wide_image-width":1497,"wide_image-height":727}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change.png"},{"acf_fc_layout":"content","content":"<p><a href=\"https:\/\/ekenes.github.io\/national-parks\/apps\/2-total-change.html\"><strong>View live app<\/strong><\/a><\/p>\n<p>Total change helps the user understand the overall magnitude of the change. How large was the change in each park&#8217;s number of visits compared to all other parks? Look at the difference in size between Channel Islands National Park and Great Smoky Mountains National Park. Clearly, Great Smoky Mountains National Park had a much larger total increase in visitors than Channel Islands National Park in 2014.<\/p>\n<details>\n<summary>Click to expand code snippet<\/summary>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">const<\/span> year = <span style=\"color: #008080\">2014<\/span>;\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> previousYear = year - <span style=\"color: #008080\">1<\/span>;\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> valueExpression = <span style=\"color: #d14\">`$feature.F<span style=\"color: #333;font-weight: normal\">${year}<\/span> - $feature.F<span style=\"color: #333;font-weight: normal\">${previousYear}<\/span>`<\/span>;\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> valueExpressionTitle = <span style=\"color: #d14\">`% Change in park visitation (<span style=\"color: #333;font-weight: normal\">${previousYear}<\/span> - <span style=\"color: #333;font-weight: normal\">${year}<\/span>)`<\/span>;\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> colorScheme = colorSchemes.getSchemeByName({\r\n  geometryType: layer.geometryType,\r\n  name: <span style=\"color: #d14\">\"Green and Brown 1\"<\/span>,\r\n  theme: <span style=\"color: #d14\">\"above-and-below\"<\/span>\r\n});\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> params = {\r\n  layer,\r\n  view: mainView,\r\n  theme: <span style=\"color: #d14\">\"above-and-below\"<\/span>,\r\n  valueExpression,\r\n  valueExpressionTitle,\r\n  minValue: -<span style=\"color: #008080\">500000<\/span>,\r\n  maxValue: <span style=\"color: #008080\">500000<\/span>,\r\n  defaultSymbolEnabled: <span style=\"color: #333;font-weight: 500\">false<\/span>,\r\n  colorOptions: {\r\n    colorScheme,\r\n    isContinuous: <span style=\"color: #333;font-weight: 500\">false<\/span>,\r\n  },\r\n  symbolOptions: {\r\n    symbolStyle: <span style=\"color: #d14\">\"circle-arrow\"<\/span>\r\n  }\r\n};\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> { renderer } = <span style=\"color: #333;font-weight: bold\">await<\/span> univariateRendererCreator.createContinuousRenderer(params);\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> sizeVariable = renderer.visualVariables.filter( vv =&gt; vv.type === <span style=\"color: #d14\">\"size\"<\/span>)[<span style=\"color: #008080\">0<\/span>];\r\n\r\n<span style=\"color: #998;font-style: italic\">\/\/ increase size of smaller icons for better visibility<\/span>\r\nsizeVariable.stops = [\r\n  { value: -<span style=\"color: #008080\">500000<\/span>, size: <span style=\"color: #008080\">40<\/span> },\r\n  { value: -<span style=\"color: #008080\">250000<\/span>, size: <span style=\"color: #008080\">24<\/span> },\r\n  { value: <span style=\"color: #008080\">0<\/span>, size: <span style=\"color: #008080\">12<\/span> },\r\n  { value: <span style=\"color: #008080\">250000<\/span>, size: <span style=\"color: #008080\">24<\/span> },\r\n  { value: <span style=\"color: #008080\">500000<\/span>, size: <span style=\"color: #008080\">40<\/span> }\r\n]\r\n\r\n<span style=\"color: #998;font-style: italic\">\/\/ Round the min and max numbers for a clean legend<\/span>\r\nrenderer.authoringInfo.statistics = {\r\n  min: -<span style=\"color: #008080\">500000<\/span>,\r\n  max: <span style=\"color: #008080\">500000<\/span>\r\n};\r\n\r\nlayer.renderer = renderer;\r\n<\/code><\/pre>\n<\/details>\n<p><em>Click image to view larger version of the map<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1128372,"id":1128372,"title":"total-change-arrows","filename":"total-change-arrows.png","filesize":119209,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change-arrows.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/total-change-arrows","alt":"Total change in visits to national parks 2013-2014. Great Smoky Mountains National Park had a much higher increase in visits that year than Channel Islands National Park.","author":"6561","description":"","caption":"Total change in visits to national parks 2013-2014. Great Smoky Mountains National Park had a much higher increase in visits that year than Channel Islands National Park.","name":"total-change-arrows","status":"inherit","uploaded_to":1128282,"date":"2021-01-30 02:06:54","modified":"2021-02-02 00:12:59","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":1497,"height":727,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change-arrows-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change-arrows.png","medium-width":464,"medium-height":225,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change-arrows.png","medium_large-width":768,"medium_large-height":373,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change-arrows.png","large-width":1497,"large-height":727,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change-arrows.png","1536x1536-width":1497,"1536x1536-height":727,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change-arrows.png","2048x2048-width":1497,"2048x2048-height":727,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change-arrows-826x401.png","card_image-width":826,"card_image-height":401,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change-arrows.png","wide_image-width":1497,"wide_image-height":727}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/total-change-arrows.png"},{"acf_fc_layout":"content","content":"<p><a href=\"https:\/\/ekenes.github.io\/national-parks\/apps\/2-total-change.html\"><strong>View live app<\/strong><\/a><\/p>\n<h3>Percent change<\/h3>\n<p><strong>Percent change<\/strong> normalizes the change from the previous year by the previous year\u2019s total. This is an effective way to indicate how abnormal or drastic an increase or decrease in visits was for each individual park within the context of itself. <\/p>\n<p>It is characterized by the following Arcade expression.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\">(($feature.F${year} - $feature.F${previousYear}) \/ $feature.F${previousYear}) * <span style=\"color: #008080\">100<\/span>\r\n<\/code><\/pre>\n<p>In creating the renderer, I set the min and max bounds of the data to -100 and 100. A 100 percent change indicates park visitation doubled from the previous year. A -100 percent change indicates park visits dropped down to zero.<\/p>\n<details>\n<summary>Click to expand code snippet<\/summary>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">const<\/span> year = <span style=\"color: #008080\">2014<\/span>;\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> previousYear = year - <span style=\"color: #008080\">1<\/span>;\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> valueExpression = <span style=\"color: #d14\">`(($feature.F<span style=\"color: #333;font-weight: normal\">${year}<\/span> - $feature.F<span style=\"color: #333;font-weight: normal\">${previousYear}<\/span>) \/ $feature.F<span style=\"color: #333;font-weight: normal\">${previousYear}<\/span>) * 100`<\/span>;\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> valueExpressionTitle = <span style=\"color: #d14\">`% Change in park visitation (<span style=\"color: #333;font-weight: normal\">${year}<\/span> - <span style=\"color: #333;font-weight: normal\">${previousYear}<\/span>)`<\/span>;\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> colorScheme = colorSchemes.getSchemeByName({\r\n  geometryType: layer.geometryType,\r\n  name: <span style=\"color: #d14\">\"Green and Brown 1\"<\/span>,\r\n  theme: <span style=\"color: #d14\">\"above-and-below\"<\/span>\r\n});\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> params = {\r\n  layer,\r\n  view: mainView,\r\n  theme: <span style=\"color: #d14\">\"above-and-below\"<\/span>,\r\n  valueExpression,\r\n  valueExpressionTitle,\r\n  minValue: -<span style=\"color: #008080\">200<\/span>,\r\n  maxValue: <span style=\"color: #008080\">200<\/span>,\r\n  defaultSymbolEnabled: <span style=\"color: #333;font-weight: 500\">false<\/span>,\r\n  colorOptions: {\r\n    colorScheme,\r\n    isContinuous: <span style=\"color: #333;font-weight: 500\">false<\/span>,\r\n  },\r\n  symbolOptions: {\r\n    symbolStyle: <span style=\"color: #d14\">\"circle-arrow\"<\/span>\r\n  }\r\n};\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> { renderer } = <span style=\"color: #333;font-weight: bold\">await<\/span> univariateRendererCreator.createContinuousRenderer(params);\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> sizeVariable = renderer.visualVariables.filter( vv =&gt; vv.type === <span style=\"color: #d14\">\"size\"<\/span>)[<span style=\"color: #008080\">0<\/span>];\r\nsizeVariable.stops = [\r\n  { value: -<span style=\"color: #008080\">100<\/span>, size: <span style=\"color: #008080\">40<\/span> },\r\n  { value: -<span style=\"color: #008080\">50<\/span>, size: <span style=\"color: #008080\">24<\/span> },\r\n  { value: <span style=\"color: #008080\">0<\/span>, size: <span style=\"color: #008080\">12<\/span> },\r\n  { value: <span style=\"color: #008080\">50<\/span>, size: <span style=\"color: #008080\">24<\/span> },\r\n  { value: <span style=\"color: #008080\">100<\/span>, size: <span style=\"color: #008080\">40<\/span> }\r\n]\r\n\r\nrenderer.authoringInfo.statistics = {\r\n  min: -<span style=\"color: #008080\">100<\/span>,\r\n  max: <span style=\"color: #008080\">100<\/span>\r\n};\r\nlayer.renderer = renderer;\r\n<\/code><\/pre>\n<\/details>\n<p><em>Click image to view larger version of the map<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1128332,"id":1128332,"title":"percent-change","filename":"percent-change.png","filesize":113634,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/percent-change","alt":"Percent change in national park visits 2013-2014.","author":"6561","description":"","caption":"Percent change in national park visits 2013-2014.","name":"percent-change","status":"inherit","uploaded_to":1128282,"date":"2021-01-30 02:06:18","modified":"2021-02-02 00:19: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":1489,"height":726,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change.png","medium-width":464,"medium-height":226,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change.png","medium_large-width":768,"medium_large-height":374,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change.png","large-width":1489,"large-height":726,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change.png","1536x1536-width":1489,"1536x1536-height":726,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change.png","2048x2048-width":1489,"2048x2048-height":726,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change-826x403.png","card_image-width":826,"card_image-height":403,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change.png","wide_image-width":1489,"wide_image-height":726}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change.png"},{"acf_fc_layout":"content","content":"<p><a href=\"https:\/\/ekenes.github.io\/national-parks\/apps\/1-percent-change.html\"><strong>View live app<\/strong><\/a><\/p>\n<p>Now compare Channel Islands National Park with Great Smoky Mountains National Park in this map. While Channel Islands National Park had a smaller total increase in visitors (+130,132) than Great Smoky Mountains National Park (+744,581) in 2014, the increase was more drastic compared to the previous year&#8217;s total.<\/p>\n<p><em>Click image to view larger version of the map<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1128342,"id":1128342,"title":"percent-change-arrows","filename":"percent-change-arrows.png","filesize":116125,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change-arrows.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/percent-change-arrows","alt":"Percent change in visits to national parks 2013-2014. Channel Islands National Park has a more significant increase in visitors (+61.4%) than Great Smoky Mountains National Park (+8.0%) even though the total increase for Channel Islands (+130,132) was smaller than the total increase for Great Smoky Mountains (+744,581).","author":"6561","description":"","caption":"Percent change in visits to national parks 2013-2014. Channel Islands National Park had a more significant increase in visitors (+61.4%) than Great Smoky Mountains National Park (+8.0%) in 2014 even though the total increase for Channel Islands (+130,132) was smaller than the total increase for Great Smoky Mountains (+744,581).","name":"percent-change-arrows","status":"inherit","uploaded_to":1128282,"date":"2021-01-30 02:06:26","modified":"2021-02-02 01:12:15","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":1489,"height":726,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change-arrows-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change-arrows.png","medium-width":464,"medium-height":226,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change-arrows.png","medium_large-width":768,"medium_large-height":374,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change-arrows.png","large-width":1489,"large-height":726,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change-arrows.png","1536x1536-width":1489,"1536x1536-height":726,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change-arrows.png","2048x2048-width":1489,"2048x2048-height":726,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change-arrows-826x403.png","card_image-width":826,"card_image-height":403,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change-arrows.png","wide_image-width":1489,"wide_image-height":726}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/percent-change-arrows.png"},{"acf_fc_layout":"content","content":"<p><a href=\"https:\/\/ekenes.github.io\/national-parks\/apps\/1-percent-change.html\"><strong>View live app<\/strong><\/a><\/p>\n<h3>Bivariate color and size<\/h3>\n<p>Up to this point, the examples in this post showed how <code>above-and-below<\/code> color and size themes work together to effectively visualize a diverging data variable as a univariate (single variable) style.<\/p>\n<p>When done carefully, you can map two variables simultaneously, and mix up the themes. In the following example, I use a <code>high-to-low<\/code> size theme to visualize the total number of visits a park received for the selected year. I add an <code>above-and-below<\/code> color variable to communicate if (and how much) that number increased or decreased from the previous year. <\/p>\n<details>\n<summary>Click to expand code snippet<\/summary>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span><span style=\"color: #333;font-weight: bold\">function<\/span> <span style=\"color: #900;font-weight: bold\">createRenderer<\/span>(<span>year<\/span>) <\/span>{\r\n  <span style=\"color: #333;font-weight: bold\">const<\/span> colors = [ <span style=\"color: #d14\">\"#a6611a\"<\/span>, <span style=\"color: #d14\">\"#dfc27d\"<\/span>, <span style=\"color: #d14\">\"#f0f0f0\"<\/span>, <span style=\"color: #d14\">\"#80cdc1\"<\/span>, <span style=\"color: #d14\">\"#018571\"<\/span> ];\r\n\r\n  <span style=\"color: #333;font-weight: bold\">const<\/span> symbol = <span style=\"color: #333;font-weight: bold\">new<\/span> CIMSymbol({\r\n    data: cimReference\r\n  })\r\n\r\n  <span style=\"color: #333;font-weight: bold\">return<\/span> {\r\n    type: <span style=\"color: #d14\">\"class-breaks\"<\/span>,\r\n    field: <span style=\"color: #d14\">`F<span style=\"color: #333;font-weight: normal\">${year}<\/span>`<\/span>,\r\n    classBreakInfos: [\r\n      {\r\n        minValue: -<span style=\"color: #008080\">9007199254740991<\/span>,\r\n        maxValue: <span style=\"color: #008080\">9007199254740991<\/span>,\r\n        symbol\r\n      }\r\n    ],\r\n    visualVariables: [\r\n      {\r\n        type: <span style=\"color: #d14\">\"size\"<\/span>,\r\n        field: <span style=\"color: #d14\">`F<span style=\"color: #333;font-weight: normal\">${year}<\/span>`<\/span>,\r\n        legendOptions: {\r\n          title: <span style=\"color: #d14\">`Total park visits in <span style=\"color: #333;font-weight: normal\">${year}<\/span>`<\/span>\r\n        },\r\n        stops: [\r\n          { value: <span style=\"color: #008080\">100000<\/span>, size: <span style=\"color: #d14\">\"14px\"<\/span> },\r\n          { value: <span style=\"color: #008080\">1000000<\/span>, size: <span style=\"color: #d14\">\"25px\"<\/span> },\r\n          { value: <span style=\"color: #008080\">4000000<\/span>, size: <span style=\"color: #d14\">\"40px\"<\/span> },\r\n          { value: <span style=\"color: #008080\">10000000<\/span>, size: <span style=\"color: #d14\">\"60px\"<\/span> }\r\n        ]\r\n      }, {\r\n        type: <span style=\"color: #d14\">\"color\"<\/span>,\r\n        valueExpression: <span style=\"color: #d14\">`\r\n          var current = DefaultValue($feature.F<span style=\"color: #333;font-weight: normal\">${year}<\/span>, 1);\r\n          var previous = 0;\r\n          if(<span style=\"color: #333;font-weight: normal\">${year}<\/span> &gt; 1905){\r\n            previous = DefaultValue($feature.F<span style=\"color: #333;font-weight: normal\">${year - 1}<\/span>, 1)\r\n          }\r\n          var val = ((current - previous) \/ previous) * 100;\r\n          return val;\r\n        `<\/span>,\r\n        valueExpressionTitle: <span style=\"color: #d14\">\"% Change from previous year\"<\/span>,\r\n        stops: [\r\n          { value: -<span style=\"color: #008080\">10<\/span>, color: colors[<span style=\"color: #008080\">0<\/span>], label: <span style=\"color: #d14\">\"Fewer visits\"<\/span> },\r\n          { value: -<span style=\"color: #008080\">0.1<\/span>, color: colors[<span style=\"color: #008080\">1<\/span>] },\r\n          { value: <span style=\"color: #008080\">0<\/span>, color: colors[<span style=\"color: #008080\">2<\/span>], label: <span style=\"color: #d14\">\"No change\"<\/span> },\r\n          { value: <span style=\"color: #008080\">0.1<\/span>, color: colors[<span style=\"color: #008080\">3<\/span>] },\r\n          { value: <span style=\"color: #008080\">10<\/span>, color: colors[<span style=\"color: #008080\">4<\/span>], label: <span style=\"color: #d14\">\"More visits\"<\/span> }\r\n        ]\r\n      }\r\n    ]\r\n  };\r\n}\r\n<\/code><\/pre>\n<\/details>\n<p><em>Click image to view larger version of the map<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1131932,"id":1131932,"title":"Screen Shot 2021-02-02 at 11.03.23 PM","filename":"Screen-Shot-2021-02-02-at-11.03.23-PM.png","filesize":105630,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.23-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/screen-shot-2021-02-02-at-11-03-23-pm","alt":"Change in visits to national parks in 2019. Size indicates the total number of visitors for the year. Color indicates whether that number increased or decreased from the previous year.","author":"6561","description":"","caption":"Change in visits to national parks in 2019. Size indicates the total number of visitors for the year. Color indicates whether that number increased or decreased from the previous year.","name":"screen-shot-2021-02-02-at-11-03-23-pm","status":"inherit","uploaded_to":1128282,"date":"2021-02-03 07:04:56","modified":"2021-02-03 07:05:15","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":1456,"height":716,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.23-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.23-PM.png","medium-width":464,"medium-height":228,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.23-PM.png","medium_large-width":768,"medium_large-height":378,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.23-PM.png","large-width":1456,"large-height":716,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.23-PM.png","1536x1536-width":1456,"1536x1536-height":716,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.23-PM.png","2048x2048-width":1456,"2048x2048-height":716,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.23-PM-826x406.png","card_image-width":826,"card_image-height":406,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.23-PM.png","wide_image-width":1456,"wide_image-height":716}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.23-PM.png"},{"acf_fc_layout":"content","content":"<p><a href=\"https:\/\/ekenes.github.io\/national-parks\/apps\/4-visits-with-change.html\"><strong>View live app<\/strong><\/a><\/p>\n<p>In this example, size is no longer used to show an above and below pattern. It only reveals how many visitors each park had for the given year. The color variable conveys the above and below pattern. The saturation of the color communicates the percent change from the previous year. Parks with dark brown colors saw a significant decrease in visits, while parks with dark green colors had a significant increase in visits.<\/p>\n<p>The user can deduce the magnitude of the change relative to the total number of visits based on both of these variables. For example, in the following map of park visits in 2013, Great Smoky Mountains saw a moderate decrease in visitors, but was still the most visited park of the year. <\/p>\n<p><em>Click image to view larger version of the map<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1131942,"id":1131942,"title":"Screen Shot 2021-02-02 at 11.03.47 PM","filename":"Screen-Shot-2021-02-02-at-11.03.47-PM.png","filesize":105971,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.47-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\/screen-shot-2021-02-02-at-11-03-47-pm","alt":"Total visits to national parks decreased in 2013. Size indicates the total number of visitors. Color indicates whether that number increased or decreased from the previous year.","author":"6561","description":"","caption":"Total visits to national parks decreased in 2013. Size indicates the total number of visitors. Color indicates whether that number increased or decreased from the previous year.","name":"screen-shot-2021-02-02-at-11-03-47-pm","status":"inherit","uploaded_to":1128282,"date":"2021-02-03 07:05:36","modified":"2021-02-03 07:05:48","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":1457,"height":720,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.47-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.47-PM.png","medium-width":464,"medium-height":229,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.47-PM.png","medium_large-width":768,"medium_large-height":380,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.47-PM.png","large-width":1457,"large-height":720,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.47-PM.png","1536x1536-width":1457,"1536x1536-height":720,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.47-PM.png","2048x2048-width":1457,"2048x2048-height":720,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.47-PM-826x408.png","card_image-width":826,"card_image-height":408,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.47-PM.png","wide_image-width":1457,"wide_image-height":720}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/Screen-Shot-2021-02-02-at-11.03.47-PM.png"},{"acf_fc_layout":"content","content":"<p><a href=\"https:\/\/ekenes.github.io\/national-parks\/apps\/4-visits-with-change.html\"><strong>View live app<\/strong><\/a><\/p>\n<h2>Conclusion<\/h2>\n<p>Size themes allow you to visualize above and below patterns effectively with size in a single layer. A symbol\u2019s size can powerfully communicate the magnitude of a numeric variable unit-for-unit compared with all other data points in a layer. You can also use it to effectively communicate rates  to indicate how significant a value is for each individual feature.<\/p>\n<p>You don&#8217;t have to be a developer to take advantage of size themes. Each theme was recently installed in <a href=\"https:\/\/www.arcgis.com\/apps\/mapviewer\/index.html\">Map Viewer beta<\/a>. Be sure to check out <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/size-maps-turbocharged\/\">this post<\/a>, which demonstrates how to make maps with these themes in just a few clicks.<\/p>\n<p>I\u2019m excited to see the maps you make with these themes. Give them a try and share your maps! If you have any ideas for improvement, don\u2019t hesitate to reach out.<\/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":[{"ID":1089881,"post_author":"6331","post_date":"2020-12-17 11:00:24","post_date_gmt":"2020-12-17 19:00:24","post_content":"","post_title":"Size maps get turbocharged in Map Viewer","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"size-maps-turbocharged","to_ping":"","pinged":"","post_modified":"2021-12-01 11:20:30","post_modified_gmt":"2021-12-01 19:20:30","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1089881","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":1114891,"post_author":"6561","post_date":"2021-01-20 08:00:14","post_date_gmt":"2021-01-20 16:00:14","post_content":"","post_title":"Electoral swing in the 2020 U.S. presidential election","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"electoral-swing-in-the-2020-u-s-presidential-election","to_ping":"","pinged":"","post_modified":"2021-01-19 17:21:10","post_modified_gmt":"2021-01-20 01:21:10","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1114891","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":1024331,"post_author":"6561","post_date":"2020-10-05 09:00:07","post_date_gmt":"2020-10-05 16:00:07","post_content":"","post_title":"Visualize electoral swing using composite symbols","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"visualize-electoral-swing-using-composite-symbols","to_ping":"","pinged":"","post_modified":"2020-10-02 17:35:07","post_modified_gmt":"2020-10-03 00:35:07","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1024331","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/card-1.jpg","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/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>Visualize diverging datasets with size in web maps<\/title>\n<meta name=\"description\" content=\"Visualize change over time in web mapping applications using the above-and-below diverging size theme.\" \/>\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\/visualize-diverging-datasets-with-size-in-web-maps\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visualize diverging datasets with size in web maps\" \/>\n<meta property=\"og:description\" content=\"Visualize change over time using the above-and-below diverging size theme.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2021\/02\/card-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"826\" \/>\n\t<meta property=\"og:image:height\" content=\"465\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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\/visualize-diverging-datasets-with-size-in-web-maps#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Visualize diverging datasets with size in web maps\",\"datePublished\":\"2021-02-03T17:00:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\"},\"wordCount\":8,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"proportional symbols\",\"renderers\",\"size\",\"smart mapping\"],\"articleSection\":[\"Developers\",\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\",\"name\":\"Visualize diverging datasets with size in web maps\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2021-02-03T17:00:41+00:00\",\"description\":\"Visualize change over time in web mapping applications using the above-and-below diverging size theme.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visualize diverging datasets with size in web maps\"}]},{\"@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":"Visualize diverging datasets with size in web maps","description":"Visualize change over time in web mapping applications using the above-and-below diverging size theme.","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\/visualize-diverging-datasets-with-size-in-web-maps","og_locale":"en_US","og_type":"article","og_title":"Visualize diverging datasets with size in web maps","og_description":"Visualize change over time using the above-and-below diverging size theme.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","og_image":[{"width":826,"height":465,"url":"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2021\/02\/card-1.jpg","type":"image\/jpeg"}],"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\/visualize-diverging-datasets-with-size-in-web-maps#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Visualize diverging datasets with size in web maps","datePublished":"2021-02-03T17:00:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps"},"wordCount":8,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["proportional symbols","renderers","size","smart mapping"],"articleSection":["Developers","Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps","name":"Visualize diverging datasets with size in web maps","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2021-02-03T17:00:41+00:00","description":"Visualize change over time in web mapping applications using the above-and-below diverging size theme.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-diverging-datasets-with-size-in-web-maps#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Visualize diverging datasets with size in web maps"}]},{"@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":"February 3, 2021","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/banner.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":756562,"name":"proportional symbols","slug":"proportional-symbols","term_group":0,"term_taxonomy_id":756562,"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":756582,"name":"size","slug":"size","term_group":0,"term_taxonomy_id":756582,"taxonomy":"post_tag","description":"","parent":0,"count":2,"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":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":422,"filter":"raw"},{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2690,"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":362,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":763,"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\/1128282","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=1128282"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1128282\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1128282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1128282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1128282"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1128282"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1128282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}