ClassBreaks Renderer

A class breaks renderer symbolizes based on the value of some numeric attribute. The classBreakInfo define the values at which the symbology changes.

Referenced by: renderer

Properties

Property Details
authoringInfo An object containing metadata about the authoring process for creating a renderer object. This allows the authoring clients to save specific overridable settings so that next time it is accessed via the UI, their selections are remembered. Non-authoring clients can ignore it.
backgroundFillSymbol A symbol used for polygon features as a background if the renderer uses point symbols, e.g. for bivariate types & size rendering. Only applicable to polygon layers. PictureFillSymbols can also be used outside of the Map Viewer for Size and Predominance and Size renderers.
classBreakInfos[] Array of classBreakInfo objects.
classificationMethod Determines the classification method that was used to generate class breaks. This has been replaced by authoringInfo.
Valid values: esriClassifyDefinedInterval, esriClassifyEqualInterval, esriClassifyGeometricalInterval, esriClassifyManual, esriClassifyNaturalBreaks, esriClassifyQuantile, esriClassifyStandardDeviation
defaultLabel Label for the default symbol used to draw unspecified values.
defaultSymbol Symbol used when a value cannot be classified.
field Attribute field used for renderer.
legendOptions A legend containing one title, which is a string describing the renderer in the legend.
minValue The minimum numeric data value needed to begin class breaks.
normalizationField Used when normalizationType is field. The string value indicating the attribute field by which the data value is normalized.
normalizationTotal Used when normalizationType is percent-of-total, this number property contains the total of all data values.
normalizationType Determine how the data was normalized.
Valid values:
  • esriNormalizeByField
  • esriNormalizeByLog
  • esriNormalizeByPercentOfTotal
rotationExpression A constant value or an expression that derives the angle of rotation based on a feature attribute value. When an attribute name is specified, it's enclosed in square brackets. Rotation is set using a visual variable of type rotationInfo with a specified field or valueExpression property.
rotationType A string property which controls the origin and direction of rotation. If the rotationType is defined as arithmetic, the symbol is rotated from East in a couter-clockwise direction where East is the 0 degree axis. If the rotationType is defined as geographic, the symbol is rotated from North in a clockwise direction where North is the 0 degree axis.
Valid values:
  • arithmetic
  • geographic
type Specifies the type of renderer used.
Valid value of this property classBreaks
valueExpression An Arcade expression evaluating to a number.
valueExpressionTitle The title identifying and describing the associated Arcade expression as defined in the valueExpression property.
visualVariables[] An array of objects used to set rendering properties.

Additional information

If the Normalization Type property is defined then the class breaks contain a normalized min/max value instead of the actual value. The data value, obtained from the field property, is normalized using one of the following functions before it is compared with the class breaks. 1. Field - Divide the data value using the attribute value of the field specified by the normalizationField property. 2. Log - Compute the base 10 logarithm of the data value. This can be a useful approach for some data distributions because it reduced the influence of very large data values. 3. Percent-of-total - Divide the data value by the sum of all data values then multiply by 100. Use the normalizationTotal property to determine the total value.

classBreaks-color Example

Live sample web maps showing classBreaks-color.

{
  "visualVariables": [
    {
      "type": "colorInfo",
      "field": "POPULATION",
      "stops": [
        {
          "value": -99,
          "color": [
            255,
            252,
            212,
            255
          ],
          "label": "< -99"
        },
        {
          "value": 705950,
          "color": [
            177,
            205,
            194,
            255
          ]
        },
        {
          "value": 1411999,
          "color": [
            98,
            158,
            176,
            255
          ],
          "label": "1,411,999"
        },
        {
          "value": 2578189,
          "color": [
            56,
            98,
            122,
            255
          ]
        },
        {
          "value": 3744380,
          "color": [
            13,
            38,
            68,
            255
          ],
          "label": "> 3,744,380"
        }
      ]
    }
  ],
  "type": "classBreaks",
  "field": "POPULATION",
  "minValue": -9007199254740991,
  "classBreakInfos": [
    {
      "symbol": {
        "color": [
          170,
          170,
          170,
          255
        ],
        "size": 6,
        "angle": 0,
        "xoffset": 0,
        "yoffset": 0,
        "type": "esriSMS",
        "style": "esriSMSCircle",
        "outline": {
          "color": [
            153,
            153,
            153,
            255
          ],
          "width": 0.375,
          "type": "esriSLS",
          "style": "esriSLSSolid"
        }
      },
      "classMaxValue": 9007199254740991
    }
  ]
}

classBreaks-size Example

Live sample web maps showing classBreaks-size

{
  "visualVariables": [
    {
      "type": "sizeInfo",
      "field": "POPULATION",
      "valueUnit": "unknown",
      "minSize": 6,
      "maxSize": 37.5,
      "minDataValue": -99,
      "maxDataValue": 23620000
    }
  ],
  "type": "classBreaks",
  "field": "POPULATION",
  "minValue": -9007199254740991,
  "classBreakInfos": [
    {
      "symbol": {
        "color": [
          227,
          139,
          79,
          255
        ],
        "size": 9,
        "angle": 0,
        "xoffset": 0,
        "yoffset": 0,
        "type": "esriSMS",
        "style": "esriSMSCircle",
        "outline": {
          "color": [
            255,
            255,
            255,
            255
          ],
          "width": 0.75,
          "type": "esriSLS",
          "style": "esriSLSSolid"
        }
      },
      "classMaxValue": 9007199254740991
    }
  ]
}

