SizeVariable

The size visual variable defines the size of individual features in a layer based on a numeric (often thematic) value. This value comes from one of the following:

• An attribute field
• The value of an attribute field divided by a normalizationField
• A value returned from an Arcade expression specified in valueExpression.

Size is defined in the form of a continuous ramp, which may be applied to renderers in either a MapView or a SceneView.

Symbol size may be applied either thematically, or literally using real-world units. See the example snippets below for details about each potential use of a size visual variable:

Bounded proportional symbols

Symbol sizes are generally proportional to data values, but bounded by min and max sizes. Intermediate sizes are linearly interpolated between the minSize and maxSize depending on the minDataValue and maxDataValue.

// features with WIND_SPEED of 0 will be rendered with a size of 8pts
// features with WIND_SPEED of 60 will be rendered with a size of 40pts
// features with WIND_SPEED between 0 and 60 will be rendered with sizes
// between 8 and 40 points, interpolated linearly

const sizeVisualVariable = {
  type: "size",
  field: "WIND_SPEED",
  minDataValue: 0,
  maxDataValue: 60,
  minSize: 8,
  maxSize: 40
};
renderer.visualVariables = [ sizeVisualVariable ];

Intermediate bounded proportional symbols

Symbol sizes are generally proportional to data values, but may be defined with 2-6 stops at which symbol sizes are mapped to specific data values (and interpolated between those stops). This is a variation on the bounded proportional symbols, and is good for emphasizing certain ranges of data values. It also provides you with control over the legend labels.

// features with POP_POVERTY / TOTPOP_CY = 0.15 will be rendered with a size of 4pts
// features with POP_POVERTY / TOTPOP_CY = 0.25 will be rendered with a size of 12pts
// features with POP_POVERTY / TOTPOP_CY = 0.35 will be rendered with a size of 24pts
// features with POP_POVERTY / TOTPOP_CY between those values will be rendered
// will be rendered with sizes between the defined stops, interpolated linearly
// the legend will show the labels defined in each stop

renderer.visualVariables = [{
  type: "size",
  field: "POP_POVERTY",
  normalizationField: "TOTPOP_CY",
  legendOptions: {
    title: "% population in poverty by county"
  },
  stops: [
    { value: 0.15, size: 4, label: "<15%" },
    { value: 0.25, size: 12, label: "25%" },
    { value: 0.35, size: 24, label: ">35%" }
  ]
}];

Scale-dependent stops

Symbol sizes vary depending on the view scale and are otherwise not data-driven. This is used to create symbols with all the same sizes at a given scale, but the symbol sizes change as the user zooms in and out. It may also be used to define scale-dependent stops for polygon outline widths.

// all features will be rendered with the same outline width at a given view scale
// outline width will shrink as the user zooms out (until it eventually disappears),
// and grow as the user zooms in.

const sizeVisualVariable = {
  type: "size",
  valueExpression: "$view.scale",
  target: "outline",
  stops: [
    { size: 2, value: 1155581.108577 },
    { size: 1, value: 9244648.868618 },
    { size: 0.5, value: 73957190.948944 },
    { size: 0, value: 591657527.591555 }
  ]
};
renderer.visualVariables = [ sizeVisualVariable ];

Scale-dependent bounded proportional symbols

Symbol sizes vary depending on the view scale, but are also data-driven. Sizes are bounded by min and max data values, but the minSize and maxSize (and interpolated sizes) vary based on the scale of the MapView. This doesn't apply to a 3D SceneView.

// features are rendered as bounded proportional symbols based on the poverty rate, but the overall
// sizes of the symbols will grow as the user zooms in and shrink as the user zooms out, providing
// a cleaner visualization of the data at each scale.

// features with poverty rates of 15% will be rendered with a size of 3pts at scale 1:15,886,548
// and a size of 12pts at scale 1:1,128
// features with poverty rates of 45% will be rendered with a size of 32pts at scale 1:15,886,548
// and a size of 60pts at scale 1:1,128
// features with poverty rates between 15-45% will be rendered with sizes between those values,
// depending on the view scale.

const sizeVisualVariable = {
  type: "size",
  valueExpression: "( $feature.POP_POVERTY / $feature.TOTPOP_CY ) * 100",
  legendOptions: {
    title: "% population living in poverty"
  },
  maxDataValue: 45,
  // the max symbol size will map to the minDataValue at an
  // interpolated size depending on the current view scale
  maxSize: {
    type: "size",
    valueExpression: "$view.scale",
    stops: [
      { size: 60, value: 1128 },
      { size: 50, value: 36111 },
      { size: 37.5, value: 43334 },
      { size: 32, value: 15886548 }
    ]
  },
  minDataValue: 15,
  // the min symbol size will map to the minDataValue at an
  // interpolated size depending on the current view scale
  minSize: {
    type: "size",
    valueExpression: "$view.scale",
    stops: [
      { size: 12, value: 1128 },
      { size: 8, value: 36111 },
      { size: 5, value: 43334 },
      { size: 3, value: 15886548 }
    ]
  }
};
renderer.visualVariables = [ sizeVisualVariable ];

RealWorldSize

Symbol sizes are determined based on real-world measurements and units, not thematic values and screen units. This is useful for visualizing features with realistic sizes in either a MapView or a SceneView. It can also be used for thematic volumetric visualizations in 3D.

// features will be rendered with a height based on the "Height" attribute field
// and a width and depth based on the "Width_EW" and "Width_NS" attribute fields

const treeSizeVisualVariables = [{
  type: "size",
  axis: "height",
  field: "Height", // tree height
  valueUnit: "feet"
}, {
  type: "size",
  axis: "width",
  field: "Width_EW", // crown diameter from east to west
  valueUnit: "feet"
}, {
  type: "size",
  axis: "depth",
  field: "Width_NS", // crown diameter from north to south
  valueUnit: "feet"
}];
renderer.visualVariables = treeSizeVisualVariables;

Thematic Icon size	Thematic extrusion	Real world size

For CIMSymbols, the size value is only applied to the largest symbol layer instead of the full symbol. All other symbol layers will scale proportionally.