Generate a class breaks visualization

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
const rendererResponse = await colorRendererCreator.createClassBreaksRenderer(params);
layer.renderer = rendererResponse.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
const updateColorSlider = async (rendererResult) => {
  const histogramResult = await histogram({
    layer: layer,
    valueExpression: getValueExpression(fieldSelect.value),
    view: view,
    numBins: 100
  });

  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
    const 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);
  }
};