Dot density

Item page

Sandbox

Download

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 A choropleth map displays a set of pre-defined geographical areas proportionate to an aggregated summary of a specific, statistical variable within each area, such as the area's population density or per capita income. Learn more , 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:

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

Examples

Population density

Item page

Sandbox

Download

Census tracts in southern California are visualized by population density.

Dot density - population


20 collapsed lines
1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
    <title>Dot density - population</title>
7

8
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
9
    <script type="module" src="https://jsdev.arcgis.com/5.2/"></script>
10

11
    <style>
12
      html,
13
      body {
14
        height: 100%;
15
        margin: 0;
16
      }
17
    </style>
18
  </head>
19

20
  <body class="calcite-mode-dark">
21
    <arcgis-map item-id="d39c7e2bcd8944189d1eddd8f0b0dddb">
22
      <arcgis-zoom slot="top-left"></arcgis-zoom>
23
      <arcgis-expand slot="top-left">
24
        <arcgis-bookmarks></arcgis-bookmarks>
25
      </arcgis-expand>
26
      <arcgis-legend slot="bottom-left"></arcgis-legend>
27
    </arcgis-map>
2 collapsed lines
28
  </body>
29
</html>

Sandbox

Download

Census tracts in southern California are visualized by population density.

Set a dot value and reference scale appropriate for the data.
Set the legend unit to people.
Reference the population field in the renderer attributes.
Set a color used to render the dots.

Dot density - population


67 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6

7
    <title>Dot density - population</title>
8

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

11
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
12
    <script type="module" src="https://js.arcgis.com/5.2/"></script>
13
    <style>
14
      html,
15
      body {
16
        height: 100%;
17
        margin: 0;
18
      }
19
    </style>
20
  </head>
21

22
  <body class="calcite-mode-dark">
23
    <arcgis-map center="-117.717374, 33.937728" scale="2311162">
24
      <arcgis-zoom slot="top-left"></arcgis-zoom>
25
      <arcgis-expand slot="top-left">
26
        <arcgis-bookmarks></arcgis-bookmarks>
27
      </arcgis-expand>
28
      <arcgis-legend slot="bottom-left" card-style-layout="side-by-side" legend-style="card"></arcgis-legend>
29
    </arcgis-map>
30

31
    <script type="module">
32
      const [WebMap, FeatureLayer, DotDensityRenderer] = await $arcgis.import([
33
        "@arcgis/core/WebMap.js",
34
        "@arcgis/core/layers/FeatureLayer.js",
35
        "@arcgis/core/renderers/DotDensityRenderer.js",
36
      ]);
37

38
      const viewElement = document.querySelector("arcgis-map");
39

40
      const map = new WebMap({
41
        portalItem: {
42
          id: "56b5bd522c52409c90d902285732e9f1",
43
        },
44
      });
45

46
      viewElement.map = map;
47
      viewElement.popup = {
48
        dockEnabled: true,
49
        dockOptions: {
50
          position: "bottom-right",
51
          breakpoint: false,
52
        },
53
      };
54
      viewElement.constraints = {
55
        maxScale: 35000,
56
        snapToZoom: false,
57
      };
58
      viewElement.highlights = [
59
        {
60
          name: "default",
61
          fillOpacity: 0,
62
          color: [50, 50, 50],
63
        },
64
      ];
65

66
      await viewElement.viewOnReady();
67

68
      const dotDensityRenderer = new DotDensityRenderer({
69
        dotValue: 100,
70
        outline: null,
71
        referenceScale: 500000,
72
        legendOptions: {
73
          unit: "people",
74
        },
75
        attributes: [
76
          {
77
            field: "B03002_001E",
78
            color: "#e8ca0d",
79
            label: "Places where people live",
80
          },
81
        ],
82
      });
36 collapsed lines
83

84
      // Add renderer to the layer and define a popup template
85
      const url =
86
        "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Population_by_Race_and_Hispanic_Origin_Boundaries/FeatureServer/2";
87
      const layer = new FeatureLayer({
88
        url: url,
89
        minScale: 20000000,
90
        maxScale: 35000,
91
        title: "Current Population Estimates (ACS)",
92
        popupTemplate: {
93
          title: "{County}, {State}",
94
          content: [
95
            {
96
              type: "fields",
97
              fieldInfos: [
98
                {
99
                  fieldName: "B03002_001E",
100
                  label: "Total population",
101
                  fieldFormat: {
102
                    type: "number",
103
                    minimumFractionDigits: 0,
104
                    maximumFractionDigits: 0,
105
                    useGrouping: "always",
106
                  },
107
                },
108
              ],
109
            },
110
          ],
111
        },
112
        renderer: dotDensityRenderer,
113
      });
