{"id":1799902,"date":"2023-01-03T11:25:21","date_gmt":"2023-01-03T19:25:21","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1799902"},"modified":"2024-04-12T03:19:28","modified_gmt":"2024-04-12T10:19:28","slug":"five-ways-to-visualize-point-density-using-the-same-dataset","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset","title":{"rendered":"Five ways to visualize point density using the same dataset"},"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,768332,765772],"industry":[],"product":[761642,36831,36601],"class_list":["post-1799902","blog","type-blog","status-publish","format-standard","hentry","category-developers","category-mapping","tag-binning","tag-clustering","tag-data-visualization","tag-density","tag-heatmap","product-platform","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Explore five different ways to visualize point density on the web using the same dataset.","flexible_content":[{"acf_fc_layout":"content","content":"

The team building the ArcGIS Maps SDK for JavaScript<\/a> (JavaScript Maps SDK) is constantly making improvements to boost rendering performance. With each new improvement, we can render more data faster than ever before in the browser. More data means you should be more fluent in the various ways you can effectively visualize the density of large datasets<\/a> in web apps.<\/p>\n

Large point layers can be deceptive. What appears to be just a few points in a small area can in reality be several thousand.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1800142,"id":1800142,"title":"points-small","filename":"points-small.png","filesize":981306,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/points-small.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\/points-small","alt":"Motor vehicle crashes in New York City (2020).","author":"6561","description":"","caption":"More than 103,000 motor vehicle crashes in New York City. Without binning (or another form of aggregation) it's difficult to view the relative density of features, especially when many points are stacked on top of one another.","name":"points-small","status":"inherit","uploaded_to":1799902,"date":"2022-12-16 19:52:47","modified":"2022-12-20 00:03:22","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1159,"height":721,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/points-small-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/points-small.png","medium-width":420,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/points-small.png","medium_large-width":768,"medium_large-height":478,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/points-small.png","large-width":1159,"large-height":721,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/points-small.png","1536x1536-width":1159,"1536x1536-height":721,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/points-small.png","2048x2048-width":1159,"2048x2048-height":721,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/points-small-747x465.png","card_image-width":747,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/points-small.png","wide_image-width":1159,"wide_image-height":721}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/compare-methods\/points-only.html"},{"acf_fc_layout":"content","content":"

The JavaScript Maps SDK provides a variety of ways to visualize point density. This post will map motor vehicle crashes in New York City using five different techniques for visualizing high density data. I’ll describe each technique, when and why to use it, and link to resources that provide more detail about how to create the style.<\/p>\n

Each of the following techniques is also described with different examples in the High Density Data<\/a> chapter of the Visualization<\/a> guide in the JavaScript Maps SDK documentation.<\/p>\n

Opacity<\/a> | Heatmap<\/a> | Clustering<\/a> | Binning<\/a> | Bloom<\/a><\/p>\n

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

Opacity<\/h2>\n

Any layer with overlapping features can be effectively visualized by setting a highly transparent symbol on all features<\/a>. The higher the density, the higher threshold you should set for transparency (between 95% and 99% works best).<\/p>\n

