This sample demonstrates how to visualize features in a layer along a continuous color ramp based on data in a numeric field.
In this case, we'll use a SimpleRenderer with visual variables to alter the color of each feature based on the percentage of the population living below the poverty line.
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 SimpleRenderer and assign it a default symbol
All that's required when creating a renderer with a continuous color ramp is a SimpleRenderer with visual variables.
In this app we set a default symbol on the symbol property of the renderer. We don't need to define a color on the symbol because each feature's color will be determined by visual variables.
const renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
outline: {
// makes the outlines of all features consistently light gray
color: "lightgray",
width: 0.5
}
}
};2. Set a color visual variable on the renderer
Setting a color visual variable requires a field name, which indicates the data to for the visualization. You can also specify a normalization to normalize data values specified in field. In this sample, we're pointing the field to POP, which stores the total number of people living in poverty within the boundaries of the feature. We'll normalize based on the total population with the TOTPOP field.
Then you set the color ramp using a series of stops in the stops array.
const renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: defaultSym, // the default symbol defined in step 1
label: "% population in poverty by county", // label for the legend
visualVariables: [
{
type: "color", // indicates this is a color visual variable
field: "POP_POVERTY", // total population in poverty
normalizationField: "TOTPOP_CY", // total population
stops: [
{
value: 0.1, // features where < 10% of the pop in poverty
color: "#FFFCD4", // will be assigned this color (beige)
label: "10% or lower" // label to display in the legend
},
{
value: 0.3, // features where > 30% of the pop in poverty
color: "#350242", // will be assigned this color (purple)
label: "30% or higher" // label to display in the legend
}
]
// features with values between 0.1 - 0.3 will be assigned
// a color on a ramp between beige and purple proportional
// to where the value falls between 0.1 and 0.3
}
]
};3. 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 this app.