Data-driven continuous color

Loading sample here...

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.

var renderer = new SimpleRenderer({
  symbol: 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 normalizationField to normalize 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 color ramp using 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: "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 assiged 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.

Explore in the sandbox JS Bin View live

4. Additional visualization samples and resources

Sample search results

Title	Sample

There were no match results from your search criteria.