Visualize data with class breaks

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how to visualize features based on numeric data using class breaks. When breaks are known or predefined, this renderer provides options for setting a distinguishing symbol for each class break.

Prior to completing the following steps, you should be familiar with views, Map, and FeatureLayer. If necessary, complete the following tutorials first:

• Intro to MapView
• Intro to SceneView
• Intro to Layers
• Review the basic FeatureLayer sample

The basic components of this app, such as creating instances of the Map and MapView classes and understanding HTML and CSS structure will not be reviewed. See the tutorials listed above if you need to familiarize yourself with those components in this application. As a general rule the introductory principles discussed in the tutorials above apply to most samples in the documentation.

1. Create a symbol for each class break

This application uses data representing U.S. Census block groups in Seattle, WA. The demographic of interest is the number of adults ages 25+ who have a college degree. Our users may have predefined breaks they want to use for visualizing this data, such as areas were 0 - 35% of the population has a degree, 35% - 50%, 50% - 75%, and 75% - 100%.

First, we'll define a separate symbol for each break using SimpleFillSymbol.

var less35 = {
  type: "simple-fill",  // autocasts as new SimpleFillSymbol()
  color: "#7B3294",
  style: "solid",
  outline: {  // autocast as esri/symbols/SimpleLineSymbol
    width: 0.5,
    color: "white"
  }
};

var less50 = {
  type: "simple-fill",  // autocasts as new SimpleFillSymbol()
  color: "#C2A5CF",
  style: "solid",
  outline: {  // autocast as esri/symbols/SimpleLineSymbol
    width: 0.5,
    color: "white"
  }
};

var more50 = {
  type: "simple-fill",  // autocasts as new SimpleFillSymbol()
  color: "#A6DBA0",
  style: "solid",
  outline: {  // autocast as esri/symbols/SimpleLineSymbol
    width: 0.5,
    color: "white"
  }
};

var more75 = {
  type: "simple-fill",  // autocasts as new SimpleFillSymbol()
  color: "#008837",
  style: "solid",
  outline: {  // autocast as esri/symbols/SimpleLineSymbol
    width: 0.5,
    color: "white"
  }
};

2. Create an instance of ClassBreaksRenderer

We can use a ClassBreaksRenderer when defining class breaks for features. In the constructor we specify the field and normalizationField, which contains the data of interest.

var renderer = {
  type: "class-breaks",  // autocasts as new ClassBreaksRenderer()
  field: "COL_DEG",  // total number of adults (25+) with a college degree
  normalizationField: "EDUCBASECY",  // total number of adults 25+
  defaultSymbol: {  // for features with no data or data values out of range
    type: "simple-fill",  // autocasts as new SimpleFillSymbol()
    color: "gray",
    outline: {
      width: 0.5,
      color: "white"
    }
  },
  defaultLabel: "no data"  // legend label for features that don't match a class break
};

3. Set symbol on each class break

You can set a symbol on each class break in one of two ways: Using classBreakInfos in the constructor...

var renderer = {
  type: "class-breaks",  // autocasts as new ClassBreaksRenderer()
  // other properties set in step number 2
  classBreakInfos: [{
    minValue: 0,
    maxValue: 0.3499,
    symbol: less35,
    label: "< 35%"  // label for symbol in legend
  }, {
    minValue: 0.35,
    maxValue: 0.4999,
    symbol: less50,
    label: "35 - 50%"  // label for symbol in legend
  }, {
    minValue: 0.50,
    maxValue: 0.7499,
    symbol: more50,
    label: "50 - 75%"  // label for symbol in legend
  }, {
    minValue: 0.75,
    maxValue: 1.00,
    symbol: more75,
    label: "> 75%"  // label for symbol in legend
  }]
};

Or with the addClassBreakInfo() method.

renderer.addClassBreakInfo(0, 0.3499, less35);

4. Summary

Once the renderer is defined, you can set it on the layer and the view and legend will automatically update. Click the sandbox button below to see the full code of the app.

5. Additional visualization tutorials and samples

• Data-driven continuous color
• Data-driven continuous size
• Data-driven extrusion
• Data-driven opacity
• Thematic multivariate visualization (2D)
• Thematic multivariate visualization (3D)