Aggregation

Hexbins

The following example demonstrates how to visualize earthquake points aggregated to hexbins. This layer was created using the Aggregate Points analysis tool in the ArcGIS Online Map Viewer. The output layer contains the total count of earthquakes intersecting each bin.

This layer is styled with a continuous color ramp using a color visual variable. Typically, you should not visualize total counts in polygons using color without some form of data normalization. However, it is permissible in this case because the areas of each hexagon are equal, effectively normalizing the data by area.

This map was configured in the ArcGIS Online map viewer. In addition to the hexbin layer generated by the Aggregate Points tool, it includes the earthquakes point layer with visibility controlled by scale. This allows us to use Arcade to summarize earthquake statistics in the popup.

For example, to show the size of the largest earthquake, you could write the following expression.

1
2
var earthquakes = Intersects(FeatureSetByName($map, "earthquake points"), $feature);
Text( Max(earthquakes, "mag"), "#.#" );

Then reference the expression in the popup content. This can be done in code, or directly in ArcGIS Online.

Setting a maxScale on the hexbin layer and an equivalent minScale on the point layer allows you to create a smooth transition as the user zooms to larger scales. When the user zooms past a certain scale, the point layer can be safely loaded without performance concerns. Depending on the resolution of the hexbins, it visually doesn't make sense to view the bins at large scales.

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
          const earthquakeLayer = view.map.layers.find((layer) => layer.title === "earthquake points");
          earthquakeLayer.minScale = 577790;
          earthquakeLayer.maxScale = 0;

Irregular polygons

This example demonstrates how to summarize points within related irregular polygons. In this app, a point layer representing homicide locations is aggregated to a polygon layer representing police precincts in Chicago. Summarizing the data by precinct makes sense when comparing statistics by police precinct jurisdiction.

Because of differences in polygon shape and size, we should visualize the total count using graduated symbols (i.e. icons with a size visual variable). Using color would result in over-emphasizing large areas that may have fewer totals than smaller, more densely populated areas.

During the point to polygon aggregation analysis, homicide counts were grouped by the status of the case (i.e. open, closed by arrest, or closed without arrest). These stats are persisted in the output table so they can be easily referenced in the popup.

Because the summary statistics are included as attributes in the table, you can also render based on any of the grouped statistics. For example, rather than showing the total count of all homicides, you can show the total count of unsolved homicides.

Predominance

Using the Aggregate Points tool in ArcGIS Online, you can also create a field for the most common occurrence of a string value. This allows us to create a predominance map where size still indicates total count, but color represents the most common value of a particular category. The example below uses color to represent the predominant race or ethnicity of the victims in each precinct.

This style is configured with a UniqueValueRenderer and a size visual variable.

Browse features

By default, the clustering popup has a "Browse features" action that allows you to select individual features within a cluster to view their location and attribute information. You can implement the same behavior in a polygon layer representing aggregated point data.

In the example below, click any hexbin to explore individual features belonging to the bin.

To implement this browsing experience, you must do the following:

Create a "browse features" action for the aggregate layer's popup template.

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
          hexbinLayer.popupTemplate.actions = [
            {
              title: "Browse features",
              id: "browse",
              className: "esri-icon-table"
            }
          ];

When browsing is activated by the user, execute a function to query features in the point layer that intersect the selected feature. Then add the fetched features to the view's popup.

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
            const layer = view.map.layers.find((layer) => layer.title === "earthquake points");
            const query = layer.createQuery();
            query.returnGeometry = true;
            query.geometry = aggregateGraphic.geometry;
            const { features } = await layer.queryFeatures(query);
            view.popup.features = [aggregateGraphic].concat(features);

When a new feature is selected, add it to the view and clear any previous graphics from the view.

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
            selectedFeatureHandle = reactiveUtils.watch(
              () => view.popup?.selectedFeature,
              async (feature) => {
                if (!feature || selectedAggregateFeature.getObjectId() === feature.getObjectId()) {
                  return;
                }
                feature.symbol = {
                  type: "simple-marker",
                  color: "rgb(50,50,50)",
                  size: 8,
                  style: "x",
                  outline: {
                    color: "rgb(50,50,50)",
                    width: 4
                  }
                };
                if (selectedFeature && view.graphics.includes(selectedFeature)) {
                  view.graphics.remove(selectedFeature);
                  selectedFeature = null;
                }
                if (selectedAggregateFeature.getObjectId() !== feature.getObjectId()) {
                  view.graphics.add(feature);
                  selectedFeature = feature;
                }
              }
            );

The same technique can also be applied to an aggregated layer of irregular polygons. Browse the features in a precinct by clicking the action in the popup and selecting one of the homicide locations.