ArcGIS Javascript API - Color ramp symbols example

https://developers.arcgis.com/javascript/jssamples/renderer_color_ramp.html

by Alex Azuero

HTML

<div id="map"></div>
<div id="info"><div style="font-size: 36px">Percentage of county area used for farming</div></div>

CSS

</style> <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css"> <script src="http://js.arcgis.com/3.8/"></script> <style> html, body, #map {
    height: 100%;
    margin: 0;
}
#info {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
    background-color: #ccc;
    font: 14px Segoe UI;
    width: 200px;
    text-align: center;
    border-radius: 0 0 0 10px;
}

JavaScript

require([
          "esri/map", "esri/geometry/Extent",
          "esri/layers/FeatureLayer", "esri/InfoTemplate",
          "esri/renderers/SimpleRenderer", "dojo/_base/Color",
          "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
          "dojo/domReady!"], function (
      Map, Extent,
      FeatureLayer, InfoTemplate,
      SimpleRenderer, Color,
      SimpleFillSymbol, SimpleLineSymbol) {
          var map = new Map("map", {
              extent: new Extent({
                  "xmin": -2460944,
                  "ymin": -1389910,
                  "xmax": 2297115,
                  "ymax": 1643787,
                  "spatialReference": {
                      "wkid": 102003
                  }
              })
          });

          var layer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA_County_Crops_2007/FeatureServer/0", {
              outFields: ["*"],
              infoTemplate: new InfoTemplate("${COUNTY}, ${STATE}", "<div style='font: 18px Segoe UI'>The percentage of the area of the county that represents farmland is <b>${M086_07:NumberFormat(places:0)}%</b>.</div>")
          });
          map.addLayer(layer);

          layer.on("load", function () {
              var renderer = new SimpleRenderer(new SimpleFillSymbol().setOutline(new SimpleLineSymbol().setWidth(0.5)));
              renderer.setColorInfo({
                  field: "M086_07",
                  minDataValue: 0,
                  maxDataValue: 100,
                  colors: [
                  new Color([255, 255, 255]),
                  new Color([127, 127, 0])]
              });
              layer.setRenderer(renderer);
          });
      });