fisheyeplay

_.md

[ Launch: fisheyeplay ] 9666146 by gelicia

config.json

{"description":"fisheyeplay","endpoint":"","display":"svg","public":true,"require":[{"name":"fisheye","url":"https://raw.githubusercontent.com/d3/d3-plugins/master/fisheye/fisheye.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/0bKUDbl.png"}

inlet.js

//taken from http://bost.ocks.org/mike/fisheye/ 
var width = 960,
    height = 180,
    xSteps = d3.range(10, width, 16),
    ySteps = d3.range(10, height, 16);

var xFisheye = d3.fisheye.scale(d3.scale.identity).domain([0, width]).focus(360),
    yFisheye = d3.fisheye.scale(d3.scale.identity).domain([0, height]).focus(90);

var svg = d3.select("svg")
  .append("g")
    .attr("transform", "translate(-.5,-.5)");

var xLine = svg.selectAll(".x")
    .data(xSteps)
  .enter().append("line")
    .attr("class", "x")
    .attr("y2", height);

var yLine = svg.selectAll(".y")
    .data(ySteps)
  .enter().append("line")
    .attr("class", "y")
    .attr("x2", width);

redraw();

svg.on("mousemove", function() {
  var mouse = d3.mouse(this);
  xFisheye.focus(mouse[0]);
  yFisheye.focus(mouse[1]);
  redraw();
});

function redraw() {
  xLine.attr("x1", xFisheye).attr("x2", xFisheye);
  yLine.attr("y1", yFisheye).attr("y2", yFisheye);
}

style.css

line {
  fill: none;
  stroke: #333;
}