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