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.

Use dark colors for code blocksCopy
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.

Use dark colors for code blocksCopy
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;
      }
    });
  }