ArcGIS API for JavaScript

require([
  "esri/renderers/UniqueValueRenderer", ... 
], function(UniqueValueRenderer, ... ) {
  var renderer = new UniqueValueRenderer(defaultSymbol, "SUB_REGION");
  ...
});

require([
  "esri/renderers/UniqueValueRenderer", ... 
], function(UniqueValueRenderer, ... ) {
  var renderer = new UniqueValueRenderer(defaultSymbol, function(feature){
    return feature.attributes.POP07_SQMI;
  });
  ...
});

require([
  "esri/renderers/UniqueValueRenderer", ... 
], function(UniqueValueRenderer, ... ) {
  var uvrJson = {"type": "uniqueValue",
    "field1": "SUB_REGION",
    "defaultSymbol": {
      "color": [0, 0, 0, 64],
      "outline": {
        "color": [0, 0, 0, 255],
        "width": 1,
        "type": "esriSLS",
        "style": "esriSLSNull"
      },
      "type": "esriSFS",
      "style": "esriSFSNull"
    },
    "uniqueValueInfos": [{
      "value": "Pacific",
      "symbol": {
        "color": [255, 0, 0, 128],
        "outline": {
          "color": [0, 0, 0, 255],
          "width": 1,
          "type": "esriSLS",
          "style": "esriSLSSolid"
        },
        "type": "esriSFS",
        "style": "esriSFSSolid"
      }
    }, {
      "value": "Mtn",
      "symbol": {
        "color": [0, 255, 0, 128],
        "outline": {
          "color": [0, 0, 0, 255],
          "width": 1,
          "type": "esriSLS",
          "style": "esriSLSSolid"
        },
        "type": "esriSFS",
        "style": "esriSFSSolid"
      }
    }]
  }
  var renderer = new UniqueValueRenderer(uvrJson);
  ...
});

• <String> field: Name of the feature attribute field that contains the data value.
• <String> normalizationField: Name of the feature attribute field by which the data value will be normalized.
• <Number> minDataValue: Minimum data value.
• <Number> maxDataValue: Maximum data value.
• <Color[]> colors: An array of colors defining the color ramp. The first color will be used to render minimum data value, and the last color will be used to render maximum data value. At least two colors are required. If there are three or more colors, the intermediate colors will be placed proportionally between the first and the last to create a multi-color ramp.
• <Object[]> stops: An array of objects defining the color ramp. Each object defines a stop on the color ramp and requires two properties: value and color. value a value in data range. color is the color used to render the value. At least two stops are required.

renderer.setColorInfo({
  field: "M086_07",
  minDataValue: 0,
  maxDataValue: 100,
  colors: [
    new Color([255, 255, 255]),
    new Color([127, 127, 0])
  ]
});

Each element in the array is an object that provides information about the unique values associated with the renderer. The object has the following properties:

proportionalSymbolInfo supports the following properties

• Data that represents a distance quantity. For example:
  • If you have tree locations defined as points and an attribute field with the radius of tree canopy, you can use proportional symbols to depict the actual ground area covered by each tree.
  • You can use proportionally sized lines to depict the width of water mains.
• Data that represents a non-distance quantity. For example:
  • Display traffic data like roads and highways as line symbols where stroke width is proportional to the traffic count.
  • Create a census map of proportional marker symbols where the area of each symbol reflects the population of the state.

In addition, regardless of the type of data described above, you can map a range of data values to a range of symbol sizes.

For point features, maker size is varied in proportion to the data value. For line features, stroke width is varied.

 {
  field: "tree_canopy",
  valueUnit: "meters",
  valueRepresentation: "diameter"
 }

 //ground area covered by trees measured in square feet. 
 {
  field: "GroundArea", 
  valueUnit: "feet",
  valueRepresentation: "area"
 }

Data representing a non-distance quantity.

 {
  field: "avg_daily_traffic",
  valueUnit: "unknown",
  minSize: 1000,
  minDataValue: 8
 }

Map a range of data values to a range of symbol sizes:

{
 field: "avg_daily_traffic",
 valueUnit: "unknown",
 minSize: 1,
 maxSize: 10,
 minDataValue: 1000,
 maxDataValue: 100000
}

renderer.setProportionalSymbolInfo({
  field: "POP_PER_DOC",
  minSize: 2,
  maxSize: 20,
  minDataValue: 100,
  maxDataValue: 10000,
  valueUnit: "unknown",
  legendOptions: {
    customValues: [100, 200, 300, 10000]
  }
});

Specify a field that contains the rotation values

{
 field: "WindDirection",
 type: "geographic"
}

Use a function to compute wind direction from wind vectors

{
 field: function(graphic){
  var U = graphic.attributes.U,
  V = graphic.attributes.V;

  //Oceanographic Convention
  return 360 + (180 / Math.PI) * Math.atan2(U,V);
 }
}

require([
  "esri/renderers/UniqueValueRenderer", "esri/symbols/SimpleFillSymbol", ... 
], function(UniqueValueRenderer, SimpleFillSymbol, ... ) {
  //Specify the value and symbol as individual arguments.
  var renderer = new UniqueValueRenderer( ... );
  renderer.addValue("KS", symbol);

  //Specify the symbol and value using the info object.
  renderer.addValue({
    value: "KS",
    symbol: new SimpleFillSymbol(),
    label: "Kansas",
    description: "The Sunflower State"
  });
  ...
});

For changes to take effect call the GraphicsLayer redraw method after calling this method.

For the changes to take effect, you need to call GraphicsLayer.redraw after calling this method. (Added at v3.7)