Dot density

Census tracts styled with a dot density renderer to show population density by race and ethnicity

What is a dot density style?

The dot density style visualizes the density of a population, or other count, in a polygon data layer by randomly drawing dots within polygon boundaries. Each dot represents a constant numeric value of an attribute or a subset of attributes.

For example, when visualizing population density where each dot represents 100 people, a polygon with a population of 100,000 people would contain 1,000 dots randomly drawn within the polygon.

Unlike choropleth maps, field values used in dot density visualizations don't need to be normalized because the size of the polygon, together with the number of dots rendered within its boundaries, indicate the spatial density of that value.

How a dot density style works

The dot density style is configured with a dot density renderer. A dot density renderer requires the following:

  1. A list of attributes (minimum of one attribute), matching a data value returned from a field or Arcade expression with a color.
  2. A dotValue, or the value each dot will represent for each attribute.
  3. Optionally (but encouraged), a referenceScale referring to the view scale.

Examples

Population density

The following example visualizes population density in southern California.

  1. Set the dotValue to a value that makes sense for the scale (like 100).
  2. Set the referenceScale so the dotValue can adjust as the user zooms in and out.
  3. Indicate the unit of measurement in the legendOptions. In this case it is people.
  4. In the attributes property, reference the field name containing the number of people in each feature.
  5. Set a color used to render the dots.