114

115
      map.add(layer);
116
    </script>
117
  </body>
118
</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).

Item page

Sandbox

Download

Census tracts are symbolized by population density for race and ethnicity categories.

Dot density - population by race and ethnicity


21 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6

7
    <title>Dot density - population by race and ethnicity</title>
8

9
    <link rel="stylesheet" href="https://js.arcgis.com/5.2/esri/themes/light/main.css" />
10
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
11
    <script type="module" src="https://js.arcgis.com/5.2/"></script>
12
    <style>
13
      html,
14
      body {
15
        height: 100%;
16
        margin: 0;
17
      }
18
    </style>
19
  </head>
20

21
  <body class="calcite-mode-dark">
22
    <arcgis-map item-id="f9e2c69c805c4825baa513ef5e62b295">
23
      <arcgis-zoom slot="top-left"></arcgis-zoom>
24
      <arcgis-expand slot="top-left">
25
        <arcgis-bookmarks></arcgis-bookmarks>
26
      </arcgis-expand>
27
      <arcgis-legend slot="bottom-left" card-style-layout="side-by-side" legend-style="card"></arcgis-legend>
28
    </arcgis-map>
2 collapsed lines
29
  </body>
30
</html>

Sample Code page

Item page

Sandbox

Download

Census tracts are symbolized by population density for race and ethnicity categories.

Set a dot value and reference scale appropriate for the data.
Set the legend unit to people.
Add a renderer attribute for each race or ethnicity category.
Assign each category a distinct color.

Dot density - population by race and ethnicity


48 collapsed lines
1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6

7
    <title>Dot density | Sample | ArcGIS Maps SDK for JavaScript</title>
8

9
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
10
    <script type="module" src="https://js.arcgis.com/5.2/"></script>
11

12
    <style>
13
      html,
14
      body {
15
        height: 100%;
16
        margin: 0;
17
      }
18
    </style>
19
  </head>
20

21
  <body class="calcite-mode-dark">
22
    <!-- Note: popup-component-enabled enables the Popup component (beta). See https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupComponentEnabled for details. -->
23
    <arcgis-map
24
      item-id="56b5bd522c52409c90d902285732e9f1"
25
      center="-119.043758, 33.741339"
26
      scale="2311162"
27
      popup-component-enabled
28
    >
29
      <arcgis-zoom slot="top-left"></arcgis-zoom>
30
      <arcgis-expand slot="top-left">
31
        <arcgis-bookmarks></arcgis-bookmarks>
32
      </arcgis-expand>
33
      <arcgis-legend slot="bottom-left" card-style-layout="side-by-side" legend-style="card"></arcgis-legend>
34
    </arcgis-map>
35

36
    <script type="module">
37
      const [FeatureLayer, DotDensityRenderer] = await $arcgis.import([
38
        "@arcgis/core/layers/FeatureLayer.js",
39
        "@arcgis/core/renderers/DotDensityRenderer.js",
40
      ]);
41

42
      const dotDensityRenderer = new DotDensityRenderer({
43
        dotValue: 92,
44
        outline: null,
45
        referenceScale: 500000, // 1:500,000 view scale
46
        legendOptions: {
47
          unit: "people",
48
        },
49
        attributes: [
50
          {
51
            field: "B03002_003E",
52
            color: "#f23c3f",
53
            label: "White (non-Hispanic)",
54
          },
55
          {
56
            field: "B03002_012E",
57
            color: "#e8ca0d",
58
            label: "Hispanic",
59
          },
60
          {
61
            field: "B03002_004E",
62
            color: "#00b6f1",
63
            label: "Black or African American",
64
          },
65
          {
66
            field: "B03002_006E",
67
            color: "#32ef94",
68
            label: "Asian",
69
          },
70
          {
71
            field: "B03002_005E",
72
            color: "#ff7fe9",
73
            label: "American Indian/Alaskan Native",
74
          },
75
          {
76
            field: "B03002_007E",
77
            color: "#e2c4a5",
78
            label: "Pacific Islander/Hawaiian Native",
79
          },
80
          {
81
            field: "B03002_008E",
82
            color: "#ff6a00",
83
            label: "Other race",
84
          },
85
          {
86
            field: "B03002_009E",
87
            color: "#96f7ef",
88
            label: "Two or more races",
89
          },
90
        ],
136 collapsed lines
91
      });
