Fisheye Distortion with D3 | Hacker News Reader

Fisheye Distortion with D3

bost.ocks.org

44 pointsmgevans7 comments

Harry Beck used a fish eye distortion for this exact purpose, when he designed the classic London Tube map in 1931. The scale is larger in the dense inner city, where the stations are closer together, and smaller in the outer suburbs, where the stations are further apart. The net effect is that the density of the stations is roughly constant across the map.

[1] https://en.wikipedia.org/wiki/Harry_Beck

It's great that the distortion isn't done on a pixel level but rather at the object level -- it's mesmerizing to see the edges move ever so slightly when mousing over a region

Yes, it's an interesting 3D effect. From the article,

> This is particularly useful for disambiguating edge-crossings in static layouts: edges between distant nodes are distorted more strongly than local ones.

It's funny how the objects at the edge of the distortion are compressed; information here is lost rather than created. I'd rather see the distortion spread to the image boundaries. Then I can still see the whole image, but there is no weird annulus of compression.

Some compression is inevitable; to give space to some part of the visualization, you must to take it away from somewhere else. But yeah, there are variations of this approach that apply a global distortion rather than one localized to the mouse. For example, click on "Distortions" then "Fisheye XY" here:

http://flare.prefuse.org/demo

It'd be a nice feature to support multiple modes of distortion.

Also, you can open the JavaScript console and adjust the fisheye distortion parameters. For example, you can make the area of distortion much bigger:

> fisheye.radius(480).power(4)

Expected an article about Nikon hardware, but still enjoyed it.

The author has a lot of neat looking posts, I recommend giving them a look.

I love the 3D effect, it really lets you get a feel for the data.

Reply on news.ycombinator.com