81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>ArcGIS Developer Guide: Population density</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.19/esri/themes/dark/main.css"
    />

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    </style>

    <script src="https://js.arcgis.com/4.19/"></script>

    <script>
      require([
       "esri/config",
        "esri/WebMap",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/renderers/DotDensityRenderer",
        "esri/widgets/Legend",
        "esri/widgets/Bookmarks",
        "esri/widgets/Expand"
      ], function (
      ) {
        esriConfig.apiKey = "YOUR_API_KEY";
        const map = new WebMap({
          portalItem: {
            id: "56b5bd522c52409c90d902285732e9f1"
        const view = new MapView({
          container: "viewDiv",
          map: map,
          highlightOptions: {
            fillOpacity: 0,
            color: [50, 50, 50]
          popup: {
            dockEnabled: true,
            dockOptions: {
              position: "top-right",
              breakpoint: false
          constraints: {
            maxScale: 35000,
            snapToZoom:false
        view.when().then(function () {
          const dotDensityRenderer = new DotDensityRenderer({
            dotValue: 100,
            outline: null,
            referenceScale: 577790,
            legendOptions: {
              unit: "people"
            },
            attributes: [
              {
                field: "B03002_001E",
                color: "#e8ca0d",
                label: "Places where people live"
              }
            ]
          });
          // Add renderer to the layer and define a popup template
          const url =
            "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Population_by_Race_and_Hispanic_Origin_Boundaries/FeatureServer/2";
          const layer = new FeatureLayer({
            url: url,
            minScale: 20000000,
            maxScale: 35000,
            title: "Current Population Estimates (ACS)",
            popupTemplate: {
              title: "{County}, {State}",
              content: [
                  type: "fields",
                  fieldInfos: [
                      fieldName: "B03002_001E",
                      label: "Total population",
                      format: {
                        digitSeparator: true,
                        places: 0
            renderer: dotDensityRenderer
              new Expand({
                view: view,
                content: new Legend({ view: view }),
                group: "top-right",
                expanded: true
              new Expand({
                view: view,
                content: new Bookmarks({ view: view }),
                group: "top-right"
            "top-right"
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Population density by category

You can specify multiple attributes to visualize subcategories of the data. For example, we can visualize the same layer above, but categorize each dot by race/ethnicity. So each dot of a different color represents 100 people of the respective category (e.g. 1 red dot represents 100 white (non-Hispanic) people, each blue dot represents 100 African American people, each yellow dot represents 100 Hispanic people, etc).

Set multiple attributes to show subcategories of the population
86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128 128
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

    <title>ArcGIS Developer Guide: Population density by race and ethnicity</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/dark/main.css" />

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    </style>

    <script src="https://js.arcgis.com/4.19/"></script>

    <script>
      require([
       "esri/config",
        "esri/WebMap",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/renderers/DotDensityRenderer",
        "esri/widgets/Legend",
        "esri/widgets/Bookmarks",
        "esri/widgets/Expand"
      ], function (
      ) {
        esriConfig.apiKey = "YOUR_API_KEY";
        const map = new WebMap({
          portalItem: {
            id: "56b5bd522c52409c90d902285732e9f1"
        const view = new MapView({
          container: "viewDiv",
          map: map,
          highlightOptions: {
            fillOpacity: 0,
            color: [50, 50, 50]
          popup: {
            dockEnabled: true,
            dockOptions: {
              position: "top-right",
              breakpoint: false
          constraints: {
            maxScale: 35000,
            snapToZoom: false
        view.when().then(function () {
          const dotDensityRenderer = new DotDensityRenderer({
            dotValue: 100,
            outline: null,
            referenceScale: 577790, // 1:577,790 view scale
            legendOptions: {
              unit: "people"
          dotDensityRenderer.attributes = [
            {
              field: "B03002_003E",
              color: "#f23c3f",
              label: "White (non-Hispanic)"
            },
            {
              field: "B03002_012E",
              color: "#e8ca0d",
              label: "Hispanic"
            },
            {
              field: "B03002_004E",
              color: "#00b6f1",
              label: "Black or African American"
            },
            {
              field: "B03002_006E",
              color: "#32ef94",
              label: "Asian"
            },
            {
              field: "B03002_005E",
              color: "#ff7fe9",
              label: "American Indian/Alaskan Native"
            },
            {
              field: "B03002_007E",
              color: "#e2c4a5",
              label: "Pacific Islander/Hawaiian Native"
            },
            {
              field: "B03002_008E",
              color: "#ff6a00",
              label: "Other race"
            },
            {
              field: "B03002_009E",
              color: "#96f7ef",
              label: "Two or more races"
            }
          ];
          // Add renderer to the layer and define a popup template
          const url = "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Population_by_Race_and_Hispanic_Origin_Boundaries/FeatureServer/2";
          const layer = new FeatureLayer({
            url: url,
            minScale: 20000000,
            maxScale: 35000,
            title: "Current Population Estimates (ACS)",
            popupTemplate: {
              title: "{County}, {State}",
              content: [
                  type: "fields",
                  fieldInfos: [
                      fieldName: "B03002_003E",
                      label: "White (non-Hispanic)",
                      format: {
                        digitSeparator: true,
                        places: 0
                      fieldName: "B03002_012E",
                      label: "Hispanic",
                      format: {
                        digitSeparator: true,
                        places: 0
                      fieldName: "B03002_004E",
                      label: "Black or African American",
                      format: {
                        digitSeparator: true,
                        places: 0
                      fieldName: "B03002_006E",
                      label: "Asian",
                      format: {
                        digitSeparator: true,
                        places: 0
                      fieldName: "B03002_005E",
                      label: "American Indian/Alaskan Native",
                      format: {
                        digitSeparator: true,
                        places: 0
                      fieldName: "B03002_007E",
                      label: "Pacific Islander/Hawaiian Native",
                      format: {
                        digitSeparator: true,
                        places: 0
                      fieldName: "B03002_008E",
                      label: "Other race",
                      format: {
                        digitSeparator: true,
                        places: 0
                      fieldName: "B03002_009E",
                      label: "Two or more races",
                      format: {
                        digitSeparator: true,
                        places: 0
            renderer: dotDensityRenderer
              new Expand({
                view: view,
                content: new Legend({ view: view }),
                group: "top-right",
                expanded: true
              new Expand({
                view: view,
                content: new Bookmarks({ view: view }),
                group: "top-right"
            "top-right"
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Best practices

The following practices should be followed when creating a dot density visualization.

View scale

This implementation of dot density allows you to linearly scale the dot value based on the view scale. As you zoom in and out of the initial view, the relative density of points remains the same across scales. Always set a referenceScale to make the visualization work across many scale levels.

In addition to setting a referenceScale, you should typically set a minScale on the layer. Dot density visualizations are difficult to read when dots are no longer distinguishable, either because they coalesce or because they are too dispersed.

Setting a maxScale on the layer is also important because dot density maps tend to become unreadable at larger scales. Users may start seeing patterns in the random distribution of dots that do not exist in reality. They may also mistakenly interpret the location of each dot as an actual point feature. Users are particularly susceptible to this when the dotValue is set to 1. As an example, dot density visualizations on county datasets should only be viewed at the state or regional level.

View spatial reference

You should use equal area spatial references whenever possible, particularly when building dot density visualizations that span global extents. Using heavily distorted spatial references with a dot density renderer is acceptable as long as you restrict the user from comparing the densities of features within the same view at large scales. Try not to compare features across multiple views when equal area projections cannot be used, since significant differences in area distortion may cause the user to misinterpret feature density in heavily distorted areas.

Attributes

Use the attributes property to specify one or more data values. When multiple attributes are specified, the group of attributes should make logical sense when visualized together, and generally should belong to a parent group. For example, you could map the density of pets, or the density of different kinds of pets, such as dogs or cats. However, it doesn't make sense to map the density of cats and the density of crops within the same renderer.

Use pop-ups to clearly communicate the actual value of the feature, so the user can explore the map visually and interactively.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.