Published
Edited
Mar 27, 2020
Importers
Insert cell
md`# brush`
Insert cell
function removeBrushingPattern(args) {
getExtentRect(args)
.attr('width', 0)
.attr('height', 0)
.attr('opacity', 0);
}
Insert cell
Insert cell
function addBrushFunction(args) {
if (args.xAxisType === 'categorical' || args.yAxisType === 'categorical') {
return console.warn(
'The option "brush" does not support axis type "categorical" currently.'
);
}
if (!args.zoom_target) args.zoom_target = args;
if (args.zoom_target !== args) args.zoom_target.processed.subplot = args;
let brushAxis;
switch (args.brush) {
case 'x':
brushAxis = { x: true, y: false };
break;
case 'y':
brushAxis = { x: false, y: true };
break;
case 'xy':
brushAxis = { x: true, y: true };
break;
default:
brushAxis = { x: true, y: true };
}
addEventHandlerForBrush(args, args.zoom_target, brushAxis);
}
Insert cell
function createBrushingPattern(args, range) {
const x = range.x[0];
const width = range.x[1] - range.x[0];
const y = range.y[0];
const height = range.y[1] - range.y[0];
getExtentRect(args)
.attr('x', x)
.attr('width', width)
.attr('y', y)
.attr('height', height)
.attr('opacity', 1);
}
Insert cell
function getExtentRect(args) {
return select(args.target)
.select('.mg-extent')
.size()
? select(args.target).select('.mg-extent')
: select(args.target)
.select('.mg-rollover-rect, .mg-voronoi')
.insert('g', '*')
.classed('mg-brush', true)
.append('rect')
.classed('mg-extent', true);
}
Insert cell
select = require('d3-selection')
Insert cell
import {
zoomToRawRange,
zoomToDataDomain,
convertRangeToDomain,
zoomToDataRange
} from '@neatlogic/zoom'
Insert cell
import { targetRef } from '@neatlogic/utility'
Insert cell

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.
Learn more