Visualize data with class breaks | Sample | ArcGIS Maps SDK for JavaScript

This sample demonstrates how to visualize features based on numeric data using manually defined 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 the Map component and FeatureLayer. The basic components of this app, such as creating instances of the Map component, and understanding HTML and CSS structure will not be reviewed in this sample.

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.

Define four symbols for each of the class breaks

1
      const less35 = {
2
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
3
        color: "#fffcd4",
4
        style: "solid",
5
        outline: {
6
          width: 0.2,
7
          color: [255, 255, 255, 0.5],
8
        },
9
      };
10
      const less50 = {
11
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
12
        color: "#b1cdc2",
13
        style: "solid",
14
        outline: {
15
          width: 0.2,
16
          color: [255, 255, 255, 0.5],
17
        },
18
      };
19
      const more50 = {
20
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
21
        color: "#38627a",
22
        style: "solid",
23
        outline: {
24
          width: 0.2,
25
          color: [255, 255, 255, 0.5],
26
        },
27
      };
28
      const more75 = {
29
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
30
        color: "#0d2644",
31
        style: "solid",
32
        outline: {
33
          width: 0.2,
34
          color: [255, 255, 255, 0.5],
35
        },
36
      };

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.

Create a class breaks renderer

1
      const renderer = {
2
        type: "class-breaks", // autocasts as new ClassBreaksRenderer()
3
        field: "COL_DEG", // total number of adults (25+) with a college degree
4
        normalizationField: "EDUCBASECY", // total number of adults 25+
5
        legendOptions: {
6
          title: "% of adults (25+) with a college degree",
7
        },
8
        defaultSymbol: {
9
          type: "simple-fill", // autocasts as new SimpleFillSymbol()
10
          color: "black",
11
          style: "backward-diagonal",
12
          outline: {
13
            width: 0.5,
14
            color: [50, 50, 50, 0.6],
15
          },
16
        },
17
        defaultLabel: "no data",
18

19
      };

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…

Set the symbol for each of the breaks

1
        classBreakInfos: [
2
          {
3
            minValue: 0,
4
            maxValue: 0.3499,
5
            symbol: less35,
6
            label: "< 35%", // label for symbol in legend
7
          },
8
          {
9
            minValue: 0.35,
10
            maxValue: 0.4999,
11
            symbol: less50,
12
            label: "35 - 50%", // label for symbol in legend
13
          },
14
          {
15
            minValue: 0.5,
16
            maxValue: 0.7499,
17
            symbol: more50,
18
            label: "50 - 75%", // label for symbol in legend
19
          },
20
          {
21
            minValue: 0.75,
22
            maxValue: 1.0,
23
            symbol: more75,
24
            label: "> 75%", // label for symbol in legend
25
          },
26
        ],

Or with the addClassBreakInfo() method.

renderer.addClassBreakInfo(0, 0.3499, less35);

Once the renderer is defined, you can set it on the layer and the view and legend will automatically update.

Additional visualization samples

Create a symbol for each class break

Create an instance of ClassBreaksRenderer

Set symbol on each class break

Additional visualization samples

Data-driven continuous color

Data-driven continuous size

Data-driven extrusion

Data-driven opacity

Thematic multivariate visualization (2D)

Thematic multivariate visualization (3D)