Skip to content

Instantly share code, notes, and snippets.

@seemantk

seemantk/.block

Last active March 7, 2019 21:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save seemantk/5ec5698ac25c869b3e8c1261f6beaac4 to your computer and use it in GitHub Desktop.
Save seemantk/5ec5698ac25c869b3e8c1261f6beaac4 to your computer and use it in GitHub Desktop.
Download ZIP
Zoom/Pan with viewBox
Raw
.block
license: mit
Raw
README.md

Normally, in a minimap with zoom/pan scenario, we spend calculation cycles figuring out how to scale movements between the minimap's coordinates and the main image's coordinates.

These calculations normally happen in the callback function (every time the mouse moves). Those calculations are then used to transform elements within an SVG (translate and scale).

The things to keep track of then:

  1. The minimap's dimensions and scale
  2. The main SVG's dimensions and scale
  3. Converting between the two coordinate systems
  4. Calculating the scaled transform
  5. Applying the transform to the main SVG.

Bill D. White's work is widely referenced by d3 practitioners. This example is an attempt to reimplement his method, while reducing programmatic complexity.

To make this work:

  1. The SVG needs an id and a viewport. The following attributes, then, are required: * id is to uniquely identify the image for later reuse * height provides the viewport's height * width provides the viewport's width
  2. The SVG needs to nest inside a container SVG, which serves as an aperture and magnifier.
  3. The aperture SVG needs the following attributes: * viewBox * preserveAspectRatio
  4. the MiniMap SVG has the following attribute: * viewBox - identical to the target SVG's initial viewBox/dimensions.
  5. The image in the MiniMap is rendered using SVG's <use> * The target SVG needs to be inline for this to work properly.

References

Built with blockbuilder.org

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
width: 100vw;
}
#main {
flex: 3 0 auto;
width: 75%
margin: 5px;
}
#nav {
flex: 1 0 auto;
width: 25%;
margin: 5px;
}
.aperture {
width: 100%;
height: 100%;
}
#main > svg {
vector-effect: non-scaling-stroke;
}
</style>
</head>
<body>
<div class="container">
<div id="main">
<svg class="aperture" viewBox="0 0 400 250" preserveAspectRatio="none" width="400" height="250">
<svg id="butterfly" width="400" height="250">
<title>This is a slightly modified version of a sample that shipped with JASC's WebDraw (www.jasc.com).</title>
<description>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="nav">
<svg viewBox="0 0 400 250">
<use xlink:href="#butterfly">
</svg>
</div><!--/#nav-->
</div><!--.container-->
<script>
var brush = d3.brush()
, msvg = d3.select("#main svg")
, nsvg = d3.select("#nav svg").append("g")
, vb = d3.select("#nav svg").attr("viewBox").split(" ").map(d => +d)
, rect = [[vb[0], vb[1]], [vb[0] + vb[2], vb[1] + vb[3]]]
brush
.extent(rect)
.on("brush end", brushed)
;
nsvg
.call(brush)
.call(brush.move, rect)
;
function brushed() {
var sel = d3.event.selection || rect
var viewbox = [sel[0][0], sel[0][1], (sel[1][0] - sel[0][0]), sel[1][1] - sel[0][1]];
msvg.attr("viewBox", viewbox.join(' '));
} // brushed()
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment