{"id":490632,"date":"2019-04-16T08:00:53","date_gmt":"2019-04-16T15:00:53","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=490632"},"modified":"2019-04-15T16:26:52","modified_gmt":"2019-04-15T23:26:52","slug":"visualizing-growth-with-dot-density","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density","title":{"rendered":"Visualizing growth with dot density"},"author":6561,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[30171,30111,35751,27491,345572],"industry":[],"product":[36831,36601],"class_list":["post-490632","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-animation","tag-data-visualization","tag-dot-density","tag-jsapi4","tag-whats-new-march-2019","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Learn how to build an interactive dot density map that animates the visibility of dots to create the perception of growth over time.","flexible_content":[{"acf_fc_layout":"content","content":"<p>As of <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-arcgis-api-for-javascript-4-11-march-2019\/\">version 4.11<\/a> of the <a href=\"https:\/\/developers.arcgis.com\/javascript\/\">ArcGIS API for JavaScript<\/a> (ArcGIS JS API), you can create interactive dot density visualizations in the browser. The following blog posts provide an introduction to dot density and demonstrate how you can use this technique to create interactive visualizations.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/dot-density-for-the-web\/\">Dot density maps for the web<\/a><\/li>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-dot-density-maps-for-the-web\/\">Interactive dot density maps for the web<\/a><\/li>\n<\/ul>\n<p>In this post I\u2019ll demonstrate one way you can visualize <em>growth over time<\/em> using dot density in the ArcGIS JS API.<\/p>\n<p><a href=\"https:\/\/ekenes.github.io\/conferences\/ds-2019\/plenary\/dot-density-housing\/index.html\">Check out this app<\/a>, which renders housing data by Census tract in the United States using dot density. In this map, one dot represents one house. The color of each dot indicates the decade in which the home was built. <\/p>\n<p>When you click the \u201cPlay Animation\u201d button, each dot&#8217;s visibility will animate from full transparency to full opacity to visualize housing construction from 1940 to 2015.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":490672,"id":490672,"title":"animation-short","filename":"animation-short.gif","filesize":1177419,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/animation-short.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density\/animation-short","alt":"Housing growth over time in Houston, Texas.","author":"6561","description":"","caption":"Housing growth over time. By animating the visibility of individual attributes, you can create the perception of growth over time in a dot density visualization.","name":"animation-short","status":"inherit","uploaded_to":490632,"date":"2019-04-12 23:53:08","modified":"2019-04-15 23:24:35","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":640,"height":360,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/animation-short-150x150.gif","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/animation-short.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/animation-short.gif","medium_large-width":640,"medium_large-height":360,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/animation-short.gif","large-width":640,"large-height":360,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/animation-short.gif","1536x1536-width":640,"1536x1536-height":360,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/animation-short.gif","2048x2048-width":640,"2048x2048-height":360,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/animation-short.gif","card_image-width":640,"card_image-height":360,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/animation-short.gif","wide_image-width":640,"wide_image-height":360}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/conferences\/ds-2019\/plenary\/dot-density-housing\/index.html"},{"acf_fc_layout":"content","content":"<h2>How it works<\/h2>\n<p>To create this visualization, I started off with a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-DotDensityRenderer.html\">DotDensityRenderer<\/a> that looks like this:<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\">\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> renderer = <span style=\"color: #333;font-weight: bold\">new<\/span> DotDensityRenderer({\r\n  referenceDotValue: <span style=\"color: #008080\">1<\/span>,\r\n  outline: <span style=\"color: #333;font-weight: 500\">null<\/span>,\r\n  legendOptions: {\r\n    <span style=\"color: #998;font-style: italic\">\/\/ Legend will display<\/span>\r\n    <span style=\"color: #998;font-style: italic\">\/\/ 1 Dot = 1 House<\/span>\r\n    unit: <span style=\"color: #d14\">\"House\"<\/span>\r\n  },\r\n  attributes: [\r\n    {\r\n      field: <span style=\"color: #d14\">\"ACSBLT1939\"<\/span>,\r\n      color: <span style=\"color: #d14\">\"orange\"<\/span>,\r\n      label: <span style=\"color: #d14\">\"Before 1940\"<\/span>\r\n    },\r\n    {\r\n      field: <span style=\"color: #d14\">\"ACSBLT1940\"<\/span>,\r\n      color: <span style=\"color: #d14\">\"#8be04e\"<\/span>,\r\n      label: <span style=\"color: #d14\">\"1940s\"<\/span>\r\n    },\r\n    {\r\n      field: <span style=\"color: #d14\">\"ACSBLT1950\"<\/span>,\r\n      color: <span style=\"color: #d14\">\"#5ad45a\"<\/span>,\r\n      label: <span style=\"color: #d14\">\"1950s\"<\/span>\r\n    },\r\n    {\r\n      field: <span style=\"color: #d14\">\"ACSBLT1960\"<\/span>,\r\n      color: <span style=\"color: #d14\">\"#00b7c7\"<\/span>,\r\n      label: <span style=\"color: #d14\">\"1960s\"<\/span>\r\n    },\r\n    {\r\n      field: <span style=\"color: #d14\">\"ACSBLT1970\"<\/span>,\r\n      color: <span style=\"color: #d14\">\"#1a53ff\"<\/span>,\r\n      label: <span style=\"color: #d14\">\"1970s\"<\/span>\r\n    },\r\n    {\r\n      field: <span style=\"color: #d14\">\"ACSBLT1980\"<\/span>,\r\n      color: <span style=\"color: #d14\">\"#4421af\"<\/span>,\r\n      label: <span style=\"color: #d14\">\"1980s\"<\/span>\r\n    },\r\n    {\r\n      field: <span style=\"color: #d14\">\"ACSBLT1990\"<\/span>,\r\n      color: <span style=\"color: #d14\">\"#7c1158\"<\/span>,\r\n      label: <span style=\"color: #d14\">\"1990s\"<\/span>\r\n    },\r\n    {\r\n      valueExpression: <span style=\"color: #d14\">\"$feature.ACSBLT2000 + $feature.ACSBLT2010 + $feature.ACSBLT2014\"<\/span>,\r\n      color: <span style=\"color: #d14\">\"#b30000\"<\/span>,\r\n      label: <span style=\"color: #d14\">\"After 2000\"<\/span>\r\n    }\r\n  ]\r\n});\r\n<\/code><\/pre>\n<p>There are a couple of things to observe about this renderer:<\/p>\n<p>1.<strong> I don\u2019t set a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-DotDensityRenderer.html#referenceScale\">referenceScale<\/a>.<\/strong> I described why you <em>should<\/em> set a reference scale in dot density visualizations for web maps <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/dot-density-for-the-web\/\">in a previous post<\/a>. In this case, I intentionally set a dot value of one to increase the map&#8217;s legibility. One dot represents one house. It\u2019s pretty easy to understand. I can get away with this because I set aggressive view scale constraints at a scale where a dot value of one makes sense. <a href=\"#a-final-thought\">More on this later.<\/a><\/p>\n<p>2. <strong>You can use <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/arcade\/\">Arcade expressions<\/a>!<\/strong> Take a look at the last attribute in the snippet above. Instead of setting a field value, I can set an Arcade expression to the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-support-AttributeColorInfo.html#valueExpression\">valueExpression<\/a> property of the attribute to aggregate fields together on the fly. I chose to do this mostly out of necessity. DotDensityRenderer restricts you to no more than eight <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-DotDensityRenderer.html#attributes\">attributes<\/a> (i.e. colors). That\u2019s for good reason. Eight colors already pushes the limits for your eyes to be able to perceive differences between each color. So I aggregate fields together in a single attribute using an expression:<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\">\r\n$feature.ACSBLT2000 + $feature.ACSBLT2010 + $feature.ACSBLT2014\r\n<\/code><\/pre>\n<p>This gives me the total number of homes built after the year 2000.<\/p>\n<p>That renderer code on its own will get you a visual that looks like this:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":490692,"id":490692,"title":"houston","filename":"houston.png","filesize":438528,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/houston.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density\/houston","alt":"Housing growth over time in Houston, Texas.","author":"6561","description":"","caption":"Housing in Houston, Texas by the decade in which structures were built. One dot represents one house.","name":"houston","status":"inherit","uploaded_to":490632,"date":"2019-04-13 00:07:41","modified":"2019-04-15 23:25: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":781,"height":678,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/houston-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/houston.png","medium-width":301,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/houston.png","medium_large-width":768,"medium_large-height":667,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/houston.png","large-width":781,"large-height":678,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/houston.png","1536x1536-width":781,"1536x1536-height":678,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/houston.png","2048x2048-width":781,"2048x2048-height":678,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/houston-536x465.png","card_image-width":536,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/houston.png","wide_image-width":781,"wide_image-height":678}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>To create the perception of housing growth through time, you can animate the visibility of each attribute\u2019s color using the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/window\/requestAnimationFrame\">requestAnimationFrame<\/a> API.<\/p>\n<h2>Animating visibility<\/h2>\n<p>On the surface, it appears the animation adds and removes fields from the original renderer, but that\u2019s actually not the case. Before the animation starts, I assign all attribute colors an opacity value of zero, with the exception of the first attribute.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\">\r\nrenderer.attributes.forEach( (attribute, i) =&gt; {\r\n  attribute.color.a = (i &gt; <span style=\"color: #008080\">0<\/span>) ? <span style=\"color: #008080\">0<\/span> : <span style=\"color: #008080\">1<\/span>;\r\n});\r\n<\/code><\/pre>\n<p>This will display the density of houses constructed prior to 1940.<\/p>\n<p>When the animation kicks off, I progressively increment the opacity of each attribute using <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/window\/requestAnimationFrame\">requestAnimationFrame<\/a>.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\">\r\n<span><span style=\"color: #333;font-weight: bold\">function<\/span> <span style=\"color: #900;font-weight: bold\">animate<\/span>(<span><\/span>) <\/span>{\r\n  <span style=\"color: #333;font-weight: bold\">let<\/span> animating = <span style=\"color: #333;font-weight: 500\">true<\/span>;\r\n  <span style=\"color: #333;font-weight: bold\">let<\/span> opacity = <span style=\"color: #008080\">0<\/span>;\r\n  <span style=\"color: #333;font-weight: bold\">let<\/span> colorIndex = <span style=\"color: #008080\">1<\/span>;  <span style=\"color: #998;font-style: italic\">\/\/ starts animation with second attribute<\/span>\r\n  <span style=\"color: #333;font-weight: bold\">let<\/span> startYear = <span style=\"color: #008080\">1930<\/span>;\r\n  <span><span style=\"color: #333;font-weight: bold\">function<\/span> <span style=\"color: #900;font-weight: bold\">updateStep<\/span>(<span><\/span>) <\/span>{\r\n    <span style=\"color: #998;font-style: italic\">\/\/ To update an existing renderer you must<\/span>\r\n    <span style=\"color: #998;font-style: italic\">\/\/ always clone it, update the properties,<\/span>\r\n    <span style=\"color: #998;font-style: italic\">\/\/ and reset it on the layer<\/span>\r\n    <span style=\"color: #333;font-weight: bold\">const<\/span> oldRenderer = layer.renderer <span style=\"color: #333;font-weight: bold\">as<\/span> DotDensityRenderer;\r\n    <span style=\"color: #333;font-weight: bold\">const<\/span> newRenderer = oldRenderer.clone();\r\n    <span style=\"color: #333;font-weight: bold\">if<\/span> (!animating) {\r\n      <span style=\"color: #333;font-weight: bold\">return<\/span>;\r\n    }\r\n\r\n    <span style=\"color: #998;font-style: italic\">\/\/ When one attribute's visibility has finished updating<\/span>\r\n    <span style=\"color: #998;font-style: italic\">\/\/ reset the params to prepare for animating next<\/span>\r\n    <span style=\"color: #998;font-style: italic\">\/\/ attribute's visibility<\/span>\r\n    <span style=\"color: #333;font-weight: bold\">if<\/span> (opacity &gt;= <span style=\"color: #008080\">1<\/span> &amp;&amp; colorIndex &lt; newRenderer.attributes.length){\r\n      opacity = <span style=\"color: #008080\">0<\/span>;\r\n      colorIndex++;\r\n      <span style=\"color: #333;font-weight: bold\">if<\/span>(colorIndex &gt; newRenderer.attributes.length - <span style=\"color: #008080\">1<\/span>){\r\n        stopAnimation();\r\n      }\r\n    } <span style=\"color: #333;font-weight: bold\">else<\/span> {\r\n      <span style=\"color: #333;font-weight: bold\">const<\/span> approxYear = startYear + ( colorIndex * <span style=\"color: #008080\">10<\/span>) + <span style=\"color: #0086b3\">Math<\/span>.round(opacity \/ <span style=\"color: #008080\">0.1<\/span>);\r\n      yearDiv.innerText = approxYear.toString();\r\n    }\r\n\r\n    <span style=\"color: #998;font-style: italic\">\/\/ set incremented opacity value on current attribute<\/span>\r\n    <span style=\"color: #333;font-weight: bold\">const<\/span> attributes = newRenderer.attributes.map( (attribute, i) =&gt; {\r\n      attribute.color.a = i === colorIndex ? opacity : attribute.color.a;\r\n      <span style=\"color: #333;font-weight: bold\">return<\/span> attribute;\r\n    });\r\n\r\n    <span style=\"color: #998;font-style: italic\">\/\/ set updated renderer on layer<\/span>\r\n    newRenderer.attributes = attributes;\r\n    layer.renderer = newRenderer;\r\n    <span style=\"color: #998;font-style: italic\">\/\/ increment opacity for next frame<\/span>\r\n    opacity = opacity + <span style=\"color: #008080\">0.01<\/span>;\r\n\r\n    requestAnimationFrame(updateStep);\r\n  }\r\n  requestAnimationFrame(updateStep);\r\n\r\n  <span style=\"color: #333;font-weight: bold\">return<\/span> {\r\n    remove: <span><span style=\"color: #333;font-weight: bold\">function<\/span>(<span><\/span>) <\/span>{\r\n      animating = <span style=\"color: #333;font-weight: 500\">false<\/span>;\r\n    }\r\n  };\r\n}\r\n<\/code><\/pre>\n<p>I also use this function to update the displayed year every 6 frames or so to show how the growth might look from year to year.<\/p>\n<p>This looks like it could be time-enabled data, but it\u2019s not. I just take advantage of  field names that display the data for multiple decades to accomplish this. <\/p>\n<p>Keep in mind the opacity of all dots for each attribute updates at the same rate. So this visual doesn\u2019t add a dot to the view at the actual year a home was built. The incremental opacity update is only intended to smooth the transition between decades.<\/p>\n<h2>Filter attributes using the Legend<\/h2>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-dot-density-maps-for-the-web\/\">In a previous blog post<\/a>, I wrote about how to customize the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Legend.html\">Legend<\/a> widget to make dot density visualizations more interactive. I added the same code demonstrated in that post to <a href=\"https:\/\/ekenes.github.io\/conferences\/ds-2019\/plenary\/dot-density-housing\/index.html\">this app<\/a> so you can similarly focus on one decade of homes at a time. <\/p>\n<p>This allows you to explore periods of economic prosperity (e.g. the 1970s and 2000s) and economic stagnation (e.g. the 1940s &#8212; WWII and post-depression years).<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":490732,"id":490732,"title":"filter-short","filename":"filter-short.gif","filesize":1123390,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/filter-short.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density\/filter-short","alt":"Housing by construction year in Houston, Texas.","author":"6561","description":"","caption":"","name":"filter-short","status":"inherit","uploaded_to":490632,"date":"2019-04-13 00:10:46","modified":"2019-04-15 23:25:54","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1128,"height":636,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/filter-short-150x150.gif","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/filter-short.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/filter-short.gif","medium_large-width":768,"medium_large-height":433,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/filter-short.gif","large-width":1128,"large-height":636,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/filter-short.gif","1536x1536-width":1128,"1536x1536-height":636,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/filter-short.gif","2048x2048-width":1128,"2048x2048-height":636,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/filter-short-826x465.gif","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/filter-short.gif","wide_image-width":1128,"wide_image-height":636}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/conferences\/ds-2019\/plenary\/dot-density-housing\/index.html"},{"acf_fc_layout":"content","content":"<h2>Explore more cities<\/h2>\n<p>I added a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Search.html\">Search<\/a> widget to this app so you can explore this data in other cities in the United States. Here are a few cities I found interesting.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":490752,"id":490752,"title":"san francisco","filename":"san-francisco.png","filesize":424011,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/san-francisco.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density\/san-francisco-2","alt":"Housing construction by decade in the San Francisco Bay area. One dot represents one house.","author":"6561","description":"","caption":"Housing construction by decade in the San Francisco Bay area. One dot represents one house.","name":"san-francisco-2","status":"inherit","uploaded_to":490632,"date":"2019-04-13 00:14:57","modified":"2019-04-15 23:26: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":1122,"height":683,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/san-francisco-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/san-francisco.png","medium-width":429,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/san-francisco.png","medium_large-width":768,"medium_large-height":468,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/san-francisco.png","large-width":1122,"large-height":683,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/san-francisco.png","1536x1536-width":1122,"1536x1536-height":683,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/san-francisco.png","2048x2048-width":1122,"2048x2048-height":683,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/san-francisco-764x465.png","card_image-width":764,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/san-francisco.png","wide_image-width":1122,"wide_image-height":683}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":490762,"id":490762,"title":"boston","filename":"boston.png","filesize":518856,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/boston.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density\/boston","alt":"Housing construction by decade in Boston. One dot represents one house.","author":"6561","description":"","caption":"Housing construction by decade in Boston. One dot represents one house. East coast cities, such as Boston, are much older and were largely built up by 1940. In the last 70 years, housing in these cities didn't grow at the same rate as cities in the western United States.","name":"boston","status":"inherit","uploaded_to":490632,"date":"2019-04-13 00:15:14","modified":"2019-04-15 23:26:23","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1113,"height":682,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/boston-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/boston.png","medium-width":426,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/boston.png","medium_large-width":768,"medium_large-height":471,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/boston.png","large-width":1113,"large-height":682,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/boston.png","1536x1536-width":1113,"1536x1536-height":682,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/boston.png","2048x2048-width":1113,"2048x2048-height":682,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/boston-759x465.png","card_image-width":759,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/boston.png","wide_image-width":1113,"wide_image-height":682}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":490772,"id":490772,"title":"oahu","filename":"oahu.png","filesize":272855,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/oahu.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density\/oahu","alt":"Housing construction by decade on the island of Oahu. One dot represents one house.","author":"6561","description":"","caption":"Housing construction by decade on the island of Oahu. One dot represents one house. ","name":"oahu","status":"inherit","uploaded_to":490632,"date":"2019-04-13 00:15:29","modified":"2019-04-15 23:26: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":1145,"height":683,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/oahu-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/oahu.png","medium-width":438,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/oahu.png","medium_large-width":768,"medium_large-height":458,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/oahu.png","large-width":1145,"large-height":683,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/oahu.png","1536x1536-width":1145,"1536x1536-height":683,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/oahu.png","2048x2048-width":1145,"2048x2048-height":683,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/oahu-780x465.png","card_image-width":780,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/oahu.png","wide_image-width":1145,"wide_image-height":683}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":490782,"id":490782,"title":"chicago","filename":"chicago.png","filesize":481827,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/chicago.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density\/chicago","alt":"Housing construction by decade in Chicago. One dot represents one house.","author":"6561","description":"","caption":"Housing construction by decade in Chicago. One dot represents one house. This visual shows housing growth from inner city to suburbs over the years. Interestingly, you see a lot of new construction back in the inner city after the year 2000.","name":"chicago","status":"inherit","uploaded_to":490632,"date":"2019-04-13 00:15:41","modified":"2019-04-15 23:26:31","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1181,"height":713,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/chicago-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/chicago.png","medium-width":432,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/chicago.png","medium_large-width":768,"medium_large-height":464,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/chicago.png","large-width":1181,"large-height":713,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/chicago.png","1536x1536-width":1181,"1536x1536-height":713,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/chicago.png","2048x2048-width":1181,"2048x2048-height":713,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/chicago-770x465.png","card_image-width":770,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/chicago.png","wide_image-width":1181,"wide_image-height":713}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":490792,"id":490792,"title":"detroit","filename":"detroit.png","filesize":465323,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/detroit.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density\/detroit","alt":"Housing construction by decade in Detroit. One dot represents one house.","author":"6561","description":"","caption":"Housing construction by decade in Detroit. One dot represents one house. This visual shows housing growth from inner city to suburbs over the years.","name":"detroit","status":"inherit","uploaded_to":490632,"date":"2019-04-13 00:16:31","modified":"2019-04-15 23:26:38","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1116,"height":717,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/detroit-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/detroit.png","medium-width":406,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/detroit.png","medium_large-width":768,"medium_large-height":493,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/detroit.png","large-width":1116,"large-height":717,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/detroit.png","1536x1536-width":1116,"1536x1536-height":717,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/detroit.png","2048x2048-width":1116,"2048x2048-height":717,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/detroit-724x465.png","card_image-width":724,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/detroit.png","wide_image-width":1116,"wide_image-height":717}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":490802,"id":490802,"title":"los angeles","filename":"los-angeles.png","filesize":453591,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/los-angeles.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density\/los-angeles","alt":"Housing construction by decade in Los Angeles and surrounding cities. One dot represents one house.","author":"6561","description":"","caption":"Housing construction by decade in Los Angeles and surrounding cities. One dot represents one house. Whereas other cities show significant growth in the 1970s and 2000s, this area shows high growth in the 1950s and 1960s.","name":"los-angeles","status":"inherit","uploaded_to":490632,"date":"2019-04-13 00:16:53","modified":"2019-04-15 23:26:47","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1224,"height":687,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/los-angeles-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/los-angeles.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/los-angeles.png","medium_large-width":768,"medium_large-height":431,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/los-angeles.png","large-width":1224,"large-height":687,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/los-angeles.png","1536x1536-width":1224,"1536x1536-height":687,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/los-angeles.png","2048x2048-width":1224,"2048x2048-height":687,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/los-angeles-826x465.png","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/los-angeles.png","wide_image-width":1224,"wide_image-height":687}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p><a name=\"a-final-thought\"><\/a><\/p>\n<h2>A final thought<\/h2>\n<p>As a reminder, dot density randomly renders dots within polygon boundaries to represent the density of numeric data. Therefore, you should use extra caution when creating dot density visualizations where one dot represents one unit of measure. In this scenario, users may mistakenly interpret each dot as the exact location of the mapped phenomena.<\/p>\n<p>For that reason, I placed cautionary text below the legend informing the user to not interpret dot locations as real-world locations. Dots are strictly used as a cartographic technique to visualize patterns of density between polygon features.<\/p>\n<p>I also added strict <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-views-MapView.html#constraints\">view scale constraints<\/a> to keep the user from zooming in too closely or out too far. If you don\u2019t take scale into account while creating a dot density visualization, your users will be susceptible to interpreting dots as discrete features.<\/p>\n<p>Stay tuned for more dot density inspiration in coming weeks!<\/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":475292,"post_author":"6561","post_date":"2019-04-01 08:00:33","post_date_gmt":"2019-04-01 15:00:33","post_content":"","post_title":"Dot density for the web","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"dot-density-for-the-web","to_ping":"","pinged":"","post_modified":"2019-04-09 11:59:44","post_modified_gmt":"2019-04-09 18:59:44","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=475292","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":484052,"post_author":"6561","post_date":"2019-04-09 08:00:07","post_date_gmt":"2019-04-09 15:00:07","post_content":"","post_title":"Interactive dot density maps for the web","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"interactive-dot-density-maps-for-the-web","to_ping":"","pinged":"","post_modified":"2019-04-09 12:00:17","post_modified_gmt":"2019-04-09 19:00:17","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=484052","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/la-dd-card.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/la-dd-banner.jpg"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Visualizing growth with dot density<\/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\/visualizing-growth-with-dot-density\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visualizing growth with dot density\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\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\/visualizing-growth-with-dot-density#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Visualizing growth with dot density\",\"datePublished\":\"2019-04-16T15:00:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"animation\",\"data visualization\",\"dot density\",\"jsapi4\",\"whats new march 2019\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density\",\"name\":\"Visualizing growth with dot density\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2019-04-16T15:00:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visualizing growth with dot density\"}]},{\"@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":"Visualizing growth with dot density","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\/visualizing-growth-with-dot-density","og_locale":"en_US","og_type":"article","og_title":"Visualizing growth with dot density","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","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\/visualizing-growth-with-dot-density#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Visualizing growth with dot density","datePublished":"2019-04-16T15:00:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density"},"wordCount":5,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["animation","data visualization","dot density","jsapi4","whats new march 2019"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density","name":"Visualizing growth with dot density","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2019-04-16T15:00:53+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/visualizing-growth-with-dot-density#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Visualizing growth with dot density"}]},{"@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":"April 16, 2019","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/la-dd-banner.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":30171,"name":"animation","slug":"animation","term_group":0,"term_taxonomy_id":30171,"taxonomy":"post_tag","description":"","parent":0,"count":23,"filter":"raw"},{"term_id":30111,"name":"data visualization","slug":"data-visualization","term_group":0,"term_taxonomy_id":30111,"taxonomy":"post_tag","description":"","parent":0,"count":97,"filter":"raw"},{"term_id":35751,"name":"dot density","slug":"dot-density","term_group":0,"term_taxonomy_id":35751,"taxonomy":"post_tag","description":"","parent":0,"count":8,"filter":"raw"},{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":345572,"name":"whats new march 2019","slug":"whats-new-march-2019","term_group":0,"term_taxonomy_id":345572,"taxonomy":"post_tag","description":"","parent":0,"count":20,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2683,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":361,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":761,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/490632","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=490632"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/490632\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=490632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=490632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=490632"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=490632"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=490632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}