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

Explore in the sandbox

View live

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
Use dark colors for code blocksCopy
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
77
      const less35 = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: "#fffcd4",
        style: "solid",
        outline: {
          width: 0.2,
          color: [255, 255, 255, 0.5],
        },
      };
      const less50 = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: "#b1cdc2",
        style: "solid",
        outline: {
          width: 0.2,
          color: [255, 255, 255, 0.5],
        },
      };
      const more50 = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: "#38627a",
        style: "solid",
        outline: {
          width: 0.2,
          color: [255, 255, 255, 0.5],
        },
      };
      const more75 = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: "#0d2644",
        style: "solid",
        outline: {
          width: 0.2,
          color: [255, 255, 255, 0.5],
        },
      };

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
Use dark colors for code blocksCopy
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
      const 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+
        legendOptions: {
          title: "% of adults (25+) with a college degree",
        },
        defaultSymbol: {
          type: "simple-fill", // autocasts as new SimpleFillSymbol()
          color: "black",
          style: "backward-diagonal",
          outline: {
            width: 0.5,
            color: [50, 50, 50, 0.6],
          },
        },
        defaultLabel: "no data",

      };

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
Use dark colors for code blocksCopy
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
130
130
130
130
130
130
130
130
130
130
130
130
130
130
130
130
130
130
130
130
130
130
130
130
130
130
        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.5,
            maxValue: 0.7499,
            symbol: more50,
            label: "50 - 75%", // label for symbol in legend
          },
          {
            minValue: 0.75,
            maxValue: 1.0,
            symbol: more75,
            label: "> 75%", // label for symbol in legend
          },
        ],

Or with the addClassBreakInfo() method.

Use dark colors for code blocksCopy
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

Data-driven continuous color

Data-driven continuous size

Data-driven extrusion

Data-driven opacity

Thematic multivariate visualization (2D)

Thematic multivariate visualization (3D)