Thematic styles with Malette

require(["esri/map", "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/renderers/ClassBreaksRenderer", "esri/renderers/jsonUtils", "dojo/domReady!"], function(Map, FeatureLayer, SimpleRenderer, ClassBreaksRenderer, jsonUtils) { 
  var map = new Map("esri-map", {
    center: [-75, 38.5],
    zoom: 4,
    basemap: "gray",
    smartNavigation: false
  });

  map.on('load', function() {
    map.disableScrollWheelZoom();
  });

  var layer = new FeatureLayer('http://tigerweb.geo.census.gov/arcgis/rest/services/TIGERweb/tigerWMS_ACS2013/MapServer/82', {
    mode: FeatureLayer.MODE_ONDEMAND,
    outFields: ['*']
  });

  map.addLayer(layer);

  layer.on('load', function() {
    var simpleJson = layer.renderer.toJson();
    simpleJson.symbol.color = [255,255,255,100];
    simpleJson.symbol.outline.width = 0.3;
    simpleJson.symbol.outline.color = [255,255,255,255];

    var rend = new SimpleRenderer(simpleJson);
    layer.setRenderer(rend);

    var renderer = new ClassBreaksRenderer(layer.renderer.symbol, "AREALAND");
    
    $.getJSON('http://opendata.arcgis.com/datasets/b801f4cc689f4a4eab560b842dd07954_82.json', function(res) {
      
      var fields = res.data.fields;
      var malette = new Malette('esri-map', {
        style: simpleJson,
        formatIn: 'esri-json',
        formatOut: 'esri-json',
        fields: fields,
        type: 'polygon'
      });

      malette.on('style-change', function( style ){
        
        var rend = jsonUtils.fromJson(style);
        layer.setRenderer(rend);
        layer.redraw();

      });

    });

  });

});