Another Inlet

_.md

[ Launch Inlet ]
Gist #4103860
Gist #4102812

config.json

{"description":"Another Inlet","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":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}

eye.svg

fish.svg

inlet.js

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

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


var data = _.map(d3.range(109), function(d) {
  return {
    i: d,
    x: d % 10 * 69,
    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: "#2059AF",
    "fill-opacity": 0.09408,
    stroke: "#1A1E79",
    "stroke-opacity": 0.8,
    "stroke-width": 1
  });


var fisheye = d3.fisheye.circular()
    .radius(310)
    .distortion(5.94985);

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);
    
      fishies.attr("transform", function(d) {
        var fe = fisheye(d); //{x: ..., y: ...
        return "translate(" + [fe.x, fe.y] + ")"
          + "scale(" + fe.z + ")";
      })
  })