Visualise your Twitter friends with jsPlumb Jquery

Posted by Oleg Puzanov on Jun 8, 2010 • (0)

Recently I’ve read an article (in Russian) about great JQuery plugin – jsPlumb by Simon Porritt. This plugin provides a way to “plumb” elements of a UI together, so it can be used in many situations when you need to visualise relations between items. jsPlumb allows you to connect elements on the screen with “plumbing”, using a Canvas element when supported, and Google’s ExplorerCanvas script to support older browsers. Author also creates small project as plugin demo which allow search throw tweets and display results as graph model.

So let’s try this plugin and create a small demo to build a tree of my followers from Twitter.

Click here to see the final working demo

Twitter has own great API, but there are many ready to use libraries for all popular programming languages. For this example I will use PHP Twitter class by Tijs Verkoyen. This class usage is very simple: just include it to your page and instantiate new Twitter object.

<?php
// require class
require_once 'twitter.php';
// create instance
$twitter = new Twitter('<your-login>', '<your-password>');
?>

To use jsPlumb you need to load jQuery, jQueryUI, ExplorerCanvas and, of course, jsPlumb itself into your page:

I’ve created the following class-wrapper for generating diagram with my Twitter followers:

<?php
class TwitterFollowersVisualizer {

private $offsetX = 300;
private $offsetY = 500;

private $user;
private $followers;

private $html;
private $js;

private $blockId = 1;

function __construct($user, $followers) {
$this->user = $user;
$this->followers = $followers;
}

private function addItem($follower, $position) {
$blockId = $this->getBlockId();

$this->html .= '<div id="block_' . $blockId . '" class="block" style="top:' . $position['x'] . 'px; left:' . $position['y'] . 'px; background-image:url(' . $follower['profile_image_url'] . ')">';
$this->html .= '<a href="/test/twitter/index.php?username=' . $follower['screen_name'] . '">' . $follower['screen_name'] . '</a>';
$this->html .= '</div>';

if ( $blockId != 1 ) {
$this->js .= '$("#block_1").plumb({';
$this->js .= 'target: \'block_' . $blockId . '\',';
$this->js .= 'anchors: [jsPlumb.Anchors.BottomCenter, jsPlumb.Anchors.TopCenter],';
$this->js .= 'paintStyle: { gradient:{ stops: [[0, \'#8ec1da\'], [1, \'#8ec1da\']]}, lineWidth:3 },';
$this->js .= 'endpoints:[new jsPlumb.Endpoints.Dot(), new jsPlumb.Endpoints.Dot()],';
$this->js .= 'endpointStyles:[{gradient: { stops: [[0, \'#8ec1da\']] }, width: 10, height: 20}, { gradient: { stops: [[0, \'#8ec1da\']]}, radius: 6 }], ';
$this->js .= 'endpointsOnTop:false, ';
$this->js .= '});';
}
}

private function getHtml() {
return $this->html;
}

private function getJs() {
return $this->js;
}

private function getBlockId() {
return $this->blockId++;
}

public function displayHtml() {
$followersCount = sizeof($this->followers);
$corner = 360 / $followersCount;

$this->addItem($this->user, array('x' => $this->offsetX, 'y' => $this->offsetY));

for ( $i = 0; $i < $followersCount; $i++ ) {
$x = round($this->offsetX * sin(deg2rad($corner * $i)));
$y = round($this->offsetY * cos(deg2rad($corner * $i)));

$this->addItem($this->followers[$i], array('x' => $x + $this->offsetX, 'y' => $y + $this->offsetY));
}

echo $this->getHtml();
}

public function displayJs() {
echo $this->getJs();
}
}
?>

So finally, our page will have the following content:

<?php
require_once "twitter.php";
require_once "TwitterFollowersVisualizer.php";

$twitter = new Twitter('<your-login>', '<your-password>');

$username = $_GET['username'];
if ( empty($username) ) $username = 'olegpuzanov';

try {
$user = $twitter->getUser($username);
} catch (TwitterException $e) {
echo $e->getMessage();
die;
}

try {
$followers = $twitter->getFollowers($username);
} catch (TwitterException $e) {
echo $e->getMessage();
die;
}

$followers = array_slice($followers, 0, 15);
$twitterVisualiser = new TwitterFollowersVisualizer($user, $followers);
?>
<!doctype html>
<html>
<head>
<title>Twitter followers visualiser demo using jsPlumb</title>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<style>
body {
background-color: #c0deed;
}

div.block {
width:170px;
height:48px;
background-color:#ddeef6;
position:absolute;
-webkit-border-radius:15px;
background-repeat:no-repeat;
cursor:move;
zIndex: 10000;
}

div.block a {
float:left;
display:block;
width:48px;
height:48px;
padding-left:55px;
line-height:45px;
color:#2276bb;
}
</style>
</head>
<body>
<?php $twitterVisualiser->displayHtml(); ?>
<script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jsplumb.googlecode.com/svn/trunk/js/jquery.jsPlumb-1.0.2-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
jsPlumb.DEFAULT_DRAG_OPTIONS = { cursor: 'pointer' };

<?php $twitterVisualiser->displayJs(); ?>
});
</script>
</body>
</html>

You can check final demo here or download zip archive with sample files here. Don’t forget to change Twitter login and password to yours to run this sample.

Tagged as api, jquery, jsplumb, twitter

Oleg Puzanov