Notebooks 2.0 is here.
Published
Edited
Feb 28, 2018
1 fork
3 stars
bar.brush = {
consume: [
{
context: 'range-example', // We'll later use this reference in the brush-range defintion
style: {
inactive: {
opacity: 0.3
}
}
}
]
}
components.push({
key: 'rangeY', // We'll use this reference when setting up our interaction events
type: 'brush-range',
settings: {
brush: 'range-example',
direction: 'vertical',
scale: 's',
target: {
component: 'y-axis' // Use the y-axis as our target and interaction trigger
},
bubbles: {
align: 'end'
}
}
})
components.push({
key: 'rangeX', // We'll use this reference when setting up our interaction events
type: 'brush-range',
settings: {
brush: 'range-example',
direction: 'horizontal',
scale: 'p',
target: {
component: 'x-axis' // Use the x-axis as our target and interaction trigger
},
bubbles: {
align: 'start'
}
}
})
function mouseEventToRangeEvent(e) {
return {
center: { x: e.clientX, y: e.clientY },
deltaX: e.movementX,
deltaY: e.movementY
};
}
{
let rangeRef = 'rangeY';
settings.interactions = [
{
type: 'native',
events: {
mousedown: function(e) {
// Use Alt-key + click to reset the brush
if (e.altKey) {
this.chart.brush('range-example').end();
this.chart.component('rangeY').emit('rangeClear');
this.chart.component('rangeX').emit('rangeClear');
}
const overComp = this.chart.componentsFromPoint({ x: e.clientX, y: e.clientY })[0];
rangeRef = overComp && overComp.key === 'y-axis' ? 'rangeY' : 'rangeX';
// Fetch the range component instance and trigger the start event
this.chart.component(rangeRef).emit('rangeStart', mouseEventToRangeEvent(e));
},
mousemove: function(e) {
this.chart.component(rangeRef).emit('rangeMove', mouseEventToRangeEvent(e));
},
mouseup: function(e) {
this.chart.component(rangeRef).emit('rangeEnd', mouseEventToRangeEvent(e));
}
}
}]
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