Small scale example<\/strong><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1800122,"id":1800122,"title":"opacity-small","filename":"opacity-small.png","filesize":1024451,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-small.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\/opacity-small","alt":"The density of motor vehicle crashes in New York City (2020) visualized with per-feature opacity.","author":"6561","description":"","caption":"The density of motor vehicle crashes in New York City (2020) visualized with per-feature opacity.","name":"opacity-small","status":"inherit","uploaded_to":1799902,"date":"2022-12-16 19:52:29","modified":"2022-12-16 19:56:19","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1122,"height":800,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-small-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-small.png","medium-width":366,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-small.png","medium_large-width":768,"medium_large-height":548,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-small.png","large-width":1122,"large-height":800,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-small.png","1536x1536-width":1122,"1536x1536-height":800,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-small.png","2048x2048-width":1122,"2048x2048-height":800,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-small-652x465.png","card_image-width":652,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-small.png","wide_image-width":1122,"wide_image-height":800}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/compare-methods\/opacity.html"},{"acf_fc_layout":"content","content":"

When points overlap, the opacity of each graphic has an additive effect, meaning areas of greater density appear prominently and less dense areas only have a faint symbol. This makes individual points very difficult to see, but areas with a high density of overlapping points are prominent.<\/p>\n

Large scale example<\/strong><\/p>\n

The following image shows how this style appears when zoomed to a large scale.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1800112,"id":1800112,"title":"opacity-large","filename":"opacity-large.png","filesize":1270791,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-large.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\/opacity-large","alt":"The density of motor vehicle crashes in Bronx, New York City (2020) visualized with per-feature opacity.","author":"6561","description":"","caption":"The density of motor vehicle crashes in Bronx, New York City (2020) visualized with per-feature opacity.","name":"opacity-large","status":"inherit","uploaded_to":1799902,"date":"2022-12-16 19:52:21","modified":"2022-12-16 19:57:27","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":1261,"height":809,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-large-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-large.png","medium-width":407,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-large.png","medium_large-width":768,"medium_large-height":493,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-large.png","large-width":1261,"large-height":809,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-large.png","1536x1536-width":1261,"1536x1536-height":809,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-large.png","2048x2048-width":1261,"2048x2048-height":809,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-large-725x465.png","card_image-width":725,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/opacity-large.png","wide_image-width":1261,"wide_image-height":809}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/compare-methods\/opacity.html"},{"acf_fc_layout":"content","content":"

I also set a size visual variable on the renderer to change the size of all points as the user zooms in and out. Without this degree of control, points with a fixed size in screen space will begin to overlap at small scales. This will result in a blob of points much like the initial image in this article.<\/p>\n

