3 ms·

Fisheye Distortion with D3

44 points by mgevans 14y ago

______ 14y ago
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
- tantalor 14y ago
  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.
tantalor 14y ago
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.
- mbostock 14y ago
  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 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)
colbyolson 14y ago
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.
femto 14y ago
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 https://en.wikipedia.org/wiki/Harry_Beck
chrisbroadfoot 14y ago
I love the 3D effect, it really lets you get a feel for the data.

44 points by mgevans 14y ago

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

tantalor 14y ago
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.

tantalor 14y ago

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.

mbostock 14y ago
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 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)

colbyolson 14y ago

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.

femto 14y ago

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 https://en.wikipedia.org/wiki/Harry_Beck

chrisbroadfoot 14y ago

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