Proportional reference size Example

This could also include opacity and color visual variables. Will post live example here...

{
  "authoringInfo": {
    "visualVariables": [
      {
        "type": "sizeInfo",
        "theme": "reference-size",
        "referenceSizeSymbolStyle": "hexagon-flat",
        "field": "MEDVAL_CY",
        "sizeStops": [
          {
            "value": 0,
            "size": 0
          },
          {
            "value": 530488,
            "size": 53
          }
        ],
        "minSliderValue": 0,
        "maxSliderValue": 530488
      }
    ]
  },
  "type": "classBreaks",
  "classBreakInfos": [
    {
      "classMaxValue": 9007199254740991,
      "symbol": {
        "type": "CIMSymbolReference",
        "symbol": {
          "type": "CIMPolygonSymbol",
          "symbolLayers": [
            {
              "type": "CIMVectorMarker",
              "enable": true,
              "colorLocked": false,
              "anchorPoint": {
                "x": 0,
                "y": 0
              },
              "anchorPointUnits": "Relative",
              "primitiveName": "outerRing",
              "frame": {
                "xmin": 0,
                "ymin": 0,
                "xmax": 17,
                "ymax": 17
              },
              "markerGraphics": [
                {
                  "type": "CIMMarkerGraphic",
                  "geometry": {
                    "rings": [
                      [
                        [
                          12.75,
                          15.86
                        ],
                        [
                          17,
                          8.5
                        ],
                        [
                          12.75,
                          1.14
                        ],
                        [
                          4.25,
                          1.14
                        ],
                        [
                          0,
                          8.5
                        ],
                        [
                          4.25,
                          15.86
                        ],
                        [
                          12.75,
                          15.86
                        ]
                      ]
                    ]
                  },
                  "symbol": {
                    "type": "CIMPolygonSymbol",
                    "symbolLayers": [
                      {
                        "type": "CIMSolidFill",
                        "enable": true,
                        "color": [
                          227,
                          139,
                          79,
                          255
                        ],
                        "colorLocked": false,
                        "primitiveName": "symbolFill",
                        "width": 1.5,
                        "effects": [
                          {
                            "type": "CIMGeometricEffectDonut",
                            "width": 0.75
                          }
                        ]
                      }
                    ]
                  }
                }
              ],
              "scaleSymbolsProportionally": false,
              "respectFrame": true,
              "markerPlacement": null
            },
            {
              "type": "CIMVectorMarker",
              "enable": true,
              "anchorPoint": {
                "x": 0,
                "y": 0
              },
              "anchorPointUnits": "Relative",
              "primitiveName": "innerDot",
              "frame": {
                "xmin": 0,
                "ymin": 0,
                "xmax": 17,
                "ymax": 17
              },
              "markerGraphics": [
                {
                  "type": "CIMMarkerGraphic",
                  "geometry": {
                    "rings": [
                      [
                        [
                          12.75,
                          15.86
                        ],
                        [
                          17,
                          8.5
                        ],
                        [
                          12.75,
                          1.14
                        ],
                        [
                          4.25,
                          1.14
                        ],
                        [
                          0,
                          8.5
                        ],
                        [
                          4.25,
                          15.86
                        ],
                        [
                          12.75,
                          15.86
                        ]
                      ]
                    ]
                  },
                  "symbol": {
                    "type": "CIMPolygonSymbol",
                    "symbolLayers": [
                      {
                        "type": "CIMSolidFill",
                        "enable": true,
                        "color": [
                          227,
                          139,
                          79,
                          255
                        ],
                        "primitiveName": "symbolFill"
                      }
                    ]
                  }
                }
              ],
              "scaleSymbolsProportionally": true,
              "respectFrame": true,
              "markerPlacement": null
            }
          ]
        },
        "primitiveOverrides": [
          {
            "type": "CIMPrimitiveOverride",
            "primitiveName": "outerRing",
            "propertyName": "Size",
            "valueExpressionInfo": {
              "type": "CIMExpressionInfo",
              "title": "Size in pixels of outer ring at maxScale",
              "expression": "\nvar maxSize = 53;\nvar referenceScale = 36111.909643;\nreturn (maxSize * (referenceScale / $view.scale));",
              "returnType": "Default"
            }
          },
          {
            "type": "CIMPrimitiveOverride",
            "primitiveName": "innerDot",
            "propertyName": "Size",
            "valueExpressionInfo": {
              "type": "CIMExpressionInfo",
              "title": "Size in pixels of inner ring at maxScale",
              "expression": "\n\nif(!HasKey($feature, \"MEDVAL_CY\")){\n  return null;\n}\n$feature.MEDVAL_CY;\n\nvar value = $feature.MEDVAL_CY;\n\nvar referenceScale = 36111.909643;\nvar referenceScaleRatio = (referenceScale / $view.scale);\nvar maxSize = 53 * referenceScaleRatio;\nvar minSize = 0 * referenceScaleRatio;\n\nvar minDataValue = 0;\nvar maxDataValue = 530488;\n\nvar ratio = Constrain(( value - minDataValue ) / ( maxDataValue - minDataValue ), 0, 1);\n\nvar innerDotSize = Constrain(maxSize * ratio, minSize, maxSize);\nreturn innerDotSize;",
              "returnType": "Default"
            }
          }
        ]
      }
    }
  ],
  "field": "MEDVAL_CY",
  "minValue": -9007199254740991
}

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