92

93
      // Add renderer to the layer and define a popup template
94
      const url =
95
        "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Population_by_Race_and_Hispanic_Origin_Boundaries/FeatureServer/2";
96
      const layer = new FeatureLayer({
97
        url: url,
98
        minScale: 20000000,
99
        maxScale: 35000,
100
        title: "Current Population Estimates (ACS)",
101
        popupTemplate: {
102
          title: "{County}, {State}",
103
          content: [
104
            {
105
              type: "media",
106
              mediaInfos: [
107
                {
108
                  title: "Current Population Estimates (ACS)",
109
                  type: "bar-chart",
110
                  value: {
111
                    fields: [
112
                      "B03002_003E",
113
                      "B03002_012E",
114
                      "B03002_004E",
115
                      "B03002_006E",
116
                      "B03002_005E",
117
                      "B03002_007E",
118
                      "B03002_008E",
119
                      "B03002_008E",
120
                      "B03002_009E",
121
                    ],
122
                    tooltipField: "<field name>",
123
                  },
124
                },
125
              ],
126
            },
127
            {
128
              type: "fields",
129
            },
130
          ],
131
          fieldInfos: [
132
            {
133
              fieldName: "B03002_003E",
134
              label: "White (non-Hispanic)",
135
              format: {
136
                digitSeparator: true,
137
                places: 0,
138
              },
139
            },
140
            {
141
              fieldName: "B03002_012E",
142
              label: "Hispanic",
143
              format: {
144
                digitSeparator: true,
145
                places: 0,
146
              },
147
            },
148
            {
149
              fieldName: "B03002_004E",
150
              label: "Black or African American",
151
              format: {
152
                digitSeparator: true,
153
                places: 0,
154
              },
155
            },
156
            {
157
              fieldName: "B03002_006E",
158
              label: "Asian",
159
              format: {
160
                digitSeparator: true,
161
                places: 0,
162
              },
163
            },
164
            {
165
              fieldName: "B03002_005E",
166
              label: "American Indian/Alaskan Native",
167
              format: {
168
                digitSeparator: true,
169
                places: 0,
170
              },
171
            },
172
            {
173
              fieldName: "B03002_007E",
174
              label: "Pacific Islander/Hawaiian Native",
175
              format: {
176
                digitSeparator: true,
177
                places: 0,
178
              },
179
            },
180
            {
181
              fieldName: "B03002_008E",
182
              label: "Other race",
183
              format: {
184
                digitSeparator: true,
185
                places: 0,
186
              },
187
            },
188
            {
189
              fieldName: "B03002_009E",
190
              label: "Two or more races",
191
              format: {
192
                digitSeparator: true,
193
                places: 0,
194
              },
195
            },
196
          ],
197
        },
198
        renderer: dotDensityRenderer,
199
      });
200

201
      // get the arcgis-map component element and wait for it to be ready
202
      const viewElement = document.querySelector("arcgis-map");
203
      viewElement.constraints = {
204
        maxScale: 35000,
205
      };
206

207
      // Set the default highlight option with a solid dark color
208
      // The default highlight option is used by the popup
209
      viewElement.highlights = [
210
        {
211
          name: "default",
212
          fillOpacity: 0,
213
          color: [255, 255, 255],
214
        },
215
      ];
216

217
      await viewElement.viewOnReady();
218
      viewElement.popupElement.dockEnabled = true;
219
      viewElement.popupElement.dockOptions = {
220
        position: "top-right",
221
        breakpoint: false,
222
      };
223
      viewElement.map.add(layer);
224
    </script>
225
  </body>
226
</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 A pop-up is a visual element used to display data for features or graphics in a map. Learn more to clearly communicate the actual value of the feature, so the user can explore the map visually and interactively.

API support

Full support

Partial support

No support
	2D	3D	Arcade	Points	Lines	Polygons	Mesh
Unique types
Class breaks
Visual variables							¹
Time
Multivariate
Predominance
Dot density
Charts
Relationship
Smart Mapping		²			³	³	³

Color only
Size variable creators only supported for points
Size variable creators not supported in 3D

Data-driven stylesPredominance Data-driven stylesCharts

What is a dot density style?

How a dot density style works

Examples

Population density

Population density by category

Best practices

View scale

View spatial reference

Attributes

Related samples and resources

Generate a dot density visualization

Dot density for the web

Interactive dot density maps for the web

Visualizing growth with dot density

Visualizing change with dot density

API support