Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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.

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"
    }
  ]
});