You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard
Loading...

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

Sample search results

TitleSample
Loading...