Edit in JSFiddle

var searchTerm = 'freekashmir',
    cloudStarted = false,
    numOfCharsToShowInCloud = 25, //How many characters of each tweet to be shown in cloud
    numOfTweets = 100,
    n = 0,
    maxLimitOfTweetsToShow = 500,
    canvas = document.getElementById('myCanvas'),
    $list = $('#tags ul'),
    $info = $('#info'),
    $num = $('#num'),
    timeInSecondsToGetNewTweets = 5,
    searchPart = '?q=' + searchTerm + '+exclude:retweets&include_entities=false&count=' + numOfTweets,
    orgSearch = searchPart,
    url = 'http://aamirafridi.com/twitter/',
    g1 = {
        0:   'red',
        0.5: 'orange',
        1:   'rgba(0,0,0,0.1)'
    },
    cloudOptions = { //options list at: http://www.goat1000.com/tagcanvas-options.php
        weight: true,
        weightMode:'colour',
        weightGradient:g1,
        weightFrom: 'data-weight',
        tooltip: 'div',
        interval: 10,
        minSpeed: 40,
        initial: [0.2, -0.1],
        fadeIn: 2000,
        //textColour: '#65B3B5',
        textFont: 'Helvetica, Verdana',
        outlineColour: '#28FFF6',
        outlineThickness: 3,
        pulsateTo: 0.4,
        shape: 'sphare',//'vcylinder',
        pulsateTime: 2,
        freezeActive: false,
        reverse: true,
        zoom: 1,
        tooltipClass: 'tooltip'
    }

    //Set height and width of cloud to the size of window
    canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function loadTweets() {
    if (!searchPart) searchPart = orgSearch
    $.get(url + searchPart, function (data) {
        $('.loader').fadeIn(4000, function(){ $(this).remove(); });
        //update the searchPart for next search
        searchPart = data.search_metadata.next_results;
        var newTweetsAdded = 0;
        $.each(data.statuses, function () {
            if ($list.find('#' + this.id_str).length == 0) { //don't ad tweet which is already there
                $('<li>').attr('id', this.id_str).append(
                    '<a data-weight="'+getRandomInt(10,30)+'" title="&lt;img src=&quot;' 
                        + this.user.profile_image_url + '&quot;/&gt; ' 
                        + this.text + '" href="https://twitter.com/' 
                        + this.user.screen_name + '/status/' + this.id_str 
                        + '" target="_blank">' + this.text.substring(0, numOfCharsToShowInCloud) 
                    + '...</a>').appendTo($list);
                newTweetsAdded++;
            }
            n++;
        });

        function limitCheck() {
            //console.log($list.find('li').length > maxLimitOfTweetsToShow)
            return $list.find('li').length > maxLimitOfTweetsToShow;
        }

        //remove some tweets if limit is over
        if (limitCheck()) {
            $list.find('li').slice(0, newTweetsAdded).remove();
        }

        //now the cloud thing
        if (!cloudStarted) {
            cloudStarted = true;
            TagCanvas.Start('myCanvas', 'tags', cloudOptions);
            //shape changer
            $('select').change(function(){
                cloudOptions.shape = $(this).val();
                TagCanvas.Start('myCanvas', 'tags', cloudOptions);
            });
            //dragable
            $(':checkbox').click(function(){
                isTrue = $(this).is(':checked');
                TagCanvas[isTrue ? 'Pause' : 'Resume']('myCanvas');
            });
        } else {
            TagCanvas.Update('myCanvas');
        }

        setTimeout(loadTweets, timeInSecondsToGetNewTweets * 1000);

    });
}
//start
loadTweets();

var i = 0;
setInterval(function () {
    if (i + 1 < n) {
        $num.html(i + 1);
        i++;
    }
}, 150);
<!--[if lt IE 9]>
    <script type="text/javascript" src="https://rawgithub.com/arv/ExplorerCanvas/master/excanvas.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Exo+2:400,200' rel='stylesheet' type='text/css'>
<div class='loader'>
    <div class="bubblingG">
<span id="bubblingG_1">
</span>

<span id="bubblingG_2">
</span>

<span id="bubblingG_3">
</span>

    </div>
</div>
<div id="info" class="info">
     <h1>#FreeKashmir twitter storm</h1>
 <strong>Live tweets count:</strong>  <span id="num">0</span>

</div>
<div id="info2" class="info">
<small>User mouse wheel to zoom in/out<br/>
    Shape: 
    <select>
        <option selected value="sphere">Sphere</option>
        <option value="vcylinder">Vertical cylinder</option>
        <option value="hcylinder">Horizontal cylinder</option>
        <option value="hring">Horizontal ring</option>
        <option value="vring">Vertical ring</option> 
    </select>
        <br/>
    <label id="lbl" for='toggle'>Pause: <input id="toggle" type="checkbox"/></label>
 </small>

