d3 tributary fisheye plugin demo

config.json

{"description":"d3 tributary fisheye plugin demo","endpoint":"","display":"svg","public":true,"require":[{"name":"fisheye","url":"https://raw.github.com/d3/d3-plugins/master/fisheye/fisheye.js"}],"fileconfigs":{"inlet.js":{"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},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.5752635051573745,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}

eye.svg

fish.svg

<path id="fish" d="M100,30.08c0-9.142-15.332-18.619-28.749-23.267c-3.632-3.661-9.089-7.459-10.42-6.72c-0.937,0.521,0.405,2.413,1.405,4.294
	c-1.832-0.328-3.516-0.503-4.977-0.503c-29.213,0-40.689,16.579-43.597,16.655C10.901,20.611,4.437,3.069,0.104,5.797
	c-1.026,0.646,5.888,8.992,5.888,18.037c0,1.332,1.404,2.262,2.075,2.408c-0.67,0.146-2.075,1.076-2.075,2.409
	c0,9.045-6.914,17.392-5.888,18.037C4.437,49.415,10.9,31.873,13.663,31.945c0.126,0.002,0.271,0.039,0.43,0.103
	c4.858,3.978,22.921,16.004,45.017,16.828c0.361,0.013,0.81-0.001,1.328-0.039c-1.664,1.771-3.916,3.358-3.73,3.769
	c0.809,1.799,9.881-2.416,13.658-5.438c8.32-1.807,18.763-4.741,24.328-7.332c2.584-1.203-0.553-3.219-0.145-5.883
	C94.799,32.322,100,32.537,100,30.08z M80.395,22.978c-1.367,0-2.476-1.108-2.476-2.475c0-1.367,1.108-2.475,2.476-2.475
	s2.475,1.108,2.475,2.475C82.869,21.87,81.762,22.978,80.395,22.978z"></path>

inlet.js

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

var eye = d3.select("#eye");

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

var svg = d3.select("svg");
var fishies = svg.selectAll("g.fish")
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
  })

  var fisheye  = d3.fisheye.circular()
      .radius(298)
      .distortion(2.25994);

fisheye.focus([tributary.sw/2,tributary.sh/2]);
               
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);//set center of effect
  //apply effect:
  fishies.attr("transform",function(d){
               var fe = fisheye(d);
               return "translate("+[fe.x,fe.y]+")"
           +"scale("+fe.z+")";    
});
  
  //console.log(mouse);
})