30:T1abd,{ // Initialization. const width = 200, height = 200, nColumns = Data.getColumnNames().length, powerNData = getPower( nData ), data = Data.getValues( powerNData ), totalWidth = nColumns * width, totalHeight = nColumns * height, brushNodeOffset = 4; /** * Returns a function, that, as long as it continues to be invoked, will not be triggered. * The function will be called after it stops being called for `wait` milliseconds. * * From https://levelup.gitconnected.com/debounce-in-javascript-improve-your-applications-performance-5b01855e086. * * @param func function * @param wait delay, in milliseconds * @return debounced function */ const debounce = ( func, wait ) => { let timeout; return function executedFunction( ...args ) { const later = () => { clearTimeout( timeout ); func( ...args ); }; clearTimeout( timeout ); timeout = setTimeout( later, wait ); }; }; // Cache scaled coordinates. Matrix.scaled = []; let scale = []; for( let i = 0; ( i < nColumns ); i++ ) { Matrix.scaled[ i ] = new Uint16Array( powerNData ); let x = i * width; scale[ i ] = d3.scaleLinear().domain( Data.getDomain( powerNData, i )).range([ x + Plot.padding, x + width - Plot.padding ]); } data.forEach(( datum, row ) => { for( let i = 0; ( i < nColumns ); i++ ) { let x = i * width; Matrix.scaled[ i ][ row ] = Math.round( scale[ i ]( datum[ i ]) - x ); } }); // Create the DIV and CANVAS elements. const div = d3 .create( "div" ); const canvas = div.append( "canvas" ) .attr( "width", totalWidth ) .attr( "height", totalHeight ) .style( "position", "absolute" ) .style( "border", "1px solid #939ba1" ) .style( "background-color", "#ffffff" ); Matrix.canvas = canvas.node(); // Create the SVG elements (after https://observablehq.com/@d3/brushable-scatterplot-matrix?collection=@d3/d3-brush). const svg = div.append( "svg" ) .attr( "width", totalWidth ) .attr( "height", totalHeight ) .attr( "viewBox", [ 0, 0, totalWidth, totalHeight ]) .style( "position", "relative" ); svg.selectAll( "*" ).remove(); const cell = svg.append( "g" ) .selectAll( "g" ) .data( d3.cross( d3.range( nColumns ), d3.range( nColumns ))) .join( "g" ) .attr( "transform", ([ i, j ]) => `translate(${ i * width },${ j * height })` ); // Create the brush. const onStart = ( event ) => { if( event.sourceEvent ) { Matrix.isExtending = event.sourceEvent.shiftKey && !event.sourceEvent.ctrlKey && !event.sourceEvent.metaKey; Matrix.isReducing = !event.sourceEvent.shiftKey && ( event.sourceEvent.ctrlKey || event.sourceEvent.metaKey ); const target = event.sourceEvent.target.parentNode; if( Matrix.brushNode !== target ) { d3.select( Matrix.brushNode ).call( brush.move, null ); Matrix.brushNode = target; if( !Matrix.isExtending && !Matrix.isReducing ) { Data.deselectAll(); } } else if( event.selection ) { const xDown = event.selection[ 0 ][ 0 ], yDown = event.selection[ 0 ][ 1 ], xUp = event.selection[ 1 ][ 0 ], yUp = event.selection[ 1 ][ 1 ]; let offsetX, offsetY; if( event.sourceEvent.touches ) { const touch = event.sourceEvent.touches[ 0 ]; offsetX = touch.clientX - Matrix.canvas.getBoundingClientRect().x; offsetY = touch.clientY - Matrix.canvas.getBoundingClientRect().y; } else { offsetX = event.sourceEvent.offsetX; offsetY = event.sourceEvent.offsetY; } let i = Math.floor( offsetX / width ), j = Math.floor( offsetY / height ), x = i * width, y = j * height; if( !Matrix.isExtending && !Matrix.isReducing && !Plot.isWithin({ x: offsetX, y : offsetY }, { x: x + xDown, y: y + yDown, width: xUp - xDown, height: yUp - yDown })) { Data.deselectAll(); } } } }; const debouncedDraw = debounce( Matrix.draw, 1 ); const onBrush = ( event ) => { if( event.selection ) { const xDown = event.selection[ 0 ][ 0 ], yDown = event.selection[ 0 ][ 1 ], xUp = event.selection[ 1 ][ 0 ], yUp = event.selection[ 1 ][ 1 ], nColumns = Data.getColumnNames().length; let offsetX, offsetY; if( event.sourceEvent ) { Matrix.isExtending = event.sourceEvent.shiftKey && !event.sourceEvent.ctrlKey && !event.sourceEvent.metaKey; Matrix.isReducing = !event.sourceEvent.shiftKey && ( event.sourceEvent.ctrlKey || event.sourceEvent.metaKey ); if( event.sourceEvent.touches ) { const touch = event.sourceEvent.touches[ 0 ]; offsetX = touch.clientX - Matrix.canvas.getBoundingClientRect().x; offsetY = touch.clientY - Matrix.canvas.getBoundingClientRect().y; } else { offsetX = event.sourceEvent.offsetX; offsetY = event.sourceEvent.offsetY; } } else { offsetX = width * Math.floor( brushNodeOffset / 4 ); offsetY = height * ( brushNodeOffset % 4 ); } let i = Math.floor( offsetX / width ), j = Math.floor( offsetY / height ), x = i * width, y = j * height; if(( i !== j ) && ( 0 <= i ) && ( i < nColumns ) && ( 0 <= j ) && ( j < nColumns )) { const selectedRows = Plot.select( x, y, width, height, i, j, Matrix.scaled, { x: x + xDown, y: y + yDown, width: xUp - xDown, height: yUp - yDown }); if( Matrix.isExtending || Matrix.isReducing ) { const set = new Set( selectedRows ); // faster than Arrays const reducedRows = Data.selectedRows.filter(( item ) => !set.has( item )); Data.selectedRows = Matrix.isReducing ? reducedRows : selectedRows.concat( reducedRows ); } else { Data.selectedRows = selectedRows; } if( Matrix.bitmaps && Matrix.bitmaps[ i ]) { Plot.draw( x, y, width, height, i, j, Matrix.scaled, Matrix.canvas, 1 - transparency, Data.selectedRows, Matrix.bitmaps[ i ][ j ]); } } } debouncedDraw( width, height, powerNData, 1 - transparency, false ); }; const onEnd = ( event ) => { Matrix.draw( width, height, powerNData, 1 - transparency, true ); }; const brush = d3.brush() .extent([[ 2, 2 ], [ width, height ]]) .keyModifiers( false ) .on( "start", onStart ) .on( "brush", onBrush ) .on( "end", onEnd ); cell.call( brush ); // Initialize the brush. Matrix.brushNode = svg.node().firstChild.childNodes[ brushNodeOffset ]; const brushCell = d3.select( Matrix.brushNode ); brushCell.call( brush.move, [[ 40, 40 ], [ 80, 80 ]]); // Return the graph. return div.node(); }31:T6cf,

The goal of the scatter plot matrix is not to locate points, but to find patterns in the data. Therefore, there are no axes, only data ranges. This increases Tufte's "Data-Ink Ratio" (Tufte, 1983).

Colors emphasize the data. Black on white gives maximum emphasis. The red selection color draws attention. The grid, being less important, is gray.

By the same logic, the brush could be gray. However, usability tests pointed out that the standard color for selection is blue (Ho, 2016). Following standards eases the user's learning curve.

The edge of the brush has a distinct color, indicating a distinct function: dragging the edge resizes the brush, while dragging within the brush moves it. These functions are also indicated by distinct cursor shapes, when hovering; but the distinct colors are always clearly visible.

D3's brush is persistent rather than transient. A persistent brush enables the user to gain further insight by adjusting its size (Tidwell, 2010). A persistent brush also helps users share their explorations, through screen shots for example.

Transparency shows density, via alpha blending. This gives scatter plots the expressive power of contour plots while still displaying individual points (Wegman and Luo, 2002).

Shift, Control, and Command keys are standard modifiers to extend and reduce selections of individual objects (e.g. Apple, 2024). I have found no standard for their behavior during brushing. The behavior implemented here enables users to select irregular areas or disjoint clusters of points.

32:T680,

This project uses React, Material-UI, and d3, and reuses some code from the d3-brush collection.

Optimization was a joint effort with Fil, whose suggestions made this code much faster. There are a number of smaller optimizations, but these had the greatest effect:

Drawing in a single CANVAS element is faster than drawing thousands of SVG elements.
Drawing each data point as a single pixel displays large data sets with minimal drawing code.
Caching pixel coordinates in integer Arrays eliminates scaling calculations during drawing and selection.
Caching deselected points in bitmaps reduces drawing to a fast bit blit, followed by drawing the selected points.
Debouncing the brushing interaction reduces drawing in large data sets.

Graph-specific optimizations are justified when brushing is a frequent operation, as it is in scatter plots. Caching and debouncing can improve performance in any type of graph.

Performance varies on different devices. My iMac (2020, 3.6 GHz 10-Core Intel Core i9, 128 GB) can brush 1,000,000 points per plot. In a 4x4 matrix, that's twelve million points. As our hardware improves, we'll see these numbers grow.

33:T8e1,/** * Draws the grid, the plots, and the axes. * * @param {number} width width in pixels * @param {number} height height in pixels * @param {number} nData number of data values * @param {number} opacity alpha * @param {boolean} isDrawingAll true iff clearing and redrawing grid and axes */ Matrix.draw = ( width, height, nData, opacity, isDrawingAll ) => { // Initialization. If no context, do nothing. let canvas = Matrix.canvas, g = canvas.getContext( "2d" ), nColumns = Data.getColumnNames().length; if( !g ) { return; } // If requested, clear the drawing area and draw the grid. if( isDrawingAll ) { g.clearRect( 0, 0, nColumns * width, nColumns * height ); g.strokeStyle = "#939ba1"; for( let i = 1; ( i < nColumns ); i++ ) { g.moveTo( i * width + 0.5, 0 ); g.lineTo( i * width + 0.5, nColumns * height ); g.moveTo( 0, i * height + 0.5 ); g.lineTo( nColumns * width, i * height + 0.5 ); } g.stroke(); } // Draw the plots and the axes. On first draw, store the bitmaps. let isFirstDraw = !Matrix.bitmaps; if( isFirstDraw ) { Matrix.bitmaps = []; } for( let i = 0; ( i < nColumns ); i++ ) { for( let j = 0; ( j < nColumns ); j++ ) { // Get the position. let x = i * width, y = j * height; // Draw an axis... if( i === j ) { if( isDrawingAll ) { Axis.draw( x, y, width, height, canvas, nData, i ); } } // ...or a plot. else { if( isFirstDraw ) { if( Matrix.bitmaps[ i ] === undefined ) { Matrix.bitmaps[ i ] = []; } Matrix.bitmaps[ i ][ j ] = Plot.draw( x, y, width, height, i, j, Matrix.scaled, canvas, opacity, Data.selectedRows ); } else { Plot.draw( x, y, width, height, i, j, Matrix.scaled, canvas, opacity, Data.selectedRows, Matrix.bitmaps[ i ][ j ]); } } } } };34:T455,/** * Draws the axis. * * @param {number} x X coordinate, in pixels * @param {number} y Y coordinate, in pixels * @param {number} width width, in pixels * @param {number} height height, in pixels * @param {Element} canvas CANVAS element * @param {number} nData number of data values * @param {number} index column index */ Axis.draw = ( x, y, width, height, canvas, nData, index ) => { // Initialization. let g = canvas.getContext( "2d" ), columnNames = Data.getColumnNames(); // Draw the column label. g.fillStyle = "#000000"; g.font = "14px Verdana"; let s = columnNames[ index ]; g.fillText( s, x + width / 2 - g.measureText( s ).width / 2, y + height - height / 2 + 4 ); // Draw the minimum and maximum. g.font = "12px Verdana"; s = "" + Math.round( 10 * Data.getDomain( nData, index )[ 0 ]) / 10; g.fillText( s, x + 4, y + height - 4 ); s = "" + Math.round( 10 * Data.getDomain( nData, index )[ 1 ]) / 10; g.fillText( s, x + width - 3 - g.measureText( s ).width, y + 12 ); };35:Tddd,/** * Draws the plot. * * @param {number} x X coordinate, in pixels * @param {number} y Y coordinate, in pixels * @param {number} width width, in pixels * @param {number} height height, in pixels * @param {number} i X column index * @param {number} j Y column index * @param {number[][]} scaled scaled coordinates * @param {Element} canvas CANVAS element * @param {number} opacity alpha * @param {number[]} selectedRows indices of selected rows * @param {ImageData|undefined} imageData bitmap of deselected points, or undefined if none * @return {ImageData} bitmap of deselected points */ Plot.draw = ( x, y, width, height, i, j, scaled, canvas, opacity, selectedRows, imageData ) => { // Initialization. const g = canvas.getContext( "2d" ), padding = Plot.padding, scaledi = scaled[ i ], scaledj = scaled[ j ], nRows = scaledi.length, data = Data.getValues( nRows ), nBytes = width * height * 4; let deselectedImageData = imageData; // Create the deselected bitmap if necessary. // For alpha blending, see e.g. https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending. if( deselectedImageData === undefined ) { deselectedImageData = g.createImageData( width, height ); // black and transparent const d = deselectedImageData.data; data.forEach(( datum, row ) => { let xScaled = scaledi[ row ], yScaled = height - scaledj[ row ], k = ( yScaled * width + xScaled ) * 4; if(( 0 <= k ) && ( k + 3 < nBytes )) { d[ k ] = Math.round( 0 + d[ k ] * ( 1 - opacity )); // r d[ k + 1 ] = Math.round( 0 + d[ k + 1 ] * ( 1 - opacity )); // g d[ k + 2 ] = Math.round( 0 + d[ k + 2 ] * ( 1 - opacity )); // b d[ k + 3 ] = Math.round( 255 * opacity + d[ k + 3 ] * ( 1 - opacity )); // alpha } }); } // Copy the deselected bitmap. Caching minimizes use of createImageData(). if( !Plot.imageData || ( Plot.imageData.data.length !== nBytes )) { Plot.imageData = g.createImageData( width, height ); // black and transparent } else { Plot.imageData.data.fill( 0, 0, nBytes ); // black and transparent } const myImageData = Plot.imageData; const d = myImageData.data; d.set( deselectedImageData.data ); // Add the selected rows as specified. // Selected rows use opacity, but not alpha blending, in order to keep them bright. TODO: Explore alternatives to this. for( let m = 0; ( m < selectedRows.length ); m++ ) { let row = selectedRows[ m ], xScaled = scaledi[ row ], yScaled = height - scaledj[ row ], k = ( yScaled * width + xScaled ) * 4; if(( 0 <= k ) && ( k + 3 < nBytes )) { d[ k ] = Math.round( 255 + d[ k ] * ( 1 - opacity )); // r } } // Draw and return the bitmap. g.putImageData( myImageData, x, y, padding, padding, width - 2 * padding, height - 2 * padding ); return deselectedImageData; };36:T58a,/** * Selects rows within the brush and returns them. * * @param {number} x X coordinate, in pixels * @param {number} y Y coordinate, in pixels * @param {number} width width, in pixels * @param {number} height height, in pixels * @param {number} i X column index * @param {number} j Y column index * @param {number[][]} scaled scaled coordinates * @param {Rect} brush brush * @return {number[]} indices of selected rows */ Plot.select = ( x, y, width, height, i, j, scaled, brush ) => { // Initialization. let selectedRows = []; const scaledi = scaled[ i ], scaledj = scaled[ j ], nRows = scaledi.length, xMin = Math.floor( Math.min( brush.x, brush.x + brush.width ) - x ), xMax = Math.floor( Math.max( brush.x, brush.x + brush.width ) - x ), yMin = height - Math.floor( Math.max( brush.y, brush.y + brush.height ) - y ), yMax = height - Math.floor( Math.min( brush.y, brush.y + brush.height ) - y ); // Collect the selected row indices and return them. for( let row = 0; ( row < nRows ); row++ ) { let xScaled = scaledi[ row ], yScaled = scaledj[ row ]; if(( xMin <= xScaled ) && ( xScaled < xMax ) && ( yMin < yScaled ) && ( yScaled <= yMax )) { selectedRows.push( row ); } }; return selectedRows; };37:T572,

User Interface

","pinned":false,"hidden":false,"mode":"html"},{"id":560,"value":"

\n This design is based on the scatter plot matrix of Richard Becker and William Cleveland (Becker and Cleveland, 1987).\n

","pinned":false,"hidden":false,"mode":"html"},{"id":17,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":570,"value":"

Implementation

","pinned":false,"hidden":false,"mode":"html"},{"id":563,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":214,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"/**\n * Data.\n *\n * @return component\n */\nData = new Object();","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"/**\n * Array of indices of selected rows.\n *\n * @type {number[]}\n */\nData.selectedRows = [];","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"/**\n * Deselects all rows.\n */\nData.deselectAll = () => {\n Data.selectedRows = [];\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"/**\n * Returns column names.\n *\n * @return {string[]} column names\n */\nData.getColumnNames = () => {\n return [ \"A\", \"B\", \"A * B\", \"sin( A / B )\" ];\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"/**\n * Returns domain of specified column.\n *\n * @param {number} nData number of data values\n * @param {number} index column index\n * @return {number[]} domain of specified column\n */\nData.getDomain = ( nData, index ) => {\n return [ d3.min( Data.getValues( nData ), d => d[ index ]), d3.max( Data.getValues( nData ), d => d[ index ])];\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"/**\n * Data values.\n *\n * @type {number[]}\n */\nData.values = [];","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"/**\n * Returns data values.\n *\n * @param {number} nData number of data values\n * @return {Array[]} data values by row\n */\nData.getValues = ( nData ) => {\n if( Data.values.length !== nData ) {\n let f = d3.randomNormal( 0, 0.5 );\n Data.values = [];\n for( let i = 0; ( i < nData ); i++ ) {\n let a = f(), b = f();\n Data.values[ i ] = [ a, b, a * b, ( b === 0 ) ? 0 : Math.sin( a / b )];\n }\n }\n return Data.values;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"/**\n * Returns \"nice\" power of ten: rounded to 1, 2, 5, 10, 20, 50, etc.\n *\n * @param {number} exp exponent\n * @return {number} \"nice\" power of ten: rounded to 1, 2, 5, 10, 20, 50, etc.\n */\ngetPower = ( exp ) => {\n let m = (( exp % 3 ) === 0 ) ? 1 : (( exp % 3 ) === 1 ) ? 2 : 5;\n return m * ( 10 ** Math.floor( exp / 3 ));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"// Matrix.\nMatrix = new Object();","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"/**\n * Bitmaps of deselected rows, cached for optimization, or undefined if none.\n *\n * @type {ImageData[][]|undefined}\n */\nMatrix.bitmaps = undefined;","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"/**\n * CANVAS element, or undefined if none.\n *\n * @type {Element|undefined}\n */\nMatrix.canvas = undefined;","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"/**\n * Node containing a brush, or undefined if none.\n *\n * @type {Node|undefined}\n */\nMatrix.brushNode = undefined;","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"/**\n * Scaled coordinates, or undefined if none.\n *\n * @type {Uint16Array[]|undefined}}\n */\nMatrix.scaled = undefined;","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"/**\n * True iff extending selection.\n *\n * @type {boolean}\n */\nMatrix.isExtending = false;","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"/**\n * True iff reducing selection.\n *\n * @type {boolean}\n */\nMatrix.isReducing = false;","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"/**\n * Clears cached data when the number of rows or transparency are changed.\n */\n{\n if( !Matrix.isExtending && !Matrix.isReducing ) {\n Data.deselectAll();\n }\n Matrix.bitmaps = undefined;\n return [ getPower( nData ), transparency ]; // triggers execution\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"// Axis.\nAxis = new Object();","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"// Plot.\nPlot = new Object();","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"/**\n * Padding, in pixels.\n *\n * @constant {number}\n */\nPlot.padding = 10;","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"/**\n * Cached bitmap, or none iff undefined.\n *\n * @constant {ImageData|undefined}\n */\nPlot.imageData = undefined;","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"/**\n * Returns normalized rectangle.\n *\n * @param {Rect} rect rectangle\n * @return {Rect} normalized rectangle\n */\nPlot.normalize = ( rect ) => {\n let nx = rect.x,\n ny = rect.y,\n nw = rect.width,\n nh = rect.height;\n if( nw < 0 ) {\n nx += nw;\n nw = -nw;\n }\n if( nh < 0 ) {\n ny += nh;\n nh = -nh;\n }\n return { x: nx, y: ny, width: nw, height: nh };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"/**\n * Returns whether point is within rectangle, within tolerance.\n *\n * @param {Point} point point\n * @param {Rect} rect rectangle\n * @param {number} tol tolerance, or 0 for undefined\n */\nPlot.isWithin = ( point, rect, tol ) => {\n let nRect = Plot.normalize( rect );\n if( tol !== undefined ) {\n nRect.x -= tol;\n nRect.y -= tol;\n nRect.width += 2 * tol;\n nRect.height += 2 * tol;\n }\n return ( nRect.x <= point.x ) && ( point.x < nRect.x + nRect.width ) &&\n ( nRect.y <= point.y ) && ( point.y < nRect.y + nRect.height );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"\npageAnalytics = {\n await require(`https://www.googletagmanager.com/gtag/js?id=G-868CV7N99R`).catch(() => {});\n const dataLayer = window.dataLayer = window.dataLayer || [];\n const location = html``;\n gtag('js', new Date());\n gtag('config', 'G-868CV7N99R', {\n 'page_path': location.pathname,\n 'page_location' : location.href\n });\n return md`^{[Google Analytics](https://beta.observablehq.com/@peter-hartmann/page-analytics)}`;\n function gtag() { dataLayer.push(arguments); }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$37","pinned":false,"hidden":false,"mode":"html"}],"files":"$W38","stdlib":"1","titling":"auto"}

Further Reading

User Interface

Implementation