Thematic multivariate visualization (2D)

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.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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.

Use dark colors for code blocksCopy
1
2
3
4
5
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.

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