Sha256: 608a7c44c71a438db3564a5429a0bf3871c62e3eee6dc3499f2edacc950f49ac

Contents?: true

Size: 1.96 KB

Versions: 13

Compression:

Stored size: 1.96 KB

Contents

# Fisheye Distortion

Demo: <http://bost.ocks.org/mike/fisheye/>

Implements a fisheye distortion for two-dimensional layouts. Based on Sarkar and Brown’s [Graphical Fisheye Views of Graphs](http://dl.acm.org/citation.cfm?id=142763) (CHI '92), as well as [Flare](http://flare.prefuse.org/)'s [FisheyeDistortion](http://flare.prefuse.org/api/flare/vis/operator/distortion/FisheyeDistortion.html) and [Sigma.js](http://sigmajs.org/)'s [fisheye example](http://sigmajs.org/examples/a_plugin_example_advanced.html).

When constructing a fisheye distortion, you can specify the radius and distortion factor:

```js
var fisheye = d3.fisheye.circular()
    .radius(200)
    .distortion(2);
```

Typically, you then update the focal point of the distortion on mousemove:

```js
svg.on("mousemove", function() {
  fisheye.focus(d3.mouse(this));
});
```

The distortion operator takes as input an object with `x` and `y` attributes, and returns a new object with `x`, `y` and `z` attributes. The returned object represents the distorted position of the input object; the `z` property is a scaling factor so that you can optionally distort the size of elements as well.

For example, to apply fisheye distortion to a force layout, stash the distorted positions in a `display` property on each node, and then use the distorted positions to update the nodes and links:

```js
svg.on("mousemove", function() {
  fisheye.focus(d3.mouse(this));

  node.each(function(d) { d.fisheye = fisheye(d); })
      .attr("cx", function(d) { return d.fisheye.x; })
      .attr("cy", function(d) { return d.fisheye.y; })
      .attr("r", function(d) { return d.fisheye.z * 4.5; });

  link.attr("x1", function(d) { return d.source.fisheye.x; })
      .attr("y1", function(d) { return d.source.fisheye.y; })
      .attr("x2", function(d) { return d.target.fisheye.x; })
      .attr("y2", function(d) { return d.target.fisheye.y; });
});
```

There's also a d3.fisheye.scale for Cartesian distortion; see the above demo for an example.

Version data entries

13 entries across 13 versions & 1 rubygems

Version Path
d3js-plugins-rails-0.0.15 vendor/assets/javascripts/d3/plugins/fisheye/README.md
d3js-plugins-rails-0.0.12 vendor/assets/javascripts/d3/plugins/fisheye/README.md
d3js-plugins-rails-0.0.11 vendor/assets/javascripts/d3/plugins/fisheye/README.md
d3js-plugins-rails-0.0.10 vendor/assets/javascripts/d3/plugins/fisheye/README.md
d3js-plugins-rails-0.0.9 vendor/assets/javascripts/d3/plugins/fisheye/README.md
d3js-plugins-rails-0.0.8 vendor/assets/javascripts/d3/plugins/fisheye/README.md
d3js-plugins-rails-0.0.7 vendor/assets/javascripts/d3/plugins/fisheye/README.md
d3js-plugins-rails-0.0.6 vendor/assets/javascripts/d3/plugins/fisheye/README.md
d3js-plugins-rails-0.0.5 vendor/assets/javascripts/d3/plugins/fisheye/README.md
d3js-plugins-rails-0.0.4 vendor/assets/javascripts/d3/plugins/fisheye/README.md
d3js-plugins-rails-0.0.3 vendor/assets/javascripts/d3/plugins/fisheye/README.md
d3js-plugins-rails-0.0.2 vendor/assets/javascripts/d3/plugins/fisheye/README.md
d3js-plugins-rails-0.0.1 vendor/assets/javascripts/d3/plugins/fisheye/README.md