Published
Edited
Feb 15, 2018
3 forks
2 stars
point.brush = {
consume: [
{
context: 'lasso-example', // We'll later use this reference in the lasso-brush defintion
style: {
inactive: {
opacity: 0.3
}
}
}
]
}
components.push({
key: 'lasso', // We'll use this reference when setting up our interaction events
type: 'brush-lasso',
settings: {
brush: { // Note how the brush property is defined inside the settings objects. This is because for brush in this case is a component specific setting.
components: [
{
key: 'p', // We want to brush shapes from the point component
contexts: ['lasso-example']
}
]
}
}
})
interactions = [
{
type: 'native',
events: {
mousedown: function(e) {
// Use Alt-key + click to reset the brush
if (e.altKey) {
this.chart.brush('lasso-example').end();
}
// Fetch the lasso component instance and trigger the lassoStart event
this.chart.component('lasso').emit('lassoStart', { center: { x: e.clientX, y: e.clientY } });
},
mousemove: function(e) {
this.chart.component('lasso').emit('lassoMove', { center: { x: e.clientX, y: e.clientY } });
},
mouseup: function(e) {
this.chart.component('lasso').emit('lassoEnd', { center: { x: e.clientX, y: e.clientY } });
}
}
}
]
settings.interactions = interactions
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.
