Facebook Mutual Friend Network Visualization in Flash
I started building a Facebook friends visualization using Constellation Framework months ago but the project got buried by other work. I've finally brought it to a point where it's presentable. (-:
The interface lets you see which of your friends know each other. At any given time it will show one of your friends as the selected node (in bold), and any mutual friends as additional nodes. Lines between nodes represent friendships. Clicking a node will select it and you and the new person's mutual friends will appear. Finally, the colour of the circles represents gender for now: red is female, blue is male, and green is unknown.
To use the application, you'll need to click the link below, log in to your Facebook user account, and enable the Friends Constellation application. That will reveal the Flash movie which will promptly begin loading information about your friends and friendships.
This information can't be retrieved all at once so you'll find that the visualization will constantly change as more information comes in. It takes a while to load the data but it (usually) gets more interesting the longer you wait. Watching the nodes re-arrange themselves is fun, but also processor-heavy. If you have a lot of friends the CPU load will be pretty high. Be warned.
- To view the Facebook friends Constellation, login to Facebook. It's really easy and don't worry—it won't add anything to your Facebook profile page.
There's a lot of functionality missing from this prototype and I'll probably be posting updates in the near future. If you have any suggestions for improving the interface/visualization post away...

Delicious
Digg
Reddit
Facebook
Google
Yahoo
Technorati

Comments
It doesn't seem to be working for me, it's only showing one guy who's not really my friend! Or is it just choosing a poor starting node?
Poor starting node. Hitting the browser refresh might help you there... in a future version I'd like to put a list of friends so that clicking on a person in the list will make them the selected node.
Alright, I figured it wouldn't be too hard to just add a combobox with a list of friends. So there it is! Now if the initial selected node is some one who doesn't know your friends you can jump to any of your other friends.
Wow... that's pretty cool :) Good job!
Really cool. But I think in your reducing the vibration, you made it so that the whole thing stops moving when one of the contacts is manually moved?
Thanks, Eric, for the feedback. I've updated the demo so that the physics engine won't go to standby mode while the user is dragging a node around.
l want to make matual friend please help me
Hey Daniel,
Great app! I really like it! I am trying to work on playing with the Facebook API and I was wondering if you could advise on how to figure out how many mutual friends a friend might have? I was trying to find something about it on the developers wiki, and hoping there's a better method than simply iterating through lists of friends over and over again. If you could help me out, I'd greatly appreciate it! Thanks!
Hey Daniel,
Neat App, Thanks. Call me an egomaniac but I'd love to be the central node so I can see all of my friends around me - is that not possible?
Top Stuff. Thanks,
Jason
Hey Jason,
The reason I didn't put the logged in user into the visualization at all is because he/she would be connected to every person in the graph anyway, and this visualization is meant to explore the mutual friend relationships.
That said, having all of your friends in a single visualization would probably be pretty cool, if a little heavy on the ol' CPU.
Hi Anonymous,
After much searching I was left disappointed and ended up just doing the iteration solution you mentioned. That's the reason why this visualization constantly changes. It can take several minutes for all the relationships to be tested.
If somebody finds a better way to discover mutual friends using the Facebook API, please let us know!
I too am trying to work this out. Using this code:
You can compare two arrays of friends and then loop though the resulting array and count how many arefriends indexs = 1. that should do the trick but in this code both arrays are of users friends so hence they all come back zero as your friends are not friends with themselves etc.
I tried to change this by using an array of the users friends and an array of same length butevery value being the id of a single friend but facebook API throws an error. puzzled me too big time.
hey how can i get matural frinds on facebook/ and how can i make them my matural friends on line at facebook?
Hi Anonymous,
You don't really need to do anything besides add your friends to get mutual friends. Any of your friends that know each other will become mutual friends automatically.
Looks like it's not working now. How much does this differ from http://www.touchgraph.com/TGFacebookBrowser.html ?
Hi mj,
Thanks for the heads up; I've fixed the app and it seems to be running properly again.
To answer your question honestly, it's not as good as Touch Graph's Facebook browser. This visualization is pretty experimental and doesn't take advantage of tagged photo information. I've got another Facebook graph viz project that's more interesting; it shows relationships between your friends and their favourite music, movies, books, etc.
If you're interested in Graph visualizations of Facebook data, though, you should check out Nexus and my own project, FavMapper.
I'd be interested in seeing .. maybe a new app, but it would be very similar to this. How hard would it be to add my friend's friends to this map, in a different colour. Sort of like a visual friend finder, so you can see if a particular group of your friends all have the same friend that you might not have as a friend, so you can add them! I've looked on the internet and I can't find anything like this already made. I would appreciate it SO much if you could tweak this a little for me :-D.
Hey Keith,
Unfortunately, the Facebook API doesn't give access to this kind of information so it wouldn't be possible. )-:
Trouble is, there's no way to get a list of your friends' friends. (Well, technically there is, but it would involve testing randomly user IDs to find friendships and this app is slow enough as it is.)
Thanks for the input, though. If Facebook or any other social networking app makes this info available (LinkedIn would be awesome) I'd love to implement something like this.
Hi,
The visualization is great, but it would also be good to be able to download the network data into a format that can be analyzed by SNA software, for example to be able to generate density data or structural equivalence...
Good stuff, thanks.
Hi Patti,
You can definitely use the Facebook API to get that kind of data. I agree that would be fun to try out different visualization software on the data. It's always more interesting when the data has a personal impact.
I love your application!! It is so useful! I do have one suggestion. It would be really nice if you could select two friends on the map, and view the mutual friends that those two share. Just a suggestion. Great job!
Hi Anonymous,
Thanks for the idea. I think the interface where you drag two nodes onto the "play area" and see the connections between them is awesome, but unfortunately the Facebook API limitations mean this project probably won't leave the experimental phase.
If you like this, you should check out my other Facebook graph viz app, Fav Mapper, if you haven't already.
How Do I See All My Friends That Share The Same Friends As Me?
it would be great to have a larger window or a full screen browser window to use the friend visualizer, i love the app by the way.
Post new comment