6

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

Community
  • 1
  • 1
Edan
  • 593
  • 1
  • 8
  • 23

3 Answers3

13

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 computed on startup and doesn't change. I think this is probably what you want in conjunction with fisheye distortion, or else the distortion will compete with your ability to move nodes around dynamically. But in theory it's possible to combine them, if that's what you want.

Aurelio
  • 24,702
  • 9
  • 60
  • 63
mbostock
  • 51,423
  • 13
  • 175
  • 129
  • +1 Awesome answer! I've done my part of awarding the reputations points. Thank you very much for your time. – Legend Apr 10 '12 at 18:59
  • Instead of combining them together, do you think it would be possible to have say, a box, that lets us select whether to enable/disable fisheye? That would combine best of both worlds and would be an awesome addition if you can find some time. – Legend Apr 10 '12 at 19:05
  • Sure, you could do that. Use [selection.on](https://github.com/mbostock/d3/wiki/Selections#wiki-on) to add or remove event listeners. – mbostock Apr 10 '12 at 20:59
2

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...

dsummersl
  • 6,588
  • 50
  • 65
1

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

tuoxie007
  • 1,234
  • 12
  • 10