Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Fisheye Distortion with D3

bost.ocks.org

Post reply on HN
Print view View original

1–8 of 8 posts

Re: Fisheye Distortion with D3

#2

Post by ______ »

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

Re: Fisheye Distortion with D3

#3

Post by tantalor »

______ wrote: post #2

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.

Re: Fisheye Distortion with D3

#4

Post by tantalor »

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.

Re: Fisheye Distortion with D3

#5

Post by mbostock »

tantalor wrote: post #4

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)

Re: Fisheye Distortion with D3

#7

Post by femto »

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

Post reply on HN