Binning aggregates data spatially to a regular grid of polygons called "bins", thus summarizing the density of data in real-world space. This can be an effective method for visualizing the density of large datasets. Binning is a visualization-only feature intended solely for reducing the visual clutter of many overlapping features to a simplified view of a few aggregate features that communicate patterns of density. It is not intended to be used for analytical purposes. Binning is not appropriate for all datasets. Therefore, it is important to consider the implications of binning based on geometry type, data distribution, and the purpose of the visualization. Clients that implement a UX or API for binning should clearly document when binning is appropriate and when it is not.
Referenced by: Feature Reduction
Properties
| Property | Details |
|---|---|
| binType | Determines the type or shape of bins used in the aggregation. Valid values:
|
| disablePopup | Indicates whether to disable popups describing aggregate data in a binning visualization. |
| drawingInfo | Contains labeling and rendering information for the bins. |
| fields[] | An array of objects defining the aggregate fields to use in binning popups, labels, and renderers. |
| fixedBinLevel | Indicates the fixed geohash level used to create bins. When defined, bins defined at this level are static and do not regenerate on zoom. When undefined, bin resolution will vary as you zoom in and out. Dynamically changing bin resolution on zoom is currently not supported on web clients. |
| popupInfo | Defines the popup used to describe aggregate data in the selected bin. |
| showLabels | Defines whether labels should be shown in the bins. |
| type | Type of feature reduction. Valid value of this property binning |
| visibilityInfo | Defines the threshold for toggling between when a layer should be drawn using the feature reduction configuration versus the layer's drawing info. |
Bins colored by count Example
{
"type": "binning",
"binType": "geohash",
"fixedBinLevel": 6,
"drawingInfo": {
"labelingInfo": [
{
"deconflictionStrategy": "none",
"labelExpressionInfo": {
"expression": "Text($feature.aggregateCount, '#,###')"
},
"maxScale": 0,
"minScale": 144448,
"repeatLabel": true,
"symbol": {
"type": "esriTS",
"color": [
255,
255,
255,
255
],
"font": {
"family": "Noto Sans",
"size": 10,
"weight": "bold"
},
"horizontalAlignment": "center",
"kerning": true,
"haloColor": [
153,
31,
23,
255
],
"haloSize": 0.5,
"rotated": false,
"text": "",
"verticalAlignment": "baseline",
"xoffset": 0,
"yoffset": 0,
"angle": 0
}
}
],
"renderer": {
"type": "simple",
"visualVariables": [
{
"type": "colorInfo",
"field": "aggregateCount",
"legendOptions": {
"title": "Number of crashes"
},
"stops": [
{
"color": [
215,
225,
238,
255
],
"value": 0
},
{
"color": [
203,
214,
228,
255
],
"value": 25
},
{
"color": [
179,
191,
209,
255
],
"value": 75
},
{
"color": [
200,
101,
88,
255
],
"value": 200
},
{
"color": [
153,
31,
23,
255
],
"value": 300
}
]
}
],
"symbol": {
"type": "esriSFS",
"color": [
0,
255,
71,
255
],
"outline": {
"type": "esriSLS",
"color": [
153,
31,
23,
77
],
"width": 0.3,
"style": "esriSLSSolid"
},
"style": "esriSFSSolid"
}
}
},
"showLabels": true,
"disablePopup": false,
"popupInfo": {
"description": "{aggregateCount} car crashes occurred in this area.",
"title": "Car crashes"
},
"visibilityInfo": {
"maxScale": 24000,
"type": "scale"
}
}Binning with aggregate fields Example
{
"type": "binning",
"binType": "geohash",
"fixedBinLevel": 6,
"drawingInfo": {
"labelingInfo": [
{
"deconflictionStrategy": "none",
"labelExpressionInfo": {
"expression": "Text($feature.AVG_MOTORIST_INJURED, '#%')"
},
"maxScale": 0,
"minScale": 36112,
"repeatLabel": true,
"symbol": {
"type": "esriTS",
"color": [
255,
255,
255,
255
],
"font": {
"family": "Noto Sans",
"size": 12,
"weight": "bold"
},
"horizontalAlignment": "center",
"kerning": true,
"haloColor": [
153,
31,
23,
255
],
"haloSize": 0.5,
"rotated": false,
"text": "",
"verticalAlignment": "baseline",
"xoffset": 0,
"yoffset": 0,
"angle": 0
}
}
],
"renderer": {
"type": "simple",
"visualVariables": [
{
"type": "sizeInfo",
"field": "aggregateCount",
"legendOptions": {
"title": "Total crashes"
},
"maxDataValue": 300,
"maxSize": {
"type": "sizeInfo",
"valueExpression": "$view.scale",
"stops": [
{
"size": 48,
"value": 18055
},
{
"size": 32,
"value": 36111
},
{
"size": 24,
"value": 72223
},
{
"size": 18,
"value": 144447
},
{
"size": 12,
"value": 288895
},
{
"size": 6,
"value": 577790
}
]
},
"minDataValue": 10,
"minSize": {
"type": "sizeInfo",
"valueExpression": "$view.scale",
"stops": [
{
"size": 18,
"value": 18055
},
{
"size": 12,
"value": 36111
},
{
"size": 8,
"value": 72223
},
{
"size": 4,
"value": 144447
},
{
"size": 2,
"value": 288895
},
{
"size": 1,
"value": 577790
}
]
}
},
{
"type": "colorInfo",
"field": "AVG_MOTORIST_INJURED",
"legendOptions": {
"title": "% of motorists injured per crash"
},
"stops": [
{
"color": [
215,
225,
238,
255
],
"label": "No injuries",
"value": 0
},
{
"color": [
203,
214,
228,
255
],
"value": 0.1
},
{
"color": [
179,
191,
209,
255
],
"label": "30%",
"value": 0.3
},
{
"color": [
200,
101,
88,
255
],
"value": 0.5
},
{
"color": [
153,
31,
23,
255
],
"label": ">75%",
"value": 0.75
}
]
}
],
"symbol": {
"type": "esriSMS",
"color": [
0,
255,
71,
255
],
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"size": 12,
"style": "esriSMSCircle",
"outline": {
"type": "esriSLS",
"color": [
153,
31,
23,
77
],
"width": 0.3,
"style": "esriSLSSolid"
}
}
}
},
"showLabels": true,
"disablePopup": false,
"popupInfo": {
"popupElements": [
{
"type": "text",
"text": "{aggregateCount} car crashes occurred in this area."
},
{
"type": "fields",
"fieldInfos": [
{
"fieldName": "aggregateCount",
"format": {
"digitSeparator": true,
"places": 0
},
"label": "Total crashes",
"visible": true
},
{
"fieldName": "SUM_PERSONS_INJURED",
"format": {
"digitSeparator": true,
"places": 0
},
"label": "Total injured",
"visible": true
},
{
"fieldName": "SUM_PEDESTRIANS_INJURED",
"label": "Pedestrians injured",
"visible": true
},
{
"fieldName": "SUM_CYCLIST_INJURED",
"label": "Cyclists injured",
"visible": true
},
{
"fieldName": "SUM_MOTORIST_INJURED",
"label": "Motorists injured",
"visible": true
},
{
"fieldName": "SUM_KILLED",
"label": "Total killed",
"visible": true
}
]
}
],
"description": "{aggregateCount} car crashes occurred in this area.",
"title": "Crash summary"
},
"fields": [
{
"name": "SUM_PERSONS_INJURED",
"alias": "Total injured",
"statisticType": "sum",
"onStatisticField": "NUMBER_OF_PERSONS_INJURED"
},
{
"name": "SUM_PEDESTRIANS_INJURED",
"alias": "Total pedestrians injured",
"statisticType": "sum",
"onStatisticField": "NUMBER_OF_PEDESTRIANS_INJURED"
},
{
"name": "SUM_CYCLIST_INJURED",
"alias": "Total cyclists injured",
"statisticType": "sum",
"onStatisticField": "NUMBER_OF_CYCLIST_INJURED"
},
{
"name": "SUM_MOTORIST_INJURED",
"alias": "Total motorists injured",
"statisticType": "sum",
"onStatisticField": "NUMBER_OF_MOTORIST_INJURED"
},
{
"name": "AVG_MOTORIST_INJURED",
"alias": "Average motorists injured",
"statisticType": "avg",
"onStatisticField": "NUMBER_OF_MOTORIST_INJURED"
},
{
"name": "SUM_KILLED",
"alias": "Total killed",
"statisticType": "sum",
"onStatisticField": "NUMBER_OF_PERSONS_KILLED"
}
]
}