Zoom/Pan + Wheel with viewBox

.block

license: mit

README.md

Notes

• There are two separate SVG elements on the page:

  • main (for the main SVG)
  • mini (for the minimap)

• Each SVG lies within a div, named after its purpose (div#main and div#mini)

• The main SVG is nested within another SVG (svg.aperture)

  • This allows us to have a "magnifying glass"
  • The layout is then something like this:
    • section.vis -> div#main -> svg.aperture -> svg#butterfly
    • section.vis -> div#mini -> svg

• Use CSS to size the SVGs appropriately on the page

  • Here I'm using flexbox, and setting the main SVG to be 3 times the size of the minimap

• About widths and heights:

  • The butterfly SVG from Bill White's examples has width and height attributes
    • I've rounded those up to round integer values in svg#butterfly
    • These values are copied into the containing SVG (svg.aperture), so that the viewport of that main svg is defined.
      • This holds the aspect ratio of svg.aperture constant on the page, while its viewBox string changes (this method uses that viewBox string to zoom and translate).
      • CSS is additionally used to size the SVG itself to fit on the screen with a 3:1 ratio vs the minimap
        • Using flex-grow: 3 for the main SVG and flex-grow: 1 for the minimap will ensure that the main is 3 times as large as the minimap on screen. The two SVGs might still have identical width and height attributes.
    • The rounded up width and height are used to define the viewBox attribute the magnifying SVG (svg.aperture)
      • viewBox is the string of the form "<min-x> <min-y> width height" so we get "0 0 400 250"
    • The same viewBox is also applied to the minimap SVG
  • The magnifying glass effect on svg.aperture is due to its preserveAspectRatio attribute being none
    • This attribute value means that svg#butterfly (which is contained within svg.aperture) will stretch to fit its parent (svg.aperture), regardless of width:height ratio

• Rendering the SVG twice

  • The butterfly svg has an id attribute. This is required for this technique to work.
  • The minimap svg re-renders the main svg via the <use xlink:href="#butterfly">
    • This means that whatever dynamic behaviour your main SVG has will reflect in the minimap
      • see the Josquin ribbon for a working example

• Zoom behavior

  • a single d3.zoom object is applied to both: svg.aperture and the minimap SVG.
    • The minimap's zoom callback calls the main svg's zoom callback, which then:
      • calculates the new viewBox values based on the zoom.transform's x, y and k values
        • x and y are the initial coordinates and the initial viewBox lengths are multiplied by the k-value
      • sends the viewbox dimensions as extents for brush.move()
      • manually sets the __zoom property on the minimap.
  • d3.brush is applied to the minimap SVG.
    • It doesn't call any of the zoom callbacks. Instead it:
      • sets the __zoom property for the main and minimap SVGs
      • sets the main SVGs viewBox based on the brush.extent()
  • Thus, mouse wheel events on either SVG leads to zoom
    • By storing the __zoom property on each, we ensure that both SVGs have the same zoom values at all times.

Links

• Bill White's original work
• His update using d3v4 (also works in v5)
• and the ensuing discussion
• A most important primer on SVG coordinate systems

Built with blockbuilder.org

forked from seemantk's block: "Minimap" Zoom/Pan with viewBox

abacus.js

const main_svg = d3.select("#main svg.aperture").attr("class", "zoom")
  , mini_svg   = d3.select("#mini svg").append("g").attr("class", "zoom")
  // store the image's initial viewBox
  , viewbox = main_svg.attr("viewBox").split(' ').map(d => +d)
  , extent = [
          [viewbox[0], viewbox[1]]
        , [(viewbox[2] - viewbox[0]), (viewbox[3] - viewbox[1])]
      ]
  , brush  = d3.brush()
        .extent(extent)
        .on("brush", brushed)
  , zoom = d3.zoom().scaleExtent([0.05, 1]).on("zoom", zoomed)
;

// Apply the brush to the minimap, and also apply the zoom behavior here
mini_svg
    .call(brush)
    .call(brush.move, brush.extent())
    .call(zoom)
;
// Apply the zoom behavior to the main svg
main_svg
    .call(zoom)
;


function brushed() {
    // Ignore brush-via-zoom
    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return;

    let sel = d3.event.selection
      , vb = sel
            ? [sel[0][0], sel[0][1], (sel[1][0] - sel[0][0]), (sel[1][1] - sel[0][1])]
            : viewbox
      , k = vb[3] / viewbox[3]
      , t = d3.zoomIdentity.translate(vb[0], vb[1]).scale(k)
    ;
    mini_svg
        .property("__zoom", t)
    ;
    main_svg
        .attr("viewBox", vb.join(' '))
        .property("__zoom", t)
    ;
} // brushed()

function zoomed() {
    // If the zoom input was on the minimap, forward it to the main SVG
    if(this === mini_svg.node()) {
        return main_svg.call(zoom.transform, d3.event.transform);
    }

    // Ignore zoom via brush
    if(!d3.event.sourceEvent || d3.event.sourceEvent.type === "brush") return;

    // Process the zoom event on the main SVG
    let t = d3.event.transform;
    t.x = t.x < viewbox[0] ? viewbox[0] : t.x;
    t.x = t.x > viewbox[2] ? viewbox[2] : t.x;
    t.y = t.y < viewbox[1] ? viewbox[1] : t.y;
    t.y = t.y > viewbox[3] ? viewbox[3] : t.y;
    if(t.k === 1) t.x = t.y = 0;

    const vb = [t.x, t.y, viewbox[2] * t.k, viewbox[3] * t.k];

    main_svg.attr("viewBox", vb.join(' '));
    mini_svg
        .property("__zoom", t)
        .call(
              brush.move
            , [[t.x, t.y], [t.x + vb[2], t.y + vb[3]]]
          )
    ;
} // zoomed()

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
<section class="vis">
  <div id="main">
    <svg class="aperture" width="400" height="250" viewBox="0 0 400 250" preserveAspectRatio="none">
      <svg id="butterfly" width="400" height="250">
        <title>Use the mousewheel to zoom in and out.</title>
        <description>This is a slightly modified version (the addition of this metadata) of a sample that shipped with JASC's WebDraw (www.jasc.com). Generated by Jasc WebDraw PR4(tm) on 06/07/01 12:18:39</description>
        <path fill="#f67f00" d="m196.29 106.49c-8-6.501 2.35-7.011 2.25-7.251-14.25-35.5-37.23-51.17-39-52-5.46-2.56-8.1-2.32-7.13-3.61 0.96-1.29 7.27 2.75 8.13 3.36 25.25 18 39 52 39 52s1.75 1 2 0.25c10-29.5 30-45 36.75-51.25s10.3-6.86 1 0.25c-28.75 22-36.99 50.65-36.5 50.75 11.5 2.501 0.5 8.001 1 7.501 3.02-3.02 3 6 3 6s17-35.001 83.5-79.501c4.1-2.74 147.5-81 97.5 14.5-2.59 4.96-20 25-20 25s1.5 8.5-4.5 15.5c-1.03 1.2-3.5 13.001-9.5 19.501-1.69 1.84-0.02-1.58 0 0 0.5 30-24.07 29.34-22.5 29.5 9.5 1 10.86 13.33 11 13.5 5.5 6.5 3.5 8 5.5 11 10.8 16.19-0.59 15.22 1 18 4 7-0.84 9.89 0.5 12 3.5 5.5-2.58 9.01-2.5 10.5 0.5 8.5-5.16 5.4-5 9 0.5 11-3.5 6.5-6 10.5-7.5 12-10.37 7.55-11 9-3 7-7.02 5.32-8.5 7-3.5 4-7 4-8.5 5.5-7 7-10.97 2.06-12 2.5-16 7-23.5 1.34-26 1.5-7.5 0.5-6.35-0.66-8.5-2.5-31.5-27-50-66-53.5-71-1.43-2.04-4.48-13.71-3.5-11 2 5.5 1 54.5-4.5 54.5s-6-46-2.5-54.5c1.1-2.67-0.93 7.89-3.54 11-5.46 6.5-22.29 44-54.2 71-2.17 1.84-1.01 3-8.61 2.5-2.52-0.16-10.13 5.5-26.33-1.5-1.04-0.44-5.066 4.5-12.156-2.5-1.52-1.5-5.06-1.5-8.61-5.5-1.49-1.68-5.57 0-8.61-7-0.63-1.45-3.54 3-11.14-9-2.53-4-6.59 0.5-6.08-10.5 0.17-3.6-5.57-0.5-5.06-9 0.09-1.49-6.08-5-2.54-10.5 1.36-2.11-3.54-5 0.51-12 1.61-2.78-9.92-1.81 1.01-18 2.03-3 0-4.5 5.57-11 0.15-0.17 1.52-12.5 11.15-13.5 1.59-0.16-23.3 0.5-22.79-29.5 0.02-1.58 1.71 1.84 0 0-6.08-6.5-8.58-18.301-9.63-19.501-6.08-7-4.56-15.5-4.56-15.5s-17.63-20.04-20.25-25c-50.65-95.5 94.606-17.24 98.756-14.5 67.36 44.5 83.78 79.501 83.78 79.501s0.36-2.55 1-4c0.64-1.44 1.56-1.81 1.33-2z"/>
        <path d="m195.58 106.28c-8-6.501 2.34-7.021 2.25-7.251-14.25-35.5-37.23-51.17-39-52-5.46-2.56-8.1-2.32-7.14-3.61s7.28 2.75 8.14 3.36c25.25 18 39 52 39 52s1.75 1 2 0.25c10-29.5 30-45 36.75-51.25s10.3-6.86 1 0.25c-28.75 22-36.99 50.64-36.5 50.75 11.5 2.501 0.5 8.001 1 7.501 3.02-3.02 3 6 3 6s17-35.001 83.5-79.501c4.09-2.74 147.5-81 97.5 14.5-2.59 4.95-20 25-20 25s1.5 8.5-4.5 15.5c-1.03 1.2-3.5 13.001-9.5 19.501-1.69 1.84-0.03-1.58 0 0 0.5 30-24.07 29.34-22.5 29.5 9.5 1 10.85 13.33 11 13.5 5.5 6.5 3.5 8 5.5 11 10.79 16.19-0.59 15.22 1 18 4 7-0.84 9.89 0.5 12 3.5 5.5-2.59 9-2.5 10.5 0.5 8.5-5.16 5.4-5 9 0.5 11-3.5 6.5-6 10.5-7.5 12-10.38 7.55-11 9-3 7-7.03 5.32-8.5 7-3.5 4-7 4-8.5 5.5-7 7-10.97 2.05-12 2.5-16 7-23.5 1.33-26 1.5-7.5 0.5-6.35-0.66-8.5-2.5-31.5-27-50-66-53.5-71-1.43-2.05-4.49-13.71-3.5-11 2 5.5 1 54.5-4.5 54.5s-6-46-2.5-54.5c1.1-2.67-0.93 7.88-3.54 11-5.46 6.5-22.29 44-54.2 71-2.17 1.84-1.01 3-8.61 2.5-2.52-0.17-10.13 5.5-26.33-1.5-1.04-0.45-5.066 4.5-12.156-2.5-1.52-1.5-5.06-1.5-8.61-5.5-1.49-1.68-5.57 0-8.61-7-0.63-1.45-3.55 3-11.14-9-2.54-4-6.59 0.5-6.08-10.5 0.17-3.6-5.57-0.5-5.07-9 0.09-1.5-6.07-5-2.53-10.5 1.36-2.11-3.54-5 0.51-12 1.61-2.78-9.92-1.81 1.01-18 2.03-3 0-4.5 5.57-11 0.15-0.17 1.52-12.5 11.15-13.5 1.59-0.16-23.3 0.5-22.8-29.5 0.03-1.58 1.72 1.84 0 0-6.07-6.5-8.58-18.301-9.62-19.501-6.08-7-4.56-15.5-4.56-15.5s-17.63-20.05-20.26-25c-50.64-95.5 94.616-17.24 98.766-14.5 67.36 44.5 83.78 79.501 83.78 79.501s0.36-2.55 1-4c0.64-1.44 1.56-1.81 1.33-2zm38.5 13.5c3.04-0.1 9.23 3.05 13 2 25.43-7.06 73.32-0.56 76.5 0.5 12 4 20-24.501-5.5-24.501-31.53 0-25-2-46-5-1.78-0.25-27.52 9.301-51.5 23.001-3.5 2-1.5 4.5 13.5 4zm-19-5c2.54 0.28 15-8.5 54-24.001 2.37-0.94 2.5-6 23.5-15.5 1.37-0.62-0.5-4 14-16 7.17-5.93-17.5-5-23-4s-19 12-19 12 15.18-12.07 10-10.5c-11.5 3.5-41.5 36.5-51.5 50.501-10 14 16.5-24.001 23-30.001s-49.5 35.501-31 37.501zm112.5-19.501c14.52 2.91 13-18.5 5.5-19.5-11.57-1.54-33.61-0.82-40 1.5-16.5 6-20.83 12.03-19.5 12.5 28.5 10 49 4.5 54 5.5zm-0.5-22c5.92 0.74 16 3 16.5-5 0.25-4.02 14 3 17 3.5 2.48 0.41-10.5-4.79-15-8-3.5-2.5-4.11-5.36-4.5-5.5-32-11.5-45.5 15.5-45.5 15.5s27.5-1 31.5-0.5zm65.5-44c-5-8-13.96-5.54-17-9-14.5-16.5-48.08 4.66-20.5 2.5 32-2.5 38.09 7.45 37.5 6.5zm-24 4c13.51 0 19.5 6 18.5 5-7-7-13-5.5-14.5-7.5-8.92-11.89-35.5 0.5-33.5 3.5s26-1 29.5-1zm-46.5 9.5c-21 5-12 12.5-9.5 12 19.43-3.88 13.88-13.04 9.5-12zm10.5-24c-9.5 1-10.14 18.31-5.5 15 7-5 15-16 5.5-15zm-25 23.5c14-5.5 3.5-8-1-7.5s-7.83 7.33-6.5 10c3 6 4.79-1.43 7.5-2.5zm44 45.5c4.5-2.5-1-8.5-5-6s0.5 8.5 5 6zm-9.5-42.5c11.77 11.77 16.5 5.5 19 4.5 8.12-3.25 17 5.5 15.5 4-7.28-7.28-12-6-13-7.5-7.61-11.42-18.96-4.18-21.5-4-7 0.5-15.69 5.41-12.5 4.5 3.5-1 11-3 12.5-1.5zm33.5-34.5c7-5.0004-2.22-6.2704-4-6.0004-6.5 1-3 11 4 6.0004zm-159 137c5.5 6.5 67 104 57.5 71.5-1.29-4.42 3.5 13.5 9 3.5 1.54-2.8 10.15-3.09-16.5-47.5-1.5-2.5-22-10.5-42.5-33-3.1-3.41-12.07 0.1-7.5 5.5zm55.5 34.5c4.5 7 15.69 30.45 16.5 34 2.5 11 9.5-1.5 11-1 13.16 4.39 3.5-7.5 2.5-10.5-9.17-27.5-30.5-25-30.5-25s-4-4.5 0.5 2.5zm-26.5 40.5c12.64 17.97 17.5 11 20 9 7.7-6.16-41.28-68.98-44.5-73-4-5-4 23.5 24.5 64zm46.5-37c6.5 5 13.74 26.07 17.5 25.5 10-1.5 4-10 6.5-8.5s7.5-1.17 6-4c-12.5-23.5-32-16-32-16s-4.5-2 2 3zm-64.5-50.5c-19.5 0 46.5 54 65.5 43.5 3.94-2.18-5-3.5-3.5-15 0.28-2.1-13.5-6-13.5-19 0-4.24-7.92-6-33-6-4.5 0 4.91-3.5-15.5-3.5zm72 45c18.27 2.03 22.61 16.18 25 14.5 28.5-20-22.73-28.16-32-27-4 0.5 2.5 12 7 12.5zm-69-49.5c3.5 2.5 15.5 12.5 54 4 1.47-0.32-29-0.5-33-1.5s-23.37-4.19-21-2.5zm66.5 34.5c37.5 9 27.6 2.74 29 2 8.5-4.5-0.79-5.39 0.5-7 4.21-5.26-7-8.5-30.5-11-5.56-0.59-16.58-3.35-17-2.5-3.5 7 13.21 17.35 18 18.5zm6-16.5c32.5 5.5 12.11-4.69 12.5-5 11.5-9-26.5-9-26.5-9s-16.33 3.88-16 4.5c4.5 8.5 26.03 8.83 30 9.5zm-61.5 71.5s-29-46.5-23-65.5c1.21-3.81-13-22.5-6.5 9 0.1 0.49-1.23-6.69-3.5-10s-5.44-2.22-3.5 7.5c4.89 24.43 36.5 59 36.5 59zm39.5-170c7.5-2 4-4.5-0.5-5.5s-7 7.5 0.5 5.5zm-101.72 65.501c-24.28-13.7-50.36-23.251-52.17-23.001-21.27 3-14.65 5-46.586 5-25.83 0-17.73 28.501-5.57 24.501 3.22-1.06 51.726-7.56 77.486-0.5 3.81 1.05 10.09-2.1 13.17-2 15.19 0.5 17.22-2 13.67-4zm-25.83-38.501c6.58 6 33.43 44.001 23.3 30.001-10.13-14.001-40.52-47.001-52.17-50.501-5.24-1.57 10.13 10.5 10.13 10.5s-13.67-11-19.25-12c-5.57-1-30.546-1.93-23.286 4 14.676 12 12.786 15.38 14.176 16 21.27 9.5 21.4 14.56 23.8 15.5 39.51 15.501 52.13 24.281 54.7 24.001 18.74-2-37.98-43.501-31.4-37.501zm-27.86 12.5c1.36-0.47-3.03-6.5-19.75-12.5-6.466-2.32-28.796-3.04-40.516-1.5-7.59 1-9.13 22.41 5.57 19.5 5.07-1 25.83 4.5 54.696-5.5zm-22.28-16s-13.676-27-46.086-15.5c-0.39 0.14-1.01 3-4.56 5.5-4.55 3.21-17.7 8.41-15.19 8 3.04-0.5 16.96-7.52 17.22-3.5 0.5 8 10.72 5.74 16.71 5 4.05-0.5 31.906 0.5 31.906 0.5zm-60.266-51c27.93 2.16-6.08-19-20.77-2.5-3.08 3.46-12.15 1-17.22 9-0.6003 0.95 5.57-9 37.99-6.5zm16.21 11.5c2.02-3-24.9-15.39-33.94-3.5-1.52 2-7.6 0.5-14.69 7.5-1.0103 1 5.06-5 18.74-5 3.55 0 27.86 4 29.89 1zm17.22 8.5c21.27 5 12.15 12.5 9.62 12-19.68-3.88-14.06-13.04-9.62-12zm-5.07-9c4.7 3.31 4.05-14-5.57-15s-1.52 10 5.57 15zm27.35 11c1.346-2.67-2.03-9.5-6.58-10-4.56-0.5-15.2 2-1.02 7.5 2.75 1.07 4.56 8.5 7.6 2.5zm-47.1 37c-4.05-2.5-9.63 3.5-5.07 6s9.12-3.5 5.07-6zm17.22-35c3.23 0.91-5.57-4-12.66-4.5-2.58-0.18-14.07-7.42-21.78 4-1.02 1.5-5.8 0.22-13.17 7.5-1.52 1.5 7.47-7.25 15.7-4 2.53 1 7.33 7.27 19.25-4.5 1.52-1.5 9.11 0.5 12.66 1.5zm-42.55-42c-1.8-0.27-11.14 1-4.05 6.0004 7.09 5 10.64-5.0004 4.05-6.0004zm149.42 137.5c-20.77 22.5-41.54 30.5-43.06 33-26.99 44.41-18.27 44.7-16.71 47.5 5.57 10 10.43-7.92 9.12-3.5-9.63 32.5 52.67-65 58.24-71.5 4.63-5.4-4.45-8.91-7.59-5.5zm-48.12 37.5s-21.61-2.5-30.896 25c-1.01 3-10.79 14.89 2.54 10.5 1.516-0.5 8.606 12 11.136 1 0.82-3.55 12.16-27 16.71-34 4.56-7 0.51-2.5 0.51-2.5zm51.15-21c-3.25 4.02-52.87 66.84-45.07 73 2.53 2 7.45 8.97 20.26-9 28.87-40.5 28.87-69 24.81-64zm-69.89 24s-19.746-7.5-32.406 16c-1.53 2.83 3.54 5.5 6.07 4 2.54-1.5-3.54 7 6.59 8.5 3.81 0.57 11.136-20.5 17.716-25.5 6.59-5 2.03-3 2.03-3zm47.61-44c-25.41 0-33.43 1.76-33.43 6 0 13-13.95 16.9-13.67 19 1.52 11.5-7.54 12.82-3.55 15 19.25 10.5 86.1-43.5 66.35-43.5-20.67 0-11.14 3.5-15.7 3.5zm-50.14 29c-9.386-1.16-61.286 7-32.416 27 2.42 1.68 6.82-12.47 25.33-14.5 4.556-0.5 11.136-12 7.086-12.5zm41.53-34.5c-4.05 1-34.91 1.18-33.43 1.5 39 8.5 51.16-1.5 54.7-4 2.4-1.69-17.22 1.5-21.27 2.5zm-27.86 13.5c-0.43-0.85-11.59 1.91-17.22 2.5-23.796 2.5-35.156 5.74-30.886 11 1.3 1.61-8.11 2.5 0.5 7 1.42 0.74-8.61 7 29.376-2 4.85-1.15 21.78-11.5 18.23-18.5zm6.08-7.5c0.34-0.62-16.21-4.5-16.21-4.5s-38.486 0-26.836 9c0.4 0.31-20.26 10.5 12.66 5 4.03-0.67 25.826-1 30.386-9.5zm68.88 22c1.97-9.72-1.25-10.81-3.54-7.5-2.3 3.31-3.65 10.49-3.55 10 6.59-31.5-7.8-12.81-6.58-9 6.07 19-23.3 65.5-23.3 65.5s32.02-34.57 36.97-59zm-76.48-116.5c-4.56 1-8.1 3.5-0.5 5.5 7.59 2 5.06-6.5 0.5-5.5z"/>
        <path fill="#fff6e3" d="m355.69 52.389c-4.46 0.56-8.5 1-9.5-4.5s1.5-7.5 9-5.5 12.5 8.5 0.5 10zm-36.5 3.5s-18.72 4.42-1.5-8.5c8-6 8.5-1 9 2 0.75 4.47-7.5 6.5-7.5 6.5zm57-40.5c-8.35-1.67-8-6.5004 1-8.5004 1.47-0.32 4 9.5004-1 8.5004zm5 0c2.5-0.5 6.5 0.5 7 4s-3.5 5.5-6 3.5-3.5-7-1-7.5zm-6 11c2.5-1 10 0.5 9.5 3.5s-6.5 3.5-9 2-3-4.5-0.5-5.5zm1 17.5c3-2.5 6.5 0 7.5 1.5s-4 3.5-5.5 4-5-3-2-5.5zm11.5-37s4 0 3 1.5-4 1.5-4 1.5l1-3zm6 9.0004s4 0 3 1.5-4 1.5-4 1.5l1-3zm-32.5 48s5 2 4 3.5-2.5 4-6 0.5 2-4 2-4zm-13.5 19.5c3-2.5 6.5 0 7.5 1.5s-4 3.5-5.5 4-5-3-2-5.5zm2-10c3-2.5 5.5 1 6.5 2.5s-3 2.5-4.5 3-5-3-2-5.5zm-17-33.5c-3.57 0.2-9.5-1.5-0.5-7.5 8.32-5.54 8-4 8.5-1 0.75 4.47-4.43 8.31-8 8.5zm-30.5 9s-3.5-3 3.5-9c7.6-6.5 6.5-4 7-1 0.75 4.47-10.5 10-10.5 10zm31-26.5s6-1 5 0.5-3.5 7-7 3.5 2-4 2-4zm33.5 30.5c1.38 0 2.5 1.13 2.5 2.5 0 1.38-1.12 2.5-2.5 2.5-1.37 0-2.5-1.12-2.5-2.5 0-1.37 1.13-2.5 2.5-2.5zm-5 24.5c1.38 0 2.5 1.13 2.5 2.5 0 1.38-1.12 2.5-2.5 2.5-1.37 0-2.5-1.12-2.5-2.5 0-1.37 1.13-2.5 2.5-2.5zm-4 10c1.38 0 2.5 1.13 2.5 2.5 0 1.38-1.12 2.5-2.5 2.5-1.37 0-2.5-1.12-2.5-2.5 0-1.37 1.13-2.5 2.5-2.5zm-16 6.5c1.38 0 2.5 1.13 2.5 2.5 0 1.38-1.12 2.5-2.5 2.5-1.37 0-2.5-1.12-2.5-2.5 0-1.37 1.13-2.5 2.5-2.5zm8.5 1.5c1.38 0 4 2.13 4 3.5 0 1.381-2.62 1.501-4 1.501-1.37 0-2.5-1.121-2.5-2.501 0-1.37 1.13-2.5 2.5-2.5zm24-39c1.38 0 2.5 1.13 2.5 2.5 0 1.38-1.12 2.5-2.5 2.5-1.37 0-2.5-1.12-2.5-2.5 0-1.37 1.13-2.5 2.5-2.5zm13.5-23.5c1.38 0 2.5 1.13 2.5 2.5 0 1.38-1.12 2.5-2.5 2.5-1.37 0-2.5-1.12-2.5-2.5 0-1.37 1.13-2.5 2.5-2.5zm-95 8c2.32 0.93 13.5-6.5 10-7.5s-12.5 6.5-10 7.5zm19-13c2.5 0.5 10-2.5 6.5-3.5s-9.14 2.98-6.5 3.5zm-48 30.5c5.5-3 21-10.5 13.5-9.5s-18.22 12.08-13.5 9.5zm92.5-49.5c2.5 0.5 10-2.5 6.5-3.5s-9.14 2.98-6.5 3.5zm-72 36.5c2.5 0.5 7.5-2 4-3s-6.64 2.48-4 3zm63 62.501c1.38 0 2.5 1.63 2.5 3 0 1.38-0.62 1.5-2 1.5-1.37 0-2.5-1.12-2.5-2.5 0-1.37 0.63-2 2-2zm-7.5-0.5c1.38 0 3.5 0.63 3.5 2 0 1.38-2.62 1-4 1-1.37 0-2.5-1.12-2.5-2.5 0-1.37 1.63-0.5 3-0.5zm2 14.5c1.38 0 4 2.13 4 3.5 0 1.38-2.62 1.5-4 1.5-1.37 0-2.5-1.12-2.5-2.5 0-1.37 1.13-2.5 2.5-2.5zm-12 20.5c4-1 4 1 5 4.5s8.07 14.88-3.5 1c-2.5-3-5.5-4.5-1.5-5.5zm12 12c1.38 0 2.5 1.13 2.5 2.5 0 1.38-1.12 2.5-2.5 2.5-1.37 0-2.5-1.12-2.5-2.5 0-1.37 1.13-2.5 2.5-2.5zm2.5 9c1.38 0 2.5 1.13 2.5 2.5 0 1.38-1.12 2.5-2.5 2.5-1.37 0-2.5-1.12-2.5-2.5 0-1.37 1.13-2.5 2.5-2.5zm0.17 9c1.37 0 3.33 3.13 3.33 4.5 0 1.38-1.12 2.5-2.5 2.5-1.37 0-4.16-1.62-4.16-3 0-1.37 1.95-4 3.33-4zm1.33 16c1.38 0 1 0.13 1 1.5 0 1.38-0.12 0.5-1.5 0.5-1.37 0-1 0.88-1-0.5 0-1.37 0.13-1.5 1.5-1.5zm-13.5-33c1.38 0 1 0.13 1 1.5 0 1.38-0.12 0.5-1.5 0.5-1.37 0-1 0.88-1-0.5 0-1.37 0.13-1.5 1.5-1.5zm3 12.5c1.38 0 1 0.13 1 1.5 0 1.38 0.21 5-1.16 5-1.38 0-1.34-3.62-1.34-5 0-1.37 0.13-1.5 1.5-1.5zm3.5 14c1.38 0 1 0.13 1 1.5 0 1.38-0.12 0.5-1.5 0.5-1.37 0-1 0.88-1-0.5 0-1.37 0.13-1.5 1.5-1.5zm-6.16 13.5c1.37 0 1.16 0.13 1.16 1.5 0 1.38-0.29 0.5-1.66 0.5-1.38 0-0.84 0.88-0.84-0.5 0-1.37-0.04-1.5 1.34-1.5zm8.83 3.34c1.37 0 2.67 1.95 2.67 3.33 0 1.37-2.96 3.83-4.34 3.83-1.37 0-1 0.88-1-0.5 0-1.37 1.29-6.66 2.67-6.66zm-5.67 14.33c1.38 0 3.67-0.38 3.67 1 0 1.37-3.29 3.83-4.67 3.83-1.37 0-1 0.88-1-0.5 0-1.37 0.63-4.33 2-4.33zm-8.5-7.17c1.38 0 1 0.13 1 1.5 0 1.38-0.12 0.5-1.5 0.5-1.37 0-1 0.88-1-0.5 0-1.37 0.13-1.5 1.5-1.5zm-2.5 19.17c1.38 0 2.67 1.62 2.67 3 0 1.37-2.29 0.83-3.67 0.83-1.37 0-1 0.88-1-0.5 0-1.37 0.63-3.33 2-3.33zm-8.33 5.33c1.37 0 0.67 1.63 0.67 3 0 1.38-4.96 4.5-6.34 4.5-1.37 0-1 0.88-1-0.5 0-1.37 5.29-7 6.67-7zm0.83-16c1.38 0 1 0.13 1 1.5 0 1.38-0.12 0.5-1.5 0.5-1.37 0-1 0.88-1-0.5 0-1.37 0.13-1.5 1.5-1.5zm-12 8.5c1.38 0 5.84 1.79 5.84 3.17 0 1.37-5.63 3.67-7 3.67-1.38 0-2.34-2.3-2.34-3.67 0-1.38 2.13-3.17 3.5-3.17zm-13 4.5c1.38 0 1 0.13 1 1.5 0 1.38-0.12 0.5-1.5 0.5-1.37 0-1 0.88-1-0.5 0-1.37 0.13-1.5 1.5-1.5zm8 12c1.38 0 1 0.13 1 1.5 0 1.38-0.12 0.5-1.5 0.5-1.37 0-1 0.88-1-0.5 0-1.37 0.13-1.5 1.5-1.5zm-3 1c1.38 0 1 0.13 1 1.5 0 1.38-0.12 0.5-1.5 0.5-1.37 0-1 0.88-1-0.5 0-1.37 0.13-1.5 1.5-1.5zm-11.5 0.34c0.92 0 2 1.41 2 2.33s-0.08 0.33-1 0.33c-0.91 0-3.33 1.25-3.33 0.34 0-0.92 1.42-3 2.33-3zm3 2.66c0.92 0 0.67 0.09 0.67 1 0 0.92-0.08 0.34-1 0.34s-0.67 0.58-0.67-0.34c0-0.91 0.09-1 1-1zm-5.33-13c0.92 0 2.33 3.42 2.33 4.34 0 0.91-3.08 0.66-4 0.66-0.91 0-2.33-2.75-2.33-3.66 0-0.92 3.08-1.34 4-1.34zm-11.33 11c1.37 0 1.16 0.13 1.16 1.5 0 1.38-0.29 0.5-1.66 0.5-1.38 0-0.84 0.88-0.84-0.5 0-1.37-0.04-1.5 1.34-1.5zm-3-7c1.37 0-0.67 3.29-0.67 4.67 0 1.37-4.46 1.83-5.83 1.83-1.38 0 1.16-1.79 1.16-3.16 0-1.38 3.96-3.34 5.34-3.34zm-224.84-182.83c4.47 0.56 8.5 1 9.5-4.5s-1.5-7.5-9-5.5-12.5 8.5-0.5 10zm36.5 3.5s18.72 4.41 1.5-8.5c-8-6-8.5-1-9 2-0.74 4.47 7.5 6.5 7.5 6.5zm-57-40.5c8.35-1.67 8-6.5004-1-8.5004-1.46-0.33-4 9.5004 1 8.5004zm-5 0c-2.5-0.5-6.5 0.5-7 4s3.5 5.5 6 3.5 3.5-7 1-7.5zm6 11c-2.5-1-10 0.5-9.5 3.5s6.5 3.5 9 2 3-4.5 0.5-5.5zm-1 17.5c-3-2.5-6.5 0-7.5 1.5s4 3.5 5.5 4 5-3 2-5.5zm-11.5-37s-4.0003 0-3.0003 1.5c1.0003 1.5 4.0003 1.5 4.0003 1.5l-1-3zm-6.0003 9.0004s-4 0-3 1.5 4 1.5 4 1.5l-1-3zm32.5 48s-5 2-4 3.5 2.5 4 6 0.5-2-4-2-4zm13.5 19.5c-3-2.5-6.5 0-7.5 1.5s4 3.5 5.5 4 5-3 2-5.5zm-2-10c-3-2.5-5.5 1-6.5 2.5s3 2.5 4.5 3 5-3 2-5.5zm17-33.5c3.57 0.2 9.5-1.5 0.5-7.5-8.32-5.55-8-4-8.5-1-0.74 4.47 4.43 8.3 8 8.5zm30.5 9s3.496-3-3.5-9c-7.59-6.51-6.5-4-7-1-0.74 4.47 10.5 10 10.5 10zm-31-26.5s-6-1-5 0.5 3.5 7 7 3.5-2-4-2-4zm-33.5 30.5c-1.37 0-2.5 1.13-2.5 2.5 0 1.38 1.13 2.5 2.5 2.5 1.38 0 2.5-1.12 2.5-2.5 0-1.37-1.12-2.5-2.5-2.5zm5 24.5c-1.37 0-2.5 1.13-2.5 2.5 0 1.38 1.13 2.5 2.5 2.5 1.38 0 2.5-1.12 2.5-2.5 0-1.37-1.12-2.5-2.5-2.5zm4 10c-1.37 0-2.5 1.13-2.5 2.5 0 1.38 1.13 2.5 2.5 2.5 1.38 0 2.5-1.12 2.5-2.5 0-1.37-1.12-2.5-2.5-2.5zm16 6.5c-1.37 0-2.5 1.13-2.5 2.5 0 1.38 1.13 2.5 2.5 2.5 1.38 0 2.5-1.12 2.5-2.5 0-1.37-1.12-2.5-2.5-2.5zm-8.5 1.5c-1.37 0-4 2.13-4 3.5 0 1.38 2.63 1.5 4 1.5 1.38 0 2.5-1.12 2.5-2.5 0-1.37-1.12-2.5-2.5-2.5zm-24-39c-1.37 0-2.5 1.13-2.5 2.5 0 1.38 1.13 2.5 2.5 2.5 1.38 0 2.5-1.12 2.5-2.5 0-1.37-1.12-2.5-2.5-2.5zm-13.5-23.5c-1.37 0-2.5003 1.13-2.5003 2.5 0 1.38 1.1303 2.5 2.5003 2.5 1.38 0 2.5-1.12 2.5-2.5 0-1.37-1.12-2.5-2.5-2.5zm94.996 8c-2.32 0.93-13.496-6.5-9.996-7.5 3.496-1 12.496 6.5 9.996 7.5zm-18.996-13c-2.5 0.5-10-2.5-6.5-3.5s9.14 2.97 6.5 3.5zm47.996 30.5c-5.5-3-21-10.5-13.5-9.5s18.23 12.08 13.5 9.5zm-92.496-49.5c-2.5 0.5-10-2.5-6.5-3.5s9.14 2.97 6.5 3.5zm71.996 36.5c-2.5 0.5-7.5-2-4-3s6.64 2.47 4 3zm-62.996 62.501c-1.37 0-2.5 1.63-2.5 3 0 1.38 0.63 1.5 2 1.5 1.38 0 2.5-1.12 2.5-2.5 0-1.37-0.62-2-2-2zm7.5-0.5c-1.37 0-3.5 0.63-3.5 2 0 1.38 2.63 1 4 1 1.38 0 2.5-1.12 2.5-2.5 0-1.37-1.62-0.5-3-0.5zm-2 14.5c-1.37 0-4 2.13-4 3.5 0 1.38 2.63 1.5 4 1.5 1.38 0 2.5-1.12 2.5-2.5 0-1.37-1.12-2.5-2.5-2.5zm12 20.5c-4-1-4 1-5 4.5s-8.06 14.88 3.5 1c2.5-3 5.5-4.5 1.5-5.5zm-12 12c-1.37 0-2.5 1.12-2.5 2.5 0 1.37 1.13 2.5 2.5 2.5 1.38 0 2.5-1.13 2.5-2.5 0-1.38-1.12-2.5-2.5-2.5zm-2.5 9c-1.37 0-2.5 1.12-2.5 2.5 0 1.37 1.13 2.5 2.5 2.5 1.38 0 2.5-1.13 2.5-2.5 0-1.38-1.12-2.5-2.5-2.5zm-0.16 9c-1.38 0-3.34 3.12-3.34 4.5 0 1.37 1.13 2.5 2.5 2.5 1.38 0 4.17-1.63 4.17-3 0-1.38-1.96-4-3.33-4zm-1.34 16c-1.37 0-1 0.12-1 1.5 0 1.37 0.13 0.5 1.5 0.5 1.38 0 1 0.87 1-0.5 0-1.38-0.12-1.5-1.5-1.5zm13.5-33c-1.37 0-1 0.12-1 1.5 0 1.37 0.13 0.5 1.5 0.5 1.38 0 1 0.87 1-0.5 0-1.38-0.12-1.5-1.5-1.5zm-3 12.5c-1.37 0-1 0.12-1 1.5 0 1.37-0.2 5 1.17 5 1.38 0 1.33-3.63 1.33-5 0-1.38-0.12-1.5-1.5-1.5zm-3.5 14c-1.37 0-1 0.12-1 1.5 0 1.37 0.13 0.5 1.5 0.5 1.38 0 1 0.87 1-0.5 0-1.38-0.12-1.5-1.5-1.5zm6.17 13.5c-1.37 0-1.17 0.12-1.17 1.5 0 1.37 0.3 0.5 1.67 0.5 1.38 0 0.83 0.87 0.83-0.5 0-1.38 0.05-1.5-1.33-1.5zm-8.83 3.33c-1.38 0-2.67 1.96-2.67 3.34 0 1.37 2.96 3.83 4.33 3.83 1.38 0 1 0.87 1-0.5 0-1.38-1.29-6.67-2.66-6.67zm5.66 14.34c-1.37 0-3.66-0.38-3.66 1 0 1.37 3.29 3.83 4.66 3.83 1.38 0 1 0.87 1-0.5 0-1.38-0.62-4.33-2-4.33zm8.5-7.17c-1.37 0-1 0.12-1 1.5 0 1.37 0.13 0.5 1.5 0.5 1.38 0 1 0.87 1-0.5 0-1.38-0.12-1.5-1.5-1.5zm2.5 19.17c-1.37 0-2.66 1.62-2.66 3 0 1.37 2.29 0.83 3.66 0.83 1.38 0 1 0.87 1-0.5 0-1.38-0.62-3.33-2-3.33zm8.34 5.33c-1.38 0-0.67 1.62-0.67 3 0 1.37 4.96 4.5 6.33 4.5 1.38 0 1 0.87 1-0.5 0-1.38-5.29-7-6.66-7zm-0.84-16c-1.37 0-1 0.12-1 1.5 0 1.37 0.13 0.5 1.5 0.5 1.38 0 1 0.87 1-0.5 0-1.38-0.12-1.5-1.5-1.5zm12 8.5c-1.37 0-5.83 1.79-5.83 3.17 0 1.37 5.63 3.66 7 3.66 1.38 0 2.33-2.29 2.33-3.66 0-1.38-2.12-3.17-3.5-3.17zm12.996 4.5c-1.37 0-1 0.12-1 1.5 0 1.37 0.13 0.5 1.5 0.5 1.38 0 1 0.87 1-0.5 0-1.38-0.12-1.5-1.5-1.5zm-7.996 12c-1.37 0-1 0.12-1 1.5 0 1.37 0.13 0.5 1.496 0.5 1.38 0 1 0.87 1-0.5 0-1.38-0.12-1.5-1.496-1.5zm2.996 1c-1.37 0-1 0.12-1 1.5 0 1.37 0.13 0.5 1.5 0.5 1.38 0 1 0.87 1-0.5 0-1.38-0.12-1.5-1.5-1.5zm11.5 0.33c-0.91 0-2 1.42-2 2.34 0 0.91 0.09 0.33 1 0.33 0.92 0 3.34 1.25 3.34 0.33 0-0.91-1.42-3-2.34-3zm-3 2.67c-0.91 0-0.66 0.08-0.66 1s0.08 0.33 1 0.33c0.91 0 0.66 0.59 0.66-0.33s-0.08-1-1-1zm5.34-13c-0.92 0-2.34 3.42-2.34 4.33 0 0.92 3.09 0.67 4 0.67 0.92 0 2.34-2.75 2.34-3.67 0-0.91-3.09-1.33-4-1.33zm11.33 11c-1.37 0-1.17 0.12-1.17 1.5 0 1.37 0.3 0.5 1.67 0.5 1.38 0 0.83 0.87 0.83-0.5 0-1.38 0.05-1.5-1.33-1.5zm3-7c-1.37 0 0.67 3.29 0.67 4.67 0 1.37 4.46 1.83 5.83 1.83 1.38 0-1.17-1.79-1.17-3.17 0-1.37-3.95-3.33-5.33-3.33zm72.1-132.1c-1.37 0-1.17 0.13-1.17 1.5 0 1.38 0.3 0.5 1.67 0.5 1.38 0 0.83 0.88 0.83-0.5 0-1.37 0.05-1.5-1.33-1.5zm-5.5 0c-1.37 0-1.17 0.13-1.17 1.5 0 1.38 0.3 0.5 1.67 0.5 1.38 0 0.83 0.88 0.83-0.5 0-1.37 0.05-1.5-1.33-1.5zm5.5 9c-1.37 0-1.17 0.13-1.17 1.5 0 1.38 0.3 0.5 1.67 0.5 1.38 0 0.83 0.88 0.83-0.5 0-1.37 0.05-1.5-1.33-1.5zm-6.1-0.1c-1.37 0-1.17 0.13-1.17 1.5 0 1.38 0.3 0.5 1.67 0.5 1.38 0 0.83 0.88 0.83-0.5 0-1.37 0.05-1.5-1.33-1.5zm8.1 10.6c-1.37 0-1 1.13-1 2.5 0 1.38 0.42 4.5 1.8 4.5 1.37 0 0.53-4.12 0.53-5.5 0-1.37 0.05-1.5-1.33-1.5zm-9 0c-1.37 0-1.4 1.23-1.4 2.6 0 1.38-0.97 4.6 0.4 4.6 1.38 0 1.8-3.82 1.8-5.2 0-1.37 0.58-2-0.8-2z"/>
      </svg><!--.butterfly-->
    </svg><!--.aperture-->
  </div><!--/#main-->
  <div id="mini">
    <svg viewBox="0 0 400 250">
      <title>Use the mousewheel to zoom in/out here too!</title>
      <description>Mini version of the same SVG</description>
      <use xlink:href="#butterfly">
    </svg>
  </div><!--/#nav-->
</div><!--.container-->

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="abacus.js"></script>
</body>

style.css

body { /* reset */
  margin:0;
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
}
.vis {
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  align-items: center;
  width: 100vw;
}
.vis > div {
  --margin: 1em;
  margin: var(--margin)
}
#main {
  flex: 3 0 calc(75% - var(--margin));
}
#mini {
  flex: 1 0 calc(25% - var(--margin));
}
#main > svg {
    /* Occupy the full viewport */
    width: 100%;
    height: 100%;

    /* don't scale the stroke-width of the magnified object.*/
    vector-effect: non-scaling-stroke;
}

thumbnail.png

@ShreyasBhargavaNV, oh my gosh, I didn't receive a notification of your comment. I noticed that as well -- the mouse direction changes. it nagged me until the last minute, but I could never figure out the math, so i will try again.

as to your second question: do you mean, you'd like to click and drag the main SVG itself?