Fire JS Bin - TwitterCanvas10K

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

$(function () {
  var j;
  var k;
  var l = $('#tw');
  var m = $('#d');
  var n = $('#t');
  var o = $('#av');
  var p = $('#n');
  var q = $('#me');
  var r = $('#m');
  var s = $('#sw');
  var t = $('.so');
  var u = $('#cu');
  var v = $('#u');
  var z = $("#c");
  var A;
  var B;
  var C;
  var D = 0.1;
  var E;
  var F;
  var G = true;
  var H = 100;
  var I = 1;

function init() {
    j = new Twitter();
    j.getFriends('statuses/friends.json?screen_name=robhawkes');
    updateCanvasDimensions();
    E = new Boundary(0, 0, B, A);
    initEventListeners();
    timeout()
  };

function updateCanvasDimensions() {
    z.attr({
      height: ($(window).height() > 600) ? $(window).height() : '600',
      width: ($(window).width() > 740) ? $(window).width() : '740'
    });
    B = z.width();
    A = z.height();
    if (E) E.setBoundary(0, 0, B, A);
    draw()
  };

function onKeyUp(e) {
    switch (e.keyCode) {
    case 32:
      hideTweetWrapper();
      if (s.is(':hidden')) {
        s.fadeIn(500)
      } else {
        s.fadeOut(500)
      }
      break
    }
  };

function onMove(e) {
    if (F) F.mousePos.set(e.pageX, e.pageY)
  };

function timeout() {
    draw();
    update();
    setTimeout(function () {
      timeout()
    }, 30)
  };

function draw() {
    var a = z.get(0);
    if (a.getContext == null) {
      return
    };
    C = a.getContext('2d');
    C.clearRect(0, 0, B, A);
    if (F) F.draw()
  };

function update() {
    if (F) F.update()
  };

<!DOCTYPE html>
<html lang="en">
  <title>Twitter. Canvas. 10K. | Rob Hawkes | 10K Apart</title>
  <meta charset="utf-8">
  <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  
  <body>
    <canvas id="c" width="400" height="400"></canvas>
    <button id="o">Options</button>
    <div id="m"></div>
    <div id="sw">
      <section id="s">
        <h1>Twitter. Canvas. 10K.</h1>
        <p>Press the spacebar to toggle this screen.</p>
        <p>
          This is an experiment to see how HTML5 canvas can visualise data in interesting
          ways. Each of the 100 points you see is a Twitter user. You're looking
          at the people I follow by default (
          <a href="http://twitter.com/robhawkes">@robhawkes</a>
          ), but you can change that below. Click on a point and you'll see more
          information about that user. You can also sort the users in different ways.
          All this in under 10KB of code. Awesome!
        </p>
        <p>
          If nothing happens the Twitter API is probably down or the API limit has
          been reached. If so, try again later. Some things are out of my control
          unfortunately.
        </p>
        <h2>Sort users by</h2>
        <ul>
          <li><button type="button" class="so so1">Total followers</button></li>
          <li><button type="button" class="so so2">Total following</button></li>
          <li><button type="button" class="so so3 a">Total tweets</button></li>
          <li><button type="button" class="so so4">Age of account</button></li>
          <li><button type="button" class="so so5">Number of times listed</button></li>
        </ul>
        <h2>Change Twitter user</h2>
        <p>
          <form id="cu">
            <input id="u" type="text">
            <input id="sub" type="submit" value="Change">
          </form>
        </p>
      </section>
    </div>
    <div id="tw">
      <section id="d">
        <img id="av">
        <h1 id="n"></h1>
        <p id="me"></p>
        <p id="t"></p>
      </section>
    </div>
  </body>

</html>

* { margin:0; padding:0 }
html, body { height:100% }
body { color:#fff; font-family:Helvetica Neue, Verdana, sans-serif; font-size:16px; text-shadow:0 0 5px #222 }
h1 { color:#ec81f3; font-size:40px; margin:0 0 20px }
h2 { color:#56bff6; font-size:25px; margin:40px 0 10px }
p, ul { line-height:1.5em; list-style:none; margin:20px 0 }
li { display:inline-block; margin:5px 2px }
p a, p a:visited { color:#ec81f3; text-decoration:none }
p a:hover { border-bottom:1px solid #ec81f3 }
canvas, section { display:block }
#c { position:absolute }
#o { border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; position:absolute; right:40px }
#sw { background:rgba(0, 0, 0, 0.85); height:100%; min-height:600px; position:absolute; width:100%; min-width:740px }
#s { height:560px; left:50%; margin:-300px 0 0 -370px; padding:20px; position:absolute; top:50%; width:700px }
#cu input, button { border:3px solid #808080; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; height:30px; margin:0 10px 0 0; padding:0 10px; width:225px }
#cu #sub, button { background:#808080; border:none; color:#fff; cursor:pointer; border:none; margin:0; width:auto }
#sub:hover, button:hover { background:#616161 }
button.active { background:#56bff6 }
#tw { background:rgba(0, 0, 0, 0.8); height:100%; position:absolute; visibility:hidden; width:100% }
#d { margin:0 auto; text-shadow:2px 2px 3px #222; width:60% }
#n { font-size:50px; font-weight:normal; margin:0 0 5px 68px }
#n a, #n a:visited { color:#56bff6; text-decoration:none }
#n a:hover { border-bottom:2px solid #56bff6 }
#me { color:#9d9d9d; font-style:italic; font-weight:lighter; margin:0 0 20px 68px; text-shadow:none }
#av { border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; float:left; height:48px; margin:7px 0 0; width:48px }
#t { font-size:30px; font-weight:lighter; margin-left:68px }
#m { background:#fff; height:100%; position:absolute; width: 100% }

Pop out