Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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:

1. Color - indicates air temperature
2. Size - indicates wind speed
3. 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.

const colorVariable = {
  type: "color",
  // attribute field to visualize
  field: "TEMP",
  // map data values to colors
  // all other values are linearly interpolated
  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.

const referenceScale = 9244650;

const sizeVariable = {
  type: "size",
  // attribute value to visualize
  field: "WIND_SPEED",
  // features with the minDataValue are bounded to the minSize
  minDataValue: 0,
  // features with the maxDataValue are bounded to the maxSize
  maxDataValue: 60,
  minSize: {
    type: "size",
    valueExpression: "$view.scale",
    // adjust the minSize of the features 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.

const rotationVariable = {
  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.