layer.renderer = {\r\n  type: \"simple\"<\/span>,\r\n  label: \"Crash location\"<\/span>,\r\n  symbol: {\r\n    type: \"simple-marker\"<\/span>,\r\n    color: \"rgba(197, 27, 138, 0.025)\"<\/span>,\r\n    outline: null<\/span>\r\n  },\r\n  visualVariables: [{\r\n    type: \"size\"<\/span>,\r\n    valueExpression: \"$view.scale\"<\/span>,\r\n    stops: [\r\n      \/\/ vary the size of icons by scale<\/span>\r\n      { value: initialViewScale * 4<\/span>, size: 1<\/span> },\r\n      { value: initialViewScale * 2<\/span>, size: 2<\/span> },\r\n      { value: initialViewScale, size: 3<\/span> },\r\n      { value: initialViewScale \/ 4<\/span>, size: 6<\/span> },\r\n      { value: initialViewScale \/ 16<\/span>, size: 10<\/span> }\r\n    ]\r\n  }]\r\n}\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":1800732,"id":1800732,"title":"Screenshot 2022-12-19 at 4.09.32 PM","filename":"Screenshot-2022-12-19-at-4.09.32-PM.png","filesize":78023,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-4.09.32-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\/screenshot-2022-12-19-at-4-09-32-pm","alt":"Even when opacity is applied to individual symbols, it is difficult to view patterns in the density of points when the size of points doesn't vary by scale.","author":"6561","description":"","caption":"Even when opacity is applied to individual symbols, it is difficult to view patterns in the density of points when the size of points doesn't vary by scale.","name":"screenshot-2022-12-19-at-4-09-32-pm","status":"inherit","uploaded_to":1799902,"date":"2022-12-20 00:09:42","modified":"2022-12-20 00:10:34","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":581,"height":338,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-4.09.32-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-4.09.32-PM.png","medium-width":449,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-4.09.32-PM.png","medium_large-width":581,"medium_large-height":338,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-4.09.32-PM.png","large-width":581,"large-height":338,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-4.09.32-PM.png","1536x1536-width":581,"1536x1536-height":338,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-4.09.32-PM.png","2048x2048-width":581,"2048x2048-height":338,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-4.09.32-PM.png","card_image-width":581,"card_image-height":338,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-4.09.32-PM.png","wide_image-width":581,"wide_image-height":338}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"sidebar","content":"
When to use this style:<\/strong> at small scales<\/h3>\n
This technique works well at small scales when the location of individual points is not as important as visualizing the overall density. It isn\u2019t as successful at large scales when the user may be more interested in the locations of individual crashes. With an opacity value of just 2.5%, it\u2019s simply too difficult to view individual points.<\/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":"
<\/a><\/p>\n
Heatmap<\/h2>\n
A Heatmap<\/a> renders point features as a continuous surface, emphasizing areas with a higher density of points along a continuous color ramp. You can also weight the heatmap surface based on a data value. Each pixel in the view is colored based on an interpolated value between areas of high and low density.<\/p>\n
Check out this article<\/a> to learn how to create a heatmap.<\/p>\n
Small scale example<\/strong><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1800102,"id":1800102,"title":"heatmap-small","filename":"heatmap-small.png","filesize":750914,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-small.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\/heatmap-small","alt":"The density of motor vehicle crashes in New York City (2020) visualized as a heatmap.","author":"6561","description":"","caption":"The density of motor vehicle crashes in New York City (2020) visualized as a heatmap.","name":"heatmap-small","status":"inherit","uploaded_to":1799902,"date":"2022-12-16 19:52:12","modified":"2022-12-16 19:59: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":1083,"height":739,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-small-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-small.png","medium-width":382,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-small.png","medium_large-width":768,"medium_large-height":524,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-small.png","large-width":1083,"large-height":739,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-small.png","1536x1536-width":1083,"1536x1536-height":739,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-small.png","2048x2048-width":1083,"2048x2048-height":739,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-small-681x465.png","card_image-width":681,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-small.png","wide_image-width":1083,"wide_image-height":739}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/compare-methods\/heatmap-small-scale.html"},{"acf_fc_layout":"content","content":"
Large scale example<\/strong><\/p>\n
Heatmap can also be effectively used at large scales. Note that the renderer values should be updated so the visualization becomes more appropriate for the scale.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1800092,"id":1800092,"title":"heatmap-large","filename":"heatmap-large.png","filesize":1344473,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-large.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\/heatmap-large","alt":"The density of motor vehicle crashes in Bronx, New York City (2020) visualized as a heatmap.","author":"6561","description":"","caption":"The density of motor vehicle crashes in Bronx, New York City (2020) visualized as a heatmap.","name":"heatmap-large","status":"inherit","uploaded_to":1799902,"date":"2022-12-16 19:52:04","modified":"2022-12-16 19:59:27","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":1231,"height":791,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-large-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-large.png","medium-width":406,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-large.png","medium_large-width":768,"medium_large-height":493,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-large.png","large-width":1231,"large-height":791,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-large.png","1536x1536-width":1231,"1536x1536-height":791,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-large.png","2048x2048-width":1231,"2048x2048-height":791,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-large-724x465.png","card_image-width":724,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/heatmap-large.png","wide_image-width":1231,"wide_image-height":791}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/compare-methods\/heatmap-large-scale.html"},{"acf_fc_layout":"content","content":"
Had I not updated the style in previous image, I would see the interpolated surface extend into areas, like buildings and parks, where crashes cannot occur.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1800852,"id":1800852,"title":"Screenshot 2022-12-19 at 5.25.31 PM","filename":"Screenshot-2022-12-19-at-5.25.31-PM.png","filesize":1303383,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-5.25.31-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\/screenshot-2022-12-19-at-5-25-31-pm","alt":"The density renderer calculated for the entire city of New York is inappropriate when viewing at a larger scale, like this one. Parts of the heatmap creep into areas where crashes cannot occur.","author":"6561","description":"","caption":"The density renderer calculated for the entire city of New York is inappropriate when viewing at a larger scale, like this one. Parts of the heatmap creep into areas where crashes cannot occur.","name":"screenshot-2022-12-19-at-5-25-31-pm","status":"inherit","uploaded_to":1799902,"date":"2022-12-20 01:26:40","modified":"2022-12-20 01:28:04","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1421,"height":727,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-5.25.31-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-5.25.31-PM.png","medium-width":464,"medium-height":237,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-5.25.31-PM.png","medium_large-width":768,"medium_large-height":393,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-5.25.31-PM.png","large-width":1421,"large-height":727,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-5.25.31-PM.png","1536x1536-width":1421,"1536x1536-height":727,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-5.25.31-PM.png","2048x2048-width":1421,"2048x2048-height":727,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-5.25.31-PM-826x423.png","card_image-width":826,"card_image-height":423,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/Screenshot-2022-12-19-at-5.25.31-PM.png","wide_image-width":1421,"wide_image-height":727}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/compare-methods\/heatmap-small-scale.html"},{"acf_fc_layout":"content","content":"
The referenceScale<\/a> property of a HeatmapRenderer<\/a> allows you to lock the visualization to a meaningful scale. This has the effect of making the heat map static, so the density surface remains consistent as you zoom in and out.<\/p>\n"},{"acf_fc_layout":"sidebar","content":"
When to use this style:<\/strong> to visualize continuous data<\/h3>\n
This technique works well at any scale where points overlap, usually at small scales (when zoomed out). Depending on the data, it may be more appropriate to visualize individual points with marker symbols at larger scales where points no longer overlap. Maintaining the heatmap at large scales is appropriate when the non-overlapping points represent individual observations reporting measurements for continuous (non-discrete) data, such as air pollution.<\/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":"
<\/a><\/p>\n
Clustering<\/h2>\n
Clustering<\/a> is a method of representing points as aggregates based on their proximity to one another in screen space. Typically, clusters are proportionally sized based on the number of features within each cluster.<\/p>\n
Clusters automatically adjust as you zoom in the view, making this a good way to view how spatial patterns in density appear at various resolutions.<\/p>\n
You can also create multivariate visualizations using cluster symbols<\/a>, giving you more flexibility than you get with opacity or heatmap.<\/p>\n
Small scale example<\/strong><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1800082,"id":1800082,"title":"clustering-small","filename":"clustering-small.png","filesize":621270,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-small.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\/clustering-small","alt":"The density of motor vehicle crashes in New York City (2020) visualized with clustering.","author":"6561","description":"","caption":"The density of motor vehicle crashes in New York City (2020) visualized with clustering.","name":"clustering-small","status":"inherit","uploaded_to":1799902,"date":"2022-12-16 19:51:56","modified":"2022-12-16 20:00:34","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1159,"height":795,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-small-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-small.png","medium-width":381,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-small.png","medium_large-width":768,"medium_large-height":527,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-small.png","large-width":1159,"large-height":795,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-small.png","1536x1536-width":1159,"1536x1536-height":795,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-small.png","2048x2048-width":1159,"2048x2048-height":795,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-small-678x465.png","card_image-width":678,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-small.png","wide_image-width":1159,"wide_image-height":795}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/compare-methods\/clustering.html"},{"acf_fc_layout":"content","content":"
Large scale example<\/strong><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1800072,"id":1800072,"title":"clustering-large","filename":"clustering-large.png","filesize":922479,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-large.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\/clustering-large","alt":"The density of motor vehicle crashes in Bronx, New York City (2020) visualized with clustering.","author":"6561","description":"","caption":"The density of motor vehicle crashes in Bronx, New York City (2020) visualized with clustering.","name":"clustering-large","status":"inherit","uploaded_to":1799902,"date":"2022-12-16 19:51:48","modified":"2022-12-16 20:00: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":1228,"height":755,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-large-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-large.png","medium-width":425,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-large.png","medium_large-width":768,"medium_large-height":472,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-large.png","large-width":1228,"large-height":755,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-large.png","1536x1536-width":1228,"1536x1536-height":755,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-large.png","2048x2048-width":1228,"2048x2048-height":755,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-large-756x465.png","card_image-width":756,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/clustering-large.png","wide_image-width":1228,"wide_image-height":755}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/compare-methods\/clustering.html"},{"acf_fc_layout":"sidebar","content":"
When to use this style:<\/strong> to reduce visual clutter, view multi-scale patterns<\/h3>\n
This technique works well at all scales. It works best for visualizing discrete point locations as opposed to points that report measurements intended for an interpolated surface, like a heatmap. When visualizing data related to a linear network, like car crashes, using a smaller cluster radius will result in clusters displaying on roads and intersections.<\/p>\n
Clustering also allows you to map additional information in addition to density, such as predominant category, all categories (as a pie chart), or other summary information.<\/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":"
<\/a><\/p>\n
Binning<\/h2>\n
Binning<\/a> aggregates data to predefined geographic cells, effectively representing point data as a gridded polygon layer. Typically, bins are styled with a continuous color ramp and labeled with the count of points contained by the bin. You can also use any style suitable for polygon layers to summarize point data as aggregates. The JavaScript Maps API uses the public domain geohash geocoding system to create the bins.<\/p>\n
The appropriate bin size depends on the view scale and desired data resolution.<\/p>\n
Small scale example<\/strong><\/p>\n
The following image shows car crashes binned at a fixedBinLevel<\/a> of 6.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1800032,"id":1800032,"title":"binning-small","filename":"binning-small.png","filesize":493446,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-small.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\/binning-small","alt":"The density of motor vehicle crashes in New York City (2020) visualized with binning.","author":"6561","description":"","caption":"The density of motor vehicle crashes in New York City (2020) visualized with binning.","name":"binning-small","status":"inherit","uploaded_to":1799902,"date":"2022-12-16 19:51:16","modified":"2022-12-16 20:01:26","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":1083,"height":823,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-small-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-small.png","medium-width":343,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-small.png","medium_large-width":768,"medium_large-height":584,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-small.png","large-width":1083,"large-height":823,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-small.png","1536x1536-width":1083,"1536x1536-height":823,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-small.png","2048x2048-width":1083,"2048x2048-height":823,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-small-612x465.png","card_image-width":612,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-small.png","wide_image-width":1083,"wide_image-height":823}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/compare-methods\/binning-level-6.html"},{"acf_fc_layout":"content","content":"
Large scale example<\/strong><\/p>\n
Similar to choosing an appropriate radius for clustering or heatmap, the size of each bin should be based on the expected viewing scale. The following image shows car crashes binned at a fixedBinLevel<\/a> of 7. This bin size is more appropriate as the user zooms in because it shows more precision in how crash densities occur in linear patterns (along roads).<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1800022,"id":1800022,"title":"binning-large-7","filename":"binning-large-7.png","filesize":1004518,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-large-7.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\/binning-large-7","alt":"The density of motor vehicle crashes in Bronx, New York City (2020) visualized with binning.","author":"6561","description":"","caption":"The density of motor vehicle crashes in Bronx, New York City (2020) visualized with binning.","name":"binning-large-7","status":"inherit","uploaded_to":1799902,"date":"2022-12-16 19:51:08","modified":"2022-12-16 20: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":1238,"height":780,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-large-7-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-large-7.png","medium-width":414,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-large-7.png","medium_large-width":768,"medium_large-height":484,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-large-7.png","large-width":1238,"large-height":780,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-large-7.png","1536x1536-width":1238,"1536x1536-height":780,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-large-7.png","2048x2048-width":1238,"2048x2048-height":780,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-large-7-738x465.png","card_image-width":738,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/binning-large-7.png","wide_image-width":1238,"wide_image-height":780}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/compare-methods\/binning-level-7.html"},{"acf_fc_layout":"sidebar","content":"
When to use this style:<\/strong> to visualize density based on a geographic grid<\/h3>\n
Unlike clustering, which aggregates data in screen space, binning will always visualize density based on geographic bounds. This makes the representation consistent at various scales. Because clusters don’t show the geographic extent of features in each cluster by default (you can actually see the extent of a cluster as you browse its features), it’s unclear from which areas a cluster’s features originate. Binning gives you a little more precision.<\/p>\n
Binning is also a good option when you want to map additional information in addition to density, such as predominant category, pie charts, or other summary information.<\/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":"
<\/a><\/p>\n
Bloom<\/h2>\n
Bloom<\/a> is a visual effect that brightens symbols representing a layer\u2019s features, making them appear to glow. This has an additive effect so areas where more features overlap will have a brighter and more intense glow. This makes bloom an effective way for visualizing dense datasets, especially against dark backgrounds.<\/p>\n
Large scale example<\/strong><\/p>\n
At a large scale, areas with a higher density of crash locations appear brighter. However, because the differences in density are subtle, the variation in this map is not as obvious as other methods like clustering.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1800062,"id":1800062,"title":"bloom-small","filename":"bloom-small.png","filesize":1170561,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-small.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\/bloom-small","alt":"The density of motor vehicle crashes in New York City (2020) visualized with bloom.","author":"6561","description":"","caption":"The density of motor vehicle crashes in New York City (2020) visualized with bloom.","name":"bloom-small","status":"inherit","uploaded_to":1799902,"date":"2022-12-16 19:51:39","modified":"2022-12-16 20:02: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":1048,"height":765,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-small-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-small.png","medium-width":358,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-small.png","medium_large-width":768,"medium_large-height":561,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-small.png","large-width":1048,"large-height":765,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-small.png","1536x1536-width":1048,"1536x1536-height":765,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-small.png","2048x2048-width":1048,"2048x2048-height":765,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-small-637x465.png","card_image-width":637,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-small.png","wide_image-width":1048,"wide_image-height":765}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/compare-methods\/bloom.html"},{"acf_fc_layout":"content","content":"
Small scale example<\/strong><\/p>\n
While bloom creates an eye-catching visual, it can be frustratingly difficult to make bloom settings work at more than one scale. For example, it’s difficult to see intersections with a higher density of crash incidents when zoomed to a smaller scale.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1800052,"id":1800052,"title":"bloom-large","filename":"bloom-large.png","filesize":1245449,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-large.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\/bloom-large","alt":"The density of motor vehicle crashes in Bronx, New York City (2020) visualized with bloom.","author":"6561","description":"","caption":"The density of motor vehicle crashes in Bronx, New York City (2020) visualized with bloom. This map is good for showing the locations of where crashes occur, but it fails if you try to communicate density. Overlapping points become too hidden.","name":"bloom-large","status":"inherit","uploaded_to":1799902,"date":"2022-12-16 19:51:30","modified":"2022-12-20 01:08:39","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1157,"height":733,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-large-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-large.png","medium-width":412,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-large.png","medium_large-width":768,"medium_large-height":487,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-large.png","large-width":1157,"large-height":733,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-large.png","1536x1536-width":1157,"1536x1536-height":733,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-large.png","2048x2048-width":1157,"2048x2048-height":733,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-large-734x465.png","card_image-width":734,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/bloom-large.png","wide_image-width":1157,"wide_image-height":733}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/binning-experiments\/compare-methods\/bloom.html"},{"acf_fc_layout":"sidebar","content":"
When to use this style:<\/strong> for striking variations in density at a limited scale range<\/h3>\n
Bloom is easier to read when there are striking differences in density. When density patterns are more nuanced, the subtleties in brightness are difficult to interpret. It also works best when viewed in a narrow scale range.<\/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":"
Conclusion<\/h2>\n
There you have it. We have used five techniques to map the density of point datasets. Always ask yourself the following questions when creating a density visualization:<\/p>\n
    \n
  • At which scale or range of scales is calculating<\/em> the density meaningful?<\/li>\n
  • At which scale or range of scales is the viewing<\/em> density visualization important to the end user?<\/li>\n
  • Is there a scale at which viewing individual locations becomes important?<\/li>\n
  • Is the phenomena I’m trying to illustrate continuous or discrete? If continuous, is the range in values small or large?<\/li>\n
  • Do I need to map other attribute information in addition to density?<\/li>\n<\/ul>\n
    The preferred technique depends largely on your personal preference. Keep in mind that each has its benefits, bias, and limitations. You should always be aware of these and be deliberate in which limitations you\u2019re willing to live with.<\/p>\n
    Check out the related articles below to learn more details about some of the examples described in this article.<\/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":""}],"related_articles":[{"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&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&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&p=1442612","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"4","filter":"raw"},{"ID":1622562,"post_author":"6561","post_date":"2022-06-27 09:10:12","post_date_gmt":"2022-06-27 16:10:12","post_content":"","post_title":"How to create heat maps that work at all scales","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"how-to-create-heat-maps-that-work-at-all-scales","to_ping":"","pinged":"","post_modified":"2024-04-12 03:39:16","post_modified_gmt":"2024-04-12 10:39:16","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1622562","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":1788612,"post_author":"6561","post_date":"2022-12-13 09:55:36","post_date_gmt":"2022-12-13 17:55:36","post_content":"","post_title":"Map density using reference size theme for binning","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"density-mapping-with-binning-and-wurman-dots","to_ping":"","pinged":"","post_modified":"2024-08-05 16:06:34","post_modified_gmt":"2024-08-05 23:06:34","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1788612","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"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&p=1100961","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"1","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/card-1.jpg","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/banner-2.jpg"},"yoast_head":"\nFive ways to visualize point density using the same dataset<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Five ways to visualize point density using the same dataset\" \/>\n<meta property=\"og:description\" content=\"Explore five different ways to visualize point density on the web using the same dataset.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\" \/>\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:19:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2022\/12\/card-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"826\" \/>\n\t<meta property=\"og:image:height\" content=\"465\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Explore five different ways to visualize point density on the web using the same dataset.\" \/>\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\/five-ways-to-visualize-point-density-using-the-same-dataset#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Five ways to visualize point density using the same dataset\",\"datePublished\":\"2023-01-03T19:25:21+00:00\",\"dateModified\":\"2024-04-12T10:19:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\"},\"wordCount\":10,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"binning\",\"clustering\",\"data visualization\",\"density\",\"heatmap\"],\"articleSection\":[\"Developers\",\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\",\"name\":\"Five ways to visualize point density using the same dataset\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2023-01-03T19:25:21+00:00\",\"dateModified\":\"2024-04-12T10:19:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Five ways to visualize point density using the same dataset\"}]},{\"@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":"Five ways to visualize point density using the same dataset","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\/five-ways-to-visualize-point-density-using-the-same-dataset","og_locale":"en_US","og_type":"article","og_title":"Five ways to visualize point density using the same dataset","og_description":"Explore five different ways to visualize point density on the web using the same dataset.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-04-12T10:19:28+00:00","og_image":[{"width":826,"height":465,"url":"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2022\/12\/card-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_description":"Explore five different ways to visualize point density on the web using the same dataset.","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Five ways to visualize point density using the same dataset","datePublished":"2023-01-03T19:25:21+00:00","dateModified":"2024-04-12T10:19:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset"},"wordCount":10,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["binning","clustering","data visualization","density","heatmap"],"articleSection":["Developers","Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset","name":"Five ways to visualize point density using the same dataset","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2023-01-03T19:25:21+00:00","dateModified":"2024-04-12T10:19:28+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/five-ways-to-visualize-point-density-using-the-same-dataset#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Five ways to visualize point density using the same dataset"}]},{"@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":"January 3, 2023","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\/banner-2.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":768332,"name":"density","slug":"density","term_group":0,"term_taxonomy_id":768332,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw"},{"term_id":765772,"name":"heatmap","slug":"heatmap","term_group":0,"term_taxonomy_id":765772,"taxonomy":"post_tag","description":"","parent":0,"count":3,"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":2683,"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":761,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1799902","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=1799902"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1799902\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1799902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1799902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1799902"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1799902"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1799902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}