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