Generate data-driven continuous size visualization

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const sizeParams = {
  layer: layer,
  view: view,
  valueExpression: "( $feature.POP_POVERTY / $feature.TOTPOP_CY ) * 100",
  legendOptions: {
    title: "% population living in poverty"
  },
  minValue: 15,
  maxValue: 60,
  outlineOptimizationEnabled: true,
  sizeOptimizationEnabled: true
};

let rendererResult = null;

sizeRendererCreator
  .createContinuousRenderer(sizeParams)
  .then((response) => {
    rendererResult = response;
    layer.renderer = rendererResult.renderer;

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
return histogram({
    layer: layer,
    valueExpression: sizeParams.valueExpression,
    view: view,
    minValue: sizeParams.minValue,
    maxValue: sizeParams.maxValue,
    numBins: 30
  });
})
.then((histogramResult) => {
  // Create a size slider from the renderer and histogram result.
  const sizeSlider = SizeSlider.fromRendererResult(rendererResult, histogramResult);
  sizeSlider.container = "slider";

  // Color the slider track to match the renderer.
  const iconColor = rendererResult.renderer.classBreakInfos[0].symbol.color;
  sizeSlider.style.trackFillColor = iconColor;

  sizeSlider.labelFormatFunction = (value) => {
    return value.toFixed(1);
  }
  sizeSlider.viewModel.precision = 1;
  sizeSlider.histogramConfig.standardDeviation = null;
  view.ui.add("containerDiv", "bottom-left");
  const titleElement = document.getElementById("title");
  titleElement.innerText = sizeParams.legendOptions.title;

1
2
3
4
5
6
7
8
9
10
11
12
const changeEventHandler = () => {
  const renderer = layer.renderer.clone();
  const sizeVariable = renderer.visualVariables[0];
  renderer.visualVariables = [ sizeSlider.updateVisualVariable(sizeVariable) ];
  layer.renderer = renderer;
}

sizeSlider.on(["thumb-change", "thumb-drag", "min-change", "max-change"], changeEventHandler);
})
.catch((error) => {
  console.error("There was an error: ", error);
});