Fisheye

D3 fisheye for bar charts

HTML

<script src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<pre id="csvdata">
date,wounds,other,disease
5/1854,0,95,105
6/1854,0,40,95
7/1854,0,140,520
8/1854,20,150,800
9/1854,220,230,740
10/1854,305,310,600
11/1854,480,290,820
12/1854,295,310,1100
1/1855,230,460,1440
2/1855,180,520,1270
3/1855,155,350,935
4/1855,195,195,560
5/1855,180,155,550
6/1855,330,130,650
7/1855,260,130,430
8/1855,290,110,490
9/1855,355,100,290
10/1855,135,95,245
11/1855,100,140,325
12/1855,40,120,215
1/1856,0,160,160
2/1856,0,100,100
3/1856,0,125,90
</pre>

CSS

svg {
width: 960px;
height: 500px;
border: solid 1px #ccc;
font: 10px sans-serif;
shape-rendering: crispEdges;
}

#csvdata {
    display: none;
}

JavaScript

(function() {
  d3.fisheye = {
    scale: function(scaleType) {
          return d3_fisheye_scale(scaleType(), 3, 0);
      },
    ordinal: function() {
        return d3_fisheye_scale_ordinal(d3.scale.ordinal(), 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: 1};
            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;
    ...