Facebook Mutual Friend Network Visualization in Flash
I started building a Facebook friends visualization using Constellation 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.
Post new comment