3/7/2019 Fisheye Distortion

June 21, 2012 / Mike Bostock

Fisheye Distortion

It can be dif cult to observe micro and macro features simultaneously with complex graphs. If you Mouseover to distort the nodes.

zoom in for detail, the graph is too big to view in its entirety. If you zoom out to see the overall
structure, small details are lost. Focus + context techniques allow interactive exploration of an area
of interest (the focus) in greater detail, while preserving the surrounding environment (the context).

https://bost.ocks.org/mike/fisheye/ 1/4
3/7/2019 Fisheye Distortion

In the graph above, sheye distortion magni es the local region around the mouse, while leaving
the larger graph unaffected for context. The localized, circular nature of the distortion can be seen
clearly by applying it to a uniform grid:

This type of distortion is particularly useful for disambiguating edge-crossings in static network
layouts: edges between distant nodes are distorted more strongly than local ones. If you dislike the
chaotic appearance of dynamic force layout, consider using distortion instead.

For more network diagrams, see

my posts on matrix diagrams,

# Cartesian Distortion hive plots and chord diagrams.

Circular sheye is only one of many possible distortion functions. Two disadvantages of circular
distortion are that it compresses (rather than magni es) the area near the circumference of the
circle, and that it requires curved grid lines to show the distortion accurately. The latter makes it
unsuitable for visualizations that have quantitative position encodings, such as scatterplots.

Sarkar and Brown therefore recommend a different function that magni es continuously so as to
avoid local mini cation. Furthermore, they demonstrate applying the distortion to each dimension
separately, resulting in Cartesian distortion:

https://bost.ocks.org/mike/fisheye/ 2/4
3/7/2019 Fisheye Distortion

With this technique, straight lines parallel to the x or y axis remain straight even after distortion.
This means you can use standard axes in conjunction with sheye distortion in scatterplots:
90
life expectancy (years)

80

70

60

50

40

30
income per capita, inflation-adjusted (dollars)
20
300400
500
600
700
800
900
1,000 2,000 3,000 4,0005,0006,000
7,000
8,000
9,000
10,000 20,000 30,000 40,000 50,000 60,000 70,000 80,000 90,000 100,000

https://bost.ocks.org/mike/fisheye/ 3/4
3/7/2019 Fisheye Distortion

Fisheye distortion allows you to zoom into small areas of the chart without losing sense of the overall
distribution. For example, the Western European countries (purple) are densely clustered in the
original chart, making them dif cult to compare; with distortion, you can easily differentiate
individual countries while retaining global context and comparing regions.

# Implementation
These examples use D3’s sheye plugin, which supports both circular and Cartesian distortion. The
latter is implemented on top of D3’s quantitative scales, allowing distortion of linear, logarithmic,
and exponential scales, as well as compatibility with D3’s axis component. For additional
implementations, see Flare and Sigma.js.

June 21, 2012 / Mike Bostock

https://bost.ocks.org/mike/fisheye/ 4/4