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

If we drag on main SVG, it goes to opposite direction and sometimes also got stuck.
Is there any way to drag main SVG smooth like we do from minimap ?

@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?