Magnifying glass effect for visualizing the D3 / GraphGL network?

Question

Is it possible to create a smooth animated magnifying effect (similar to a dock in Mac OS X) when you hover over nodes in a visualization using a directional graph using the D3 or GraphGL ?

The nodes will need to expand and move others around it, while maintaining a layout with a power pointer.

If someone can develop this to demonstrate, that would be great! Thanks

Note that this is different from a simple increase, as in this question.

Answer 1

Great question. To answer this, I implemented a D3 plugin for fisheye distortion . This is roughly based on previous work in Flare and Sigma.js, which in turn are based on the work of Sarkar and Brown, “Graphic Fish Species of Species,” CHI'92.

Here's a quick demo with the Misérables dataset. View the source code. I will record later today when I have time.

Note: this uses a static power layout; the layout is calculated at startup and does not change. I think this is probably what you want in combination with fisheye distortion, otherwise the distortion will compete with your ability to dynamically move nodes. But theoretically, you can combine them if this is what you want.

Answer 2

It would be great if you could do this with pure CSS, but unfortunately it seems like attributes for various SVG elements (i.e. circles) are not accessible via CSS. In particular, the "radius", but I think this is true for a whole host of properties of the SVG element.

But it is not difficult to do with d3. Here is my jsfiddle example . You basically do the following:

• Use transitions (see Tutorial # 2 to find out how to use them). Basically do d3element.transition().delay(300).attr(...) for the changes to happen.
• To combine the circles "exploded" with the overlap, I would think that you need to change the force layout charge parameter. Increased repulsive power when circles are larger.

Hope this is what you are looking for ...

Answer 3

Pure css can do this if you accept it.

 .app{ -webkit-transition-property:-webkit-transform; -moz-transition-property:-moz-transform; -transition-property:-transform; -webkit-transition-duration:.15s; -moz-transition-duration:.15s; -transition-duration:.15s; } .app:hover{ -webkit-transform:scaleX(1.2) scaleY(1.2); -moz-transform:scaleX(1.2) scaleY(1.2); -transform:scaleX(1.2) scaleY(1.2); } 

It is used on my homepage tuoxie.me