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. It leverages a date binning with a yearly interval to group the data. The result of attribute binning is displayed in an interactive histogram and ArcGIS Bar Chart, allowing users to explore trends and patterns in the hurricanes data.
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.
// 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",
},
];
The code snippet shows how to create a bar chart that displays the total number of hurricanes by month. When a user clicks a bar in the chart, the arcgis event listener is triggered, which highlights all hurricane tracks for that month on the map.
// initialize the bar chart by creating a bar chart model and set the x-axis field
// to month to show the total hurricanes by month for the selected years
const barChartModel = await createModel({ layer: layer, chartType: "barChart" });
await barChartModel.setXAxisField("month");
barChartModel.setTitleSymbol({
type: "esriTS",
font: {
family: "Avenir Next",
size: 15,
weight: "bold",
},
});
barChartModel.setTitleText("Total hurricanes by month 1925 - 1935");
barChartElement.hideLoaderAnimation = true;
barChartElement.layer = layer;
barChartElement.view = viewElement;
// update the bar chart when the map time extent changes
barChartElement.viewTimeExtentChangePolicy = "refresh";
barChartElement.model = barChartModel;
// listen for selection events on the bar chart
// when a selection is made, highlight the selected features on the map
barChartElement.addEventListener("arcgisSelectionComplete", (event) => {
viewElement.highlightSelect?.remove();
viewElement.highlightSelect = layerView.highlight(event.detail.selectionData.selectionOIDs);
});
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 bar chart is updated to show the total number of hurricanes between the selected years.