Data-driven continuous size

Loading sample here...

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.

var renderer = new SimpleRenderer({
  symbol: 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 normalizationField to normalize the data values specified in field. In this sample, we're pointing the field to POP_POVERTY, 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_CY field.

Then you set the size ramp using either a series of stops in the stops array...

var renderer = 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 minSize and maxSize properties that will be applied based on a minDataValue and maxDataValue.

var renderer = 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 minSize and maxSize 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.

Explore in the sandbox JS Bin View live

5. Additional visualization samples and resources

Sample search results

Title	Sample

There were no match results from your search criteria.