Update a renderer's attribute

Explore in the sandboxView live

This sample demonstrates how to change the variable driving a visualization in both a renderer and a Histogram. Use the histogram() statistics function to generate histogram bins.

The Slider widget allows the user to update the year used to drive the visualization.

const slider = new Slider({
  min: 1880,
  max: 2018,
  values: [ 1880 ],
  rangeLabelsVisible: true,
  labelsVisible: true,
  labelInputsEnabled: true,
  precision: 0,
  steps: 1,
  container: "sliderDiv"
});

This app also demonstrates how the histogram can be customized and styled to invite user interaction. The bar colors are updated to match the renderer, lessening the need for a legend. As the user clicks or focuses on a histogram bar, the features pertaining to that bar are highlighted in the view. The snippet below implements all of that functionality.

const histogramChart = new Histogram({
  container: "histogram",
  // These properties were generated from
  // the histogram() function
  min: histMin,
  max: histMax,
  bins: histogramResult.bins,
  // average is calculated from summaryStatistics()
  average: average,
  // provides a baseline for the anomaly data
  dataLines: [{
    value: 0
  }],
  // shortens the length of the 0 data line
  dataLineCreatedFunction: (element, label, index) => {
    if(index === 0){
      element.setAttribute("y2", "75%")
    }
  },
  labelFormatFunction: (value, type) => {
    return type === "average" ? value.toFixed(2) + "°" : value;
  },
  // colors bars based on the midpoint of their range
  // and adds event listeners that trigger highlighting features
  // that fall inside the bounds of the bin
  barCreatedFunction: (index, element) => {
    const bin = histogramChart.bins[index];
    const midValue = ((bin.maxValue - bin.minValue) / 2) + bin.minValue;
    const color = getColorFromValue(midValue);
    element.setAttribute("fill", color.toHex());
    element.addEventListener("focus", () => {
      const { minValue, maxValue, count } = bin;
      const query = lv.layer.createQuery();
      const field = "F" + slider.values[0];
      query.where = field  + " >= " + minValue + " AND " + field + " <= " + maxValue;
      lv.queryObjectIds(query).then((ids) => {
        if(highlight){
          highlight.remove();
          highlight = null;
        }
        highlight = lv.highlight(ids);
      });
    });

    element.addEventListener("blur", () => {
      if(highlight){
        highlight.remove();
        highlight = null;
      }
    });
  }