</div>
<div id="myCanvasContainer">
    <canvas width="300px" height="300px" id="myCanvas">
        <p>Your browser doesn't support canvas. Get a new browser :|</p>
    </canvas>
</div>
<div id="tags">
    <ul></ul>
</div>
html, body {
    background: black;
    width:100%;
    height:100%;
    margin: 0;
    font-family:'Helvetica, Verdana';
}
/* just to be sure these are full screen*/
 h1 {
    margin: 0;
    padding:0;
    font-size: 16px;
}
#info * {
    color: white;
}
canvas {
    display:block;
}
/* To remove the scrollbars */
 .tooltip {
    background: #C8FDFF;
    border: 1px solid #428183;
    padding: 5px;
    width: 400px;
    font-size: 13px;
    font-family:'Exo 2', sans-serif;
}
.tooltip img {
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}
select, select option {
    color: black !important;
    font-size: 10px;
    margin-top: 6px;
    width: 100px;
}
.info {
    position: absolute;
    top:0;
    left:0;
    padding: 10px;
    background: rgba(95, 95, 95, 0.39);
    color:#28FFF6;
    font-size: 11px;
    font-family:'Alegreya Sans SC', sans-serif;
}
#info {
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
}
#info2 {
    left: auto;
    right: 0;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
}
small {
    display: block;
    color: rgb(151, 151, 151) !important;
    font-size: 12px;
}
#num {
    font-size: 20px;
}
#lbl input {
    margin-top: -13px;
    float: left;
    margin-left: 35px;
}
#lbl {
    float: left;
    margin-top: 8px;
}
.loader {
    height: 100px;
    width: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    z-index: 10000;
}
/*ignore following*/
 .bubblingG {
    text-align: center;
    width:160px;
    height:100px;
}
.bubblingG span {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin: 50px auto;
    background: #000000;
    -moz-border-radius: 100px;
    -moz-animation: bubblingG 0.8s infinite alternate;
    -webkit-border-radius: 100px;
    -webkit-animation: bubblingG 0.8s infinite alternate;
    -ms-border-radius: 100px;
    -ms-animation: bubblingG 0.8s infinite alternate;
    -o-border-radius: 100px;
    -o-animation: bubblingG 0.8s infinite alternate;
    border-radius: 100px;
    animation: bubblingG 0.8s infinite alternate;
}
#bubblingG_1 {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    -ms-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
}
#bubblingG_2 {
    -moz-animation-delay: 0.24s;
    -webkit-animation-delay: 0.24s;
    -ms-animation-delay: 0.24s;
    -o-animation-delay: 0.24s;
    animation-delay: 0.24s;
}
#bubblingG_3 {
    -moz-animation-delay: 0.48s;
    -webkit-animation-delay: 0.48s;
    -ms-animation-delay: 0.48s;
    -o-animation-delay: 0.48s;
    animation-delay: 0.48s;
}
@-moz-keyframes bubblingG {
    0% {
        width: 20px;
        height: 20px;
        background-color:#000000;
        -moz-transform: translateY(0);
    }
    100% {
        width: 48px;
        height: 48px;
        background-color:#FFFFFF;
        -moz-transform: translateY(-42px);
    }
}
@-webkit-keyframes bubblingG {
    0% {
        width: 20px;
        height: 20px;
        background-color:#000000;
        -webkit-transform: translateY(0);
    }
    100% {
        width: 48px;
        height: 48px;
        background-color:#FFFFFF;
        -webkit-transform: translateY(-42px);
    }
}
@-ms-keyframes bubblingG {
    0% {
        width: 20px;
        height: 20px;
        background-color:#000000;
        -ms-transform: translateY(0);
    }
    100% {
        width: 48px;
        height: 48px;
        background-color:#FFFFFF;
        -ms-transform: translateY(-42px);
    }
}
@-o-keyframes bubblingG {
    0% {
        width: 20px;
        height: 20px;
        background-color:#000000;
        -o-transform: translateY(0);
    }
    100% {
        width: 48px;
        height: 48px;
        background-color:#FFFFFF;
        -o-transform: translateY(-42px);
    }
}
@keyframes bubblingG {
    0% {
        width: 20px;
        height: 20px;
        background-color:#000000;
        transform: translateY(0);
    }
    100% {
        width: 48px;
        height: 48px;
        background-color:#FFFFFF;
        transform: translateY(-42px);
    }
}

External resources loaded into this fiddle: