Relationship | ArcGIS Maps SDK for JavaScript

Census tracts styled with a relationship renderer showing the geographic relationship between household size and home value

What is a relationship style?

Also known as a bivariate choropleth map , you can use a relationship style to explore the potential relationship between two numeric attributes. It overlays two sequential color schemes, each associated with a range of values to color features based on how each variable is classified in relation to the other.

Keep in mind that even if you observe a positive relationship between the two variables of interest, it doesn’t mean they are statistically correlated. It also doesn’t imply that the presence of one variable influences the other. Therefore, this renderer should be used judiciously with some prior knowledge that two variables may likely be related.

How a relationship style works

This renderer classifies each variable in either 2, 3, or 4 classes along separate color ramps. One of those ramps is rotated 90 degrees and overlaid on the other to create a 2x2, 3x3, or 4x4 square grid. The x-axis indicates the range of values for one variable, and the y-axis indicates the range for the second variable. The squares running diagonal from the lower left corner to the upper right corner indicate features where the two variables may be related or in agreement with one another.

The legend of a relationship renderer resembles a grid of two single-hue sequential color ramps overlaid on each other, forming a third hue along a diagonal line, which indicates where the two variables could potentially be related.

relationship-legend

The lower right and upper left corners indicate features where one field has high values and the other field low values and vice versa.

Examples

3x3 grid

The following example shows the geographic relationship between average household size and average home value using a 3x3 relationship color scheme. Expand the legend in the top-right corner of the map to view where both variables could be related, and where they are not.

To create a relationship map, you need to request the renderer from the relationship Smart Mapping module.

ArcGIS JS API


79 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
    <title>Esri Developer Guide: Relationship</title>
7

8
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
9
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
10
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
11

12
    <style>
13
      html,
14
      body,
15
      #viewDiv {
16
        height: 100%;
17
        margin: 0;
18
      }
19
    </style>
20

21
    <script type="module">
22
      const [MapView, WebMap, FeatureLayer, Legend, Expand, relationshipRendererCreator] =
23
        await $arcgis.import([
24
          "@arcgis/core/views/MapView.js",
25
          "@arcgis/core/WebMap.js",
26
          "@arcgis/core/layers/FeatureLayer.js",
27
          "@arcgis/core/widgets/Legend.js",
28
          "@arcgis/core/widgets/Expand.js",
29
          "@arcgis/core/smartMapping/renderers/relationship.js",
30
        ]);
31

32
      const layer = new FeatureLayer({
33
        portalItem: {
34
          id: "1cbb0faa0f1f424bbe213bfae9319309",
35
        },
36
        blendMode: "multiply",
37
        definitionExpression: "STATE = 'AZ'",
38
      });
39

40
      const map = new WebMap({
41
        portalItem: {
42
          id: "9cf503b654144873a8e33f996f91ba1d",
43
        },
44
        layers: [layer],
45
      });
46

47
      const referenceScale = 9244650 * 2;
48

49
      const view = new MapView({
50
        container: "viewDiv",
51
        map: map,
52
        scale: 1155580,
53
        center: [-111.868, 33.411],
54
        // Set dock options on the view's popup
55
        popup: {
56
          dockEnabled: true,
57
          dockOptions: {
58
            breakpoint: false,
59
          },
60
        },
61
        constraints: {
62
          snapToZoom: false,
63
        },
64
      });
65

66
      view.ui.add(
67
        new Expand({
68
          content: new Legend({
69
            view,
70
          }),
71
          view,
72
        }),
73
        "top-right",
74
      );
75

76
      layer.when().then(createRelationshipRenderer).then(applyRenderer);
77

78
      function createRelationshipRenderer() {
79

80
        const params = {
81
          layer: layer,
82
          view: view,
83
          field1: {
84
            field: "AVGHHSZ_CY",
85
            label: "Household size",
86
          },
87
          field2: {
88
            field: "AVGVAL_CY",
89
            label: "Home value",
90
          },
91
          focus: null,
92
          numClasses: 3,
93
          outlineOptimizationEnabled: true,
94
        };
95

96
        return relationshipRendererCreator.createRenderer(params);
33 collapsed lines
97

98
      }
99

100
      function applyRenderer(response) {
101
        const renderer = response.renderer;
102

103

104
        renderer.uniqueValueInfos.forEach(function (info) {
105
          switch (info.value) {
106
            case "HH":
107
              info.label = "Large households; Expensive homes";
108
              break;
109
            case "HL":
110
              info.label = "Large households; Cheaper homes";
111
              break;
112
            case "LH":
113
              info.label = "Small households; Expensive homes";
114
              break;
115
            case "LL":
116
              info.label = "Small households; Cheaper homes";
117
              break;
118
          }
119
        });
120

121
        layer.renderer = renderer;
122
      }
123
    </script>
124
  </head>
125

126
  <body>
127
    <div id="viewDiv"></div>
128
  </body>
129
</html>

API support

	3D	Lines	Polygons	Mesh
Unique types
Class breaks
Visual variables				¹
Time
Multivariate
Predominance
Dot density
Charts
Relationship
Smart Mapping	²	³	³	³

Full SupportPartial SupportNo Support

Color only
Size variable creators only supported for points
Size variable creators not supported in 3D

Data-driven stylesCharts Data-driven stylesSmart Mapping

What is a relationship style?

How a relationship style works

Examples

3x3 grid

Related samples and resources

Generate a relationship visualization

Update legend text

Smart Mapping with Arcade: Exploring relationships

API support