Is it possible to create a smooth animated magnifying effect (similar to the dock on Mac OS X) when hovering over nodes in a force-directed graph visualization using the D3 or GraphGL libraries?

The nodes would need to expand and displace the others around it, while maintaining the force-directed layout.

If someone could fork this to demonstrate, that would be great! Thanks

note, this is different from a simple zoom as in this question

Is it possible to create a smooth animated magnifying effect (similar to the dock on Mac OS X) when hovering over nodes in a force-directed graph visualization using the D3 or GraphGL libraries?

The nodes would need to expand and displace the others around it, while maintaining the force-directed layout.

If someone could fork this to demonstrate, that would be great! Thanks

note, this is different from a simple zoom as in this question

• javascript
• jquery
• d3.js
• force-layout
• graph-visualization

3 Answers 3

Great question. To answer it, I implemented a D3 plugin for fisheye distortion. It's roughly based on previous work in Flare and Sigma.js, which are in turn based on the work of Sarkar and Brown, "Graphical Fisheye Views of Graphs", CHI'92.

Here's a quick demo with the Misérables dataset. View source for the code. I'll do a writeup later today when I have time.

Note: this uses a static force layout; the layout is puted on startup and doesn't change. I think this is probably what you want in conjunction with fisheye distortion, or else the distortion will pete with your ability to move nodes around dynamically. But in theory it's possible to bine them, if that's what you want.

It'd be amazing if you could do this with pure CSS, but unfortunately it looks like attributes for various SVG elements (ie, circles) aren't reachable via CSS. Specifically 'radius', but I think this is true for a whole slew of SVG element properties.

But its not super hard to do via d3. Here is my example jsfiddle. Basically you do the following:

1. Use transitions (see Tutorial #2 to learn how to use these). Basically do a d3element.transition().delay(300).attr(...) to make the changes happen.
2. To keep the 'blown up' circles from overlapping the best I could figure out to do was to modify the force layout's charge setting. Increasing the repulsive forces when circles are larger.

Hopefully thats what you are looking for...

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's used on my home page tuoxie.me