Dot density

This sample demonstrates how to create a DotDensityRenderer. Dot density visualizations are exclusively used for visualizing density values in polygon layers. The density is visualized by randomly placing one dot per a given value for the desired attribute. Unlike choropleth visualizations, dot density can be mapped using total counts since the size of the polygon plays a significant role in the perceived density of the attribute.

While dot density is most commonly mapped with a single attribute, you may specify up to 8 fields and/or Arcade expressions to view subsets of the data. These fields should be subsets of a common category, or in competition with one another.

The following snippet demonstrates how to create a dot density visualization of population, broken down by race/ethnicity.

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
const dotDensityRenderer = new DotDensityRenderer({
  // The number of units per dot
  referenceDotValue: 100,
  outline: null,
  // When referenceScale is set, linearly scales the dot value
  // based on the referenceDotValue. The layer view will draw
  // dots using the value in referenceDotValue only at the scale
  // specified here.
  referenceScale: view.scale,
  legendOptions: {
    // Displays "1 dot = 100 people" in the legend
    unit: "people"
  },
  attributes: [
    {
      // One red dot will be drawn for every 100 White people
      field: "B03002_003E",
      color: "#f23c3f",
      label: "White (non-Hispanic)"
    },
    {
      // One yellow dot will be drawn for every 100 Hispanic people
      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"
    }
  ]
});

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

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close