D3 Examples - Fisheye Magnifying Glass

Fisheye Magnifying Glass

Original README.md

Except for the code segments that render the magnifying glass (as circle or path), this is essentially a copy of Mike Bostock's Fisheye Distortion example.

The motivation for this was largely aesthetical but also a bit functional. When using the Fisheye as an aid to viewing large datasets, I often find myself experimenting with the degree and radius of the distortion. In such cases, I find it helpful to see the exact reach of the distortion and then decide the best configuration for a particular dataset.

xxxxxxxxxx
 
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Encircling D3 Fisheye Distortion</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.34/browser.min.js"></script>
    <script type="text/javascript" src="fisheye.js"></script>
    <style>
      .background {
        fill: none;
        pointer-events: all;
      }
​
      /*
            #chart1 {
                width: 960px;
                height: 600px;
                border: solid 1px #ccc;
            }
            */
​
      #chart1 .circle {
        stroke: #fff;
        stroke-width: 1.5px;
      }
​
      #chart1 .link {
        stroke: #999;
        stroke-opacity: 0.6;
        stroke-width: 1.5px;
      }
​
      text {
        font: 12px sans-serif;
        pointer-events: none;
        text-anchor: start;
      }
​
      /* magnifier glass as circle */
      .lens {
        stroke: gray;
        stroke-width: 2px;
        stroke-opacity: 0;
        fill: none;
      }
​
      /* magnifier glass as path */
      .mag {
        stroke: gray;
        stroke-width: 2px;
        stroke-opacity: 0;
        fill: none;
      }
​
      /* magnifier handle as path */
      .mag2 {
        stroke: black;
        stroke-width: 12px;
        stroke-opacity: 0;
        fill: none;
      }
    </style>
  </head>
  <body bgcolor="white">
    <form style="margin-left: 20px">
      <input type="radio" name="wot" id="circle" value="one" />&nbsp;as
      circle<br />
      <input type="radio" name="wot" id="path" value="two" checked />&nbsp;as
      path
    </form>
    <div id="chart1"></div>
    <script src="./index.js"></script>
  </body>
</html>
​
    