picasso.js - Range brushing In this example we'll take a look at how to setup range brushing. In contrast to simple point brushing, where the interaction is built into the picasso chart instance, range brushing is done by using a specific brush-range component and setting up an interaction definition. If this is your fist time creating a chart using picasso.js, take a look at the excellent getting started notebook, created by @mindspank, that is available here, or check out our documententation at picassojs.com.
We'll start with setting up the required environment and adding a simple point component to have something to interact with.
picasso = require("picasso.js")
data = { const arr = [ ['Product', 'Sales'] ]; const min = 100; const max = 800; for (var i = 0; i < 26; i++) { arr.push([ String.fromCharCode(i + 65), // Product (Math.random() * max) + min // Sales ]); } return [{ type: 'matrix', data: arr }]; }
scales = ({ s: { data: { field: 'Sales' }, min: 0, max: 1000, invert: true }, p: { data: { extract: { field: 'Product' } }, } })
bar = ({ key: 'b', type: 'box', data: { extract: { field: 'Product', props: { end: { field: 'Sales', reduce: 'max' }, start: 0 } } }, settings: { major: { scale: 'p' }, minor: { scale: 's' }, } })
components = ([{ key: 'y-axis', type: 'axis', scale: 's', dock: 'left' },{ key: 'x-axis', type: 'axis', scale: 'p', dock: 'bottom' }, { type: 'text', text: 'Sales', dock: 'left' }, { type: 'text', text: 'Product', dock: 'bottom' }, bar])
settings = ({ scales, components })
Now we have a scatterplot without any interaction defined. The next step is to tell the point component to consume brush events. In this case we want to do range brushing, so we name it range-example.
bar.brush = { consume: [ { context: 'range-example', // We'll later use this reference in the brush-range defintion style: { inactive: { opacity: 0.3 } } } ] }
Next we'll add the range component and reference our range-example context.
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' } } })
and for the x-axis as well.
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' } } })
One more step is required and that is defining the interactions, that is, which events should trigger the range brush. picasso.js comes bundled with a native interaction component. For this example, that will be sufficent, as we only require mouse support. For full touch support we could use the HammerJS plugin. First we define the interactions and then we add them to the settings object.
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)); } } }] }
chartInstance = picasso({ renderer: { prio: ['canvas'] } }).chart({ element: document.querySelector('#container'), data, settings })
...and here we go, a barchart with range brushing. Hold down the mousebutton when over the y-axis or x-axis to initiate a range. Drag the green highlighted area to move the range. Hold alt-key and click to reset the brush.
html`<div id='container' style="position:relative;width:100%;height:500px;"></div>`