{"id":1788612,"date":"2022-12-13T09:55:36","date_gmt":"2022-12-13T17:55:36","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1788612"},"modified":"2024-08-05T16:06:34","modified_gmt":"2024-08-05T23:06:34","slug":"density-mapping-with-binning-and-wurman-dots","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots","title":{"rendered":"Map density using reference size theme for binning"},"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":[25361,26751,30111,35751],"industry":[],"product":[761642,36831,36601],"class_list":["post-1788612","blog","type-blog","status-publish","format-standard","hentry","category-developers","category-mapping","tag-binning","tag-clustering","tag-data-visualization","tag-dot-density","product-platform","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Thanks to binning, creating a reference size visualization is more accessible than ever before.","flexible_content":[{"acf_fc_layout":"sidebar","content":"<p>This post was formerly titled <em>Density mapping with binning and Wurman dots<\/em>. At Esri, we formerly called the theme described in this post as &#8220;Wurman dots&#8221; because Richard Saul Wurman championed the concept as a style for mapping population density. Now this is a <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/reference-size-maps\/\">size theme named &#8220;reference size&#8221;<\/a> in ArcGIS Online&#8217;s Map Viewer.<\/p>\n","image_reference":false,"layout":"standard","image_reference_figure":"","snippet":"","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":"<p>More than 50 years ago, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Richard_Saul_Wurman\">Richard Saul Wurman<\/a> introduced an innovative cartographic style for visualizing population density. He and his graduate students described the symbology as &#8220;spots and dots&#8221;. At Esri, we consider this a theme named <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/reference-size-maps\/\"><em>reference size<\/em><\/a> within our existing size style. This theme is defined by a grid of evenly-sized circular cells that are proportionally filled based on a numeric value, such as population.<\/p>\n"},{"acf_fc_layout":"content","content":"<p>The map below from 1967 is one example of how Wurman used this style to visualize population density.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":634532,"id":634532,"title":"","filename":"OriginalWurmanDotsFromBook.png","filesize":283443,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/OriginalWurmanDotsFromBook.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/reference-size-maps-bringing-back-the-60s\/originalwurmandotsfrombook","alt":"Wurman Dots from Urban Atlas book","author":"6751","description":"","caption":"This map from the book Urban Atlas displays population density at the city scale.","name":"originalwurmandotsfrombook","status":"inherit","uploaded_to":634052,"date":"2019-10-11 03:12:22","modified":"2019-10-11 20:47:55","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":800,"height":394,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/OriginalWurmanDotsFromBook-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/OriginalWurmanDotsFromBook.png","medium-width":464,"medium-height":229,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/OriginalWurmanDotsFromBook.png","medium_large-width":768,"medium_large-height":378,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/OriginalWurmanDotsFromBook.png","large-width":800,"large-height":394,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/OriginalWurmanDotsFromBook.png","1536x1536-width":800,"1536x1536-height":394,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/OriginalWurmanDotsFromBook.png","2048x2048-width":800,"2048x2048-height":394,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/OriginalWurmanDotsFromBook.png","card_image-width":800,"card_image-height":394,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/OriginalWurmanDotsFromBook.png","wide_image-width":800,"wide_image-height":394}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/OriginalWurmanDotsFromBook.png"},{"acf_fc_layout":"content","content":"<p>While this is an effective way to visualize density, it is not commonly used, probably because it has been historically difficult to create. However, the recent introduction of client-side binning in the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/\">ArcGIS Maps SDK for JavaScript<\/a> (ArcGIS JS SDK) makes it easier to create this style for point layers <strong>without data preprocessing.<\/strong><\/p>\n<h2>How the reference size theme works<\/h2>\n<p>The reference size symbol visualizes a single cell in a geographic grid. Each symbol is composed of two parts: an outside ring of fixed size, and an inner circle (or dot) whose size varies dynamically based on a data variable.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1788952,"id":1788952,"title":"legend-percent","filename":"legend-percent.png","filesize":30939,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/legend-percent.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\/legend-percent","alt":"An example of a legend for reference size symbols.","author":"6561","description":"","caption":"Reference size symbols are composed of two parts: an outer ring that indicates a maximum data value, and an inner dot that is sized proportionally based on a data value.","name":"legend-percent","status":"inherit","uploaded_to":1788612,"date":"2022-12-07 22:11:37","modified":"2024-08-05 19:30: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":458,"height":448,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/legend-percent-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/legend-percent.png","medium-width":267,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/legend-percent.png","medium_large-width":458,"medium_large-height":448,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/legend-percent.png","large-width":458,"large-height":448,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/legend-percent.png","1536x1536-width":458,"1536x1536-height":448,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/legend-percent.png","2048x2048-width":458,"2048x2048-height":448,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/legend-percent.png","card_image-width":458,"card_image-height":448,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/legend-percent.png","wide_image-width":458,"wide_image-height":448}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>This theme works well for a few of reasons:<\/p>\n<ul>\n<li>The outer ring creates a boundary or limit that communicates the absolute data maximum. This is effective for visualizing percentages and bounded totals, which also means&#8230;<\/li>\n<li>Symbols can&#8217;t overlap, making the data easier to comprehend.<\/li>\n<li>This technique clearly distinguishes between 0% (single outer ring only) and no data (no ring whatsoever)<\/li>\n<\/ul>\n"},{"acf_fc_layout":"image","image":{"ID":1790112,"id":1790112,"title":"dallas-wurman","filename":"dallas-wurman.png","filesize":876558,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-wurman.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\/dallas-wurman","alt":"Population density of Dallas, Texas visualized with the reference size theme. This is a great way to visualize density at small scales where the data would otherwise significantly overlap.","author":"6561","description":"","caption":"Population density of Dallas, Texas visualized with the reference size theme. This is a great way to visualize density at small scales where the data would otherwise significantly overlap.","name":"dallas-wurman","status":"inherit","uploaded_to":1788612,"date":"2022-12-08 18:59:18","modified":"2024-08-05 19:31:35","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":1269,"height":797,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-wurman-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-wurman.png","medium-width":416,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-wurman.png","medium_large-width":768,"medium_large-height":482,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-wurman.png","large-width":1269,"large-height":797,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-wurman.png","1536x1536-width":1269,"1536x1536-height":797,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-wurman.png","2048x2048-width":1269,"2048x2048-height":797,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-wurman-740x465.png","card_image-width":740,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-wurman.png","wide_image-width":1269,"wide_image-height":797}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/wurman\/population-wurman-density.html"},{"acf_fc_layout":"content","content":"<p>The drawback to the reference size theme is that it isn&#8217;t ideal for visualizing proportions and outliers. For example, the map below is better at showing blocks in Dallas with a significantly higher population than most. Sometimes, the outliers are the focus and story of a map.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1790102,"id":1790102,"title":"dallas-proportional-symbols","filename":"dallas-proportional-symbols.png","filesize":1238633,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proportional-symbols.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\/dallas-proportional-symbols","alt":"The population of Dallas, Texas using a proportional symbol map at the Census block level. This provides a more detailed representation of where people actually live. The proportional symbols also clarify where more people live with a finer degree of detail.","author":"6561","description":"","caption":"The population of Dallas, Texas using a proportional symbol map at the Census block level. This provides a more detailed representation of where people actually live. The proportional symbols also clarify where more people live with a finer degree of detail.","name":"dallas-proportional-symbols","status":"inherit","uploaded_to":1788612,"date":"2022-12-08 18:59:09","modified":"2022-12-08 19:02:56","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1426,"height":884,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proportional-symbols-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proportional-symbols.png","medium-width":421,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proportional-symbols.png","medium_large-width":768,"medium_large-height":476,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proportional-symbols.png","large-width":1426,"large-height":884,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proportional-symbols.png","1536x1536-width":1426,"1536x1536-height":884,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proportional-symbols.png","2048x2048-width":1426,"2048x2048-height":884,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proportional-symbols-750x465.png","card_image-width":750,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proportional-symbols.png","wide_image-width":1426,"wide_image-height":884}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/wurman\/population-proportional-symbols.html"},{"acf_fc_layout":"content","content":"<p>However, proportional symbols with dense datasets only work well in a narrow visible scale range. Zooming out just a couple of levels causes symbols to overlap, making the map too cluttered.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1790122,"id":1790122,"title":"dallas-proprotional-bad","filename":"dallas-proprotional-bad.png","filesize":1326964,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proprotional-bad.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\/dallas-proprotional-bad","alt":"Visualizing dense datasets with proportional symbols works well within a reasonable scale range even when scale-dependent symbols are used.","author":"6561","description":"","caption":"Visualizing dense datasets with proportional symbols only works well within a reasonable scale range even when scale-dependent symbols are used. At this scale, this map becomes too difficult to interpret.","name":"dallas-proprotional-bad","status":"inherit","uploaded_to":1788612,"date":"2022-12-08 19:00:13","modified":"2022-12-08 20:26: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":1258,"height":867,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proprotional-bad-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proprotional-bad.png","medium-width":379,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proprotional-bad.png","medium_large-width":768,"medium_large-height":529,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proprotional-bad.png","large-width":1258,"large-height":867,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proprotional-bad.png","1536x1536-width":1258,"1536x1536-height":867,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proprotional-bad.png","2048x2048-width":1258,"2048x2048-height":867,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proprotional-bad-675x465.png","card_image-width":675,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/dallas-proprotional-bad.png","wide_image-width":1258,"wide_image-height":867}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>That&#8217;s why aggregation techniques like binning are important. Binning with the reference size theme applied helps users digest detailed, dense datasets at small map scales (when zoomed out). The visualization technique you choose depends largely on the <em>density<\/em> of your data and the <em>scale<\/em> at which you view it.<\/p>\n<h2>Reference size can work together with proportional symbols<\/h2>\n<p>So which technique is better? Reference size or proportional symbols?<\/p>\n<p>This animation shows how the web allows you to leverage the best of both worlds. The reference size theme is used in the binning renderer to summarize density at small scales. Proportional symbols visualize individual points at large scales.<\/p>\n<p>All valid scales are considered.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1790192,"id":1790192,"title":"zoom-gif","filename":"zoom-gif.gif","filesize":2525235,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoom-gif.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\/zoom-gif","alt":"Proprotional symbols or Wurman dots? This animation shows how the web allows you to leverage the best of both worlds.","author":"6561","description":"","caption":"","name":"zoom-gif","status":"inherit","uploaded_to":1788612,"date":"2022-12-08 19:11:22","modified":"2022-12-09 20:01:32","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":800,"height":450,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoom-gif-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoom-gif.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoom-gif.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoom-gif.gif","large-width":800,"large-height":450,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoom-gif.gif","1536x1536-width":800,"1536x1536-height":450,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoom-gif.gif","2048x2048-width":800,"2048x2048-height":450,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoom-gif.gif","card_image-width":800,"card_image-height":450,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoom-gif.gif","wide_image-width":800,"wide_image-height":450}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/wurman\/population-wurman-density-scale-threshold.html"},{"acf_fc_layout":"content","content":"<h2>Why binning improves the experience for creating reference size visualizations<\/h2>\n<p>A few years ago, Jennifer Bell demonstrated how you can create this style using a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-CIMSymbol.html\">CIM symbol<\/a> in the ArcGIS JS API. <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/wurman-dots-bringing-back-the-60s\/\">Her article<\/a> describes how you can create a spatial grid using the <a href=\"https:\/\/doc.arcgis.com\/en\/arcgis-online\/analyze\/generate-tessellations.htm\">Generate Tesselations<\/a> tool in ArcGIS Online to create a grid of evenly-spaced polygons. You then <a href=\"https:\/\/doc.arcgis.com\/en\/arcgis-online\/analyze\/enrich-layer.htm\">enrich<\/a> the grid with the data you wish to map. That process is still valid, and I encourage you to check out the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-sm-reference-size\/\">Create a reference size visualization JS SDK sample<\/a>.<\/p>\n<p>While the ArcGIS Online analysis tools are a great way to create an enriched spatial grid, they can be time-consuming to run. They also return new layers that are disconnected from the underlying point data. This step alone can be a barrier to anyone wanting to try a reference size visualization.<\/p>\n<p><strong><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/binning-now-available-in-the-arcgis-api-for-javascript\/\">Client-side binning<\/a> in the ArcGIS JS SDK and ArcGIS Online removes the necessity to preprocess data.<\/strong> If you have a point layer you\u2019d like to visualize as a density, then you can create a polygon grid without having to create a new layer or feature service.<\/p>\n"},{"acf_fc_layout":"content","content":"<h2>How to create a reference size visualization for binning<\/h2>\n<p>A reference size visualization is created in three phases:<\/p>\n<ol>\n<li>Enable binning<\/li>\n<li>Create a reference size symbol<\/li>\n<li>Write Arcade expressions to control the sizes of the reference size symbol layers<\/li>\n<\/ol>\n<h3>1. Enable binning<\/h3>\n<p>First, <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurereduction-binning\/\">enable binning<\/a> on your point layer and assign it a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-SimpleRenderer.html\">simple renderer<\/a> so you can see the grid. At a minimum, you should set a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionBinning.html#fixedBinLevel\">fixedBinLevel<\/a>, appropriate for the scale at which you would like to summarize the data, and define an <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionBinning.html#fields\">aggregate field<\/a> that returns the count or number of points contained by the bin. The article <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/binning-now-available-in-the-arcgis-api-for-javascript\/\">Binning now available in the ArcGIS API for JavaScript<\/a> introduces binning in the ArcGIS JS API and the various options you can control in a binning visualization.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">const<\/span> featureReduction = {\r\n  type: <span style=\"color: #d14\">\"binning\"<\/span>,\r\n  fixedBinLevel: <span style=\"color: #008080\">6<\/span>,\r\n  fields: [\r\n    <span style=\"color: #333;font-weight: bold\">new<\/span> AggregateField({\r\n      name: <span style=\"color: #d14\">\"aggregateCount\"<\/span>,\r\n      statisticType: <span style=\"color: #d14\">\"count\"<\/span>\r\n    })\r\n  ],\r\n  <span style=\"color: #998;font-style: italic\">\/\/ renderer creating the reference size theme<\/span>\r\n  <span style=\"color: #998;font-style: italic\">\/\/ will eventually be defined here<\/span>\r\n  renderer: {\r\n    type: <span style=\"color: #d14\">\"simple\"<\/span>,\r\n    symbol: {\r\n      type: <span style=\"color: #d14\">\"simple-fill\"<\/span>\r\n    }\r\n  }\r\n};\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":1789122,"id":1789122,"title":"binning-basic","filename":"binning-basic.png","filesize":851920,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-basic.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\/binning-basic-2","alt":"Motor vehicle accidents in New York City (2020) binned at a city scale.","author":"6561","description":"","caption":"Motor vehicle accidents in New York City (2020) binned at a city scale. A simple renderer without any visual variables doesn't clearly communicate point density, but allows you to quickly try various bin levels when deciding the best resolution for your data.","name":"binning-basic-2","status":"inherit","uploaded_to":1788612,"date":"2022-12-07 22:34:24","modified":"2022-12-08 20:33:07","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":1321,"height":718,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-basic-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-basic.png","medium-width":464,"medium-height":252,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-basic.png","medium_large-width":768,"medium_large-height":417,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-basic.png","large-width":1321,"large-height":718,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-basic.png","1536x1536-width":1321,"1536x1536-height":718,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-basic.png","2048x2048-width":1321,"2048x2048-height":718,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-basic-826x449.png","card_image-width":826,"card_image-height":449,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-basic.png","wide_image-width":1321,"wide_image-height":718}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/wurman\/crashes-wurman-binning-basic.html"},{"acf_fc_layout":"content","content":"<h3>2. Create a reference size symbol<\/h3>\n<p>A reference size symbol consists of two symbol layers: a hollow outer ring (not an outline) and an inner dot. We must define this symbol using a CIMSymbol. CIM allows us to define complex symbols with multiple layers, whose properties can be overridden using data values.<\/p>\n<p>I won\u2019t show the entire CIMSymbol used in the final app (<a href=\"https:\/\/github.com\/ekenes\/binning-experiments\/blob\/main\/wurman\/crashes-wurman-total.html#L253-L446\">you can view that here<\/a>), but here\u2019s the general structure to follow. Note the geometry for the first and second symbol layer is the same. It is the <em>symbol<\/em> representing each symbol layer that is different.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\">featureReduction.renderer = {\r\n  type: <span style=\"color: #d14\">\"simple\"<\/span>,\r\n  symbol: {\r\n    type: <span style=\"color: #d14\">\"cim\"<\/span>,\r\n    data: {\r\n      type: <span style=\"color: #d14\">\"CIMSymbolReference\"<\/span>,\r\n      symbol: {\r\n        type: <span style=\"color: #d14\">\"CIMPointSymbol\"<\/span>,\r\n        symbolLayers: [\r\n          {\r\n            type: <span style=\"color: #d14\">\"CIMVectorMarker\"<\/span>,\r\n            primitiveName: <span style=\"color: #d14\">\"innerDot\"<\/span>,\r\n            markerGraphics: [\r\n              {\r\n                type: <span style=\"color: #d14\">\"CIMMarkerGraphic\"<\/span>,\r\n                geometry: { <span style=\"color: #998;font-style: italic\">\/* Geometry definition of a circle *\/<\/span> },\r\n                symbol: { <span style=\"color: #998;font-style: italic\">\/* Solid fill *\/<\/span> }\r\n              }\r\n            ]\r\n          },\r\n          {\r\n            type: <span style=\"color: #d14\">\"CIMVectorMarker\"<\/span>,\r\n            primitiveName: <span style=\"color: #d14\">\"outerRing\"<\/span>,\r\n            markerGraphics: [\r\n              {\r\n                type: <span style=\"color: #d14\">\"CIMMarkerGraphic\"<\/span>,\r\n                geometry: { <span style=\"color: #998;font-style: italic\">\/* Geometry definition of a circle *\/<\/span> },\r\n                symbol: { <span style=\"color: #998;font-style: italic\">\/* Hollow fill with outline *\/<\/span> }\r\n              }\r\n            ]\r\n          }\r\n        ]\r\n      },\r\n      primitiveOverrides: [\r\n        {\r\n          type: <span style=\"color: #d14\">\"CIMPrimitiveOverride\"<\/span>,\r\n          <span style=\"color: #998;font-style: italic\">\/\/ Name of the primitive (symbol layer to modify)<\/span>\r\n          primitiveName: <span style=\"color: #d14\">\"outerRing\"<\/span>,\r\n          <span style=\"color: #998;font-style: italic\">\/\/ The symbol property to vary by expression<\/span>\r\n          propertyName: <span style=\"color: #d14\">\"Size\"<\/span>,\r\n          <span style=\"color: #998;font-style: italic\">\/\/ Defines the Arcade expression that returns a<\/span>\r\n          <span style=\"color: #998;font-style: italic\">\/\/ size based on a scale value<\/span>\r\n          valueExpressionInfo: { }\r\n        },\r\n        {\r\n          type: <span style=\"color: #d14\">\"CIMPrimitiveOverride\"<\/span>,\r\n          primitiveName: <span style=\"color: #d14\">\"innerDot\"<\/span>,\r\n          propertyName: <span style=\"color: #d14\">\"Size\"<\/span>,\r\n          valueExpressionInfo: { }\r\n        }\r\n      ]\r\n    }\r\n  }\r\n};\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"sidebar","content":"<p>For a more detailed description of what CIM symbols are, and how they work, check out the following articles\u2026<\/p>\n<ul>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-points-lines-and-polygons-using-cimsymbols\/\">Create points, lines, and polygons using CIMSymbols<\/a> &#8211; provides an introduction to CIMSymbols with various examples.<\/li>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualize-electoral-swing-using-composite-symbols\/#how-the-map-is-made\">Visualize electoral swing using composite symbols<\/a> &#8211; gives an in-depth overview of various parts of a CIMSymbol, with graphics explaining how the various properties affect the final symbol.<\/li>\n<\/ul>\n","image_reference":false,"layout":"standard","image_reference_figure":"","snippet":"","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"image","image":{"ID":1789272,"id":1789272,"title":"Screen Shot 2022-12-06 at 3.09.06 PM","filename":"Screen-Shot-2022-12-06-at-3.09.06-PM.png","filesize":1119373,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screen-Shot-2022-12-06-at-3.09.06-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\/screen-shot-2022-12-06-at-3-09-06-pm","alt":"Motor vehicle accidents in New York City (2020) binned at a city scale. Each bin is represented with a reference size symbol. However, the symbols aren't data-driven.","author":"6561","description":"","caption":"Motor vehicle accidents in New York City (2020) binned at a city scale. Each bin is represented with a reference size symbol. However, the symbols aren't data-driven.","name":"screen-shot-2022-12-06-at-3-09-06-pm","status":"inherit","uploaded_to":1788612,"date":"2022-12-07 22:51:28","modified":"2024-08-05 19:32:08","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":1287,"height":735,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screen-Shot-2022-12-06-at-3.09.06-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screen-Shot-2022-12-06-at-3.09.06-PM.png","medium-width":457,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screen-Shot-2022-12-06-at-3.09.06-PM.png","medium_large-width":768,"medium_large-height":439,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screen-Shot-2022-12-06-at-3.09.06-PM.png","large-width":1287,"large-height":735,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screen-Shot-2022-12-06-at-3.09.06-PM.png","1536x1536-width":1287,"1536x1536-height":735,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screen-Shot-2022-12-06-at-3.09.06-PM.png","2048x2048-width":1287,"2048x2048-height":735,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screen-Shot-2022-12-06-at-3.09.06-PM-814x465.png","card_image-width":814,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screen-Shot-2022-12-06-at-3.09.06-PM.png","wide_image-width":1287,"wide_image-height":735}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/wurman\/crashes-wurman-total-no-overrides.html"},{"acf_fc_layout":"content","content":"<p>Now we have the correct symbol. The only remaining task is to vary the inner dot sizes based on a data attribute.<\/p>\n<h3>3. Write Arcade expressions to control the sizes of the reference size symbol layers<\/h3>\n<p>The symbols as defined in the previous step are defined with fixed sizes. Apart from there being no data-driven component to the visualization, fixed sizes are problematic as illustrated below.<\/p>\n<p>When zoomed out, the symbols begin to overlap and turn into an unintelligible mess. This happens because symbols are at a fixed size <em>in screen space<\/em> (i.e. pixels). As the user zooms out, each pixel represents larger and larger real world areas, causing symbols to overlap.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1789292,"id":1789292,"title":"zoomed-out-fixed","filename":"zoomed-out-fixed.png","filesize":317550,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-out-fixed.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\/zoomed-out-fixed","alt":"A fixed size for reference size symbols only works well at one scale. When zoomed out, symbols will overlap as each pixel represents a larger area.","author":"6561","description":"","caption":"A fixed size for reference size symbols only works well at one scale. When zoomed out, symbols will overlap each other.","name":"zoomed-out-fixed","status":"inherit","uploaded_to":1788612,"date":"2022-12-07 22:54:31","modified":"2024-08-05 19:32:41","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":660,"height":475,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-out-fixed-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-out-fixed.png","medium-width":363,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-out-fixed.png","medium_large-width":660,"medium_large-height":475,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-out-fixed.png","large-width":660,"large-height":475,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-out-fixed.png","1536x1536-width":660,"1536x1536-height":475,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-out-fixed.png","2048x2048-width":660,"2048x2048-height":475,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-out-fixed-646x465.png","card_image-width":646,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-out-fixed.png","wide_image-width":660,"wide_image-height":475}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Conversely, when zoomed in, huge gaps begin to appear between the bins, making them appear very small and unrepresentative of the bin&#8217;s geographic boundary. Zooming in results in each pixel representing smaller real world areas.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1789312,"id":1789312,"title":"zoomed-in-fixed","filename":"zoomed-in-fixed.png","filesize":538339,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-in-fixed.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\/zoomed-in-fixed","alt":"A fixed size for reference size symbols only works well at one scale. When zoomed in, symbols will appear much smaller than the bin they represent, creating gaps in the grid. This is because pixels represent smaller areas as you zoom in.","author":"6561","description":"","caption":"A fixed size for reference size symbols only works well at one scale. When zoomed in, symbols will appear much smaller than the bin they represent, creating gaps in the grid.","name":"zoomed-in-fixed","status":"inherit","uploaded_to":1788612,"date":"2022-12-07 22:56:59","modified":"2024-08-05 19:33:09","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":1165,"height":783,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-in-fixed-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-in-fixed.png","medium-width":388,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-in-fixed.png","medium_large-width":768,"medium_large-height":516,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-in-fixed.png","large-width":1165,"large-height":783,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-in-fixed.png","1536x1536-width":1165,"1536x1536-height":783,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-in-fixed.png","2048x2048-width":1165,"2048x2048-height":783,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-in-fixed-692x465.png","card_image-width":692,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/zoomed-in-fixed.png","wide_image-width":1165,"wide_image-height":783}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Therefore, we need to define <a href=\"https:\/\/developers.arcgis.com\/arcade\/\">Arcade<\/a> expressions within <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-CIMSymbol.html#PrimitiveOverride\">primitive overrides<\/a> to control the size of both the outer ring and inner dot <em>by scale<\/em>. You can think of a primitive as a symbol layer. To override a visual component of a symbol layer, you must give the symbol layer an identifier in the <code>primitiveName<\/code> property. That name is then referenced in the primitive override object.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1789582,"id":1789582,"title":"annotated snippet","filename":"annotated-snippet.png","filesize":150114,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/annotated-snippet.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\/annotated-snippet","alt":"snippet showing primitive names in primitive overrides.","author":"6561","description":"","caption":"","name":"annotated-snippet","status":"inherit","uploaded_to":1788612,"date":"2022-12-08 01:14:27","modified":"2022-12-08 01:15: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":591,"height":759,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/annotated-snippet-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/annotated-snippet.png","medium-width":203,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/annotated-snippet.png","medium_large-width":591,"medium_large-height":759,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/annotated-snippet.png","large-width":591,"large-height":759,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/annotated-snippet.png","1536x1536-width":591,"1536x1536-height":759,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/annotated-snippet.png","2048x2048-width":591,"2048x2048-height":759,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/annotated-snippet-362x465.png","card_image-width":362,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/annotated-snippet.png","wide_image-width":591,"wide_image-height":759}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/annotated-snippet.png"},{"acf_fc_layout":"content","content":"<p>Here\u2019s how the primitive override for determining the &#8220;fixed&#8221; size of the outer ring looks. Pay special attention to the Arcade expression, which must return a number representing the size of the ring in points. Note how the initial view scale becomes a reference scale for scaling the size of the ring in screen space.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\">featureReduction.renderer = {\r\n  type: <span style=\"color: #d14\">\"simple\"<\/span>,\r\n  symbol: {\r\n    type: <span style=\"color: #d14\">\"cim\"<\/span>,\r\n    data: {\r\n      type: <span style=\"color: #d14\">\"CIMSymbolReference\"<\/span>,\r\n      symbol: {\r\n        type: <span style=\"color: #d14\">\"CIMPointSymbol\"<\/span>,\r\n        symbolLayers: [\r\n          <span style=\"color: #998;font-style: italic\">\/\/ symbol layer definitions here<\/span>\r\n          <span style=\"color: #998;font-style: italic\">\/\/ one for outerRing<\/span>\r\n          <span style=\"color: #998;font-style: italic\">\/\/ one for innerDot<\/span>\r\n        ]\r\n      },\r\n      primitiveOverrides: [\r\n        {\r\n          type: <span style=\"color: #d14\">\"CIMPrimitiveOverride\"<\/span>,\r\n          <span style=\"color: #998;font-style: italic\">\/\/ Name of the primitive (symbol layer to modify)<\/span>\r\n          primitiveName: <span style=\"color: #d14\">\"outerRing\"<\/span>,\r\n          <span style=\"color: #998;font-style: italic\">\/\/ The symbol property to vary by expression<\/span>\r\n          propertyName: <span style=\"color: #d14\">\"Size\"<\/span>,\r\n          valueExpressionInfo: {\r\n            type: <span style=\"color: #d14\">\"CIMExpressionInfo\"<\/span>,\r\n            title: <span style=\"color: #d14\">\"Size in pixels of outer ring at maxScale\"<\/span>,\r\n            <span style=\"color: #998;font-style: italic\">\/\/ The Arcade expression used to vary symbol size<\/span>\r\n            <span style=\"color: #998;font-style: italic\">\/\/ by scale. This should return a result in pixels<\/span>\r\n            expression: <span style=\"color: #d14\">`\r\n              var binWidthMeters = 800;  \/\/ bin width in meters at level 6\r\n              var viewResolution = 38;  \/\/ meters per pixel\r\n              var initialViewScale = 144447;\r\n              var binWidthPixels = binWidthMeters \/ viewResolution;\r\n              return (binWidthPixels * (initialViewScale \/ $view.scale)) * 0.75;\r\n            `<\/span>,\r\n            returnType: <span style=\"color: #d14\">\"Default\"<\/span>\r\n          }\r\n        }\r\n      ]\r\n    }\r\n  }\r\n};\r\n<\/code><\/pre>\n<p>In contrast, the expression for changing the size of the inner dot must take into account a data value and the view scale. We\u2019ll cover that process in the case studies below.<\/p>\n<h2>Case study: New York City motor vehicle crashes<\/h2>\n<p>In the year 2020, New York City had a reported 103,804 motor vehicle accidents. Each crash location is visualized in the map below.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1789622,"id":1789622,"title":"map-crashes-raw","filename":"map-crashes-raw.png","filesize":944021,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-raw.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\/map-crashes-raw","alt":"More than 100,000 motor vehicle crashes in New York City. One dot represents one crash.","author":"6561","description":"","caption":"Motor vehicle crashes in New York City (2020).","name":"map-crashes-raw","status":"inherit","uploaded_to":1788612,"date":"2022-12-08 01:22:13","modified":"2022-12-08 20:44:01","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":1106,"height":756,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-raw-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-raw.png","medium-width":382,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-raw.png","medium_large-width":768,"medium_large-height":525,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-raw.png","large-width":1106,"large-height":756,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-raw.png","1536x1536-width":1106,"1536x1536-height":756,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-raw.png","2048x2048-width":1106,"2048x2048-height":756,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-raw-680x465.png","card_image-width":680,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-raw.png","wide_image-width":1106,"wide_image-height":756}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/wurman\/crashes-wurman.html"},{"acf_fc_layout":"content","content":"<p>Drawing more than 100,000 points on a map at this scale makes it difficult to understand the relative density of crashes in the city. About the only thing I can really see in this map is the city boundary of New York and some open spaces, like Central Park. Aggregating points to geographic bins and visualizing them with the reference size theme can help us better understand the spatial patterns that exist in the data.<\/p>\n<p>Let\u2019s explore a few examples.<\/p>\n<h3>Density of crashes<\/h3>\n<p>The following map shows the density of motor vehicle crashes based on the aggregate count of crashes within each bin. The outer ring represents a maximum value of 300 crashes. Therefore, a fully filled bin indicates more than 300 crashes occurred in that area. Sizes are proportional to the number of crashes.<\/p>\n<p>Using a bounded total count makes this a great way to visualize density.<\/p>\n<p><a href=\"https:\/\/ekenes.github.io\/binning-experiments\/wurman\/crashes-wurman-total.html\"><strong>View the app<\/strong><\/a><br \/>\n<a href=\"https:\/\/github.com\/ekenes\/binning-experiments\/blob\/main\/wurman\/crashes-wurman-total.html\"><strong>View the code<\/strong><\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1789632,"id":1789632,"title":"map-crashes-wurman-total","filename":"map-crashes-wurman-total.png","filesize":1091714,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\/map-crashes-wurman-total","alt":"The density of motor vehicle crashes in New York City (2020). The reference size theme helps us easily see where more crashes occur.","author":"6561","description":"","caption":"The density of motor vehicle crashes in New York City (2020). The reference size theme helps us easily see where more crashes occur.","name":"map-crashes-wurman-total","status":"inherit","uploaded_to":1788612,"date":"2022-12-08 01:26:28","modified":"2024-08-05 19:35:10","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":1266,"height":817,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total.png","medium-width":404,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total.png","medium_large-width":768,"medium_large-height":496,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total.png","large-width":1266,"large-height":817,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total.png","1536x1536-width":1266,"1536x1536-height":817,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total.png","2048x2048-width":1266,"2048x2048-height":817,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total-721x465.png","card_image-width":721,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total.png","wide_image-width":1266,"wide_image-height":817}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/wurman\/crashes-wurman-total.html"},{"acf_fc_layout":"content","content":"<p>Here\u2019s what the primitive override looks like for the inner dot in this example.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\">featureReduction.renderer = {\r\n  type: <span style=\"color: #d14\">\"simple\"<\/span>,\r\n  symbol: {\r\n    type: <span style=\"color: #d14\">\"cim\"<\/span>,\r\n    data: {\r\n      type: <span style=\"color: #d14\">\"CIMSymbolReference\"<\/span>,\r\n      symbol: {\r\n        type: <span style=\"color: #d14\">\"CIMPointSymbol\"<\/span>,\r\n        symbolLayers: [\r\n          <span style=\"color: #998;font-style: italic\">\/\/ symbol layer definitions here<\/span>\r\n          <span style=\"color: #998;font-style: italic\">\/\/ one for outerRing<\/span>\r\n          <span style=\"color: #998;font-style: italic\">\/\/ one for innerDot<\/span>\r\n        ]\r\n      },\r\n      primitiveOverrides: [\r\n        {\r\n          type: <span style=\"color: #d14\">\"CIMPrimitiveOverride\"<\/span>,\r\n          primitiveName: <span style=\"color: #d14\">\"innerDot\"<\/span>,\r\n          propertyName: <span style=\"color: #d14\">\"Size\"<\/span>,\r\n          valueExpressionInfo: {\r\n            type: <span style=\"color: #d14\">\"CIMExpressionInfo\"<\/span>,\r\n            title: <span style=\"color: #d14\">\"Size in pixels of inner ring at maxScale\"<\/span>,\r\n            <span style=\"color: #998;font-style: italic\">\/\/ outerSize is the pixel size at the largest scale<\/span>\r\n            <span style=\"color: #998;font-style: italic\">\/\/ The innerSize is determined by multiplying<\/span>\r\n            <span style=\"color: #998;font-style: italic\">\/\/ the outerSize by the total count<\/span>\r\n            expression: <span style=\"color: #d14\">`\r\n              var binWidthMeters = 800;  \/\/ bin width in meters at level 6\r\n              var viewResolution = 38;  \/\/ meters per pixel\r\n              var initialViewScale = 144447;\r\n              var binWidthPixels = binWidthMeters \/ viewResolution;\r\n              var value = $feature.aggregateCount \/ 300;\r\n              \/\/ 300 establishes the upper bound or\r\n              \/\/ data value representing the outer ring.\r\n\r\n              var innerRatio = IIF(value &gt; 1, 1, value);\r\n              var outerSize = binWidthPixels * (initialViewScale \/ $view.scale);\r\n              var innerSize = outerSize * innerRatio;\r\n              return IIF( innerSize &lt; 3, 3, innerSize ) * 0.75;\r\n              \/\/ 0.75 pixels to points (size unit of CIM)\r\n            `<\/span>,\r\n            returnType: <span style=\"color: #d14\">\"Default\"<\/span>\r\n          }\r\n        }\r\n      ]\r\n    }\r\n  }\r\n};\r\n<\/code><\/pre>\n<h3>Crashes with injuries<\/h3>\n<p>The outer ring of the reference size symbol provides a reference point to some kind of maximum value. That\u2019s why it is ideal for representing a percentage or even a ratio. As opposed to proportional symbols, the reference size symbol clearly communicates whether a feature\u2019s attribute value is at 100% or some percentage less than that.<\/p>\n<p>In this example, I\u2019m visualizing the number of injuries as a ratio to the number of crashes in a bin. If there is a 1:1 ratio (or higher of injuries to crashes), then the circle will be completely filled, indicating areas where each crash is more likely to result in injury.<\/p>\n<p><a href=\"https:\/\/ekenes.github.io\/binning-experiments\/wurman\/crashes-wurman-injuries.html\"><strong>View the app<\/strong><\/a><br \/>\n<a href=\"https:\/\/github.com\/ekenes\/binning-experiments\/blob\/main\/wurman\/crashes-wurman-injuries.html\"><strong>View the code<\/strong><\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1789672,"id":1789672,"title":"map-crashes-wurman-injuries","filename":"map-crashes-wurman-injuries.png","filesize":641958,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-injuries.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\/map-crashes-wurman-injuries","alt":"The ratio of crash injuries to total crashes in motor vehicle incidents in New York City (2020). The reference size theme is an ideal way to represent ratios and percentages.","author":"6561","description":"","caption":"The ratio of crash injuries to total crashes in motor vehicle incidents in New York City (2020). The reference size theme is an ideal way to represent ratios and percentages.","name":"map-crashes-wurman-injuries","status":"inherit","uploaded_to":1788612,"date":"2022-12-08 01:33:32","modified":"2024-08-05 19:35:40","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":970,"height":749,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-injuries-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-injuries.png","medium-width":338,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-injuries.png","medium_large-width":768,"medium_large-height":593,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-injuries.png","large-width":970,"large-height":749,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-injuries.png","1536x1536-width":970,"1536x1536-height":749,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-injuries.png","2048x2048-width":970,"2048x2048-height":749,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-injuries-602x465.png","card_image-width":602,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-injuries.png","wide_image-width":970,"wide_image-height":749}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/wurman\/crashes-wurman-injuries.html"},{"acf_fc_layout":"content","content":"<p>Here\u2019s what the primitive override looks like for the inner dot in this example.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\">featureReduction.renderer = {\r\n  type: <span style=\"color: #d14\">\"simple\"<\/span>,\r\n  symbol: {\r\n    type: <span style=\"color: #d14\">\"cim\"<\/span>,\r\n    data: {\r\n      type: <span style=\"color: #d14\">\"CIMSymbolReference\"<\/span>,\r\n      symbol: {\r\n        type: <span style=\"color: #d14\">\"CIMPointSymbol\"<\/span>,\r\n        symbolLayers: [\r\n          <span style=\"color: #998;font-style: italic\">\/\/ symbol layer definitions here<\/span>\r\n          <span style=\"color: #998;font-style: italic\">\/\/ one for outerRing<\/span>\r\n          <span style=\"color: #998;font-style: italic\">\/\/ one for innerDot<\/span>\r\n        ]\r\n      },\r\n      primitiveOverrides: [\r\n        {\r\n          type: <span style=\"color: #d14\">\"CIMPrimitiveOverride\"<\/span>,\r\n          primitiveName: <span style=\"color: #d14\">\"innerDot\"<\/span>,\r\n          propertyName: <span style=\"color: #d14\">\"Size\"<\/span>,\r\n          valueExpressionInfo: {\r\n            type: <span style=\"color: #d14\">\"CIMExpressionInfo\"<\/span>,\r\n            title: <span style=\"color: #d14\">\"Size in pixels of inner ring at maxScale\"<\/span>,\r\n            <span style=\"color: #998;font-style: italic\">\/\/ outerSize is the pixel size at the largest scale<\/span>\r\n            <span style=\"color: #998;font-style: italic\">\/\/ The innerSize is determined by multiplying<\/span>\r\n            <span style=\"color: #998;font-style: italic\">\/\/ the outerSize by the ratio of injuries to crashes<\/span>\r\n            expression: <span style=\"color: #d14\">`\r\n              var binWidthMeters = 800;  \/\/ bin width in meters at level 6\r\n              var viewResolution = 38;  \/\/ meters per pixel\r\n              var initialViewScale = 144447;\r\n              var binWidthPixels = binWidthMeters \/ viewResolution;\r\n\r\n              <span style=\"color: #998;font-style: italic\">\/\/ AVG_MOTORIST_INJURED is an aggregate field defined in the binning configuration<\/span>\r\n              var innerRatio = IIF($feature.AVG_MOTORIST_INJURED &gt; 1, 1, $feature.AVG_MOTORIST_INJURED);\r\n              var outerSize = binWidthPixels * (initialViewScale \/ $view.scale);\r\n              var innerSize = outerSize * innerRatio;\r\n              return innerSize * 0.75;\r\n            `<\/span>,\r\n            returnType: <span style=\"color: #d14\">\"Default\"<\/span>\r\n          }\r\n        }\r\n      ]\r\n    }\r\n  }\r\n};\r\n<\/code><\/pre>\n<h3>A bivariate example: density and injuries<\/h3>\n<p>You can also apply a second visual variable to a reference size visualization, such as <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/visualization\/data-driven-styles\/visual-variables\/#color\">data-driven color<\/a>. In the legend below, the size of the inner dot represents the density of crashes, whereas the color represents the ratio of injuries to crashes.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1792032,"id":1792032,"title":"crashes-wurman-total-injuries-blue","filename":"crashes-wurman-total-injuries-blue.png","filesize":85902,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/crashes-wurman-total-injuries-blue.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\/crashes-wurman-total-injuries-blue","alt":"Legend describing how data is represented in the bivariate Wurman dot map.","author":"6561","description":"","caption":"","name":"crashes-wurman-total-injuries-blue","status":"inherit","uploaded_to":1788612,"date":"2022-12-09 20:35:00","modified":"2022-12-09 20:35:07","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":380,"height":275,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/crashes-wurman-total-injuries-blue-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/crashes-wurman-total-injuries-blue.png","medium-width":361,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/crashes-wurman-total-injuries-blue.png","medium_large-width":380,"medium_large-height":275,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/crashes-wurman-total-injuries-blue.png","large-width":380,"large-height":275,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/crashes-wurman-total-injuries-blue.png","1536x1536-width":380,"1536x1536-height":275,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/crashes-wurman-total-injuries-blue.png","2048x2048-width":380,"2048x2048-height":275,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/crashes-wurman-total-injuries-blue.png","card_image-width":380,"card_image-height":275,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/crashes-wurman-total-injuries-blue.png","wide_image-width":380,"wide_image-height":275}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>The bivariate nature of this visualization can help you clearly see a geographic pattern of where areas with a high density of crashes also have a high propensity for injury. This visualization removes the noise that creeps in when visualizing percentages; sometimes areas have an unusually high percentage of an attribute because they represent a small sample size where a high degree of variation is more likely. For example, a bin with only one crash and one injury would appear very important in the previous example when it probably shouldn&#8217;t be.<\/p>\n<p><a href=\"https:\/\/ekenes.github.io\/binning-experiments\/wurman\/crashes-wurman-total-injuries.html\"><strong>View the app<\/strong><\/a><br \/>\n<a href=\"https:\/\/github.com\/ekenes\/binning-experiments\/blob\/main\/wurman\/crashes-wurman-total-injuries.html\"><strong>View the code<\/strong><\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1792022,"id":1792022,"title":"map-crashes-wurman-total-injuries-blue","filename":"map-crashes-wurman-total-injuries-blue.png","filesize":546881,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total-injuries-blue.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\/map-crashes-wurman-total-injuries-blue","alt":"The density of motor vehicle crashes in New York City (2020) visualized with reference size. Color is used to visualize areas where crashes resulted in a higher number of injuries.","author":"6561","description":"","caption":"The density of motor vehicle crashes in New York City (2020) visualized with reference size. Color is used to visualize areas where a higher percentage of crashes resulted in injury. While both Manhattan and Brooklyn have areas with a high density of crashes, fewer crashes result in injury in Manhattan than in Brooklyn.","name":"map-crashes-wurman-total-injuries-blue","status":"inherit","uploaded_to":1788612,"date":"2022-12-09 20:34:19","modified":"2024-08-05 19:36:41","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":877,"height":585,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total-injuries-blue-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total-injuries-blue.png","medium-width":391,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total-injuries-blue.png","medium_large-width":768,"medium_large-height":512,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total-injuries-blue.png","large-width":877,"large-height":585,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total-injuries-blue.png","1536x1536-width":877,"1536x1536-height":585,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total-injuries-blue.png","2048x2048-width":877,"2048x2048-height":585,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total-injuries-blue-697x465.png","card_image-width":697,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/map-crashes-wurman-total-injuries-blue.png","wide_image-width":877,"wide_image-height":585}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/wurman\/crashes-wurman-total-injuries.html"},{"acf_fc_layout":"content","content":"<p>You can simply add a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-visualVariables-ColorVariable.html\">color visual variable<\/a> to the renderer (completely separate from the CIMSymbol), to add a second variable to the reference size visualization.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\">featureReduction.renderer = {\r\n  type: <span style=\"color: #d14\">\"simple\"<\/span>,\r\n  symbol: {\r\n    type: <span style=\"color: #d14\">\"cim\"<\/span>,\r\n    <span style=\"color: #998;font-style: italic\">\/\/ CIM symbol definition used in the \"Density of crashes\" example above<\/span>\r\n  },\r\n  visualVariables: [\r\n    {\r\n      type: <span style=\"color: #d14\">\"color\"<\/span>,\r\n      field: <span style=\"color: #d14\">\"AVG_MOTORIST_INJURED\"<\/span>,\r\n      legendOptions: {\r\n        title: <span style=\"color: #d14\">\"Ratio of motorists injured per crash\"<\/span>\r\n      },\r\n      stops: [\r\n        { value: <span style=\"color: #008080\">0<\/span>, color: <span style=\"color: #d14\">\"#feebe2\"<\/span> },\r\n        { value: <span style=\"color: #008080\">0.15<\/span>, color: <span style=\"color: #d14\">\"#fbb4b9\"<\/span> },\r\n        { value: <span style=\"color: #008080\">0.25<\/span>, color: <span style=\"color: #d14\">\"#f768a1\"<\/span> },\r\n        { value: <span style=\"color: #008080\">0.33<\/span>, color: <span style=\"color: #d14\">\"#c51b8a\"<\/span> },\r\n        { value: <span style=\"color: #008080\">0.5<\/span>, color: <span style=\"color: #d14\">\"#7a0177\"<\/span> }\r\n      ]\r\n    }\r\n  ]\r\n};\r\n<\/code><\/pre>\n<h2>Conclusion<\/h2>\n<p>Binning significantly improves the work required to create reference size visualizations. Specifically, binning removes the necessity to preprocess data or create derived datasets. As illustrated above, binning with the reference size theme requires a familiarity with CIM symbology and Arcade scripting. We recognize this and, as such, are working to introduce a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/visualization\/data-driven-styles\/smart-mapping\/\">Smart Mapping<\/a> function in a future release to make this process easier.<\/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":2361252,"post_author":"6331","post_date":"2024-06-26 20:57:42","post_date_gmt":"2024-06-27 03:57:42","post_content":"","post_title":"Map Viewer Adds Reference Size Maps","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"reference-size-maps","to_ping":"","pinged":"","post_modified":"2024-06-27 08:45:47","post_modified_gmt":"2024-06-27 15:45:47","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2361252","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":634052,"post_author":"6751","post_date":"2019-10-11 17:42:04","post_date_gmt":"2019-10-12 00:42:04","post_content":"","post_title":"Reference Size Maps: Learning from the '60s with a new mapping theme","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"reference-size-maps-bringing-back-the-60s","to_ping":"","pinged":"","post_modified":"2024-08-06 15:34:43","post_modified_gmt":"2024-08-06 22:34:43","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=634052","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":1638432,"post_author":"6561","post_date":"2022-07-06 09:20:52","post_date_gmt":"2022-07-06 16:20:52","post_content":"","post_title":"Binning now available in the ArcGIS API for JavaScript","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"binning-now-available-in-the-arcgis-api-for-javascript","to_ping":"","pinged":"","post_modified":"2024-04-12 03:38:39","post_modified_gmt":"2024-04-12 10:38:39","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1638432","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"1","filter":"raw"},{"ID":1425582,"post_author":"6561","post_date":"2021-12-09 13:35:57","post_date_gmt":"2021-12-09 21:35:57","post_content":"","post_title":"Techniques for visualizing high density data on the web","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"techniques-for-visualizing-high-density-data-on-the-web","to_ping":"","pinged":"","post_modified":"2024-04-12 03:57:59","post_modified_gmt":"2024-04-12 10:57:59","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1425582","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":913801,"post_author":"10062","post_date":"2020-07-24 11:16:29","post_date_gmt":"2020-07-24 18:16:29","post_content":"","post_title":"Create points, lines, and polygons using CIMSymbols","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"create-points-lines-and-polygons-using-cimsymbols","to_ping":"","pinged":"","post_modified":"2020-07-31 09:39:01","post_modified_gmt":"2020-07-31 16:39:01","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=913801","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"4","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\/2022\/12\/card4.jpg","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/banner4.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>Map density using reference size theme for binning<\/title>\n<meta name=\"description\" content=\"Thanks to binning, creating a reference size density visualization is more accessible than ever before.\" \/>\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\/density-mapping-with-binning-and-wurman-dots\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Map density using reference size theme for binning\" \/>\n<meta property=\"og:description\" content=\"Thanks to binning, creating a reference size density visualization is more accessible than ever before.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-05T23:06:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2022\/12\/card4.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<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"12 minutes\" \/>\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\/density-mapping-with-binning-and-wurman-dots#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Map density using reference size theme for binning\",\"datePublished\":\"2022-12-13T17:55:36+00:00\",\"dateModified\":\"2024-08-05T23:06:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\"},\"wordCount\":8,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"binning\",\"clustering\",\"data visualization\",\"dot density\"],\"articleSection\":[\"Developers\",\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\",\"name\":\"Map density using reference size theme for binning\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2022-12-13T17:55:36+00:00\",\"dateModified\":\"2024-08-05T23:06:34+00:00\",\"description\":\"Thanks to binning, creating a reference size density visualization is more accessible than ever before.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Map density using reference size theme for binning\"}]},{\"@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":"Map density using reference size theme for binning","description":"Thanks to binning, creating a reference size density visualization is more accessible than ever before.","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\/density-mapping-with-binning-and-wurman-dots","og_locale":"en_US","og_type":"article","og_title":"Map density using reference size theme for binning","og_description":"Thanks to binning, creating a reference size density visualization is more accessible than ever before.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-08-05T23:06:34+00:00","og_image":[{"width":826,"height":465,"url":"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2022\/12\/card4.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@ESRI","twitter_misc":{"Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Map density using reference size theme for binning","datePublished":"2022-12-13T17:55:36+00:00","dateModified":"2024-08-05T23:06:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots"},"wordCount":8,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["binning","clustering","data visualization","dot density"],"articleSection":["Developers","Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots","name":"Map density using reference size theme for binning","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2022-12-13T17:55:36+00:00","dateModified":"2024-08-05T23:06:34+00:00","description":"Thanks to binning, creating a reference size density visualization is more accessible than ever before.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/density-mapping-with-binning-and-wurman-dots#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Map density using reference size theme for binning"}]},{"@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":"December 13, 2022","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/banner4.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":25361,"name":"binning","slug":"binning","term_group":0,"term_taxonomy_id":25361,"taxonomy":"post_tag","description":"","parent":0,"count":10,"filter":"raw"},{"term_id":26751,"name":"clustering","slug":"clustering","term_group":0,"term_taxonomy_id":26751,"taxonomy":"post_tag","description":"","parent":0,"count":23,"filter":"raw"},{"term_id":30111,"name":"data visualization","slug":"data-visualization","term_group":0,"term_taxonomy_id":30111,"taxonomy":"post_tag","description":"","parent":0,"count":97,"filter":"raw"},{"term_id":35751,"name":"dot density","slug":"dot-density","term_group":0,"term_taxonomy_id":35751,"taxonomy":"post_tag","description":"","parent":0,"count":8,"filter":"raw"}],"category_data":[{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":420,"filter":"raw"},{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2686,"filter":"raw"}],"product_data":[{"term_id":761642,"name":"ArcGIS Location Platform","slug":"platform","term_group":0,"term_taxonomy_id":761642,"taxonomy":"product","description":"","parent":36601,"count":213,"filter":"raw"},{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":361,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":762,"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\/1788612","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=1788612"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1788612\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1788612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1788612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1788612"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1788612"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1788612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}