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",
          },