Visualize data with class breaks

Loading...

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 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 views, Map, and FeatureLayer. If necessary, complete the following tutorials first:

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.

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 ]
  }
};

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.

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+
  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"  // 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...

const 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

114 results for Sample Code:

Tags
TitleSample
View padding Explore in the sandboxSandbox Share View live
Intro to MapView - Create a 2D map Explore in the sandboxSandbox Share View live
Intro to FeatureLayer Explore in the sandboxSandbox Share View live
Load portal items via drag & drop Explore in the sandboxSandbox Share View live
Load a basic WebMap Explore in the sandboxSandbox Share View live
Bookmarks widget Explore in the sandboxSandbox Share View live
Switch view from 2D to 3D Explore in the sandboxSandbox Share View live
Custom BlendLayer Explore in the sandboxSandbox Share View live
WMTSLayer Explore in the sandboxSandbox Share View live
Popup actions Explore in the sandboxSandbox Share View live
Popup dock positions Explore in the sandboxSandbox Share View live
PopupTemplate - use functions to set content Explore in the sandboxSandbox Share View live
PopupTemplate with promise Explore in the sandboxSandbox Share View live
Synchronize MapView and SceneView Explore in the sandboxSandbox Share View live
Visualize points with a heatmap Explore in the sandboxSandbox Share View live
Visualize features by type Explore in the sandboxSandbox Share View live
Swap web maps in the same view Explore in the sandboxSandbox Share View live
Compass widget Explore in the sandboxSandbox Share View live
Using widgets with React Explore in the sandboxSandbox Share View live
Legend widget Explore in the sandboxSandbox Share View live
Search widget with multiple sources Explore in the sandboxSandbox Share View live
Measurement in 2D Explore in the sandboxSandbox Share View live
Draw polyline Explore in the sandboxSandbox Share View live
Query features from a FeatureLayer Explore in the sandboxSandbox Share View live
Query features from a FeatureLayerView Explore in the sandboxSandbox Share View live
Intro to popups Explore in the sandboxSandbox Share View live
Intro to PopupTemplate Explore in the sandboxSandbox Share View live
Custom DynamicLayer Explore in the sandboxSandbox Share View live
Custom LERC Layer Explore in the sandboxSandbox Share View live
GeoRSSLayer Explore in the sandboxSandbox Share View live
Intro to ImageryLayer Explore in the sandboxSandbox Share View live
StreamLayer Explore in the sandboxSandbox Share View live
VectorTileLayer Explore in the sandboxSandbox Share View live
Overview map Explore in the sandboxSandbox Share View live
Multiple popup elements Explore in the sandboxSandbox Share View live
Disable rotation on the view Explore in the sandboxSandbox Share View live
Visualize all features with the same symbol Explore in the sandboxSandbox Share View live
Generate a predominance visualization Explore in the sandboxSandbox Share View live
Data-driven opacity Explore in the sandboxSandbox Share View live
CoordinateConversion widget Explore in the sandboxSandbox Share View live
Using widgets with Riot Explore in the sandboxSandbox Share View live
Intro to widgets using BasemapToggle Explore in the sandboxSandbox Share View live
CSVLayer - Project points on the fly Explore in the sandboxSandbox Share View live
VectorTileLayer from JSON Explore in the sandboxSandbox Share View live
Symbol playground Explore in the sandboxSandbox Share View live
Reference Arcade expressions in PopupTemplate Explore in the sandboxSandbox Share View live
Simple theme Explore in the sandboxSandbox Share View live
Themes Explore in the sandboxSandbox Share View live
Create an app with composite views Explore in the sandboxSandbox Share View live
Visualize data with class breaks Explore in the sandboxSandbox Share View live
Create a scale-dependent visualization Explore in the sandboxSandbox Share View live
Data-driven continuous size Explore in the sandboxSandbox Share View live
Feature Widget Explore in the sandboxSandbox Share View live
Update legend text Explore in the sandboxSandbox Share View live
Print widget Explore in the sandboxSandbox Share View live
ScaleBar widget Explore in the sandboxSandbox Share View live
Scale feature sizes based on real world sizes (2D) Explore in the sandboxSandbox Share View live
Multi-line labels Explore in the sandboxSandbox Share View live
KMLLayer Explore in the sandboxSandbox Share View live
Select WMTSLayer sublayer Explore in the sandboxSandbox Share View live
Sketch update validation Explore in the sandboxSandbox Share View live
IdentifyTask Explore in the sandboxSandbox Share View live
Disable all zooming on the view Explore in the sandboxSandbox Share View live
Generate a class breaks visualization Explore in the sandboxSandbox Share View live
Multivariate data exploration Explore in the sandboxSandbox Share View live
Data-driven continuous color Explore in the sandboxSandbox Share View live
Visualize data with rotation Explore in the sandboxSandbox Share View live
Watch for changes Explore in the sandboxSandbox Share View live
Query statistics client-side by distance Explore in the sandboxSandbox Share View live
Query statistics client-side Explore in the sandboxSandbox Share View live
Geoprocessing - hotspot analysis Explore in the sandboxSandbox Share View live
Add labels to a FeatureLayer Explore in the sandboxSandbox Share View live
Add multiple label classes to a layer Explore in the sandboxSandbox Share View live
ImageryLayer - raster attribute table Explore in the sandboxSandbox Share View live
ImageryLayer - server side raster function Explore in the sandboxSandbox Share View live
Custom popup actions per feature attribute Explore in the sandboxSandbox Share View live
Popup with DOM node Explore in the sandboxSandbox Share View live
Using Esri Icon Fonts with map graphics Explore in the sandboxSandbox Share View live
Create a custom visualization using Arcade Explore in the sandboxSandbox Share View live
Custom Recenter Widget Explore in the sandboxSandbox Share View live
Directions widget Explore in the sandboxSandbox Share View live
Add a Legend to LayerList Explore in the sandboxSandbox Share View live
Track current location Explore in the sandboxSandbox Share View live
ImageryLayer - client side rendering rules Explore in the sandboxSandbox Share View live
MapImageLayer - set renderers on sublayers Explore in the sandboxSandbox Share View live
MapImageLayer - Toggle sublayer visibility Explore in the sandboxSandbox Share View live
Sketch widget Explore in the sandboxSandbox Share View live
RouteTask Explore in the sandboxSandbox Share View live
Disable panning on the view Explore in the sandboxSandbox Share View live
Legend widget card style Explore in the sandboxSandbox Share View live
Client-side projection Explore in the sandboxSandbox Share View live
MapImageLayer - dynamic data layer with query table Explore in the sandboxSandbox Share View live
MapImageLayer - raster data source Explore in the sandboxSandbox Share View live
MapImageLayer - label sublayer features Explore in the sandboxSandbox Share View live
Disable scroll-zooming on the view Explore in the sandboxSandbox Share View live
Access features with pointer events Explore in the sandboxSandbox Share View live
Generate continuous color visualization Explore in the sandboxSandbox Share View live
Update Feature Attributes Explore in the sandboxSandbox Share View live
Highlight features by geometry Explore in the sandboxSandbox Share View live
Intro to graphics Explore in the sandboxSandbox Share View live
ImageryLayer - client side pixel filter Explore in the sandboxSandbox Share View live
Responsive apps using CSS Explore in the sandboxSandbox Share View live
Generate data-driven continuous size visualization Explore in the sandboxSandbox Share View live
Animate opacity visual variable Explore in the sandboxSandbox Share View live
GeometryEngine - geodesic buffers Explore in the sandboxSandbox Share View live
Create a FeatureLayer with client side graphics Explore in the sandboxSandbox Share View live
MapImageLayer - Explore data from a dynamic workspace Explore in the sandboxSandbox Share View live
Generate data-driven visualization of unique values Explore in the sandboxSandbox Share View live
Animate color visual variable Explore in the sandboxSandbox Share View live
LayerList widget with actions Explore in the sandboxSandbox Share View live
Query statistics by geometry Explore in the sandboxSandbox Share View live
Update FeatureLayer using applyEdits() Explore in the sandboxSandbox Share View live
Calcite Maps and Bootstrap Explore in the sandboxSandbox Share View live
Thematic multivariate visualization (2D) Explore in the sandboxSandbox Share View live
Loading...