Thematic multivariate visualization (2D) | Sample | ArcGIS Maps SDK for JavaScript

This sample demonstrates how to effectively create a multivariate data visualization using three visual variables to represent three data values related to current weather conditions:

Color - indicates air temperature
Size - indicates wind speed
Rotation - indicates wind direction

Visual variables visualize data along a continuous ramp allowing the data to speak for itself rather than be confined to arbitrary class breaks.

Color

Overrides the color of a renderer’s symbols based on a data value.

          {
            type: "color",
            field: "TEMP",
            stops: [
              { value: 20, color: "#2b83ba" },
              { value: 35, color: "#abdda4" },
              { value: 50, color: "#ffffbf" },
              { value: 65, color: "#fdae61" },
              { value: 80, color: "#d7191c" },
            ],
          },

Size

Overrides the size of a renderer’s symbols based on a data value.

          {
            type: "size",
            field: "WIND_SPEED",
            minDataValue: 0,
            maxDataValue: 60,
            minSize: {
              type: "size",
              valueExpression: "$view.scale",
              // adjust the min size by scale
              stops: [
                { value: referenceScale, size: 8 },
                { value: referenceScale * 2, size: 6 },
                { value: referenceScale * 4, size: 4 },
                { value: referenceScale * 8, size: 2 },
              ],
            },
            maxSize: {
              type: "size",
              valueExpression: "$view.scale",
              // adjust the max size by scale
              stops: [
                { value: referenceScale, size: 40 },
                { value: referenceScale * 2, size: 30 },
                { value: referenceScale * 4, size: 20 },
                { value: referenceScale * 8, size: 10 },
              ],
            },
          },

Rotation

Rotates symbols based on the value of an attribute field. The value is literally interpreted as the geographic angle on the map.

          {
            type: "rotation",
            field: "WIND_DIRECT",
            rotationType: "geographic",
          },

A word of caution

While you can add more than one visual variable to a renderer, using too many visual variables can make the map confusing and difficult to read. This is a good example of when two or more visual variables work well together because they are related to one another.

Visualizing multiple data attributes that aren’t related to one another is misleading and can cause confusion for the map reader.