fisheye grid

config.json

{"description":"fisheye grid","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,"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}},"fullscreen":false,"thumbnail":"http://i.imgur.com/IDq9NAQ.png"}

eye.svg

fish.svg

inlet.js

var fishD = d3.select("#fish").attr("d");
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")
    .data(data)
    .enter()
    .append("g")
    .classed("fish", true);

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


fishies.append("rect")
.attr({
  x: function(d) { return 0 },
  y: function(d) { return 0 },
  width: 20,
  height: 20
})
  .style({
    fill: "#8709AF",
    "fill-opacity": 0.4,
    stroke: "#125EBE",
    "stroke-opacity": 0.8,
    "stroke-width": 3
  });


var fisheye = d3.fisheye.circular()
    .radius(573)
    .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 + ")";
      })
  })