Generate a class breaks visualization

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const params = {
  layer: layer,
  field: "COL_DEG",
  normalizationField: "EDUCBASECY",
  classificationMethod: "quantile",
  numClasses: 4,
  legendOptions: {
    title: "% population with a college degree"
  }
};

// generate the renderer and set it on the layer
colorRendererCreator.createClassBreaksRenderer(params).then((response) => {
  layer.renderer = response.renderer;

  updateColorSlider(rendererResponse);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function updateColorSlider(rendererResult){
  // generate histogram for the slider
  histogram({
    layer: layer,
    field: "COL_DEG",
    normalizationField: "EDUCBASECY",
    numBins: 100
  }).then((histogramResult) => {
    if(!slider){
      const sliderContainer = document.createElement("div");
      const container = document.createElement("div");
      container.id = "containerDiv";
      container.appendChild(sliderContainer);
      view.ui.add(container, "top-right");

      slider = ClassedColorSlider.fromRendererResult(rendererResult, histogramResult);
      slider.container = container;
      slider.viewModel.precision = 1;

      // Update the renderer based on the user's input
      function changeEventHandler () {
        const renderer = layer.renderer.clone();
        renderer.classBreakInfos = slider.updateClassBreakInfos(renderer.classBreakInfos);
        layer.renderer = renderer;
      }

      slider.on(["thumb-change", "thumb-drag", "min-change", "max-change"], changeEventHandler);
    } else {
      // update the slider if another variable is selected
      slider.updateFromRendererResult(rendererResult, histogramResult);
    }
  });

}