{"id":475292,"date":"2019-04-01T08:00:33","date_gmt":"2019-04-01T15:00:33","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=475292"},"modified":"2019-04-09T11:59:44","modified_gmt":"2019-04-09T18:59:44","slug":"dot-density-for-the-web","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/dot-density-for-the-web","title":{"rendered":"Dot density for the web"},"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":[30111,35751,27491,28531,345572],"industry":[],"product":[36831,36601],"class_list":["post-475292","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-data-visualization","tag-dot-density","tag-jsapi4","tag-renderer","tag-whats-new-march-2019","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Learn how to create dot density visualizations for web mapping applications using the ArcGIS API for JavaScript.","flexible_content":[{"acf_fc_layout":"content","content":"

I\u2019m excited to introduce dot density<\/a> as the latest visualization tool available in the ArcGIS API for JavaScript<\/a> (ArcGIS JS API). Dot density is a classic cartographic technique that involves randomly drawing dots within polygon boundaries to visualize the density of a population or some other count.<\/p>\n

The the following app<\/a> demonstrates this concept. In the image below, each dot represents approximately 4,800 people.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":475712,"id":475712,"title":"population-4800","filename":"population-4800.png","filesize":809872,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/population-4800.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/dot-density-for-the-web\/population-4800","alt":"One dot equals 4,800 people","author":"6561","description":"","caption":"Population in the northeast United States. Each dot represents approximately 4,800 people.","name":"population-4800","status":"inherit","uploaded_to":475292,"date":"2019-03-28 22:58:00","modified":"2019-03-29 23:41: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":2444,"height":1314,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/population-4800-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/population-4800.png","medium-width":464,"medium-height":249,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/population-4800.png","medium_large-width":768,"medium_large-height":413,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/population-4800.png","large-width":1920,"large-height":1032,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/population-4800.png","1536x1536-width":1536,"1536x1536-height":826,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/population-4800.png","2048x2048-width":2048,"2048x2048-height":1101,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/population-4800-826x444.png","card_image-width":826,"card_image-height":444,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/population-4800-1920x1032.png","wide_image-width":1920,"wide_image-height":1032}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/esri-js-samples\/4\/visualization\/dot-density\/population.html"},{"acf_fc_layout":"content","content":"

This app uses the DotDensityRenderer<\/a>, new in the 4.11 version<\/a> of the ArcGIS JS API, to render population by Census Tract.<\/p>\n

The API for creating this visualization is pretty straightforward. It only requires the following code.<\/p>\n

\r\nconst<\/span> dotDensityRenderer = new<\/span> DotDensityRenderer({\r\n  referenceDotValue: 4800<\/span>,\r\n  outline: null<\/span>,  \/\/ avoid the default outline<\/span>\r\n  legendOptions: {\r\n    \/\/ legend displays 1 dot = 4800 people<\/span>\r\n    unit: \"people\"<\/span>\r\n  },\r\n  attributes: [{\r\n    field: \"B03002_001E\"<\/span>, \/\/ field name for population<\/span>\r\n    color: \"#e8ca0d\"<\/span>,\r\n    label: \"Areas where people live\"<\/span>  \/\/ label in legend<\/span>\r\n  }]\r\n});\r\n\r\n\/\/ apply renderer to the layer<\/span>\r\nlayer.renderer = dotDensityRenderer;\r\n<\/code><\/pre>\n
\r\ndotDensityRenderer.attributes = [{\r\n  field: \"B03002_003E\"<\/span>,\r\n  color: \"#f23c3f\"<\/span>,\r\n  label: \"White (non-Hispanic)\"<\/span>\r\n}, {\r\n  field: \"B03002_012E\"<\/span>,\r\n  color: \"#e8ca0d\"<\/span>,\r\n  label: \"Hispanic\"<\/span>\r\n}, {\r\n  field: \"B03002_004E\"<\/span>,\r\n  color: \"#00b6f1\"<\/span>,\r\n  label: \"Black or African American\"<\/span>\r\n}, {\r\n  field: \"B03002_006E\"<\/span>,\r\n  color: \"#32ef94\"<\/span>,\r\n  label: \"Asian\"<\/span>\r\n}, {\r\n  field: \"B03002_005E\"<\/span>,\r\n  color: \"#ff7fe9\"<\/span>,\r\n  label: \"American Indian\/Alaskan Native\"<\/span>\r\n}, {\r\n  field: \"B03002_007E\"<\/span>,\r\n  color: \"#e2c4a5\"<\/span>,\r\n  label: \"Pacific Islander\/Hawaiian Native\"<\/span>\r\n}, {\r\n  field: \"B03002_008E\"<\/span>,\r\n  color: \"#ff6a00\"<\/span>,\r\n  label: \"Other race\"<\/span>\r\n}, {\r\n  field: \"B03002_009E\"<\/span>,\r\n  color: \"#96f7ef\"<\/span>,\r\n  label: \"Two or more races\"<\/span>\r\n}];\r\n\r\n<\/code><\/pre>\n
Dot density was originally designed for print maps, so in practice it only works well at one scale level. A value of 6,400 people per dot may work well for large regions, such as the entire lower 48 United States…<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":476472,"id":476472,"title":"us-6400","filename":"us-6400.png","filesize":789249,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/dot-density-for-the-web\/us-6400","alt":"Population density by race in the United States.","author":"6561","description":"","caption":"Population by race\/ethnicity in the United States. One dot represents approximately 6,400 people.","name":"us-6400","status":"inherit","uploaded_to":475292,"date":"2019-03-29 15:42:54","modified":"2019-03-29 15:43: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":2666,"height":1468,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400.png","medium-width":464,"medium-height":255,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400.png","medium_large-width":768,"medium_large-height":423,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400.png","large-width":1920,"large-height":1057,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400.png","1536x1536-width":1536,"1536x1536-height":846,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400.png","2048x2048-width":2048,"2048x2048-height":1128,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400-826x455.png","card_image-width":826,"card_image-height":455,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400-1920x1057.png","wide_image-width":1920,"wide_image-height":1057}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
\u2026but won\u2019t work well for smaller regions, such as New York City.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":476492,"id":476492,"title":"nyc-6400","filename":"nyc-6400.png","filesize":119442,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-6400.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/dot-density-for-the-web\/nyc-6400","alt":"Population density by race in the United States.","author":"6561","description":"","caption":"Population by race\/ethnicity in New York City. A value of one dot per 6,400 people doesn't work well at this scale.","name":"nyc-6400","status":"inherit","uploaded_to":475292,"date":"2019-03-29 15:45:04","modified":"2019-03-29 17:44:07","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1246,"height":679,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-6400-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-6400.png","medium-width":464,"medium-height":253,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-6400.png","medium_large-width":768,"medium_large-height":419,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-6400.png","large-width":1246,"large-height":679,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-6400.png","1536x1536-width":1246,"1536x1536-height":679,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-6400.png","2048x2048-width":1246,"2048x2048-height":679,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-6400-826x450.png","card_image-width":826,"card_image-height":450,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-6400.png","wide_image-width":1246,"wide_image-height":679}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
At this scale dots are difficult to see, significantly deemphasizing the population density of the area. It almost looks as if New York City is a rural area.<\/p>\n
Conversely, a dot value that works well for small regions, won’t work for larger regions. For example, if I alter the dot value to better visualize the population density of New York City (1 dot = 200 people)…<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":476762,"id":476762,"title":"nyc-200","filename":"nyc-200.png","filesize":1590177,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-200.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/dot-density-for-the-web\/nyc-200","alt":"Population density by race in the United States.","author":"6561","description":"","caption":"Population by race\/ethnicity in the Northeast United States. Each dot represents approximately 200 people.","name":"nyc-200","status":"inherit","uploaded_to":475292,"date":"2019-03-29 17:38:20","modified":"2019-04-01 15:54:06","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2592,"height":1436,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-200-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-200.png","medium-width":464,"medium-height":257,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-200.png","medium_large-width":768,"medium_large-height":425,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-200.png","large-width":1920,"large-height":1064,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-200.png","1536x1536-width":1536,"1536x1536-height":851,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-200.png","2048x2048-width":2048,"2048x2048-height":1135,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-200-826x458.png","card_image-width":826,"card_image-height":458,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-200-1920x1064.png","wide_image-width":1920,"wide_image-height":1064}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
And use that same value for the extent of the United States, then half the country looks like it is part of an overgrown metropolis. At large extents, small dot values can exaggerate the perception of density in less populated areas.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":476482,"id":476482,"title":"us-200","filename":"us-200.png","filesize":1681785,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-200.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/dot-density-for-the-web\/us-200","alt":"Population density by race in the United States.","author":"6561","description":"","caption":"Population by race\/ethnicity in the United States. One dot represents approximately 200 people.","name":"us-200","status":"inherit","uploaded_to":475292,"date":"2019-03-29 15:44:30","modified":"2019-03-29 15:49:42","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":2672,"height":1514,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-200-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-200.png","medium-width":461,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-200.png","medium_large-width":768,"medium_large-height":435,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-200.png","large-width":1906,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-200.png","1536x1536-width":1536,"1536x1536-height":870,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-200.png","2048x2048-width":2048,"2048x2048-height":1160,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-200-821x465.png","card_image-width":821,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-200-1906x1080.png","wide_image-width":1906,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
These scale issues prompted us to include the referenceScale<\/a> property in the renderer. This allows you to match a dot value to a scale value. As the user zooms in and out, the value of each dot will change based on the change in scale.<\/p>\n
For example, setting the referenceScale<\/code> to 577790<\/code> will yield a much better visualization across scales.<\/p>\n
\r\nconst<\/span> dotDensityRenderer = new<\/span> DotDensityRenderer({\r\n  referenceDotValue: 200<\/span>,  \/\/ 1 dot equals 200 people<\/span>\r\n  referenceScale: 577790<\/span>, \/\/ at a 1:577,790 view scale<\/span>\r\n  legendOptions: {\r\n    unit: \"people\"<\/span>\r\n  },\r\n  attributes: [\r\n    \/\/ field names and colors here<\/span>\r\n  ]\r\n});\r\n\r\n<\/code><\/pre>\n
In other words, at a 1:577,790 scale, each dot will represent 200 people. Once the referenceScale<\/code> property is set to any number, the dot value will update linearly based on the scale change from the indicated referenceScale<\/code>. This makes a far more pleasing visualization at various scale levels.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":476532,"id":476532,"title":"nyc-100-small","filename":"nyc-100-small-2.png","filesize":172647,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/dot-density-for-the-web\/nyc-100-small-3","alt":"1 dot represents 100 people at a city scale.","author":"6561","description":"","caption":"One dot represents 100 people at a city scale.","name":"nyc-100-small-3","status":"inherit","uploaded_to":475292,"date":"2019-03-29 15:51:09","modified":"2019-03-29 15:52:28","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":800,"height":483,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-2-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-2.png","medium-width":432,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-2.png","medium_large-width":768,"medium_large-height":464,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-2.png","large-width":800,"large-height":483,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-2.png","1536x1536-width":800,"1536x1536-height":483,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-2.png","2048x2048-width":800,"2048x2048-height":483,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-2-770x465.png","card_image-width":770,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-2.png","wide_image-width":800,"wide_image-height":483}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-2.png"},{"acf_fc_layout":"image","image":{"ID":476542,"id":476542,"title":"ne-us-1600","filename":"ne-us-1600-1.png","filesize":1237142,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/ne-us-1600-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/dot-density-for-the-web\/ne-us-1600-2","alt":"One dot represents 1600 people at a county scale.","author":"6561","description":"","caption":"One dot represents 1,600 people at a county scale.","name":"ne-us-1600-2","status":"inherit","uploaded_to":475292,"date":"2019-03-29 15:51:24","modified":"2019-03-29 15:53: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":2712,"height":1644,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/ne-us-1600-1-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/ne-us-1600-1.png","medium-width":431,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/ne-us-1600-1.png","medium_large-width":768,"medium_large-height":466,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/ne-us-1600-1.png","large-width":1782,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/ne-us-1600-1.png","1536x1536-width":1536,"1536x1536-height":931,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/ne-us-1600-1.png","2048x2048-width":2048,"2048x2048-height":1241,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/ne-us-1600-1-767x465.png","card_image-width":767,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/ne-us-1600-1-1782x1080.png","wide_image-width":1782,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/ne-us-1600-1.png"},{"acf_fc_layout":"image","image":{"ID":476552,"id":476552,"title":"us-6400","filename":"us-6400-1.png","filesize":789249,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/dot-density-for-the-web\/us-6400-2","alt":"One dot represents 6400 people at a state scale.","author":"6561","description":"","caption":"One dot represents 6,400 people at a state scale.","name":"us-6400-2","status":"inherit","uploaded_to":475292,"date":"2019-03-29 15:51:37","modified":"2019-03-29 15:52:58","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":2666,"height":1468,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400-1-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400-1.png","medium-width":464,"medium-height":255,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400-1.png","medium_large-width":768,"medium_large-height":423,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400-1.png","large-width":1920,"large-height":1057,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400-1.png","1536x1536-width":1536,"1536x1536-height":846,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400-1.png","2048x2048-width":2048,"2048x2048-height":1128,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400-1-826x455.png","card_image-width":826,"card_image-height":455,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400-1-1920x1057.png","wide_image-width":1920,"wide_image-height":1057}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/us-6400-1.png"},{"acf_fc_layout":"content","content":"
If that scale value looks arbitrary, that’s because it mostly is. When authoring a dot density visualization I usually pick a scale where I want the app to start. I set that to referenceScale<\/code>, then modify the referenceDotValue<\/code> until I settle on a value I like. That setting will usually work pretty well across scales.<\/p>\n
More data, more interaction<\/h2>\n
This implementation of dot density renders on the GPU. This allows us to visualize more data with more dynamic interaction than ever before.<\/p>\n
Check out the following app<\/a> to explore this data further. Use the Bookmarks widget to view areas I thought were particularly interesting. You can also use the Search widget to explore the demographics for your hometown (if you live or have lived in the United States). I also configured a popup so you can click regions of interest to view the estimated population of each Census Tract.<\/p>\n"},{"acf_fc_layout":"storymap","title":"Population density by race\/ethnicity in the United States","description":"","static":false,"storymap_url":"https:\/\/ekenes.github.io\/esri-js-samples\/4\/visualization\/dot-density\/population-race.html<\/a>"},{"acf_fc_layout":"content","content":"
Keep in mind…<\/h2>\n
I advise you to set minimum and maximum visibility scale restrictions on layers rendered with dot density. The minScale<\/a> will prevent the view from rendering features too small for sensible interpretation. <\/p>\n
Setting the maxScale<\/a> at a proper level will help keep the user from making incorrect inferences from the data. For example, when zoomed too far in, users may start to see spatial patterns in the dots that don\u2019t actually exist (since they are randomly drawn). In visuals where one dot equals one unit (e.g. one dot equals one person or one house), users may also be susceptible to incorrectly reading the dot locations as actual locations of the mapped phenomena. So setting reasonable view constraints<\/a> and\/or layer visibility constraints will help prevent this.<\/p>\n
\r\nconst<\/span> view = new<\/span> MapView({\r\n  container: \"viewDiv\"<\/span>,\r\n  map: map,\r\n  constraints: {\r\n    \/\/ user can't zoom beyond this scale<\/span>\r\n    maxScale: 35000<\/span>\r\n  }\r\n});\r\n\r\n<\/code><\/pre>\n
You can get away with using distorted spatial references, such as Web Mercator, as long as you only compare areas that lie on about the same line of latitude. Therefore in my app, you shouldn\u2019t compare the population density of tracts in Alaska with those in Florida. <\/p>\n
Because we take advantage of the GPU in rendering dot density, you can add more interaction to your dot density visualizations. Stay tuned for more posts demonstrating how to do the following: <\/p>\n
Also keep in mind that since dot density is heavily influenced by a feature\u2019s area, you should try to use equal area spatial references<\/a> since heavily distorted areas will paint an incorrect picture of the density of features compared to less distorted areas. <\/p>\n
This creates a fascinating visual<\/a> of not only population density, but also of how diverse (or similar) and segregated (or integrated) the population is based on race\/ethnicity in some cities.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":475762,"id":475762,"title":"nyc-100-small","filename":"nyc-100-small-1.png","filesize":172647,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/dot-density-for-the-web\/nyc-100-small-2","alt":"","author":"6561","description":"","caption":"Population density by race\/ethnicity in New York City. 1 dot of each color represents 100 people of a different race.","name":"nyc-100-small-2","status":"inherit","uploaded_to":475292,"date":"2019-03-28 23:11:18","modified":"2019-03-28 23:11:53","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":800,"height":483,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-1-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-1.png","medium-width":432,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-1.png","medium_large-width":768,"medium_large-height":464,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-1.png","large-width":800,"large-height":483,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-1.png","1536x1536-width":800,"1536x1536-height":483,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-1.png","2048x2048-width":800,"2048x2048-height":483,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-1-770x465.png","card_image-width":770,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/03\/nyc-100-small-1.png","wide_image-width":800,"wide_image-height":483}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/esri-js-samples\/4\/visualization\/dot-density\/population-race.html"},{"acf_fc_layout":"content","content":"
The attributes<\/a> property allows you to map several subcategories of the population. To visualize the population density broken down by race\/ethnicity, for example, you would simply include objects that match field names containing the total population per race to specific colors.<\/p>\n