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.

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.

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.

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.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close