It can be difficult to observe micro and macro features simultaneously with complex graphs. If you 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).
In the graph above, fisheye distortion magnifies 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.
Circular fisheye is only one of many possible distortion functions. Two disadvantages of circular distortion are that it compresses (rather than magnifies) 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 magnifies continuously so as to avoid local minification. Furthermore, they demonstrate applying the distortion to each dimension separately, resulting in Cartesian 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 fisheye distortion in scatterplots:
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 difficult to compare; with distortion, you can easily differentiate individual countries while retaining global context and comparing regions.
These examples use D3’s fisheye 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.