Note: Support for 3D on mobile devices may vary, view the system requirements for more information.
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: function(element, label, index){
if(index === 0){
element.setAttribute("y2", "75%")
}
},
labelFormatFunction: function(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: function(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", function(){
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(function(ids){
if(highlight){
highlight.remove();
highlight = null;
}
highlight = lv.highlight(ids);
});
});
element.addEventListener("blur", function(){
if(highlight){
highlight.remove();
highlight = null;
}
});
}
As the user slides the slider thumbs, both the renderer and histogram will update.