This sample demonstrates how to visualize features in a layer along a continuous size ramp based on data in a numeric field.
In this case, we'll use a SimpleRenderer with visual variables to alter the size of each feature based on the percentage of the population living below the poverty line. The layer used contains polygon features of counties. We can assign a marker symbol to the renderer so the centroid of each county is overlaid with a marker whose size can be altered based on a numeric attribute
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 size 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 size on the symbol because each feature's size will be determined by visual variables.
const renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: "palegreen",
outline: {
color: "seagreen",
width: 0.5
}
}
};2. Set a size visual variable on the renderer
Setting any visual variable requires a field name, which indicates the data from which to base the visualization. You can also specify a normalization to normalize the 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 size ramp using either 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: "size", // indicates this is a size visual variable
field: "POP_POVERTY", // total population in poverty
normalizationField: "TOTPOP_CY", // total population
stops: [
{
value: 0.15, // features where < 15% of the pop is in poverty
size: 4, // will be assigned a marker with this size in pts
label: "less than 15%" // label to display in the legend
},
{
value: 0.35, // features where > 35% of the pop is in poverty
size: 24, // will be assigned a marker with this size in pts
label: "more than 35%" // label to display in the legend
}
]
// features with values between 0.15 - 0.35 will be assigned
// a size between 4 pts and 24 pts proportional
// to where the value falls between 0.15 and 0.35
// e.g. if a county has a pov rate of 0.25, then it will
// have a marker sized at 14 pts
}
]
};...or in min and max properties that will be applied based on a min and max.
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
minDataValue: 0.1, // features where < 10% of the pop in poverty
maxDataValue: 0.3, // features where > 30% of the pop in poverty
minSize: 4, // size of marker in pts
maxSize: 24 // size of marker in pts
}
]
};In the first scenario, you can specify more than two stops and assign data values to specific sizes in each stop. You can also set size visual variables on the min and max properties to define the screen size of features for various scale ranges. See the documentation for size visual variables for more details. The Create a FeatureLayer with GeoJSON data sample also demonstrates how to do this.
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.