fisheye

_.md

[ Launch: fisheye ] 6473448 by enjalot

config.json

{"description":"fisheye","endpoint":"","display":"svg","public":true,"require":[{"name":"fisheye","url":"https://raw.github.com/d3/d3-plugins/master/fisheye/fisheye.js"}],"tab":"edit","display_percent":0.6066666666666666,"play":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"fileconfigs":{"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"eye.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"fish.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"fisheye.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"thumbnail":"http://i.imgur.com/9nlPXUd.gif","ajax-caching":true}

eye.svg

<g id="eye">
<path fill="none" d="M33.154,22.1c-0.497,1.66-0.768,3.417-0.768,5.238c0,10.099,8.217,18.317,18.318,18.317
	c10.1,0,18.316-8.218,18.316-18.317c0-10.101-8.216-18.319-18.316-18.319c-4.343,0-8.335,1.522-11.478,4.056"></path>
<path fill="none" d="M42.464,17.255c2.297-1.94,5.265-3.112,8.506-3.112c7.287,0,13.193,5.907,13.193,13.194
	c0,7.286-5.906,13.193-13.193,13.193c-7.285,0-13.193-5.907-13.193-13.193c0-1.299,0.191-2.555,0.542-3.74"></path>
<path fill="#010101" d="M50.97,40.53c7.287,0,13.193-5.907,13.193-13.193c0-7.288-5.906-13.194-13.193-13.194
	c-3.242,0-6.209,1.172-8.506,3.112L50,26.983L38.32,23.597c-0.35,1.186-0.542,2.441-0.542,3.74
	C37.777,34.623,43.686,40.53,50.97,40.53z"></path>
<path fill="#010101" d="M98.35,25.7C86.324,9.366,68.458,0,49.332,0C31.055,0,13.701,8.692,1.724,23.848L0,26.029l1.648,2.238
	c12.028,16.334,29.895,25.699,49.019,25.699c18.278,0,35.63-8.692,47.608-23.848L100,27.938L98.35,25.7z M50.704,45.654
	c-10.101,0-18.318-8.218-18.318-18.317c0-1.821,0.271-3.578,0.768-5.238l-4.199-1.218c-0.609,2.048-0.941,4.212-0.941,6.456
	c0,6.838,3.054,12.965,7.856,17.127c-10.181-3.103-19.418-9.381-26.622-18.278C16.63,17.7,25.992,11.799,36.174,9.049l0.378,0.572
	l2.676,3.454c3.143-2.534,7.135-4.056,11.478-4.056c10.1,0,18.316,8.217,18.316,18.319C69.02,37.437,60.804,45.654,50.704,45.654z
	 M65.624,44.388c4.75-4.162,7.77-10.255,7.77-17.05c0-7.044-3.229-13.348-8.279-17.512c9.791,3.201,18.667,9.345,25.638,17.955
	C83.807,35.763,75.109,41.449,65.624,44.388z"></path>
<g>

fish.svg

fisheye.js

// https://raw.githubusercontent.com/d3/d3-plugins/master/fisheye/fisheye.js
(function() {
  d3.fisheye = {
    scale: function(scaleType) {
      return d3_fisheye_scale(scaleType(), 3, 0);
    },
    circular: function() {
      var radius = 200,
          distortion = 2,
          k0,
          k1,
          focus = [0, 0];

      function fisheye(d) {
        var dx = d.x - focus[0],
            dy = d.y - focus[1],
            dd = Math.sqrt(dx * dx + dy * dy);
        if (!dd || dd >= radius) return {x: d.x, y: d.y, z: dd >= radius ? 1 : 10};
        var k = k0 * (1 - Math.exp(-dd * k1)) / dd * .75 + .25;
        return {x: focus[0] + dx * k, y: focus[1] + dy * k, z: Math.min(k, 10)};
      }

      function rescale() {
        k0 = Math.exp(distortion);
        k0 = k0 / (k0 - 1) * radius;
        k1 = distortion / radius;
        return fisheye;
      }

      fisheye.radius = function(_) {
        if (!arguments.length) return radius;
        radius = +_;
        return rescale();
      };

      fisheye.distortion = function(_) {
        if (!arguments.length) return distortion;
        distortion = +_;
        return rescale();
      };

      fisheye.focus = function(_) {
        if (!arguments.length) return focus;
        focus = _;
        return fisheye;
      };

      return rescale();
    }
  };

  function d3_fisheye_scale(scale, d, a) {

    function fisheye(_) {
      var x = scale(_),
          left = x < a,
          range = d3.extent(scale.range()),
          min = range[0],
          max = range[1],
          m = left ? a - min : max - a;
      if (m == 0) m = max - min;
      return (left ? -1 : 1) * m * (d + 1) / (d + (m / Math.abs(x - a))) + a;
    }

    fisheye.distortion = function(_) {
      if (!arguments.length) return d;
      d = +_;
      return fisheye;
    };

    fisheye.focus = function(_) {
      if (!arguments.length) return a;
      a = +_;
      return fisheye;
    };

    fisheye.copy = function() {
      return d3_fisheye_scale(scale.copy(), d, a);
    };

    fisheye.nice = scale.nice;
    fisheye.ticks = scale.ticks;
    fisheye.tickFormat = scale.tickFormat;
    return d3.rebind(fisheye, scale, "domain", "range");
  }
})();

inlet.js

var fishD = d3.select("#fish").attr("d");
d3.select("#fish").style("display", "none");

var eye = d3.select("#eye").style("display", "none");

var fisheye = d3.fisheye.circular()
    .radius(tributary.anim(573, 300))
    .distortion(tributary.anim(2, 5.94985));

tributary.loop_type = "pingpong";
tributary.duration = 2000;

var data = _.map(d3.range(100), function(d) {
  return {
    i: d,
    x: d % 10 * tributary.anim(84, 60),
    y: parseInt(d/10) * 77
  }
});

var svg = d3.select("svg");
var fishies = svg.selectAll("g.fish")
    .data(data)
    .enter()
    .append("g")
    .classed("fish", true);

fishies.attr("transform", function(d) {
  return "translate(" + [d.x, d.y] + ")";
})


fishies.append("path")
  .attr("d", fishD)
  .style({
    fill: "#8709AF",
    "fill-opacity": 0.4,
    stroke: "#125EBE",
    "stroke-opacity": 0.8,
    "stroke-width": 3
  });




fisheye.focus([tributary.sw/2-50, tributary.sh/2 - 50]);

fishies.attr("transform", function(d) {
  var fe = fisheye(d);
  return "translate(" + [fe.x, fe.y] + ")"
    + "scale(" + fe.z + ")";
})
  
  svg.on("mousemove", function() {
    var mouse = d3.mouse(this);
    eye.attr("transform", "translate(" + [mouse[0] - 50, mouse[1] - 30] + ")")
    
    fisheye.focus(mouse);
    
      fishies.attr("transform", function(d) {
        var fe = fisheye(d); //{x: ..., y: ...
        return "translate(" + [fe.x, fe.y] + ")"
          + "scale(" + fe.z + ")";
      })
  })