Data-driven styles

Census tracts styled with a dot density renderer to show level of educational attainment

Data-driven styles

Data-driven styles answer questions about your data, such as Where? What? How much? When? or a combination of those questions. A layer's style is configured with its renderer.

A renderer defines how symbols are applied to each feature. In the case of a data-driven visualization, the symbol is always determined based on data (or an attribute value) returned from one of two data sources:

  • Field value (and optional normalization field) - Field values are typically referenced using a field or column name from a layer, a table, or a service.
  • Arcade expression - An expression evaluating to a number or text value. Arcade expressions are typically referenced as a string in the valueExpression property of a renderer or visual variable.

The renderer will match the values returned from these sources to a predefined symbol used to represent each feature, or use the data value to override one of the symbol's properties, such as size or color.

Unique types

Learn how to visualize data by categories.

Class breaks

Learn how to classify data by discrete numeric ranges.

Visual variables

Learn how to communicate potential relationships between two or more data attributes using multiple visual variables.

Time

Learn how to visualize dates as a timeline or an age relative to another date.

Multivariate

Learn how to visualize two or more data attributes with the same renderer.

Predominance

Learn how to visualize the predominant value among a set of competing attributes (or subcategories).

Dot density

Learn how to visualize the density of subcategories of a count or population.

Relationship

Learn how to visualize the potential relationship between two numeric attributes using a blend of two color ramps.

Smart mapping

Learn how to take advantage of Smart Mapping APIs to explore unfamiliar datasets.

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