{"id":1775722,"date":"2022-11-29T08:35:18","date_gmt":"2022-11-29T16:35:18","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1775722"},"modified":"2024-04-12T03:23:59","modified_gmt":"2024-04-12T10:23:59","slug":"8-ways-to-style-point-clusters-on-the-web","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web","title":{"rendered":"8 ways to style point clusters on the web"},"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":[26751,30111,302462,767002],"industry":[],"product":[761642,36831,36551,36601],"class_list":["post-1775722","blog","type-blog","status-publish","format-standard","hentry","category-developers","category-mapping","tag-clustering","tag-data-visualization","tag-pie-chart","tag-whats-new-november-2022","product-platform","product-js-api-arcgis","product-arcgis-online","product-developers"],"acf":{"short_description":"Learn the various ways you can customize the style of point clusters in web apps.","flexible_content":[{"acf_fc_layout":"content","content":"<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/whats-new-in-arcgis-api-for-javascript-v4-25\/\">Version 4.25<\/a> of the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/\">ArcGIS API for JavaScript<\/a> (ArcGIS JS API) introduced the ability to override default styles for <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/visualization\/high-density-data\/clustering\/\">point clustering<\/a>. You can now do the following:<\/p>\n<ul>\n<li>Define a distinct symbol for representing clusters<\/li>\n<li>Visualize clustered layers with a custom renderer<\/li>\n<li>Represent clusters of categorical data as pie charts<\/li>\n<li>Define aggregate fields for use in popups, labels, and cluster renderers<\/li>\n<\/ul>\n<p>These have been some of the most popular enhancement requests by our user communities.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1776702,"id":1776702,"title":"3-symbol","filename":"3-symbol-1.png","filesize":159481,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\/3-symbol-2","alt":"Earthquakes clustered along the Aleutian Islands.","author":"6561","description":"","caption":"The latest version of the ArcGIS API for JavaScript allows you to represent clusters as symbols distinct from individual features.","name":"3-symbol-2","status":"inherit","uploaded_to":1775722,"date":"2022-11-18 01:20:34","modified":"2022-11-18 01:28:00","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":1161,"height":637,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol-1.png","medium-width":464,"medium-height":255,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol-1.png","medium_large-width":768,"medium_large-height":421,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol-1.png","large-width":1161,"large-height":637,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol-1.png","1536x1536-width":1161,"1536x1536-height":637,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol-1.png","2048x2048-width":1161,"2048x2048-height":637,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol-1-826x453.png","card_image-width":826,"card_image-height":453,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol-1.png","wide_image-width":1161,"wide_image-height":637}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/clustering-experiments\/custom\/earthquakes-distinct-clusters.html"},{"acf_fc_layout":"sidebar","content":"<p><strong>Clustering<\/strong> is a method of representing overlapping, or spatially close, points as a single aggregate graphic. If you&#8217;re unfamiliar with clustering, <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/visualization\/high-density-data\/clustering\/\">check out this guide<\/a> describing what clustering is and how to enable it on point layers. <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/summarize-and-explore-point-clusters-in-web-apps\/\">This article<\/a> also describes more advanced clustering capabilities not covered in this post.<\/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>Let&#8217;s take a look at 8 examples for styling clusters &#8212; beginning with default styles, and ending with the new capabilities.<\/p>\n<h2>Default cluster styles<\/h2>\n<p>By default, clusters are styled so they represent a summary of the variable used to style individual points within the cluster. Typically, the size of each cluster varies depending on the count of points it represents. The following are just a few examples of how clusters are styled by default.<\/p>\n<h3>1. Simple renderer<\/h3>\n<p>The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-SimpleRenderer.html\">SimpleRenderer<\/a> allows you to style a layer so that each point has the same symbol. This simply communicates <em>where<\/em> data points exist with no additional information. <strong>When clustering is enabled on a layer with this style, each cluster is represented with the same symbol as individual points.<\/strong> The size of the cluster indicates the number of points it represents.<\/p>\n<p>Simply enable clustering on the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-FeatureLayer.html#featureReduction\">featureReduction<\/a> property of the layer, and the cluster will be automatically styled with the same symbol as the layer&#8217;s renderer.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> layer = <span style=\"color: #333; font-weight: bold;\">new<\/span> GeoJSONLayer({\r\n   renderer: {\r\n     type: <span style=\"color: #d14;\">\"simple\"<\/span>,\r\n     field: <span style=\"color: #d14;\">\"mag\"<\/span>,\r\n     symbol: {\r\n       type: <span style=\"color: #d14;\">\"simple-marker\"<\/span>,\r\n       size: <span style=\"color: #008080;\">4<\/span>,\r\n       color: <span style=\"color: #d14;\">\"#c86558\"<\/span>,\r\n       outline: {\r\n         color: <span style=\"color: #d14;\">\"rgba(0, 0, 0, 0.3)\"<\/span>,\r\n         width: <span style=\"color: #008080;\">0.5<\/span>\r\n       }\r\n     }\r\n   },\r\n   featureReduction: {\r\n     type: <span style=\"color: #d14;\">\"cluster\"<\/span>\r\n     <span style=\"color: #998; font-style: italic;\">\/\/ ...other clustering properties<\/span>\r\n   }\r\n   <span style=\"color: #998; font-style: italic;\">\/\/ ...other layer properties<\/span>\r\n });\r\n <\/code><\/pre>\n<p><a href=\"https:\/\/ekenes.github.io\/clustering-experiments\/default\/earthquakes-count.html\"><strong>View the live app<\/strong><\/a><br \/>\n<a href=\"https:\/\/github.com\/ekenes\/clustering-experiments\/blob\/main\/default\/earthquakes-count.html\"><strong>Explore the code<\/strong><\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1776552,"id":1776552,"title":"1-simple-renderer","filename":"1-simple-renderer.png","filesize":134360,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/1-simple-renderer.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\/1-simple-renderer","alt":"Earthquakes along the Ring of Fire in November 2022.","author":"6561","description":"","caption":"Earthquakes visualized as point clusters along the Ring of Fire in November 2022. The size and label of the cluster indicates the total number of earthquakes in the area. All clusters reuse the symbol representing individual earthquakes. Non-clustered earthquake locations are the unlabeled small points. Data source: USGS.","name":"1-simple-renderer","status":"inherit","uploaded_to":1775722,"date":"2022-11-17 23:58:09","modified":"2022-11-28 18:53:11","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":1208,"height":764,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/1-simple-renderer-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/1-simple-renderer.png","medium-width":413,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/1-simple-renderer.png","medium_large-width":768,"medium_large-height":486,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/1-simple-renderer.png","large-width":1208,"large-height":764,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/1-simple-renderer.png","1536x1536-width":1208,"1536x1536-height":764,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/1-simple-renderer.png","2048x2048-width":1208,"2048x2048-height":764,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/1-simple-renderer-735x465.png","card_image-width":735,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/1-simple-renderer.png","wide_image-width":1208,"wide_image-height":764}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/clustering-experiments\/default\/earthquakes-count.html"},{"acf_fc_layout":"content","content":"<h3>2. Continuous color<\/h3>\n<p>A <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-visualVariables-ColorVariable.html\">color visual variable<\/a> allows you to visualize a numeric variable along a continuous color ramp. When this is applied to a clustered layer, the average value of the field or expression in the color variable is used to color the cluster according to the same color stops defined in the layer&#8217;s renderer.<\/p>\n<p>Again, for clusters to pick up this style, all you need to do is enable clustering and the layer\u2019s renderer automatically applies the appropriate color.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> layer = <span style=\"color: #333; font-weight: bold;\">new<\/span> GeoJSONLayer({\r\n  renderer: {\r\n    type: <span style=\"color: #d14;\">\"simple\"<\/span>,\r\n    symbol: {\r\n      type: <span style=\"color: #d14;\">\"simple-marker\"<\/span>\r\n    },\r\n    visualVariables: [{\r\n      type: <span style=\"color: #d14;\">\"color\"<\/span>,\r\n      field: <span style=\"color: #d14;\">\"mag\"<\/span>,\r\n      legendOptions: {\r\n        title: <span style=\"color: #d14;\">\"Average magnitude\"<\/span>\r\n      },\r\n      stops: [\r\n        { value: <span style=\"color: #008080;\">2<\/span>, color: <span style=\"color: #d14;\">\"#00619b\"<\/span> },\r\n        { value: <span style=\"color: #008080;\">3<\/span>, color: <span style=\"color: #d14;\">\"#50a7da\"<\/span> },\r\n        { value: <span style=\"color: #008080;\">4<\/span>, color: <span style=\"color: #d14;\">\"#ffd8bf\"<\/span> },\r\n        { value: <span style=\"color: #008080;\">5<\/span>, color: <span style=\"color: #d14;\">\"#f89960\"<\/span> },\r\n        { value: <span style=\"color: #008080;\">6<\/span>, color: <span style=\"color: #d14;\">\"#b35116\"<\/span> }\r\n      ]\r\n    }]\r\n  },\r\n  featureReduction: {\r\n    type: <span style=\"color: #d14;\">\"cluster\"<\/span>\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ ...other clustering properties<\/span>\r\n  }\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ ...other layer properties<\/span>\r\n});\r\n<\/code><\/pre>\n<p><a href=\"https:\/\/ekenes.github.io\/clustering-experiments\/default\/earthquakes-average-magnitude.html\"><strong>View the live app<\/strong><\/a><br \/>\n<a href=\"https:\/\/github.com\/ekenes\/clustering-experiments\/blob\/main\/default\/earthquakes-average-magnitude.html\"><strong>Explore the code<\/strong><\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1776562,"id":1776562,"title":"2-color-vv","filename":"2-color-vv.png","filesize":139004,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/2-color-vv.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\/2-color-vv","alt":"Earthquakes colored by average magnitude along the Ring of Fire.","author":"6561","description":"","caption":"Earthquakes along the Ring of Fire in November 2022. Each earthquake is colored based on its magnitude. Clusters are colored based on the average magnitude of earthquakes in the cluster. While the west coast of North America experiences many more earthquakes than eastern Asia, the earthquakes tend to be smaller in magnitude. Data source: USGS.","name":"2-color-vv","status":"inherit","uploaded_to":1775722,"date":"2022-11-17 23:58:13","modified":"2022-11-28 18:55:24","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":1222,"height":727,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/2-color-vv-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/2-color-vv.png","medium-width":439,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/2-color-vv.png","medium_large-width":768,"medium_large-height":457,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/2-color-vv.png","large-width":1222,"large-height":727,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/2-color-vv.png","1536x1536-width":1222,"1536x1536-height":727,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/2-color-vv.png","2048x2048-width":1222,"2048x2048-height":727,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/2-color-vv-782x465.png","card_image-width":782,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/2-color-vv.png","wide_image-width":1222,"wide_image-height":727}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/clustering-experiments\/default\/earthquakes-average-magnitude.html"},{"acf_fc_layout":"content","content":"<h3>3. Predominance<\/h3>\n<p>When a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-UniqueValueRenderer.html\">UniqueValueRenderer<\/a> is used to style a clustered point layer, the symbol of the predominant (or most common category) is used to represent the cluster by default.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> layer = <span style=\"color: #333; font-weight: bold;\">new<\/span> FeatureLayer({\r\n   renderer: {\r\n     type: <span style=\"color: #d14;\">\"unique-value\"<\/span>,\r\n     field: <span style=\"color: #d14;\">\"Complaint_Type\"<\/span>,\r\n     uniqueValueInfos: [\r\n       <span style=\"color: #998; font-style: italic;\">\/\/ defines symbols for representing<\/span>\r\n       <span style=\"color: #998; font-style: italic;\">\/\/ unique categories or values<\/span>\r\n     ]\r\n   },\r\n   featureReduction: {\r\n     type: <span style=\"color: #d14;\">\"cluster\"<\/span>\r\n     <span style=\"color: #998; font-style: italic;\">\/\/ ...other clustering properties<\/span>\r\n   }\r\n   <span style=\"color: #998; font-style: italic;\">\/\/ ...other layer properties<\/span>\r\n });\r\n <\/code><\/pre>\n<p><a href=\"https:\/\/ekenes.github.io\/clustering-experiments\/default\/nyc-311-predominant-type.html\"><strong>View the live app<\/strong><\/a><br \/>\n<a href=\"https:\/\/github.com\/ekenes\/clustering-experiments\/blob\/main\/default\/nyc-311-predominant-type.html\"><strong>Explore the code<\/strong><\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1776602,"id":1776602,"title":"6-predominant-type","filename":"6-predominant-type.png","filesize":417451,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/6-predominant-type.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\/6-predominant-type","alt":"311 calls clustered in New York City.","author":"6561","description":"","caption":"Vehicle-related 311 incidents reported in New York City (2015). Each point is colored based on the incident type. Clusters are represented with the color of the predominant type in the cluster.","name":"6-predominant-type","status":"inherit","uploaded_to":1775722,"date":"2022-11-18 00:00:03","modified":"2022-11-18 00:10:06","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":1108,"height":715,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/6-predominant-type-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/6-predominant-type.png","medium-width":404,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/6-predominant-type.png","medium_large-width":768,"medium_large-height":496,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/6-predominant-type.png","large-width":1108,"large-height":715,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/6-predominant-type.png","1536x1536-width":1108,"1536x1536-height":715,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/6-predominant-type.png","2048x2048-width":1108,"2048x2048-height":715,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/6-predominant-type-721x465.png","card_image-width":721,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/6-predominant-type.png","wide_image-width":1108,"wide_image-height":715}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/clustering-experiments\/default\/nyc-311-predominant-type.html"},{"acf_fc_layout":"content","content":"<h2>Custom styles<\/h2>\n<p>While automatically styling clusters based on a layer\u2019s renderer is useful, there are scenarios where you may want to override this behavior. These are the new capabilities introduced at version 4.25 of the ArcGIS API for JavaScript.<\/p>\n<h3>4. Distinct cluster symbol<\/h3>\n<p>Sometimes a summary of the features within the cluster is irrelevant and you just want to see a binary view of whether a symbol in the map represents an aggregate of points, or an individual feature.<\/p>\n<p>In this case, you can define a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionCluster.html#symbol\">symbol<\/a> on the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionCluster.html\">FeatureReductionCluster<\/a> instance. This will style each cluster with the same symbol. The size of each cluster will continue to depend on the count of points it represents. Individual points will retain the symbology as defined in the layer\u2019s renderer, regardless of renderer type.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> layer = <span style=\"color: #333; font-weight: bold;\">new<\/span> GeoJSONLayer({\r\n   <span style=\"color: #998; font-style: italic;\">\/\/ individual points show as triangles<\/span>\r\n   renderer: {\r\n     type: <span style=\"color: #d14;\">\"simple\"<\/span>,\r\n     symbol: {\r\n       type: <span style=\"color: #d14;\">\"simple-marker\"<\/span>,\r\n       size: <span style=\"color: #008080;\">8<\/span>,\r\n       color: <span style=\"color: #d14;\">\"#69dcff\"<\/span>,\r\n       style: <span style=\"color: #d14;\">\"triangle\"<\/span>,\r\n       outline: {\r\n         color: <span style=\"color: #d14;\">\"rgba(0, 139, 174, 0.5)\"<\/span>,\r\n         width: <span style=\"color: #008080;\">1<\/span>\r\n       }\r\n     }\r\n   },\r\n   <span style=\"color: #998; font-style: italic;\">\/\/ clusters show as circles with thick outlines<\/span>\r\n   featureReduction: {\r\n     type: <span style=\"color: #d14;\">\"cluster\"<\/span>,\r\n     symbol: {\r\n       type: <span style=\"color: #d14;\">\"simple-marker\"<\/span>,\r\n       style: <span style=\"color: #d14;\">\"circle\"<\/span>,\r\n       color: <span style=\"color: #d14;\">\"#69dcff\"<\/span>,\r\n       outline: {\r\n         color: <span style=\"color: #d14;\">\"rgba(0, 139, 174, 0.5)\"<\/span>,\r\n         width: <span style=\"color: #008080;\">6<\/span>\r\n       }\r\n     }\r\n     <span style=\"color: #998; font-style: italic;\">\/\/ ...other clustering properties<\/span>\r\n   }\r\n   <span style=\"color: #998; font-style: italic;\">\/\/ ...other layer properties<\/span>\r\n });\r\n <\/code><\/pre>\n<p><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurereduction-cluster-symbol\/\"><strong>View the live app<\/strong><\/a><br \/>\n<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/sandbox\/?sample=featurereduction-cluster-symbol\"><strong>Explore the code<\/strong><\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1776572,"id":1776572,"title":"3-symbol","filename":"3-symbol.png","filesize":159481,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\/3-symbol","alt":"Earthquakes along the Aleutian Islands, Alaska.","author":"6561","description":"","caption":"Earthquakes that occurred in the Aleutian Islands, Alaska in November 2022. Individual earthquakes are symbolized with a blue triangle. Clusters of earthquakes are represented with circles of various sizes. Sometimes visualizing aggregates with a distinct symbol provides more clarity to the map reader. Data source: USGS.","name":"3-symbol","status":"inherit","uploaded_to":1775722,"date":"2022-11-17 23:58:19","modified":"2022-11-18 01:41:29","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":1161,"height":637,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol.png","medium-width":464,"medium-height":255,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol.png","medium_large-width":768,"medium_large-height":421,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol.png","large-width":1161,"large-height":637,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol.png","1536x1536-width":1161,"1536x1536-height":637,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol.png","2048x2048-width":1161,"2048x2048-height":637,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol-826x453.png","card_image-width":826,"card_image-height":453,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/3-symbol.png","wide_image-width":1161,"wide_image-height":637}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurereduction-cluster-symbol\/"},{"acf_fc_layout":"content","content":"<h3>Cluster renderers<\/h3>\n<p>For scenarios where you want to customize the symbol of the clusters, but vary the symbol properties dynamically based on a data value, you\u2019ll need to create a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionCluster.html#renderer\">cluster renderer<\/a>. This requires you define at least one aggregate field (or reuse an <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionCluster.html#fields\">auto-generated field<\/a>) to use in the renderer.<\/p>\n"},{"acf_fc_layout":"sidebar","content":"<p><strong>Cluster renderer vs. cluster symbol<\/strong><\/p>\n<p>When defining a cluster <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionCluster.html#symbol\">symbol<\/a>, individual points will retain the symbology as defined in the layer\u2019s renderer, regardless of renderer type. However, the cluster <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionCluster.html#renderer\">renderer<\/a> will completely override the layer&#8217;s renderer and treat individual points as a cluster of size 1.<\/p>\n<p>This prevents the individual point symbology from clashing or contradicting cluster symbology. It also helps you avoid worrying about keeping the layer&#8217;s renderer completely in sync with the cluster renderer. However, it is generally good practice to keep both cluster and layer renderers in sync, especially if you allow the user to disable clustering, or if you automatically disable it at a scale threshold.<\/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":"<h3>Aggregate fields<\/h3>\n<p>Creating any custom renderer for clusters requires you to define at least one <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-AggregateField.html\">aggregate field<\/a> in the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionCluster.html#fields\">fields<\/a> property of FeatureReductionCluster. Aggregate fields are defined in the same manner they are for <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionBinning.html\">binning<\/a> visualizations. An aggregate field must be defined with a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-AggregateField.html#onStatisticField\">layer field<\/a>, <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-AggregateField.html#statisticType\">statistic type<\/a>, and be given a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-AggregateField.html#name\">name<\/a>.<\/p>\n<p>The snippet below demonstrates how to create an aggregate field that sums the total number of fatalities reported in a field for all features included in a cluster. The resulting field may be used in the cluster&#8217;s <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionCluster.html#renderer\">renderer<\/a>, <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionCluster.html#popupTemplate\">popupTemplate<\/a>, or <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionCluster.html#labelingInfo\">labels<\/a>.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> layer = <span style=\"color: #333; font-weight: bold;\">new<\/span> FeatureLayer({\r\n  featureReduction: {\r\n    type: <span style=\"color: #d14;\">\"cluster\"<\/span>,\r\n    fields: [\r\n      <span style=\"color: #333; font-weight: bold;\">new<\/span> AggregateField({\r\n        name: <span style=\"color: #d14;\">\"SUM_KILLED\"<\/span>,\r\n        onStatisticField: <span style=\"color: #d14;\">\"NUMBER_OF_PERSONS_KILLED\"<\/span>,\r\n        statisticType: <span style=\"color: #d14;\">\"sum\"<\/span>\r\n      })\r\n    ]\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ SUM_KILLED can be used in<\/span>\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ other clustering properties:<\/span>\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ ...renderer<\/span>\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ ...popupTemplate<\/span>\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ ...labelingInfo<\/span>\r\n  }\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ ...other layer properties<\/span>\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"<h3>5. Size based on sum<\/h3>\n<p>By default, cluster sizes represent the total number of features in the cluster, and are controlled with <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionCluster.html#clusterMinSize\">clusterMinSize<\/a> and <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionCluster.html#clusterMaxSize\">clusterMaxSize<\/a>. This is still true when defining any custom renderer on the FeatureReductionCluster instance.<\/p>\n<p>You can override this default sizing behavior by setting any <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-visualVariables-SizeVariable.html\">size visual variable<\/a> in the cluster renderer. For example, you can use a custom renderer to size clusters based on the sum of a numeric attribute, rather than the average value (the default behavior when the underlying layer has a size variable assigned to the renderer).<\/p>\n<p>To do this, you need to define an aggregate field based on the sum of a numeric attribute of the layer, then use it in a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-visualVariables-SizeVariable.html\">SizeVariable<\/a> within any renderer type. This example shows how to sum clusters based on the total number of people living within each cluster. Note how the <code>population_total<\/code> aggregate field is referenced in the cluster renderer&#8217;s size variable.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> markerSymbol = {\r\n  type: <span style=\"color: #d14;\">\"simple-marker\"<\/span>,\r\n  style: <span style=\"color: #d14;\">\"circle\"<\/span>,\r\n  color: <span style=\"color: #d14;\">\"green\"<\/span>,\r\n  size: <span style=\"color: #008080;\">4<\/span>\r\n};\r\n\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> layer = <span style=\"color: #333; font-weight: bold;\">new<\/span> FeatureLayer({\r\n  renderer: {\r\n    type: <span style=\"color: #d14;\">\"simple\"<\/span>,\r\n    symbol: markerSymbol\r\n  },\r\n  featureReduction: {\r\n    type: <span style=\"color: #d14;\">\"cluster\"<\/span>,\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ define aggregate field for population sum<\/span>\r\n    fields: [{\r\n      name: <span style=\"color: #d14;\">\"population_total\"<\/span>,\r\n      onStatisticField: <span style=\"color: #d14;\">\"POP\"<\/span>,\r\n      statisticType: <span style=\"color: #d14;\">\"sum\"<\/span>\r\n    }],\r\n    renderer: {\r\n      type: <span style=\"color: #d14;\">\"simple\"<\/span>,\r\n      symbol: markerSymbol,\r\n      visualVariables: [\r\n        {\r\n          type: <span style=\"color: #d14;\">\"size\"<\/span>,\r\n          <span style=\"color: #998; font-style: italic;\">\/\/ reference aggregate field in size variable<\/span>\r\n          field: <span style=\"color: #d14;\">\"population_total\"<\/span>,\r\n          stops: [\r\n            { value: <span style=\"color: #008080;\">0<\/span>, size: <span style=\"color: #008080;\">8<\/span> },\r\n            { value: <span style=\"color: #008080;\">100<\/span>, size: <span style=\"color: #008080;\">12<\/span> },\r\n            { value: <span style=\"color: #008080;\">10000<\/span>, size: <span style=\"color: #008080;\">18<\/span> },\r\n            { value: <span style=\"color: #008080;\">50000000<\/span>, size: <span style=\"color: #008080;\">48<\/span> }\r\n          ]\r\n        }\r\n      ]\r\n    }\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ ...other clustering properties<\/span>\r\n  }\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ ...other layer properties<\/span>\r\n});\r\n\r\n<\/code><\/pre>\n<p><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurereduction-cluster-renderer-sum\/\"><strong>View the live app<\/strong><\/a><br \/>\n<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/sandbox\/?sample=featurereduction-cluster-renderer-sum\"><strong>Explore the code<\/strong><\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1776612,"id":1776612,"title":"7-sum","filename":"7-sum.png","filesize":350180,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/7-sum.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\/7-sum","alt":"Population of world cities as clusters.","author":"6561","description":"","caption":"The population of major cities as clusters. Each cluster is sized based on the total population of cities included in the cluster. Data source: ArcGIS Living Atlas of the World.","name":"7-sum","status":"inherit","uploaded_to":1775722,"date":"2022-11-18 00:00:07","modified":"2022-11-18 02:01:25","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":1371,"height":781,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/7-sum-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/7-sum.png","medium-width":458,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/7-sum.png","medium_large-width":768,"medium_large-height":437,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/7-sum.png","large-width":1371,"large-height":781,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/7-sum.png","1536x1536-width":1371,"1536x1536-height":781,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/7-sum.png","2048x2048-width":1371,"2048x2048-height":781,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/7-sum-816x465.png","card_image-width":816,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/7-sum.png","wide_image-width":1371,"wide_image-height":781}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurereduction-cluster-renderer-sum\/"},{"acf_fc_layout":"content","content":"<h3>6. Color based on any aggregate field<\/h3>\n<p>You can reference aggregate fields in any visual variable type and use it to override the default cluster style. In this scenario, the size of the cluster is automatically applied based on cluster count (and controlled by <code>clusterMinSize<\/code> and <code>clusterMaxSize<\/code>). The color is varied based on an aggregate field that calculates the ratio of injuries in car crashes to the number of crashes.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> layer = <span style=\"color: #333; font-weight: bold;\">new<\/span> FeatureLayer({\r\n  renderer: {\r\n    type: <span style=\"color: #d14;\">\"simple\"<\/span>,\r\n    label: <span style=\"color: #d14;\">\"Crash location\"<\/span>,\r\n    symbol: {\r\n      type: <span style=\"color: #d14;\">\"simple-marker\"<\/span>\r\n    }\r\n  },\r\n  featureReduction: {\r\n    type: <span style=\"color: #d14;\">\"cluster\"<\/span>,\r\n    fields: [{\r\n      name: <span style=\"color: #d14;\">\"AVG_MOTORIST_INJURED\"<\/span>,\r\n      onStatisticField: <span style=\"color: #d14;\">\"NUMBER_OF_MOTORIST_INJURED\"<\/span>,\r\n      statisticType: <span style=\"color: #d14;\">\"avg\"<\/span>\r\n    }],\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ Override default cluster symbol with<\/span>\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ aggregate info not included in layer's renderer<\/span>\r\n    renderer: {\r\n      type: <span style=\"color: #d14;\">\"simple\"<\/span>,\r\n      symbol: {\r\n        type: <span style=\"color: #d14;\">\"simple-marker\"<\/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;\">\"% of motorists injured\"<\/span>\r\n          },\r\n          stops: [\r\n            { value: <span style=\"color: #008080;\">0<\/span>, color: <span style=\"color: #d14;\">\"#d7e1ee\"<\/span>, label: <span style=\"color: #d14;\">\"No injuries\"<\/span> },\r\n            { value: <span style=\"color: #008080;\">0.12<\/span>, color: <span style=\"color: #d14;\">\"#cbd6e4\"<\/span> },\r\n            { value: <span style=\"color: #008080;\">0.25<\/span>, color: <span style=\"color: #d14;\">\"#b3bfd1\"<\/span>, label: <span style=\"color: #d14;\">\"25%\"<\/span> },\r\n            { value: <span style=\"color: #008080;\">0.37<\/span>, color: <span style=\"color: #d14;\">\"#c86558\"<\/span> },\r\n            { value: <span style=\"color: #008080;\">0.5<\/span>, color: <span style=\"color: #d14;\">\"#991f17\"<\/span>, label: <span style=\"color: #d14;\">\"&gt;50%\"<\/span> }\r\n          ]\r\n        }\r\n      ]\r\n    }\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ ...other clustering properties<\/span>\r\n  }\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ ...other layer properties<\/span>\r\n});\r\n<\/code><\/pre>\n<p><a href=\"https:\/\/ekenes.github.io\/clustering-experiments\/custom\/nyc-crashes-injuries.html\"><strong>View the live app<\/strong><\/a><br \/>\n<a href=\"https:\/\/github.com\/ekenes\/clustering-experiments\/blob\/main\/custom\/nyc-crashes-injuries.html\"><strong>Explore the code<\/strong><\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1776582,"id":1776582,"title":"4-size-and-color","filename":"4-size-and-color.png","filesize":833806,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/4-size-and-color.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\/4-size-and-color","alt":"Vehicle crashes in New York City (2020).","author":"6561","description":"","caption":"Vehicle crashes in New York City (2020) represented as clusters. The size of the cluster indicates the total number of crashes. The color indicates the ratio of injured persons to each incident. Data source: NYC OpenData.","name":"4-size-and-color","status":"inherit","uploaded_to":1775722,"date":"2022-11-17 23:58:25","modified":"2022-11-18 02:01: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":1342,"height":793,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/4-size-and-color-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/4-size-and-color.png","medium-width":442,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/4-size-and-color.png","medium_large-width":768,"medium_large-height":454,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/4-size-and-color.png","large-width":1342,"large-height":793,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/4-size-and-color.png","1536x1536-width":1342,"1536x1536-height":793,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/4-size-and-color.png","2048x2048-width":1342,"2048x2048-height":793,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/4-size-and-color-787x465.png","card_image-width":787,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/4-size-and-color.png","wide_image-width":1342,"wide_image-height":793}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/clustering-experiments\/custom\/nyc-crashes-injuries.html"},{"acf_fc_layout":"content","content":"<h3>7. Binary (includes vs. excludes)<\/h3>\n<p>You can also style clusters based on whether they include or exclude high priority features. <a href=\"https:\/\/ekenes.github.io\/clustering-experiments\/custom\/nyc-crashes-fatalities.html\">This example<\/a> colors clusters red if they include at least one fatality. All other clusters without fatalities are colored beige. You can achieve this visualization by setting a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-ClassBreaksRenderer.html\">ClassBreaksRenderer<\/a> with two breaks on the <code>FeatureReductionCluster.renderer<\/code> property. One break indicates a total of zero, and the other break includes features with a sum of any number larger than zero.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> includedColor = <span style=\"color: #d14;\">\"#de2c30\"<\/span>;\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> excludedColor = <span style=\"color: #d14;\">\"#ffdaa6\"<\/span>;\r\n\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> layer = <span style=\"color: #333; font-weight: bold;\">new<\/span> FeatureLayer({\r\n  featureReduction: {\r\n    type: <span style=\"color: #d14;\">\"cluster\"<\/span>,\r\n    fields: [\r\n      <span style=\"color: #998; font-style: italic;\">\/\/ sum all fatalities in the cluster<\/span>\r\n      <span style=\"color: #333; font-weight: bold;\">new<\/span> AggregateField({\r\n        name: <span style=\"color: #d14;\">\"SUM_KILLED\"<\/span>,\r\n        onStatisticField: <span style=\"color: #d14;\">\"NUMBER_OF_PERSONS_KILLED\"<\/span>,  <span style=\"color: #998; font-style: italic;\">\/\/ layer field<\/span>\r\n        statisticType: <span style=\"color: #d14;\">\"sum\"<\/span>\r\n      })\r\n    ],\r\n    renderer: {\r\n      type: <span style=\"color: #d14;\">\"class-breaks\"<\/span>,\r\n      field: <span style=\"color: #d14;\">\"SUM_KILLED\"<\/span>,  <span style=\"color: #998; font-style: italic;\">\/\/ aggregate field<\/span>\r\n      legendOptions: {\r\n        title: <span style=\"color: #d14;\">\"Car crashes\"<\/span>\r\n      },\r\n      classBreakInfos: [{\r\n        minValue: <span style=\"color: #008080;\">0<\/span>,\r\n        maxValue: <span style=\"color: #008080;\">0<\/span>,\r\n        label: <span style=\"color: #d14;\">\"No fatalities\"<\/span>,\r\n        symbol: {\r\n          type: <span style=\"color: #d14;\">\"simple-marker\"<\/span>,\r\n          color: excludedColor,\r\n          outline: {\r\n            color: <span style=\"color: #d14;\">\"rgba(153, 31, 23, 0.3)\"<\/span>,\r\n            width: <span style=\"color: #008080;\">0.3<\/span>\r\n          }\r\n        }\r\n      }, {\r\n        minValue: <span style=\"color: #008080;\">1<\/span>,\r\n        maxValue: <span style=\"color: #008080;\">99999999999<\/span>,\r\n        label: <span style=\"color: #d14;\">\"Includes fatalities\"<\/span>,\r\n        symbol: {\r\n          type: <span style=\"color: #d14;\">\"simple-marker\"<\/span>,\r\n          color: includedColor,\r\n          outline: {\r\n            color: <span style=\"color: #d14;\">\"rgba(153, 31, 23, 0.3)\"<\/span>,\r\n            width: <span style=\"color: #008080;\">0.3<\/span>\r\n          }\r\n        }\r\n      }]\r\n    }\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ ...other clustering properties<\/span>\r\n  }\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ ...other layer properties<\/span>\r\n});\r\n<\/code><\/pre>\n<p><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurereduction-cluster-aggregate-fields\/\"><strong>View the live app<\/strong><\/a><br \/>\n<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/sandbox\/?sample=featurereduction-cluster-aggregate-fields\"><strong>Explore the code<\/strong><\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1776592,"id":1776592,"title":"5-includes-excludes","filename":"5-includes-excludes.png","filesize":583092,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/5-includes-excludes.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\/5-includes-excludes","alt":"Vehicle crashes in New York City (2020) clustered.","author":"6561","description":"","caption":"Vehicle crashes in New York City (2020) represented as clusters. The size of the cluster indicates the total number of crashes. Red clusters indicate at least one fatality occurred within the cluster. Data source: NYC OpenData.","name":"5-includes-excludes","status":"inherit","uploaded_to":1775722,"date":"2022-11-17 23:59:14","modified":"2022-11-18 02:01: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":1031,"height":621,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/5-includes-excludes-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/5-includes-excludes.png","medium-width":433,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/5-includes-excludes.png","medium_large-width":768,"medium_large-height":463,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/5-includes-excludes.png","large-width":1031,"large-height":621,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/5-includes-excludes.png","1536x1536-width":1031,"1536x1536-height":621,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/5-includes-excludes.png","2048x2048-width":1031,"2048x2048-height":621,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/5-includes-excludes-772x465.png","card_image-width":772,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/5-includes-excludes.png","wide_image-width":1031,"wide_image-height":621}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurereduction-cluster-aggregate-fields\/"},{"acf_fc_layout":"content","content":"<h3>8. Clusters as pie charts<\/h3>\n<p>By default, clusters for layers rendered with a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-UniqueValueRenderer.html\">UniqueValueRenderer<\/a> will render using the symbol of the predominant category in the cluster. However, this visualization can be misleading as the predominant category often doesn\u2019t indicate a majority.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1776762,"id":1776762,"title":"pie-predominance-compare","filename":"pie-predominance-compare.jpg","filesize":383306,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/pie-predominance-compare.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\/pie-predominance-compare","alt":"comparison between pie charts and predominant symbols in point clusters","author":"6561","description":"","caption":"By default clusters of categorical data are represented with the predominant category in the cluster (left). However, using pie charts (right), shows that predominance may skew the interpretation of the data since the predominant category may not represent a majority of features.","name":"pie-predominance-compare","status":"inherit","uploaded_to":1775722,"date":"2022-11-18 02:12:44","modified":"2022-11-18 02:15:16","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/pie-predominance-compare-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/pie-predominance-compare.jpg","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/pie-predominance-compare.jpg","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/pie-predominance-compare.jpg","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/pie-predominance-compare-1536x864.jpg","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/pie-predominance-compare.jpg","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/pie-predominance-compare-826x465.jpg","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/pie-predominance-compare-1920x1080.jpg","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/pie-predominance-compare.jpg"},{"acf_fc_layout":"content","content":"<p>For this reason, you may want to show more detail about the categories inside the cluster using a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-PieChartRenderer.html\">PieChartRenderer<\/a>. To do this, you need to define a field for each category that returns the sum of the features belonging to that category. This can be done by writing a one-line Arcade expression for each category. You should also be careful to match the colors of the pie slices with the colors of the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-UniqueValueRenderer.html#uniqueValueInfos\">unique value infos<\/a> of the layer\u2019s renderer.<\/p>\n<p>Because this can be a tedious process, we provide the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-smartMapping-renderers-pieChart.html#createRendererForClustering\">createRendererForClustering<\/a> function to generate a pie chart renderer along with the required fields to apply to the FeatureReductionCluster instance.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\">layer.renderer = {\r\n   type: <span style=\"color: #d14;\">\"unique-value\"<\/span>,\r\n   field: <span style=\"color: #d14;\">\"Complaint_Type\"<\/span>,\r\n   uniqueValueInfos: [\r\n     <span style=\"color: #998; font-style: italic;\">\/\/ defines symbols for representing<\/span>\r\n     <span style=\"color: #998; font-style: italic;\">\/\/ unique categories or values<\/span>\r\n   ]\r\n   <span style=\"color: #998; font-style: italic;\">\/\/ ...other layer properties<\/span>\r\n },\r\n\r\n <span style=\"color: #333; font-weight: bold;\">const<\/span> { renderer, fields } =\r\n   <span style=\"color: #333; font-weight: bold;\">await<\/span> pieChartRendererCreator.createRendererForClustering({\r\n     layer,\r\n     shape: <span style=\"color: #d14;\">\"donut\"<\/span>\r\n   });\r\n\r\n layer.featureReduction = {\r\n   type: <span style=\"color: #d14;\">\"cluster\"<\/span>,\r\n   fields,\r\n   renderer\r\n   <span style=\"color: #998; font-style: italic;\">\/\/ ...other clustering properties<\/span>\r\n };\r\n <\/code><\/pre>\n<p>This function allows you to generate a donut chart or a fully filled in pie chart. The donut chart is nice because you can fit a label inside the donut hole, but the pie may be easier to read.<\/p>\n<p><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurereduction-cluster-pie-charts\/\"><strong>View the live app<\/strong><\/a><br \/>\n<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/sandbox\/?sample=featurereduction-cluster-pie-charts\"><strong>Explore the code<\/strong><\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1776632,"id":1776632,"title":"8-donut","filename":"8-donut.png","filesize":499971,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-donut.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\/8-donut","alt":"Vehicle-related 311 incidents in New York City (2015).","author":"6561","description":"","caption":"Vehicle-related 311 incidents in New York City (2015) represented as point clusters. Each cluster is a donut chart where each color on the chart indicates an incident type. This is effective for placing the the count of the cluster in the donut hole, but the overall pattern may be more difficult to interpret.","name":"8-donut","status":"inherit","uploaded_to":1775722,"date":"2022-11-18 00:01:15","modified":"2022-11-18 00: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":1098,"height":847,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-donut-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-donut.png","medium-width":338,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-donut.png","medium_large-width":768,"medium_large-height":592,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-donut.png","large-width":1098,"large-height":847,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-donut.png","1536x1536-width":1098,"1536x1536-height":847,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-donut.png","2048x2048-width":1098,"2048x2048-height":847,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-donut-603x465.png","card_image-width":603,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-donut.png","wide_image-width":1098,"wide_image-height":847}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurereduction-cluster-pie-charts\/"},{"acf_fc_layout":"image","image":{"ID":1776622,"id":1776622,"title":"8 - pie","filename":"8-pie.png","filesize":428385,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-pie.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\/8-pie","alt":"","author":"6561","description":"","caption":"Vehicle-related 311 incidents in New York City (2015) represented as point clusters. Each cluster is a pie chart where each color on the chart indicates an incident type. This is probably easier to read than a donut chart, though the abundance of color can still overwhelm the user.","name":"8-pie","status":"inherit","uploaded_to":1775722,"date":"2022-11-18 00:00:15","modified":"2022-11-18 00:22:12","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":1167,"height":807,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-pie-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-pie.png","medium-width":377,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-pie.png","medium_large-width":768,"medium_large-height":531,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-pie.png","large-width":1167,"large-height":807,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-pie.png","1536x1536-width":1167,"1536x1536-height":807,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-pie.png","2048x2048-width":1167,"2048x2048-height":807,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-pie-672x465.png","card_image-width":672,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/8-pie.png","wide_image-width":1167,"wide_image-height":807}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/clustering-experiments\/custom\/nyc-311-pie-charts.html"},{"acf_fc_layout":"sidebar","content":"<p>Pie chart renderers typically result in displaying a lot of color in the map. While the information presented is more detailed, it can overwhelm the end user. Despite its flaws, the default predominance option may be best for readability when many categories are present. Pie charts are most effective when 2 &#8211; 4 categories are defined in the renderer.<\/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":"<h2>Conclusion<\/h2>\n<p>The latest version of the ArcGIS JS API gives you full control over styling clusters in a variety of ways. While having this degree of control is nice, keep in mind that most of the time the styles automatically generated based on the layer\u2019s renderer will be the best visualization option.<\/p>\n<p>Check out all the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/?tagged=clustering\">clustering samples<\/a> in the ArcGIS JS API documentation to learn more.<\/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":1100961,"post_author":"6561","post_date":"2021-01-05 09:00:40","post_date_gmt":"2021-01-05 17:00:40","post_content":"","post_title":"Summarize and explore point clusters in web apps","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"summarize-and-explore-point-clusters-in-web-apps","to_ping":"","pinged":"","post_modified":"2021-01-06 09:42:30","post_modified_gmt":"2021-01-06 17:42:30","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1100961","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"1","filter":"raw"},{"ID":1768662,"post_author":"6331","post_date":"2022-11-10 08:29:46","post_date_gmt":"2022-11-10 16:29:46","post_content":"","post_title":"Aggregation-o-rama! Binning, Clustering, and Clustered Pies now in Map Viewer","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"aggregation-o-rama","to_ping":"","pinged":"","post_modified":"2024-06-20 11:46:13","post_modified_gmt":"2024-06-20 18:46:13","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1768662","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"2","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":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":1442612,"post_author":"6561","post_date":"2022-01-10 09:00:28","post_date_gmt":"2022-01-10 17:00:28","post_content":"","post_title":"Summarize and explore point clusters with Arcade in popups","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"summarize-and-explore-point-clusters-with-arcade-in-popups","to_ping":"","pinged":"","post_modified":"2024-11-01 00:01:02","post_modified_gmt":"2024-11-01 07:01:02","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1442612","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"4","filter":"raw"},{"ID":1760672,"post_author":"4271","post_date":"2022-11-09 21:14:01","post_date_gmt":"2022-11-10 05:14:01","post_content":"","post_title":"What's new in ArcGIS API for JavaScript (v4.25)","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-api-for-javascript-v4-25","to_ping":"","pinged":"","post_modified":"2024-04-12 03:26:19","post_modified_gmt":"2024-04-12 10:26:19","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1760672","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\/11\/card-1.jpg","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/11\/banner-2.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>8 ways to style point clusters on the web<\/title>\n<meta name=\"description\" content=\"Learn various ways you can visualize point clusters in web apps, from default styles to fully customize-able renderers and symbols.\" \/>\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\/8-ways-to-style-point-clusters-on-the-web\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"8 ways to style point clusters on the web\" \/>\n<meta property=\"og:description\" content=\"Learn various ways you can visualize point clusters in web apps, from default styles to fully customize-able renderers and symbols.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\" \/>\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-04-12T10:23:59+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"8 ways to style point clusters on the web\",\"datePublished\":\"2022-11-29T16:35:18+00:00\",\"dateModified\":\"2024-04-12T10:23:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\"},\"wordCount\":8,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"clustering\",\"data visualization\",\"Pie Chart\",\"what's new november 2022\"],\"articleSection\":[\"Developers\",\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\",\"name\":\"8 ways to style point clusters on the web\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2022-11-29T16:35:18+00:00\",\"dateModified\":\"2024-04-12T10:23:59+00:00\",\"description\":\"Learn various ways you can visualize point clusters in web apps, from default styles to fully customize-able renderers and symbols.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"8 ways to style point clusters on the web\"}]},{\"@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":"8 ways to style point clusters on the web","description":"Learn various ways you can visualize point clusters in web apps, from default styles to fully customize-able renderers and symbols.","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\/8-ways-to-style-point-clusters-on-the-web","og_locale":"en_US","og_type":"article","og_title":"8 ways to style point clusters on the web","og_description":"Learn various ways you can visualize point clusters in web apps, from default styles to fully customize-able renderers and symbols.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-04-12T10:23:59+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"8 ways to style point clusters on the web","datePublished":"2022-11-29T16:35:18+00:00","dateModified":"2024-04-12T10:23:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web"},"wordCount":8,"commentCount":2,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["clustering","data visualization","Pie Chart","what's new november 2022"],"articleSection":["Developers","Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web","name":"8 ways to style point clusters on the web","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2022-11-29T16:35:18+00:00","dateModified":"2024-04-12T10:23:59+00:00","description":"Learn various ways you can visualize point clusters in web apps, from default styles to fully customize-able renderers and symbols.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/8-ways-to-style-point-clusters-on-the-web#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"8 ways to style point clusters on the web"}]},{"@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":"November 29, 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\/11\/banner-2.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"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":302462,"name":"Pie Chart","slug":"pie-chart","term_group":0,"term_taxonomy_id":302462,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw"},{"term_id":767002,"name":"what's new november 2022","slug":"whats-new-november-2022","term_group":0,"term_taxonomy_id":767002,"taxonomy":"post_tag","description":"","parent":0,"count":25,"filter":"raw"}],"category_data":[{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":426,"filter":"raw"},{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2698,"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":215,"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":363,"filter":"raw"},{"term_id":36551,"name":"ArcGIS Online","slug":"arcgis-online","term_group":0,"term_taxonomy_id":36551,"taxonomy":"product","description":"","parent":0,"count":2433,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":765,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1775722","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=1775722"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1775722\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1775722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1775722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1775722"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1775722"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1775722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}