Update a renderer's attribute

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
1
2
3
4
5
6
7
8
9
10
11
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
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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;
      }
    });
  }

As the user slides the slider thumbs, both the renderer and histogram will update.

Image preview of related sample Histogram widget

Histogram widget

Histogram widget

Image preview of related sample HistogramRangeSlider

HistogramRangeSlider

HistogramRangeSlider

Image preview of related sample Customize ColorSlider Histogram

Customize ColorSlider Histogram

Customize ColorSlider Histogram

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.