2d:["$","title",null,{"children":"Zooming Usability | Heman Robinson | Observable"}] 32:T118d,{ // Calculate and draw the plot. let draw = ( isZooming ) => { // Initialization. svg.selectAll( "*" ).remove(); // Draw the area. const g = svg.append( "g" ); g.append( "path" ) .datum( data ) .attr( "fill", "#99bbdd" ) .attr( "stroke", "#99bbdd" ) .attr( "stroke-width", 1.5 ) .attr( "d", d3.area() .x( d => xScale( d[ 0 ])) .y0( height - margin.bottom - overviewPadding ) .y1( d => yScale( d[ 1 ])) ); // Draw the axes and the controls. Graph.drawAxes( svg, width, height - overviewPadding, margin, padding, overviewPadding, -1, xScale, yScale, xDomain0, yDomain0, xLabel, yLabel ); g.append( "path" ) .datum( data ) .attr( "fill", "#99bbdd" ) .attr( "stroke", "#99bbdd" ) .attr( "stroke-width", 1.5 ) .attr( "d", d3.area() .x( d => xScale1( d[ 0 ])) .y0( height ) .y1( d => yScale1( d[ 1 ])) ); Graph.drawControls( svg, width, height, margin, padding, overviewPadding, -1, isZooming, false, false, false, xScale, yScale, xDomain0, yDomain0, xLabel, yLabel ); } // Initialization. const width = 650, height = 400, padding = { top: 20, right: 20, bottom: 0, left: 0 }, margin = { top: 20, right: 0, bottom: 50, left: 70 }, overviewPadding = 50, data = dataStocks, xLabel = "Year", yLabel = "S&P 500 Index"; let xDomain0 = [ d3.min( data, d => d[ 0 ]), d3.max( data, d => d[ 0 ])], yDomain0 = [ d3.min( data, d => d[ 1 ]), d3.max( data, d => d[ 1 ])], xScale = d3.scaleLinear().domain( xDomain0 ).range([ margin.left + padding.left, width - margin.right - padding.right ]), yScale = d3.scaleLog().domain( yDomain0 ).range([ height - margin.bottom - padding.bottom - overviewPadding, margin.top + padding.top ]), xScale1 = d3.scaleLinear().domain( xDomain0 ).range([ margin.left + padding.left, width - margin.right - padding.right ]), yScale1 = d3.scaleLog().domain( yDomain0 ).range([ height, height - overviewPadding ]), isOver = false; // Zoom in one dimension. let onPointerDown = ( event ) => { Graph.onPointerDown( event, width, height, margin, padding, false, overviewPadding, -1, xScale, yScale, xDomain0, yDomain0 ); }, onPointerUp = ( event ) => { if( Graph.downLocation.isX || Graph.downLocation.isY ) { Graph.onPointerUp( event, width, height, margin, padding, xScale, yScale, xDomain0, yDomain0 ); draw( true ); } }; // Show or hide the controls. let onPointerOver = ( event ) => { if( !isOver ) { isOver = true; draw( true ); } }; let onPointerOut = ( event ) => { if( isOver && ( event.pointerType !== "touch" )) { isOver = false; draw( false ); } }; document.addEventListener( "pointerdown", ( event ) => { Graph.downLocation.isX = false; Graph.downLocation.isY = false; Graph.downLocation.isMin = false; Graph.downLocation.isMax = false; if( isOver ) { isOver = false; draw( false ); } }); // Create reference scale for scroll wheel. const xScale0 = xScale.copy(); // Handles the scroll wheel. function onZoom( event ) { // Check for X scrollbar events, because event.stopPropagation() does not prevent wheel events on iPad. if( Graph.downLocation.isX ) { return; } // Transform the scale. const transform = event.transform; xScale = transform.rescaleX( xScale0 ); Graph.clampDomain( xScale, xScale0.domain()); // Draw the plot. draw( true ); } // Create the elements. const svg = d3 .create( "svg" ) .on( "pointerover", onPointerOver ) .on( "pointerout", onPointerOut ) .on( "pointerdown", onPointerDown ) .on( "pointermove", onPointerUp ) .on( "pointerup", onPointerUp ) .attr( "width", width ) .attr( "height", height ) .attr( "viewBox", [ 0, 0, width, height ]) .style( "border", "1px solid #939ba1" ) .style( "background-color", "#ffffff" ) .style( "z-index", 1 ); // Hook up the scroll wheel. svg.call( d3.zoom() .extent([[ 0, 0 ], [ width, height ]]) .scaleExtent([ 1, 4 ]) .filter( event => { event.preventDefault(); return true; }) .on( "zoom", onZoom )); // Draw the plot. draw( false ); // Return the node. return svg.node(); }33:T1ce9,{ // Calculate and draw the plot. let draw = ( isZooming ) => { // Initialization. svg.selectAll( "*" ).remove(); // Draw the points. const g = svg.append( "g" ); data.forEach(( datum ) => { g.append( "path" ) .attr( "d", symbolScale( datum[ 0 ])) .attr( "transform", d => "translate( " + Math.round( xScale( datum[ 1 ])) + ", " + Math.round( yScale( datum[ 2 ])) + " )" ) .style( "fill", "none" ) .style( "stroke", "black" ); }); // Draw the axes and the controls. Graph.drawAxes( svg, width, height, margin, padding, 0, 0, xScale, yScale, xDomain0, yDomain0, xLabel, yLabel ); Graph.drawControls( svg, width, height, margin, padding, 0, 0, isZooming, isZooming, false, false, xScale, yScale, xDomain0, yDomain0, xLabel, yLabel ); } // Initialization. const width = 400, height = 400, padding = { top: 20, right: 20, bottom: 20, left: 20 }, margin = { top: 10, right: 10, bottom: 50, left: 50 }, data = dataIris, xLabel = "Sepal Length (cm)", yLabel = "Sepal Width (cm)"; let xDomain0 = [ d3.min( data, d => d[ 1 ]), d3.max( data, d => d[ 1 ])], yDomain0 = [ d3.min( data, d => d[ 2 ]), d3.max( data, d => d[ 2 ])], xScale = d3.scaleLinear().domain( xDomain0 ).range([ margin.left + padding.left, width - margin.right - padding.right ]), yScale = d3.scaleLinear().domain( yDomain0 ).range([ height - margin.bottom - padding.bottom, margin.top + padding.top ]), symbolScale = d3.scaleOrdinal( data.map( datum => datum[ 0 ]), d3.symbolsStroke.map( s => d3.symbol().type( s ).size( 80 )())); // Zoom in one dimension. let onPointerDown = ( event ) => { Graph.onPointerDown( event, width, height, margin, padding, false, 0, -1, xScale, yScale, xDomain0, yDomain0 ); }, onPointerUp = ( event ) => { if( Graph.downLocation.isX || Graph.downLocation.isY ) { Graph.onPointerUp( event, width, height, margin, padding, xScale, yScale, xDomain0, yDomain0 ); draw( true ); } }; // Show or hide the controls. let onPointerOver = ( event ) => { Graph.drawControls( svg, width, height, margin, padding, 0, 0, true, true, false, false, xScale, yScale, xDomain0, yDomain0, xLabel, yLabel ); }; let onPointerOut = ( event ) => { if( event.pointerType !== "touch" ) { Graph.drawControls( svg, width, height, margin, padding, 0, 0, false, false, false, false, xScale, yScale, xDomain0, yDomain0, xLabel, yLabel ); } }; document.addEventListener( "pointerdown", ( event ) => { Graph.downLocation.isX = false; Graph.downLocation.isY = false; Graph.downLocation.isMin = false; Graph.downLocation.isMax = false; Graph.drawControls( svg, width, height, margin, padding, 0, 0, false, false, false, false, xScale, yScale, xDomain0, yDomain0, xLabel, yLabel ); }); // Create reference scales and transform for scroll wheel. const xScale0 = xScale.copy(), yScale0 = yScale.copy(); let transform0 = d3.zoomIdentity; // TODO: Fix "jumping" behavior when zooming in 1D, then in 2D. The 1D zoom gets suddenly applied to both axes. // This does not happen in Fil's https://observablehq.com/@d3/x-y-zoom. // I tried to integrate his code, commented out below, but it generates an error in zoom.js: // Cannot read properties of undefined (reading 'baseVal') // Centers the action (handles multitouch) after https://observablehq.com/@d3/x-y-zoom?collection=@d3/d3-zoom. function center( event, target ) { if( event.sourceEvent ) { const p = d3.pointers( event, target ); return [ d3.mean(p, d => d[ 0 ]), d3.mean(p, d => d[ 1 ])]; } return [ width / 2, height / 2 ]; } // Handles the scroll wheel. function onZoom( event ) { // Initialization. const sourceEvent = event.sourceEvent, transform = event.transform, k = transform.k / transform0.k; const point = center(event, this ); let offsetX, offsetY; if( sourceEvent.touches ) { const touch = sourceEvent.touches[ 0 ]; offsetX = touch.clientX - sourceEvent.currentTarget.getBoundingClientRect().x; offsetY = touch.clientY - sourceEvent.currentTarget.getBoundingClientRect().y; } else { offsetX = sourceEvent.offsetX; offsetY = sourceEvent.offsetY; } // Check whether X or Y dimension. let isX = false, isY = false; if( offsetY >= height - margin.bottom ) { isX = true; } else if( offsetX <= margin.left ) { isY = true; } else if(( offsetX <= width - padding.right ) && ( offsetY >= padding.top )) { isX = true; isY = true; } // Handle X dimension. if( isX ) { if( k === 1 ) { // panning const domain = xScale.domain(), range = xScale.range(), d = (( domain[ 1 ] - domain[ 0 ]) / ( range[ 1 ] - range[ 0 ])) * ( transform0.x - transform.x ); if( d ) { xScale.domain([ domain[ 0 ] + d, domain[ 1 ] + d ]); Graph.clampDomain( xScale, xScale0.domain()); } } else { // zooming xScale = transform.rescaleX( xScale0 ); Graph.clampDomain( xScale, xScale0.domain()); // gx.call( zoomX.scaleBy, k, point ); // xScale = tx().rescaleX( xScale ); } } // Handle Y dimension. if( isY ) { if( k === 1 ) { // panning const domain = yScale.domain(), range = yScale.range(), d = (( domain[ 1 ] - domain[ 0 ]) / ( range[ 1 ] - range[ 0 ])) * ( transform0.y - transform.y ); if( d ) { yScale.domain([ domain[ 0 ] + d, domain[ 1 ] + d ]); Graph.clampDomain( yScale, yScale0.domain()); } } else { // zooming yScale = transform.rescaleY( yScale0 ); Graph.clampDomain( yScale, yScale0.domain()); // gy.call( zoomY.scaleBy, k, point ); // yScale = ty().rescaleY( yScale ); } } // Redraw the plot. if( isX || isY ) { draw( true ); } // Update the reference transforms for comparison. transform0 = transform; } // Create the elements. const svg = d3 .create( "svg" ) .on( "pointerover", onPointerOver ) .on( "pointerout", onPointerOut ) .on( "pointerdown", onPointerDown ) .on( "pointermove", onPointerUp ) .on( "pointerup", onPointerUp ) .attr( "width", width ) .attr( "height", height ) .attr( "viewBox", [ 0, 0, width, height ]) .style( "border", "1px solid #939ba1" ) .style( "background-color", "#ffffff" ) .style( "z-index", 1 ); const gx = svg.append( "g" ); const gy = svg.append( "g" ); // Hook up the scroll wheel. svg.call( d3.zoom() .extent([[ 0, 0 ], [ width, height ]]) .scaleExtent([ 1, 4 ]) .filter( event => { event.preventDefault(); return true; }) .on( "zoom", onZoom )); // Set up the ancillary zooms and an accessor for their transforms. const zoomX = d3.zoom().scaleExtent([ 0.1, 10 ]); const zoomY = d3.zoom().scaleExtent([ 0.2, 5 ]); const tx = () => d3.zoomTransform( gx.node()); const ty = () => d3.zoomTransform( gy.node()); gx.call( zoomX ).attr( "pointer-events", "none" ); gy.call( zoomY ).attr( "pointer-events", "none" ); // Draw the plot. draw( false ); // Return the node. return svg.node(); }34:T9ab,

Why use Zoom Bars?

Familiarity: Familiarity eases the user’s learning curve, which is particularly important in web applications. Jakob Nielsen recommends engaging the user within the first 10 seconds -- because on the web, if users don't find value quickly, they surf elsewhere (Nielsen, 2011). Zoom Bars are familiar controls, used in commercial products from Adobe, Amazon, IBM, Microsoft, Tibco, and others.

Flexibility: Zoom Bars can be displayed persistently or transiently, inside or outside, depending on the graph. In the one-dimensional example above, it's assumed that the user wants to see both overview and detail. In the two-dimensional example above, to minimize distraction, the Zoom Bars are hidden until they can be used. In higher dimensions, it's convenient to display the Zoom Bars persistently outside the graph.

Control: The scroll wheel is powerful, enabling the user to zoom in multiple dimensions simultaneously. Zoom Bars give the user fine-grained control, enabling them to zoom in one dimension at a time.

Affordance: Some graphics applications use the scroll wheel for its original purpose of scrolling. Some use it for zooming. Some do neither, because not all graphs can be zoomed. The only way to tell what the scroll wheel does is to try to use it. In contrast, the Zoom Bar provides clear affordance: it shows the results of both scrolling and zooming, and its presence or absence shows whether a graph can be zoomed.

For all these reasons, we should use Zoom Bars in all our zoomable visualizations.

35:T5a7,/** * Returns initial and current domains. * * @param {Array} xDomain0 initial X domain * @param {Array} yDomain0 initial Y domain * @param {Array} xDomain current X domain * @param {Array} yDomain current Y domain * @param {boolean} isXOrdinal true iff X scale is ordinal * @param {boolean} isYOrdinal true iff Y scale is ordinal * @return {Domains} initial and current domains */ Graph.getDomains = ( xDomain0, yDomain0, xDomain, yDomain, isXOrdinal, isYOrdinal ) => { let domains = {}; if( isXOrdinal ) { domains.xMin0 = 0; domains.xMax0 = xDomain0.length - 1; domains.xMin = xDomain0.indexOf( xDomain[ 0 ]); domains.xMax = xDomain0.indexOf( xDomain[ xDomain.length - 1 ]); domains.xD = 1; } else { domains.xMin0 = xDomain0[ 0 ]; domains.xMax0 = xDomain0[ 1 ]; domains.xMin = xDomain[ 0 ]; domains.xMax = xDomain[ 1 ]; domains.xD = 0; } if( isYOrdinal ) { domains.yMin0 = 0; domains.yMax0 = yDomain0.length - 1; domains.yMin = yDomain0.indexOf( yDomain[ 0 ]); domains.yMax = yDomain0.indexOf( yDomain[ yDomain.length - 1 ]); domains.yD = 1; } else { domains.yMin0 = yDomain0[ 0 ]; domains.yMax0 = yDomain0[ 1 ]; domains.yMin = yDomain[ 0 ]; domains.yMax = yDomain[ 1 ]; domains.yD = 0; } return domains; }36:Tf29,/** * Initiates zoom in one dimension. * * This method modifies Graph.downLocation. * * @param {Event} event event * @param {number} width width, in pixels * @param {number} height height, in pixels * @param {Box} margin margin * @param {Box} padding padding * @param {boolean} isDragging true iff dragging is supported in both X and Y dimensions * @param {number} xScrollSize scroll size in the X dimension, or <0 if not supported, or 0 for default * @param {number} yScrollSize scroll size in the Y dimension, or <0 if not supported, or 0 for default * @param {D3Scale} xScale X scale * @param {D3Scale} yScale Y scale * @param {Array} xDomain0 Initial X domain * @param {Array} yDomain0 Initial Y domain */ Graph.onPointerDown = ( event, width, height, margin, padding, isDragging, xScrollSize, yScrollSize, xScale, yScale, xDomain0, yDomain0 ) => { // Initialization. const scrollSize = (( event.pointerType === "touch" ) ? 2 : 1 ) * Graph.scrollSize, endCapSize = 0.8 * scrollSize; let top = margin.top + padding.top, right = margin.right + padding.right, bottom = margin.bottom + padding.bottom, left = margin.left + padding.left, xDomain = xScale.domain(), yDomain = yScale.domain(), { xMin0, xMax0, yMin0, yMax0, xMin, xMax, yMin, yMax, xD, yD } = Graph.getDomains( xDomain0, yDomain0, xDomain, yDomain, !!xScale.bandwidth, !!yScale.bandwidth ); let xDown, yDown; if( event.touches ) { const touch = event.touches[ 0 ]; xDown = touch.clientX - event.currentTarget.getBoundingClientRect().x; yDown = touch.clientY - event.currentTarget.getBoundingClientRect().y; } else { xDown = event.offsetX; yDown = event.offsetY; } // Reset the mousedown coordinates. Graph.downLocation.x = xDown; Graph.downLocation.y = yDown; Graph.downLocation.xDomain = []; Graph.downLocation.yDomain = []; Graph.downLocation.isX = false; Graph.downLocation.isY = false; Graph.downLocation.isMin = false; Graph.downLocation.isMax = false; // Stop propagation to document. event.stopPropagation(); // Handle event on X scrollbar... if(( left <= xDown ) && ( xDown <= width - right ) && ( height - ( xScrollSize ? xScrollSize : scrollSize ) <= yDown ) && ( yDown <= height )) { let w = width - right - left + 1, x0 = left + w * ( xMin - xMin0 ) / ( xMax0 - xMin0 + xD ), x1 = left + w * ( xMax - xMin0 + xD ) / ( xMax0 - xMin0 + xD ); if( event.preventDefault ) { event.preventDefault(); } Graph.downLocation.xDomain = xScale.domain(); Graph.downLocation.isX = true; if(( x0 <= xDown ) && ( xDown <= x0 + endCapSize )) { Graph.downLocation.isMin = true; } else if(( x1 - endCapSize <= xDown ) && ( xDown <= x1 )) { Graph.downLocation.isMax = true; } } // ...or handle event on Y scrollbar... else if(( 0 <= xDown ) && ( xDown <= scrollSize ) && ( top <= yDown ) && ( yDown <= height - bottom )) { let h = height - bottom - top + 1, y0 = top + h * ( 1 - ( yMin - yMin0 ) / ( yMax0 - yMin0 + yD )), y1 = top + h * ( 1 - ( yMax - yMin0 + yD ) / ( yMax0 - yMin0 + yD )); if( event.preventDefault ) { event.preventDefault(); } Graph.downLocation.yDomain = yScale.domain(); Graph.downLocation.isY = true; if(( y1 <= yDown ) && ( yDown <= y1 + endCapSize )) { Graph.downLocation.isMax = true; } else if(( y0 - endCapSize <= yDown ) && ( yDown <= y0 )) { Graph.downLocation.isMin = true; } } };37:T19ab,/** * Completes zoom in one dimension. * * This method modifies Graph.downLocation. * * @param {Event} event event * @param {number} width width, in pixels * @param {number} height height, in pixels * @param {Box} margin margin * @param {Box} padding padding * @param {D3Scale} xScale X scale (returned) * @param {D3Scale} yScale Y scale (returned) * @param {Array} xDomain0 Initial X domain * @param {Array} yDomain0 Initial Y domain */ Graph.onPointerUp = ( event, width, height, margin, padding, xScale, yScale, xDomain0, yDomain0 ) => { // Initialization. const d = 8; let top = margin.top + padding.top, right = margin.right + padding.right, bottom = margin.bottom + padding.bottom, left = margin.left + padding.left, xDomain = Graph.downLocation.xDomain, yDomain = Graph.downLocation.yDomain, { xMin0, xMax0, yMin0, yMax0, xMin, xMax, yMin, yMax, xD, yD } = Graph.getDomains( xDomain0, yDomain0, xDomain, yDomain, !!xScale.bandwidth, !!yScale.bandwidth ); let xUp, yUp; if( event.touches ) { const touch = event.touches[ 0 ]; xUp = touch.clientX - event.currentTarget.getBoundingClientRect().x; yUp = touch.clientY - event.currentTarget.getBoundingClientRect().y; } else { xUp = event.offsetX; yUp = event.offsetY; } // Handle event on X scrollbar... if( Graph.downLocation.isX ) { // Prevent default event handling. if( event.preventDefault ) { event.preventDefault(); } // Calculate the difference. const f = ( xMax0 - xMin0 + xD ) / d; let w = width - right - left + 1, dif = ( xMax0 - xMin0 + xD ) * ( xUp - Graph.downLocation.x ) / w; if( xScale.bandwidth ) { dif = Math.round( dif ); } // Handle drag on minimum handle... if( Graph.downLocation.isMin ) { dif = Math.max( dif, xMin0 - xMin ); if( dif <= xMax - xMin + xD - f ) { if( xScale.bandwidth ) { xScale.domain( xDomain0.slice( xMin + dif, xMax + xD )); } else { xScale.domain([ xMin + dif, xMax ]); } } } // ...or handle drag on maximum handle... else if( Graph.downLocation.isMax ) { dif = Math.min( dif, xMax0 - xMax ); if( dif >= f - ( xMax - xMin + xD )) { if( xScale.bandwidth ) { xScale.domain( xDomain0.slice( xMin, xMax + dif + xD )); } else { xScale.domain([ xMin, xMax + dif ]); } } } // ...or handle drag on thumb or click on track. else { // Adjust for click on track. if( dif === 0 ) { let x0 = left + w * ( xMin - xMin0 ) / ( xMax0 - xMin0 + xD ), x1 = left + w * ( xMax - xMin0 + xD ) / ( xMax0 - xMin0 + xD ); if( xUp < x0 ) { dif = ( xMax0 - xMin0 + xD ) * ( xUp - x0 ) / w - ( xMax - xMin + xD ) / 2; } else if( x1 < xUp ) { dif = ( xMax0 - xMin0 + xD ) * ( xUp - x1 ) / w + ( xMax - xMin + xD ) / 2; } } // Handle drag or click. dif = Math.max( dif, xMin0 - xMin ); dif = Math.min( dif, xMax0 - xMax ); if( xScale.bandwidth ) { xScale.domain( xDomain0.slice( xMin + dif, xMax + dif + xD )); } else { xScale.domain([ xMin + dif, xMax + dif ]); } } } // ...or handle event on Y scrollbar. else if( Graph.downLocation.isY ) { // Prevent default event handling. if( event.preventDefault ) { event.preventDefault(); } // Calculate the difference. const f = ( yMax0 - yMin0 + yD ) / d; let h = height - bottom - top + 1, dif = ( yMax0 - yMin0 + yD ) * ( Graph.downLocation.y - yUp ) / h; if( yScale.bandwidth ) { dif = Math.round( dif ); } // Handle drag on minimum handle... if( Graph.downLocation.isMin ) { dif = Math.max( dif, yMin0 - yMin ); if( dif <= yMax - yMin + yD - f ) { if( yScale.bandwidth ) { yScale.domain( yDomain0.slice( yMin + dif, yMax + yD )); } else { yScale.domain([ yMin + dif, yMax ]); } } } // ...or handle drag on maximum handle... else if( Graph.downLocation.isMax ) { dif = Math.min( dif, yMax0 - yMax ); if( dif >= f - ( yMax - yMin + yD )) { if( yScale.bandwidth ) { yScale.domain( yDomain0.slice( yMin, yMax + dif + yD )); } else { yScale.domain([ yMin, yMax + dif ]); } } } // ...or handle drag on thumb or click on track. else { // Adjust for click on track. if( dif === 0 ) { let y0 = top + h * ( 1 - ( yMin - yMin0 ) / ( yMax0 - yMin0 + yD )), y1 = top + h * ( 1 - ( yMax - yMin0 + yD ) / ( yMax0 - yMin0 + yD )); if( yUp < y0 ) { dif = ( yMax0 - yMin0 + yD ) * ( y0 - yUp ) / h - ( yMax - yMin + yD ) / 2; } else if( y1 < yUp ) { dif = ( yMax0 - yMin0 + yD ) * ( y1 - yUp ) / h + ( yMax - yMin + yD ) / 2; } } // Handle drag or click. dif = Math.max( dif, yMin0 - yMin ); dif = Math.min( dif, yMax0 - yMax ); if( yScale.bandwidth ) { yScale.domain( yDomain0.slice( yMin + dif, yMax + dif + yD )); } else { yScale.domain([ yMin + dif, yMax + dif ]); } } } // Reset the mousedown coordinates. if(( Graph.downLocation.isX || Graph.downLocation.isY ) && ( event.type === "pointerup" ) && ( event.pointerType !== "touch" )) { Graph.downLocation.isX = false; Graph.downLocation.isY = false; Graph.downLocation.isMin = false; Graph.downLocation.isMax = false; } };38:Tbdb,/** * Draws the axes. * * @param {SVGElement} svg SVG element * @param {number} width width, in pixels * @param {number} height height, in pixels * @param {Box} margin margin * @param {Box} padding padding * @param {number} xScrollSize scroll size in the X dimension, or <0 if not supported, or 0 for default * @param {number} yScrollSize scroll size in the Y dimension, or <0 if not supported, or 0 for default * @param {D3Scale} xScale X scale * @param {D3Scale} yScale Y scale * @param {Array} xDomain0 Initial X domain * @param {Array} yDomain0 Initial Y domain * @param {string} xLabel X axis label * @param {string} yLabel Y axis label */ Graph.drawAxes = ( svg, width, height, margin, padding, xScrollSize, yScrollSize, xScale, yScale, xDomain0, yDomain0, xLabel, yLabel ) => { // Initialization. const scrollSize = Graph.scrollSize, colorLight = "#ebeeef"; // Clear the margins. svg.append( "rect" ) .attr( "x", 0 ) .attr( "y", 0 ) .attr( "width", width ) .attr( "height", padding.top ) .style( "fill", colorLight ); svg.append( "rect" ) .attr( "x", width - padding.right ) .attr( "y", 0 ) .attr( "width", padding.right ) .attr( "height", height + xScrollSize ) .style( "fill", colorLight ); svg.append( "rect" ) .attr( "x", 0 ) .attr( "y", height - margin.bottom ) .attr( "width", width ) .attr( "height", margin.bottom ) .style( "fill", colorLight ); svg.append( "rect" ) .attr( "x", 0 ) .attr( "y", 0 ) .attr( "width", margin.left ) .attr( "height", height + xScrollSize ) .style( "fill", colorLight ); // Draw the X axis. let xTickValues = null; let xTickFormat = null; svg.append( "g" ) .attr( "class", ( margin.bottom > 50 ) ? "axisRotated" : "axis" ) .attr( "transform", "translate( 0, " + ( height - margin.bottom ) + " )" ) .call( d3.axisBottom( xScale ).tickSizeOuter( 0 ).ticks( 3 ).tickValues( xTickValues ).tickFormat( xTickFormat )); svg.append( "text" ) .attr( "transform", "translate( " + ( width / 2 ) + " ," + ( height - 1.5 * scrollSize ) + ")" ) .style( "text-anchor", "middle" ) .style( "font-size", "12px" ) .text( xLabel ); // Draw the Y axis. let yTickValues = null; let yTickFormat = null; svg.append( "g" ) .attr( "class", "axis" ) .attr( "transform", "translate( " + margin.left + ", 0 )" ) .call( d3.axisLeft( yScale ).tickSizeOuter( 0 ).ticks( 3 ).tickValues( yTickValues ).tickFormat( yTickFormat )); svg.append( "text" ) .attr( "x", margin.left ) .attr( "y", margin.top + padding.top * 0.7 ) .style( "text-anchor", "middle" ) .style( "font-size", "12px" ) .text( yLabel ); };39:T288c,/** * Draws the controls. * * @param {SVGElement} svg SVG element * @param {number} width width, in pixels * @param {number} height height, in pixels * @param {Box} margin margin * @param {Box} padding padding * @param {number} xScrollSize scroll size in the X dimension, or <0 if not supported, or 0 for default * @param {number} yScrollSize scroll size in the Y dimension, or <0 if not supported, or 0 for default * @param {boolean} isXZooming true iff this graph can be zoomed in the X dimension * @param {boolean} isYZooming true iff this graph can be zoomed in the Y dimension * @param {boolean} isXBinning true iff this graph can be binned in the X dimension * @param {boolean} isYBinning true iff this graph can be binned in the Y dimension * @param {D3Scale} xScale X scale * @param {D3Scale} yScale Y scale * @param {Array} xDomain0 Initial X domain * @param {Array} yDomain0 Initial Y domain * @param {string} xLabel X axis label * @param {string} yLabel Y axis label */ Graph.drawControls = ( svg, width, height, margin, padding, xScrollSize, yScrollSize, isXZooming, isYZooming, isXBinning, isYBinning, xScale, yScale, xDomain0, yDomain0, xLabel, yLabel ) => { // Initialization. const scrollSize = Graph.scrollSize, halfSize = scrollSize / 2, colorLight = "#ebeeef", colorLine = "#cbd2d7", opacity = 0.7, xDomain = xScale.domain(), yDomain = yScale.domain(), { xMin0, xMax0, yMin0, yMax0, xMin, xMax, yMin, yMax, xD, yD } = Graph.getDomains( xDomain0, yDomain0, xDomain, yDomain, !!xScale.bandwidth, !!yScale.bandwidth ), x = margin.left + padding.left, w = width - margin.right - padding.right - x + 1, y = margin.top + padding.top, h = height - margin.bottom - padding.bottom - y + 1; // Draw an overview scrollbar if requested. let x1 = x + w * ( xMin - xMin0 ) / ( xMax0 - xMin0 + xD ), x2 = x + w * ( xMax - xMin0 + xD ) / ( xMax0 - xMin0 + xD ); if(( xScrollSize >= 0 ) && ( x2 > x1 )) { svg.append( "rect" ) .attr( "x", x1 ) .attr( "y", height - xScrollSize ) .attr( "width", x2 - x1 ) .attr( "height", xScrollSize ) .attr( "rx", halfSize ) .attr( "opacity", opacity ) .style( "fill", colorLine ); } // Draw the X zoombar... const d = halfSize / 2, k = scrollSize / 4; if( isXZooming ) { // Draw a traditional scrollbar... if( !xScrollSize ) { svg.append( "rect" ) .attr( "x", x ) .attr( "y", height - scrollSize ) .attr( "width", w ) .attr( "height", scrollSize ) .style( "fill", "#ffffff" ); svg.append( "line" ) .attr( "x1", x1 + halfSize ) .attr( "y1", height - halfSize ) .attr( "x2", x2 - halfSize ) .attr( "y2", height - halfSize ) .attr( "opacity", opacity ) .style( "stroke-width", scrollSize ) .style( "stroke", colorLine ) .style( "stroke-linecap", "round" ); svg.append( "line" ) .attr( "x1", x1 + halfSize + 1 ) .attr( "y1", height - halfSize ) .attr( "x2", x2 - halfSize - 1 ) .attr( "y2", height - halfSize ) .style( "stroke-width", scrollSize ) .style( "stroke", "#ffffff" ) .style( "stroke-linecap", "butt" ); svg.append( "line" ) .attr( "x1", x1 + halfSize + 2 ) .attr( "y1", height - halfSize ) .attr( "x2", x2 - halfSize - 2 ) .attr( "y2", height - halfSize ) .attr( "opacity", opacity ) .style( "stroke-width", scrollSize ) .style( "stroke", colorLine ) .style( "stroke-linecap", "butt" ); } // ...or handles for the overview scrollbar. else { svg.append( "line" ) .attr( "x1", x1 + halfSize + 1 ) .attr( "y1", height - xScrollSize ) .attr( "x2", x1 + halfSize + 1 ) .attr( "y2", height ) .attr( "opacity", opacity ) .style( "stroke-width", 1 ) .style( "stroke", "#ffffff" ) .style( "stroke-linecap", "butt" ); svg.append( "line" ) .attr( "x1", x2 - halfSize - 1 ) .attr( "y1", height - xScrollSize ) .attr( "x2", x2 - halfSize - 1 ) .attr( "y2", height ) .attr( "opacity", opacity ) .style( "stroke-width", 1 ) .style( "stroke", "#ffffff" ) .style( "stroke-linecap", "butt" ); } // Draw the X drag handles. let y1 = xScrollSize ? height - xScrollSize / 2 + k : height - scrollSize + k; let y2 = xScrollSize ? height - xScrollSize / 2 - k : height - k; svg.append( "line" ) .attr( "x1", x1 + d ) .attr( "y1", y1 ) .attr( "x2", x1 + d ) .attr( "y2", y2 ) .style( "stroke-width", 1 ) .style( "stroke", "#000000" ) .style( "stroke-linecap", "butt" ); svg.append( "line" ) .attr( "x1", x1 + d + 2 ) .attr( "y1", y1 ) .attr( "x2", x1 + d + 2 ) .attr( "y2", y2 ) .style( "stroke-width", 1 ) .style( "stroke", "#000000" ) .style( "stroke-linecap", "butt" ); svg.append( "line" ) .attr( "x1", x2 - d ) .attr( "y1", y1 ) .attr( "x2", x2 - d ) .attr( "y2", y2 ) .style( "stroke-width", 1 ) .style( "stroke", "#000000" ) .style( "stroke-linecap", "butt" ); svg.append( "line" ) .attr( "x1", x2 - d - 2 ) .attr( "y1", y1 ) .attr( "x2", x2 - d - 2 ) .attr( "y2", y2 ) .style( "stroke-width", 1 ) .style( "stroke", "#000000" ) .style( "stroke-linecap", "butt" ); } // ...or hide the X zoombar. else if( !xScrollSize && ( isXZooming !== !!Graph.isXZooming.get( svg ))) { svg.append( "rect" ) .attr( "x", x ) .attr( "y", height - scrollSize ) .attr( "width", w ) .attr( "height", scrollSize ) .style( "fill", colorLight ); } // Draw the Y scroll bar. let y1 = y + h * ( 1 - ( yMin - yMin0 ) / ( yMax0 - yMin0 + yD )), y2 = y + h * ( 1 - ( yMax - yMin0 + yD ) / ( yMax0 - yMin0 + yD )); if(( yScrollSize >= 0 ) && ( y2 > y1 )) { svg.append( "rect" ) .attr( "x", 0 ) .attr( "y", y1 ) .attr( "width", width - yScrollSize ) .attr( "height", y2 - y1 ) .attr( "opacity", opacity ) .style( "fill", colorLine ); } // Draw the Y zoombar... if( isYZooming ) { // Draw the Y scrollbar. svg.append( "rect" ) .attr( "x", 0 ) .attr( "y", y ) .attr( "width", scrollSize ) .attr( "height", h ) .style( "fill", "#ffffff" ); svg.append( "line" ) .attr( "x1", halfSize ) .attr( "y1", y2 + halfSize ) .attr( "x2", halfSize ) .attr( "y2", y1 - halfSize ) .attr( "opacity", opacity ) .style( "stroke-width", scrollSize ) .style( "stroke", colorLine ) .style( "stroke-linecap", "round" ); svg.append( "line" ) .attr( "x1", halfSize ) .attr( "y1", y2 + halfSize + 1 ) .attr( "x2", halfSize ) .attr( "y2", y1 - halfSize - 1 ) .style( "stroke-width", scrollSize ) .style( "stroke", "#ffffff" ) .style( "stroke-linecap", "butt" ); svg.append( "line" ) .attr( "x1", halfSize ) .attr( "y1", y2 + halfSize + 2 ) .attr( "x2", halfSize ) .attr( "y2", y1 - halfSize - 2 ) .attr( "opacity", opacity ) .style( "stroke-width", scrollSize ) .style( "stroke", colorLine ) .style( "stroke-linecap", "butt" ); // Draw the Y drag handles. svg.append( "line" ) .attr( "x1", k ) .attr( "y1", y1 - d ) .attr( "x2", scrollSize - k ) .attr( "y2", y1 - d ) .style( "stroke-width", 1 ) .style( "stroke", "#000000" ) .style( "stroke-linecap", "butt" ); svg.append( "line" ) .attr( "x1", k ) .attr( "y1", y1 - d - 2 ) .attr( "x2", scrollSize - k ) .attr( "y2", y1 - d - 2 ) .style( "stroke-width", 1 ) .style( "stroke", "#000000" ) .style( "stroke-linecap", "butt" ); svg.append( "line" ) .attr( "x1", k ) .attr( "y1", y2 + d ) .attr( "x2", scrollSize - k ) .attr( "y2", y2 + d ) .style( "stroke-width", 1 ) .style( "stroke", "#000000" ) .style( "stroke-linecap", "butt" ); svg.append( "line" ) .attr( "x1", k ) .attr( "y1", y2 + d + 2 ) .attr( "x2", scrollSize - k ) .attr( "y2", y2 + d + 2 ) .style( "stroke-width", 1 ) .style( "stroke", "#000000" ) .style( "stroke-linecap", "butt" ); } // ...or hide the Y zoombar. else if( !yScrollSize && ( isYZooming !== !!Graph.isYZooming.get( svg ))) { svg.append( "rect" ) .attr( "x", 0 ) .attr( "y", y ) .attr( "width", scrollSize ) .attr( "height", h ) .style( "fill", colorLight ); } // Record the new ztates. Graph.isXZooming.set( svg, isXZooming ); Graph.isYZooming.set( svg, isYZooming ); };3a:T176e,// Fisher's Iris data (https://en.wikipedia.org/wiki/Iris_flower_data_set). dataIris = [ [ "versicolor", 7, 3.2, 4.7, 1.4 ], [ "versicolor", 6.4, 3.2, 4.5, 1.5 ], [ "versicolor", 6.9, 3.1, 4.9, 1.5 ], [ "versicolor", 5.5, 2.3, 4, 1.3 ], [ "versicolor", 6.5, 2.8, 4.6, 1.5 ], [ "versicolor", 5.7, 2.8, 4.5, 1.3 ], [ "versicolor", 6.3, 3.3, 4.7, 1.6 ], [ "versicolor", 4.9, 2.4, 3.3, 1 ], [ "versicolor", 6.6, 2.9, 4.6, 1.3 ], [ "versicolor", 5.2, 2.7, 3.9, 1.4 ], [ "versicolor", 5, 2, 3.5, 1 ], [ "versicolor", 5.9, 3, 4.2, 1.5 ], [ "versicolor", 6, 2.2, 4, 1 ], [ "versicolor", 6.1, 2.9, 4.7, 1.4 ], [ "versicolor", 5.6, 2.9, 3.6, 1.3 ], [ "versicolor", 6.7, 3.1, 4.4, 1.4 ], [ "versicolor", 5.6, 3, 4.5, 1.5 ], [ "versicolor", 5.8, 2.7, 4.1, 1 ], [ "versicolor", 6.2, 2.2, 4.5, 1.5 ], [ "versicolor", 5.6, 2.5, 3.9, 1.1 ], [ "versicolor", 5.9, 3.2, 4.8, 1.8 ], [ "versicolor", 6.1, 2.8, 4, 1.3 ], [ "versicolor", 6.3, 2.5, 4.9, 1.5 ], [ "versicolor", 6.1, 2.8, 4.7, 1.2 ], [ "versicolor", 6.4, 2.9, 4.3, 1.3 ], [ "versicolor", 6.6, 3, 4.4, 1.4 ], [ "versicolor", 6.8, 2.8, 4.8, 1.4 ], [ "versicolor", 6.7, 3, 5, 1.7 ], [ "versicolor", 6, 2.9, 4.5, 1.5 ], [ "versicolor", 5.7, 2.6, 3.5, 1 ], [ "versicolor", 5.5, 2.4, 3.8, 1.1 ], [ "versicolor", 5.5, 2.4, 3.7, 1 ], [ "versicolor", 5.8, 2.7, 3.9, 1.2 ], [ "versicolor", 6, 2.7, 5.1, 1.6 ], [ "versicolor", 5.4, 3, 4.5, 1.5 ], [ "versicolor", 6, 3.4, 4.5, 1.6 ], [ "versicolor", 6.7, 3.1, 4.7, 1.5 ], [ "versicolor", 6.3, 2.3, 4.4, 1.3 ], [ "versicolor", 5.6, 3, 4.1, 1.3 ], [ "versicolor", 5.5, 2.5, 4, 1.3 ], [ "versicolor", 5.5, 2.6, 4.4, 1.2 ], [ "versicolor", 6.1, 3, 4.6, 1.4 ], [ "versicolor", 5.8, 2.6, 4, 1.2 ], [ "versicolor", 5, 2.3, 3.3, 1 ], [ "versicolor", 5.6, 2.7, 4.2, 1.3 ], [ "versicolor", 5.7, 3, 4.2, 1.2 ], [ "versicolor", 5.7, 2.9, 4.2, 1.3 ], [ "versicolor", 6.2, 2.9, 4.3, 1.3 ], [ "versicolor", 5.1, 2.5, 3, 1.1 ], [ "versicolor", 5.7, 2.8, 4.1, 1.3 ], [ "virginica", 6.3, 3.3, 6, 2.5 ], [ "virginica", 5.8, 2.7, 5.1, 1.9 ], [ "virginica", 7.1, 3, 5.9, 2.1 ], [ "virginica", 6.3, 2.9, 5.6, 1.8 ], [ "virginica", 6.5, 3, 5.8, 2.2 ], [ "virginica", 7.6, 3, 6.6, 2.1 ], [ "virginica", 4.9, 2.5, 4.5, 1.7 ], [ "virginica", 7.3, 2.9, 6.3, 1.8 ], [ "virginica", 6.7, 2.5, 5.8, 1.8 ], [ "virginica", 7.2, 3.6, 6.1, 2.5 ], [ "virginica", 6.5, 3.2, 5.1, 2 ], [ "virginica", 6.4, 2.7, 5.3, 1.9 ], [ "virginica", 6.8, 3, 5.5, 2.1 ], [ "virginica", 5.7, 2.5, 5, 2 ], [ "virginica", 5.8, 2.8, 5.1, 2.4 ], [ "virginica", 6.4, 3.2, 5.3, 2.3 ], [ "virginica", 6.5, 3, 5.5, 1.8 ], [ "virginica", 7.7, 3.8, 6.7, 2.2 ], [ "virginica", 7.7, 2.6, 6.9, 2.3 ], [ "virginica", 6, 2.2, 5, 1.5 ], [ "virginica", 6.9, 3.2, 5.7, 2.3 ], [ "virginica", 5.6, 2.8, 4.9, 2 ], [ "virginica", 7.7, 2.8, 6.7, 2 ], [ "virginica", 6.3, 2.7, 4.9, 1.8 ], [ "virginica", 6.7, 3.3, 5.7, 2.1 ], [ "virginica", 7.2, 3.2, 6, 1.8 ], [ "virginica", 6.2, 2.8, 4.8, 1.8 ], [ "virginica", 6.1, 3, 4.9, 1.8 ], [ "virginica", 6.4, 2.8, 5.6, 2.1 ], [ "virginica", 7.2, 3, 5.8, 1.6 ], [ "virginica", 7.4, 2.8, 6.1, 1.9 ], [ "virginica", 7.9, 3.8, 6.4, 2 ], [ "virginica", 6.4, 2.8, 5.6, 2.2 ], [ "virginica", 6.3, 2.8, 5.1, 1.5 ], [ "virginica", 6.1, 2.6, 5.6, 1.4 ], [ "virginica", 7.7, 3, 6.1, 2.3 ], [ "virginica", 6.3, 3.4, 5.6, 2.4 ], [ "virginica", 6.4, 3.1, 5.5, 1.8 ], [ "virginica", 6, 3, 4.8, 1.8 ], [ "virginica", 6.9, 3.1, 5.4, 2.1 ], [ "virginica", 6.7, 3.1, 5.6, 2.4 ], [ "virginica", 6.9, 3.1, 5.1, 2.3 ], [ "virginica", 5.8, 2.7, 5.1, 1.9 ], [ "virginica", 6.8, 3.2, 5.9, 2.3 ], [ "virginica", 6.7, 3.3, 5.7, 2.5 ], [ "virginica", 6.7, 3, 5.2, 2.3 ], [ "virginica", 6.3, 2.5, 5, 1.9 ], [ "virginica", 6.5, 3, 5.2, 2 ], [ "virginica", 6.2, 3.4, 5.4, 2.3 ], [ "virginica", 5.9, 3, 5.1, 1.8 ], [ "setosa", 5.1, 3.5, 1.4, 0.2 ], [ "setosa", 4.9, 3, 1.4, 0.2 ], [ "setosa", 4.7, 3.2, 1.3, 0.2 ], [ "setosa", 4.6, 3.1, 1.5, 0.2 ], [ "setosa", 5, 3.6, 1.4, 0.2 ], [ "setosa", 5.4, 3.9, 1.7, 0.4 ], [ "setosa", 4.6, 3.4, 1.4, 0.3 ], [ "setosa", 5, 3.4, 1.5, 0.2 ], [ "setosa", 4.4, 2.9, 1.4, 0.2 ], [ "setosa", 4.9, 3.1, 1.5, 0.1 ], [ "setosa", 5.4, 3.7, 1.5, 0.2 ], [ "setosa", 4.8, 3.4, 1.6, 0.2 ], [ "setosa", 4.8, 3, 1.4, 0.1 ], [ "setosa", 4.3, 3, 1.1, 0.1 ], [ "setosa", 5.8, 4, 1.2, 0.2 ], [ "setosa", 5.7, 4.4, 1.5, 0.4 ], [ "setosa", 5.4, 3.9, 1.3, 0.4 ], [ "setosa", 5.1, 3.5, 1.4, 0.3 ], [ "setosa", 5.7, 3.8, 1.7, 0.3 ], [ "setosa", 5.1, 3.8, 1.5, 0.3 ], [ "setosa", 5.4, 3.4, 1.7, 0.2 ], [ "setosa", 5.1, 3.7, 1.5, 0.4 ], [ "setosa", 4.6, 3.6, 1, 0.2 ], [ "setosa", 5.1, 3.3, 1.7, 0.5 ], [ "setosa", 4.8, 3.4, 1.9, 0.2 ], [ "setosa", 5, 3, 1.6, 0.2 ], [ "setosa", 5, 3.4, 1.6, 0.4 ], [ "setosa", 5.2, 3.5, 1.5, 0.2 ], [ "setosa", 5.2, 3.4, 1.4, 0.2 ], [ "setosa", 4.7, 3.2, 1.6, 0.2 ], [ "setosa", 4.8, 3.1, 1.6, 0.2 ], [ "setosa", 5.4, 3.4, 1.5, 0.4 ], [ "setosa", 5.2, 4.1, 1.5, 0.1 ], [ "setosa", 5.5, 4.2, 1.4, 0.2 ], [ "setosa", 4.9, 3.1, 1.5, 0.2 ], [ "setosa", 5, 3.2, 1.2, 0.2 ], [ "setosa", 5.5, 3.5, 1.3, 0.2 ], [ "setosa", 4.9, 3.6, 1.4, 0.1 ], [ "setosa", 4.4, 3, 1.3, 0.2 ], [ "setosa", 5.1, 3.4, 1.5, 0.2 ], [ "setosa", 5, 3.5, 1.3, 0.3 ], [ "setosa", 4.5, 2.3, 1.3, 0.3 ], [ "setosa", 4.4, 3.2, 1.3, 0.2 ], [ "setosa", 5, 3.5, 1.6, 0.6 ], [ "setosa", 5.1, 3.8, 1.9, 0.4 ], [ "setosa", 4.8, 3, 1.4, 0.3 ], [ "setosa", 5.1, 3.8, 1.6, 0.2 ], [ "setosa", 4.6, 3.2, 1.4, 0.2 ], [ "setosa", 5.3, 3.7, 1.5, 0.2 ], [ "setosa", 5, 3.3, 1.4, 0.2 ] ];3b:Td18,// S&P 500 as of January 1st (2023 estimated) (https://www.multpl.com/s-p-500-historical-prices/table/by-year). dataStocks = [ [ 1871, 4.44 ], [ 1872, 4.86 ], [ 1873, 5.11 ], [ 1874, 4.66 ], [ 1875, 4.54 ], [ 1876, 4.46 ], [ 1877, 3.55 ], [ 1878, 3.25 ], [ 1879, 3.58 ], [ 1880, 5.11 ], [ 1881, 6.19 ], [ 1882, 5.92 ], [ 1883, 5.81 ], [ 1884, 5.18 ], [ 1885, 4.24 ], [ 1886, 5.20 ], [ 1887, 5.58 ], [ 1888, 5.31 ], [ 1889, 5.24 ], [ 1890, 5.38 ], [ 1891, 4.84 ], [ 1892, 5.51 ], [ 1893, 5.61 ], [ 1894, 4.32 ], [ 1895, 4.25 ], [ 1896, 4.27 ], [ 1897, 4.22 ], [ 1898, 4.88 ], [ 1899, 6.08 ], [ 1900, 6.10 ], [ 1901, 7.07 ], [ 1902, 8.12 ], [ 1903, 8.46 ], [ 1904, 6.68 ], [ 1905, 8.43 ], [ 1906, 9.87 ], [ 1907, 9.56 ], [ 1908, 6.85 ], [ 1909, 9.06 ], [ 1910, 10.08 ], [ 1911, 9.27 ], [ 1912, 9.12 ], [ 1913, 9.30 ], [ 1914, 8.37 ], [ 1915, 7.48 ], [ 1916, 9.33 ], [ 1917, 9.57 ], [ 1918, 7.21 ], [ 1919, 7.85 ], [ 1920, 8.83 ], [ 1921, 7.11 ], [ 1922, 7.30 ], [ 1923, 8.90 ], [ 1924, 8.83 ], [ 1925, 10.58 ], [ 1926, 12.65 ], [ 1927, 13.40 ], [ 1928, 17.53 ], [ 1929, 24.86 ], [ 1930, 21.71 ], [ 1931, 15.98 ], [ 1932, 8.30 ], [ 1933, 7.09 ], [ 1934, 10.54 ], [ 1935, 9.26 ], [ 1936, 13.76 ], [ 1937, 17.59 ], [ 1938, 11.31 ], [ 1939, 12.50 ], [ 1940, 12.30 ], [ 1941, 10.55 ], [ 1942, 8.93 ], [ 1943, 10.09 ], [ 1944, 11.85 ], [ 1945, 13.49 ], [ 1946, 18.02 ], [ 1947, 15.21 ], [ 1948, 14.83 ], [ 1949, 15.36 ], [ 1950, 16.88 ], [ 1951, 21.21 ], [ 1952, 24.19 ], [ 1953, 26.18 ], [ 1954, 25.46 ], [ 1955, 35.60 ], [ 1956, 44.15 ], [ 1957, 45.43 ], [ 1958, 41.12 ], [ 1959, 55.62 ], [ 1960, 58.03 ], [ 1961, 59.72 ], [ 1962, 69.07 ], [ 1963, 65.06 ], [ 1964, 76.45 ], [ 1965, 86.12 ], [ 1966, 93.32 ], [ 1967, 84.45 ], [ 1968, 95.04 ], [ 1969, 102.00 ], [ 1970, 90.31 ], [ 1971, 93.49 ], [ 1972, 103.30 ], [ 1973, 118.40 ], [ 1974, 96.11 ], [ 1975, 72.56 ], [ 1976, 96.86 ], [ 1977, 103.80 ], [ 1978, 90.25 ], [ 1979, 99.71 ], [ 1980, 110.90 ], [ 1981, 133.00 ], [ 1982, 117.30 ], [ 1983, 144.30 ], [ 1984, 166.40 ], [ 1985, 171.60 ], [ 1986, 208.20 ], [ 1987, 264.50 ], [ 1988, 250.50 ], [ 1989, 285.40 ], [ 1990, 339.97 ], [ 1991, 325.49 ], [ 1992, 416.08 ], [ 1993, 435.23 ], [ 1994, 472.99 ], [ 1995, 465.25 ], [ 1996, 614.42 ], [ 1997, 766.22 ], [ 1998, 963.36 ], [ 1999, 1248.77 ], [ 2000, 1425.59 ], [ 2001, 1335.63 ], [ 2002, 1140.21 ], [ 2003, 895.84 ], [ 2004, 1132.52 ], [ 2005, 1181.41 ], [ 2006, 1278.73 ], [ 2007, 1424.16 ], [ 2008, 1378.76 ], [ 2009, 865.58 ], [ 2010, 1123.58 ], [ 2011, 1282.62 ], [ 2012, 1300.58 ], [ 2013, 1480.40 ], [ 2014, 1822.36 ], [ 2015, 2028.18 ], [ 2016, 1918.60 ], [ 2017, 2275.12 ], [ 2018, 2789.80 ], [ 2019, 2607.39 ], [ 2020, 3278.20 ], [ 2021, 3793.75 ], [ 2022, 4573.82 ], [ 2023, 4000 ] ];3c:T636,

Examples

\n In one dimension, the Zoom Bar is a familiar part of the Overview Plus Detail pattern (Tidwell 2006) (Cockburn et. al., 2008). Drag the handles on the ends of the Zoom Bar to zoom in or out; drag the \"thumb\" in the middle to pan the graph.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":339,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"

\nZoom Bars were originally used in two dimensions (Jog, 1995). In the scatter plot below, Zoom Bars are displayed along the axes when the user hovers over the plot.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"

\n In higher dimensions, it helps to decorate the range sliders with histograms. This mitigates the usability problem of applying a linear control to a non-linear distribution (Willett, 2007). AirBnB, which supports multi-dimensional queries, has open-sourced a nice example:\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"

User Interface

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":310,"value":"

Implementation

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":306,"value":"

\nThis project uses React, Material-UI, and d3, and extends Fil's X-Y Zoom.\n

\nCode shared on GitHub implements the Zoom Bar as a separate React component.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"// Graph \"superclass\".\nGraph = new Object();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"/**\n * Width of scroll bar, in pixels.\n *\n * @const {number}\n */\nGraph.scrollSize = 15;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"/**\n * Stores whether this graph displays zooming controls in the X dimension.\n *\n * @type {Map} references keys and boolean values\n */\nGraph.isXZooming = new Map();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"/**\n * Stores whether this graph displays zooming controls in the Y dimension.\n *\n * @type {Map} references keys and boolean values\n */\nGraph.isYZooming = new Map();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"/**\n * Down event location.\n *\n * @type {EventLocation}\n */\nGraph.downLocation = { x: 0, y: 0, xDomain: [], yDomain: [], isX: false, isY: false, isMin: false, isMax: false };","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"/**\n * Adjusts scale domain to be within original domain.\n *\n * @param {D3Scale} scale scale\n * @param {number[]} domain0 original domain\n */\nGraph.clampDomain = ( scale, domain0 ) => {\n const domain = scale.domain().concat();\n if( domain[ 1 ] > domain[ 0 ] + domain0[ 1 ] - domain0[ 0 ]) {\n domain[ 1 ] = domain[ 0 ] + domain0[ 1 ] - domain0[ 0 ];\n }\n if( domain[ 0 ] < domain0[ 0 ]) {\n domain[ 1 ] += domain0[ 0 ] - domain[ 0 ];\n domain[ 0 ] = domain0[ 0 ];\n } else if( domain[ 1 ] > domain0[ 1 ]) {\n domain[ 0 ] += domain0[ 1 ] - domain[ 1 ];\n domain[ 1 ] = domain0[ 1 ];\n }\n scale.domain( domain );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"\npageAnalytics = {\n await require(`https://www.googletagmanager.com/gtag/js?id=G-MD3V9XR8HN`).catch(() => {});\n const dataLayer = window.dataLayer = window.dataLayer || [];\n const location = html``;\n gtag('js', new Date());\n gtag('config', 'G-MD3V9XR8HN', {\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$3c","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 31:"$30:body" 2c:E{"digest":"NEXT_REDIRECT;replace;/@heman/zooming-usability;307;"}

Further Reading

Examples

User Interface

Implementation