Attribute Bins Query

This sample demonstrates how to use AttributeBinsQuery API to calculate the total number of hurricanes per year between 1925 and 2024 in the PST time zone using a date binning with a yearly interval.

Data binning is a technique that groups data into bins or categories based on specific intervals or ranges, making it easier to analyze trends, visualize patterns, and simplify the interpretation of large datasets.

How it works

When the application starts, the total number of hurricanes per year between 1925 and 2024 is calculated by calling queryAttributeBins() method on the hurricane tracks feature layer. The results of this query are then displayed as a histogram in the calcite-slider.

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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
      // get total hurricanes by year between 1925 and 2024 in the PST time zone
      // using a date bin query with a yearly interval
      const hurricanesQuery = new AttributeBinsQuery({
        binParameters: new DateBinParameters({
          field: "Hurricane_Date",
          start: new Date(1925, 0, 1),
          end: new Date(2024, 11, 31),
          interval: {
            value: 1,
            unit: "years"
          }
        }),
        outTimeZone: "America/Los_Angeles",
        cacheHint: true
      });

      // query the layer for the total hurricanes by year
      const hurricanesQueryResult = await layer.queryAttributeBins(hurricanesQuery);
      const histogramData = hurricanesQueryResult.features.map((feature) => {
        const year = new Date(feature.attributes.lowerBoundary).getFullYear()
        const count = feature.attributes.frequency;
        return [year, count];
      });

      // get the histogram element and set the histogram data
      const hurricanesHistogram = document.getElementById("hurricanes-histogram");
      hurricanesHistogram.histogram = histogramData;
      hurricanesHistogram.histogramStops = [{
        offset: 0,
        color: "#52aeb7"
      }];

Users can filter the hurricane tracks by adjusting the slider thumbs to display the hurricane tracks for the selected years. The total hurricanes by month ArcGIS bar chart is updated to show the total number of hurricanes between the selected years.

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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
      // update the map time extent and bar chart when the slider value changes
      hurricanesHistogram.addEventListener("calciteSliderChange", () => {
        updateMapTimeExtent(hurricanesHistogram.value[0], hurricanesHistogram.value[1]);
        updateChartTimeExtent(hurricanesHistogram.value[0], hurricanesHistogram.value[1]);
      });

      // this function updates the time extent of the map and is called when the slider value changes
      function updateMapTimeExtent(startYear, endYear) {
        const start = new Date(startYear, 0, 1);
        const end = new Date(endYear, 11, 31);
        arcgisMap.timeExtent = {start, end};
        const histogramBlock = document.getElementById("histogram-block");
        histogramBlock.description = `${startYear} - ${endYear}`;
      }

      // update the bar chart time extent when the slider value changes
      // to show the total hurricanes by month for the selected years
      // update the bar chart's time extent
      function updateChartTimeExtent(startYear, endYear) {
        const start = new Date(startYear, 0, 1);
        const end = new Date(endYear, 11, 31);
        barChartElement.runtimeDataFilters = {
          ...barChartElement.runtimeDataFilters,
          timeExtent: [start, end]
        };
        // update the title base on time extent
        barChartModel.setTitleText(`Total hurricanes by month ${startYear} - ${endYear}`);
        barChartElement.refresh();
      }

      // create the bar chart model and set the x-axis field to month
      // this function is called when the slider value changes
      // to show the total hurricanes by month for the selected years
      // initialize the bar chart with bar chart model
      async function initBarChart(startYear, endYear) {
        barChartModel = new BarChartModel();
        await barChartModel.setup({
          layer
        });
        await barChartModel.setXAxisField("month");

        barChartModel.setTitleSymbol({
          type: "esriTS",
          font: {
            family: "Avenir Next",
            size: 15,
            weight: "bold"
          }
        });
        barChartModel.setTitleText(`Total hurricanes by month ${startYear} - ${endYear}`);
        const config = barChartModel.getConfig();
        barChartElement.model = config;
        barChartElement.layer = layer;
        barChartElement.hideLoaderAnimation = true;
        barChartElement.refresh();
      }

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

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