Wargames Visualization

australia_small.json

europe_small.json

{"type":"Topology","transform":{"scale":[0.009461500450045006,0.005756345734573457],"translate":[-54.524754,2.053389]},"objects":{"europe":{"type":"GeometryCollection","geometries":[{"type":"Polygon","arcs":[[0,1,2,3,4,5,6]]},{"type":"Polygon","arcs":[[7,8,9,10,11]]},{"type":"Polygon","arcs":[[12,13,14,15,16]]},{"type":"Polygon","arcs":[[17,18,19]]},{"type":"Polygon","arcs":[[20,21,22,23,24]]},{"type":"Polygon","arcs":[[-4,25,26,27]]},{"type":"Polygon","arcs":[[28]]},{"type":"Polygon","arcs":[[-6,29,30,31]]},{"type":"Polygon","arcs":[[32,33,-30,-5,-28,34,35,-8,36,37,38]]},{"type":"MultiPolygon","arcs":[[[39]],[[-39,40]]]},{"type":"Polygon","arcs":[[41,42,43,44]]},{"type":"Polygon","arcs":[[45,46]]},{"type":"MultiPolygon","arcs":[[[47]],[[48]],[[49,-35,-27,50,51,-43,52,-10]]]},{"type":"MultiPolygon","arcs":[[[53,54]],[[55]]]},{"type":"MultiPolygon","arcs":[[[56]],[[57,-15,58]]]},{"type":"Polygon","arcs":[[59,-20,60,61,62,63]]},{"type":"Polygon","arcs":[[-1,64,65,66,67,-64,68]]},{"type":"Polygon","arcs":[[69,-54]]},{"type":"MultiPolygon","arcs":[[[70]],[[71]],[[72,73,-51,-26,-3]]]},{"type":"Polygon","arcs":[[74,75,-21,76]]},{"type":"Polygon","arcs":[[-36,-50,-9]]},{"type":"Polygon","arcs":[[77,-47,78,-22,-76]]},{"type":"Polygon","arcs":[[79,80]]},{"type":"Polygon","arcs":[[81,-16,-58,82]]},{"type":"Polygon","arcs":[[-61,-19,83,84]]},{"type":"Polygon","arcs":[[-37,-12,85]]},{"type":"Polygon","arcs":[[-34,86,-77,-25,87,88,-31]]},{"type":"Polygon","arcs":[[89,-45]]},{"type":"Polygon","arcs":[[90,-81,91,92,-13,93,-67]]},{"type":"Polygon","arcs":[[-17,-82,94,-84,-18,-60,-68,-94]]},{"type":"Polygon","arcs":[[-89,95,-65,-7,-32]]},{"type":"Polygon","arcs":[[-2,-69,-63,96,-73]]},{"type":"Polygon","arcs":[[97,-92,-80,-91,-66,-96,-88,-24]]}]}},"arcs":[[[7557,8003],[-8,-71],[-59,0],[19,-39],[-34,-111]],[[7475,7782],[-20,-29],[-92,-4],[-55,-40],[-86,14]],[[7222,7723],[-151,45],[-24,60],[-104,-30],[-12,-33],[-65,25]],[[6866,7790],[-53,4],[-49,32],[16,43],[-3,30]],[[6777,7899],[31,10],[54,-48],[15,45],[93,-7],[76,31],[51,-5],[33,-36],[10,30],[-16,113],[39,22],[37,80]],[[7200,8134],[78,-56],[59,71],[38,13],[82,-53],[50,9],[48,-32]],[[7555,8086],[-8,-22],[10,-61]],[[6414,8469],[-12,-117]],[[6402,8352],[-28,-7],[-11,-97]],[[6363,8248],[-93,79],[-54,-14],[-74,82],[-49,70],[-49,3],[-16,61]],[[6028,8529],[85,34]],[[6113,8563],[78,-14],[98,37],[66,-76],[59,-41]],[[8157,7328],[31,-72],[41,13],[81,-27],[155,-9],[53,44],[124,41],[77,-64],[62,-18]],[[8781,7236],[-55,-73],[-38,-124],[34,-98],[-91,23],[-108,-54]],[[8523,6910],[-1,-88],[-96,-15],[-75,60],[-84,-47],[-78,5]],[[8189,6825],[-8,114],[-53,56]],[[8128,6995],[18,25],[-12,19],[18,57],[40,54],[-52,75],[-9,62],[26,41]],[[7772,7436],[37,1],[-27,-76],[52,-67],[-15,-82],[-25,-8]],[[7794,7204],[-20,-16],[-35,-40],[-16,-96]],[[7723,7052],[-92,66],[-40,73],[-40,38],[-49,65],[-23,54],[-52,80],[23,73],[37,-40],[22,37],[51,3],[91,-28],[72,2],[49,-39]],[[8245,9009],[102,-1],[115,65],[24,98],[87,56],[-10,78]],[[8563,9305],[64,29],[114,67]],[[8741,9401],[111,-44],[15,-43],[56,21],[103,-41],[10,-82],[-22,-47],[66,-113],[43,-32],[-6,-32],[71,-30],[30,-46],[-41,-38],[-85,6],[-21,-17],[25,-57],[26,-112]],[[9122,8694],[-90,-10],[-33,-38],[-7,-87],[-42,16],[-95,-8],[-28,41],[-40,-31],[-39,25],[-84,4],[-118,42],[-106,13],[-82,-4],[-58,-47],[-51,-6]],[[8249,8604],[-2,77],[-32,80],[63,36],[1,69],[-30,66],[-4,77]],[[6866,7790],[-8,-72],[-46,-29],[-79,22],[-23,-70],[-50,-6],[-18,28],[-59,-59],[-51,-8],[-46,36]],[[6486,7632],[-36,77],[-51,-27],[2,78],[77,98],[-3,44],[48,-16],[29,29]],[[6552,7915],[90,0],[22,38],[113,-54]],[[9354,5734],[3,-14],[-109,-71],[-51,23],[-25,69],[50,7],[20,-9],[29,15],[20,-2],[15,-22],[16,-3],[20,13],[12,-6]],[[7200,8134],[-60,75],[-54,42],[-11,73],[-19,52],[77,37],[40,44],[75,33],[27,33],[28,-20],[47,19]],[[7350,8522],[50,-56],[79,-15],[-7,-48],[58,-36],[16,45],[72,-20],[10,-54],[79,-11],[47,-85]],[[7754,8242],[-31,0],[-15,-32],[-26,-7],[-6,-40],[-20,-8],[-4,-16],[-35,-18],[-47,2],[-15,-37]],[[6811,9195],[2,-67],[107,-41],[-1,-61],[107,32],[60,48],[119,-69],[50,-55]],[[7255,8982],[24,-88],[-29,-47],[39,-62],[26,-93],[-8,-59],[43,-111]],[[6552,7915],[13,125],[54,118],[-152,33],[-50,45]],[[6417,8236],[6,76],[-21,40]],[[6414,8469],[-18,182],[63,0],[27,65],[26,160],[-19,58]],[[6493,8934],[20,37],[89,10],[19,-39],[72,86],[-24,65],[-5,98]],[[6664,9191],[80,-22],[67,26]],[[7104,9304],[-63,-141],[-111,98],[-15,72],[155,58],[34,-87]],[[6664,9191],[-43,97],[-3,177],[17,47],[31,53],[93,10],[37,48],[84,49],[-3,-89],[-31,-57],[13,-48],[57,-27],[-26,-65],[-31,19],[-76,-125],[28,-85]],[[4808,6919],[5,124],[-43,75],[150,125],[129,-31],[142,1],[112,-30],[88,9],[171,-5]],[[5562,7187],[42,-68],[195,-80],[38,39],[119,-79],[122,23]],[[6078,7022],[6,-101],[-100,-116],[-136,-37],[-9,-58],[-65,-96],[-41,-142],[42,-99],[-62,-78],[-22,-112],[-80,-35],[-75,-135],[-134,-1],[-101,3],[-66,-61],[-41,-66],[-51,14],[-39,58],[-30,101],[-99,27]],[[4975,6088],[-9,57],[39,66],[15,47],[-37,51],[30,115],[-43,104],[46,14],[4,81],[17,27],[2,135],[49,46],[-30,88],[-62,5],[-18,-22],[-62,0],[-27,86],[-43,-25],[-38,-44]],[[8332,9683],[13,103],[-39,-22],[-67,62],[-9,99],[133,49],[133,25],[115,-29],[109,5],[16,-30],[-75,-100],[31,-162],[-45,-55]],[[8647,9628],[-87,0],[-91,65],[-47,21],[-90,-31]],[[207,78],[-40,-66],[-51,-12],[-14,49],[-24,7],[-33,-48],[-45,36],[27,75],[8,79],[19,74],[-41,103],[-8,119],[54,149],[114,-61],[113,-147],[16,-70],[-62,-159],[-33,-128]],[[6773,6966],[-35,-135],[-48,36],[-24,117],[21,64],[68,66],[18,-148]],[[6363,8248],[23,-15],[31,3]],[[6486,7632],[-4,-49],[31,-64],[-37,-53],[27,-135],[58,-22],[-12,-75]],[[6549,7234],[-96,-98],[-209,47],[-154,-57],[-12,-104]],[[5562,7187],[55,104],[20,345],[-109,183],[-78,87],[-162,68],[-11,127],[137,38],[178,-45],[-34,196],[100,-74],[246,135],[32,143],[92,35]],[[5108,9001],[-80,36],[-66,-2],[22,93],[-22,93]],[[4962,9221],[89,7],[113,-107],[-56,-120]],[[5445,9829],[-113,-188],[108,24],[116,-1],[-28,-141],[-95,-156],[109,-11],[103,-223],[72,-28],[65,-198],[30,-69],[129,-33],[-13,-111],[-54,-51],[42,-90],[-95,-91],[-141,2],[-180,-48],[-50,34],[-70,-81],[-97,20],[-75,-67],[-56,35],[155,183],[95,37],[-166,29],[-30,69],[111,54],[-58,94],[20,114],[157,-16],[16,101],[-73,109],[-128,31],[-25,47],[38,77],[-35,48],[-57,-82],[-6,167],[-53,89],[38,180],[82,141],[85,-14],[127,14]],[[8268,5845],[57,-58],[83,9],[78,-11],[-2,-30],[57,21],[-13,-52],[-152,-14],[1,28],[-129,34],[20,73]],[[7983,6738],[70,16],[41,38],[57,-3],[17,29],[21,7]],[[8523,6910],[52,-46],[-33,-109],[-25,-21],[-65,6],[-55,16],[-128,-44],[74,-98],[-54,-28],[-59,-1],[-56,90],[-21,-38],[25,-104],[53,-82],[-40,-38],[59,-80],[52,-50],[2,-98],[-98,46],[31,-90],[-68,-17],[41,-153],[-71,-3],[-86,76],[-39,139],[-19,116],[-95,178],[-8,49],[50,84],[6,58],[33,25],[2,45]],[[7752,7619],[27,-68],[32,-49],[-39,-66]],[[7723,7052],[-10,-29]],[[7713,7023],[-100,64],[-62,63],[-96,51],[-89,128],[22,13],[-48,73],[-3,59],[-67,27],[-34,-75],[-30,59],[6,63]],[[7212,7548],[74,-6],[19,28],[36,-27],[42,-4],[-2,49],[38,17],[10,71],[85,46]],[[7514,7722],[33,-21],[78,-75],[88,-34],[39,27]],[[7557,8003],[53,-44],[40,-19],[88,21],[9,35],[42,5],[51,27],[12,-11],[50,22],[24,41],[35,10],[114,-53],[21,18]],[[8096,8055],[59,-47],[8,-47]],[[8163,7961],[-64,-36],[-50,-118],[-64,-118],[-85,-32]],[[7900,7657],[-66,7],[-82,-45]],[[7514,7722],[-21,59],[-18,1]],[[5108,9001],[17,-124],[-80,-155],[-187,-103],[-150,27],[86,181],[-55,177],[144,136],[79,81]],[[7403,6285],[-38,-137],[15,-54],[-21,-90],[-81,66],[-55,18],[-146,89],[14,90],[124,-16],[107,19],[81,15]],[[6736,6802],[64,-123],[-15,-230],[-48,11],[-43,-58],[-40,46],[-5,210],[-24,98],[58,-9],[53,55]],[[7222,7723],[-11,-87],[25,-73]],[[7236,7563],[-85,26],[-86,-62],[7,-86],[-13,-50],[34,-88],[99,-88],[54,-143],[117,-140],[83,1],[26,-40],[-30,-33],[172,-115],[91,-91],[11,-33],[-21,-62],[-58,81],[-91,29],[-45,-112],[77,-65],[-13,-90],[-44,-11],[-56,-149],[-45,-13],[1,53],[21,93],[23,36],[-42,102],[-31,88],[-44,21],[-31,75],[-68,32],[-46,70],[-79,10],[-82,79],[-96,113],[-72,100],[-33,172],[-53,20],[-86,58],[-48,-24],[-61,-80],[-44,-13]],[[8165,9081],[-8,44],[10,48],[-46,28],[-111,30],[-22,146]],[[7988,9377],[121,53],[178,-11],[103,17],[15,-36],[56,-11],[102,-84]],[[8245,9009],[-26,54],[-54,18]],[[7988,9377],[4,131],[52,109],[99,59],[84,-130],[85,4],[20,133]],[[8647,9628],[51,-40],[9,-84],[34,-103]],[[8576,8020],[25,26],[71,17],[78,-55],[43,-6],[48,-46],[-8,-59],[39,-29],[15,-72],[37,-45],[-8,-25],[20,-19],[-28,-12],[-62,5],[-11,24],[-22,-13],[8,-32],[-29,-56],[-19,-59],[-26,-18]],[[8747,7546],[-19,79],[11,73],[-3,77],[-61,104],[-34,73],[-33,51],[-32,17]],[[8043,6982],[36,10],[49,3]],[[7983,6738],[-43,43],[-15,74],[13,59],[14,-1],[5,36],[63,27],[23,6]],[[7794,7204],[28,-30],[16,-24],[34,-18],[41,-36],[-9,-15]],[[7904,7081],[-21,-39],[-27,-16],[-7,33],[-46,-85],[6,-56],[-21,14],[-30,56],[-45,35]],[[6113,8563],[55,48],[92,255],[145,73],[88,-5]],[[7255,8982],[72,51],[165,80],[132,59],[107,-29],[7,-43],[102,-2],[131,-19],[194,2]],[[8249,8604],[54,-152],[-12,-49],[-52,-20],[-96,-145],[26,-78],[-22,11]],[[8147,8171],[-100,66],[-78,-24],[-48,18],[-63,-38],[-53,62],[-44,-24],[-7,11]],[[4975,6088],[-42,-45],[-56,23],[-55,-18],[16,136],[-10,107],[-47,16],[-25,66],[8,113],[42,64],[8,69],[22,105],[-2,74],[-21,62],[-5,59]],[[8163,7961],[46,38],[65,-20],[68,0],[49,-43],[36,27],[78,17],[27,40],[44,0]],[[8747,7546],[47,-32],[50,28],[48,-30]],[[8892,7512],[2,-45],[-51,-37],[-32,16],[-30,-210]],[[8157,7328],[-19,30],[25,29],[-26,22],[-34,-39],[-61,51],[-9,71],[-65,41],[-11,55],[-57,69]],[[8043,6982],[-4,13],[13,21],[12,42],[-15,-1],[-20,32],[-19,9],[-14,27],[-18,11],[-15,25],[-19,-10],[-15,-59],[-25,-11]],[[8147,8171],[-29,-46],[-22,-70]],[[7212,7548],[24,15]],[[9122,8694],[40,-7],[26,40],[33,-9],[109,17],[68,-98],[-27,-36],[9,-53],[84,-9],[38,-75],[-2,-34],[134,-61],[81,27],[65,-81],[62,2],[156,-57],[1,-51],[-43,-91],[23,-97],[-16,-57],[-102,-12],[-55,-49],[-3,-77],[-85,-14],[-70,-56],[-99,-9],[-91,-65],[6,-108],[52,-42],[108,10],[-21,-62],[-116,-30],[-143,-100],[-59,34],[23,83],[-115,50],[19,34],[101,58],[-31,39],[-164,44],[-7,65],[-98,-21],[-40,-96],[-81,-128]]]}

featureditem-webfont.eot

featureditem-webfont.svg

featureditem-webfont.ttf

featureditem-webfont.woff

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <title>Github Wargames</title>
    <link href="styles.css" media="all" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
    <meta property="og:image" content="/img/github_wargames_screenshot.png" />
    <meta property="og:description" content="A visualization of all Github activity in the style of WarGames, the classic 80's coldwar movie" />
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script src="streamwriter.js"></script>
    <script src="/streamserver.v0.js"></script>
</head>
<body bgcolor="#000">
    <div id="container">
        <div id="left" class="column">
            <div id="leftmap" class="glowbox">
                <div id="leftmapoverlay"></div>
            </div>
            <div id="leftmiddle">
               <div class="smallwhite">USA</div>
               <div class="smallwhite">EUROPE</div>
               <div class="smallwhite">AUS/NZ</div>
               <div class="bigred" id="usatotal">00000</div>
               <div class="bigred" id="europetotal">00000</div>
               <div class="bigred" id="australiatotal">00000</div>
            </div>
            <div id="leftbottom">
                <div id="leftbottom1" class="glowbox">
                <div id="leftbottom1overlay"></div>
                </div>
                <div id="leftbottom2" class="glowbox">
                    <div class="texttitle">
                        Listing Users
                    </div>
                    <div id="leftbottom2text">
                    </div>
                </div>
            </div>
        </div>
        <div id="center" class="column">
            <div id="centermap" class="glowbox">
                <div id="centermapoverlay">This is the overlay</div>
            </div>
            <div id="centermiddle">
               <div class="smallwhite">total</div>
               <div class="smallwhite">events / min</div>
               <div class="smallwhite">elapsed</div>
               <div class="bigred" id="eventtotal">00000</div>
               <div class="bigred" id="eventpermin">00000</div>
               <div class="bigred" id="elapsedtime">00000</div>
            </div>
            <div id="centerbottom" class="glowbox">
                Welcome to a live <a href="http://github.com">Github</a> visualization in the style of the 80's cold war movie <a href="http://en.wikipedia.org/wiki/WarGames">WarGames</a>.  
                This is made with nodejs, socket.io, d3, and IRC (as the messaging infrastructure... yeah, really).  Data is from <a href="http://github.com/timeline.json">github.com</a> and <a href="http://geonames.org">geonames.org</a>.
                <br><br>

                This is part of a larger *casual* general purpose streaming data platform I'm putting together.  See 
                the <a href="http://github.com/arscan/streamed">Github repo</a> for information. 
            </div>
        </div>
        <div id="right" class="column">
            <div id="rightmap" class="glowbox">
                <div id="rightmapoverlay"></div>
            </div>
            <div id="rightmiddle">
               <div class="smallwhite">Identified</div>
               <div class="smallwhite">Tweets</div>
               <div class="smallwhite">Random</div>
               <div class="bigred" id="identpercent">00000</div>
               <div class="bigred" id="twitter">00000</div>
               <div class="bigred" id="fancy2">00000</div>
            </div>
            <div id="rightbottom">
                <div id="rightbottom1" class="glowbox">
                    <div class="texttitle">
                        Listing Repos
                    </div>
                    <div id="rightbottom1text">
                    </div>
                </div>
                <div id="rightbottom2" class="glowbox">
                    <div class="texttitle">
                        Listing Languages
                    </div>
                    <div id="rightbottom2text">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="paused">
        Paused
    </div>
</body>
<script src="scripts.js"></script>
<script type="text/javascript">
    // $.getJSON('http://cdn.api.twitter.com/1/urls/count.json?url=encodeURIComponent(document.URL)&callback=?', null, function (results) {
    //         alert("done " + results.count);
    //                       });
/*
    function twitCount(data){
        alert(data.count);
    }
    */
    // jsonparser1();
</script>    


<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4481396-3', 'robscanlon.com');
  ga('send', 'pageview');

</script>

</html>

lets_go_digital_regular-webfont.eot

lets_go_digital_regular-webfont.svg

lets_go_digital_regular-webfont.ttf

lets_go_digital_regular-webfont.woff

scripts.js

$("#centermapoverlay").streamwriter({enabled:false});
$("#leftmapoverlay").streamwriter({enabled:false});
$("#leftbottom1overlay").streamwriter({enabled:false});
$("#rightmapoverlay").streamwriter({enabled:false});
$("#rightbottom1text").streamwriter({enabled:false,charblock: 20, maxlines:7, timeout: 20});
$("#rightbottom2text").streamwriter({enabled:false,maxlines:7, charblock: 20, timeout: 20});
$("#leftbottom2text").streamwriter({enabled:false,maxlines:7, charblock: 20, timeout: 20});



var width = 500,
    height = 300;

var eventcount = 0,
    australiacount = 0,
    europecount=0,
    usacount=0,
    identyes=0;

var starttime = new Date();

var paused = false;
$('#leftbottom2').mouseenter(function() {
    paused = true;
    $('#paused').css('display','inherit');
});
$('#leftbottom2').mouseleave(function() {
    $('#paused').css('display','none');
    paused = false;
});
$('#rightbottom1').mouseenter(function() {
    paused = true;
    $('#paused').css('display','inherit');
});
$('#rightbottom1').mouseleave(function() {
    $('#paused').css('display','none');
    paused = false;
});

$('#rightbottom2').mouseenter(function() {
    paused = true;
    $('#paused').css('display','inherit');
});
$('#rightbottom2').mouseleave(function() {
    $('#paused').css('display','none');
    paused = false;
});


var centerprojection = d3.geo.mercator() //d3.geo.mercator()
    .scale(80)
    .translate([width / 2, height / 2])
    .precision(.1);

var centerpath = d3.geo.path()
    .projection(centerprojection);

var leftprojection = d3.geo.mercator() //d3.geo.mercator()
    .scale(400)
    .translate([1.85*width, 1.45 * height])
    .precision(.1);

var leftbotprojection = d3.geo.mercator() //d3.geo.mercator()
    .scale(197)
    .translate([-385,0])
    .precision(.1);

var leftpath = d3.geo.path()
    .projection(leftprojection);

var leftbotpath = d3.geo.path()
    .projection(leftbotprojection);


var rightprojection = d3.geo.mercator()
    .scale(400)
    .translate([.3*width, 1.8*height ])
    .precision(.1);

var rightpath = d3.geo.path()
    .projection(rightprojection);


var svg = d3.select("#centermap").append("svg")
    .attr("width", width)
    .attr("height", height-12);

var svgleft = d3.select("#leftmap").append("svg")
    .attr("width", width)
    .attr("height", height);

var svgleftbottom = d3.select("#leftbottom1").append("svg")
    .attr("width", 230)
    .attr("height", 200);

var svgright = d3.select("#rightmap").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("world_small.json", function(error, world) {
  svg.insert("path")
      .datum(topojson.feature(world, world.objects.ne_110m_coastline))
      .attr("class", "land")
      .attr("d", centerpath);

  svg.insert("path")
      .datum(topojson.feature(world, world.objects.russia))
      .attr("class", "russia")
      .attr("d", centerpath);

  svg.insert("path")
      .datum(topojson.feature(world, world.objects.usa))
      .attr("class", "usa")
      .attr("d", centerpath);

});

d3.json("europe_small.json", function(error, world) {
  svgright.insert("path")
      .datum(topojson.feature(world, world.objects.europe))
      .attr("class", "land")
      .attr("d", rightpath);


});
d3.json("wargames_usa.json", function(error, world) {
  svgleft.insert("path")
      .datum(topojson.feature(world, world.objects.usa))
      .attr("class", "usa")
      .attr("d", leftpath);

});

d3.json("australia_small.json", function(error, world) {
  svgleftbottom.insert("path")
      .datum(topojson.feature(world, world.objects.australia))
      .attr("class", "land")
      .attr("d", leftbotpath);

});

var pad = function(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}

var updateStats = function(){
    var elapsed = parseInt((new Date() - starttime)/1000);
    $("#elapsedtime").text(pad(elapsed,5));
    $("#eventpermin").text(pad(parseInt(60*eventcount/elapsed),5));
    $("#eventtotal").text(pad(eventcount,5));
    $("#identpercent").text(pad(parseInt(100*identyes/eventcount),2) + "%");
    $("#usatotal").text(pad(usacount,5));
    $("#europetotal").text(pad(europecount,5));
    $("#australiatotal").text(pad(australiacount,5));
    if(Math.random()<.1){
        $("#fancy2").text(pad(parseInt(Math.random()*10000),5));
    }
}

var updateStatsLoop = function(){
   setTimeout(updateStatsLoop,1000);
   updateStats();
}
updateStatsLoop();

var updateTwitterLoop = function(){
    setTimeout(updateTwitterLoop,100000);
    $.getJSON('http://cdn.api.twitter.com/1/urls/count.json?url=' + encodeURIComponent(document.URL) + '&callback=?', null, function (results) {
            $("#twitter").text(pad(results.count,5));
            });
}

updateTwitterLoop();

d3.select(self.frameElement).style("height", height + "px");

StreamServer.onMessage(function (datain) {
    var chunks = datain.message.split("*");
    
    eventcount++;
    console.log(datain);

    var data = {};
    if(datain.location){
       data.location = datain.location.name;
       if(datain.location.lat && datain.location.lng){
           data.latlng = {"lat": datain.location.lat, "lng": datain.location.lng};
       }
    }
    
    data.actor = chunks[3].trim();
    data.repo = chunks[0].trim();
    data.type = chunks[5].trim();
    data.url = datain[3];

    setTimeout(function(){
        if(paused) return;
            /*
            $("#leftbottom2").prepend("<a href='" + data.url + "'>" + data.actor + "</a><br/>");
            $("#rightbottom1").prepend("<a href='" + data.url + "'>" + data.repo + "</a><br/>");
            $("#rightbottom2").prepend("<a href='" + data.url + "'>" + data.type + "</a><br/>");
            */


            $("#leftbottom2text").streamwriter("write", data.actor);
            $("#rightbottom1text").streamwriter("write", data.repo);
            $("#rightbottom2text").streamwriter("write", data.type);

        if(!data.latlng){
            // $("#centerbottom table").prepend("<tr><td><a href='" + data.url + "'>" + data.repo + "</a></td><td class='actor'><a href='http://github.com/" + data.actor + "'>" + data.actor + "</a></td><td>&nbsp;</td></tr>\n");
        } else {
            identyes++;
            // $("#centerbottom table").prepend("<tr><td class='hit repo'>" + data.repo + "</td><td class='actor hit'><a href='http://github.com/" + data.actor + "'>" + data.actor + "</a></td><td class='loc hit'>" + data.location + "</td></tr>\n");
        
            centercoordinates = centerprojection([data.latlng.lng,data.latlng.lat]);
            svg.append('svg:circle')
            .attr('cx', centercoordinates[0])
            .attr('cy', centercoordinates[1])
            .attr('r', 0)
            .style('opacity',0)
            .attr('class','point')
            .transition()
            .duration(200)
            .attr('r',50)
            .style('opacity',1.0)
            .transition()
            .ease('linear')
            .duration(500 + Math.random()*500)
            .attr('r',2)
            .style('opacity',1);

            // $("#centermapoverlay").prepend(data.location + "<br/>");
            $("#centermapoverlay").streamwriter("write",data.location);

            /* USA */

            if(data.latlng.lat < 50 && data.latlng.lat >24 && data.latlng.lng > -125 && data.latlng.lng < -66){ 
                usacount++;
                leftcoordinates = leftprojection([data.latlng.lng,data.latlng.lat]);
                svgleft.append('svg:circle')
                .attr('cx', leftcoordinates[0])
                .attr('cy', leftcoordinates[1])
                .attr('r', 0)
                .style('opacity',0)
                .attr('class','point')
                .transition()
                .duration(200)
                .attr('r',100)
                .style('opacity',1.0)
                .transition()
                .ease('linear')
                .duration(500 + Math.random()*500)
                .attr('r',4)
                .style('opacity',1);

                //$("#leftmapoverlay").prepend(data.location + "<br/>");
                $("#leftmapoverlay").streamwriter("write",data.location);
            }

            /* europe */
            
            if(data.latlng.lat < 60 && data.latlng.lat > 35 && data.latlng.lng > -9 && data.latlng.lng < 40){ 
                europecount++;
                rightcoordinates = rightprojection([data.latlng.lng,data.latlng.lat]);
                svgright.append('svg:circle')
                .attr('cx', rightcoordinates[0])
                .attr('cy', rightcoordinates[1])
                .attr('r', 0)
                .style('opacity',0)
                .attr('class','point')
                .transition()
                .duration(200)
                .attr('r',100)
                .style('opacity',1.0)
                .transition()
                .ease('linear')
                .duration(500 + Math.random()*500)
                .attr('r',4)
                .style('opacity',1);
                //$("#rightmapoverlay").prepend(data.location + "<br/>");
                $("#rightmapoverlay").streamwriter("write",data.location);
            }

            /* AUS / NZ */

            if(data.latlng.lat < -10 && data.latlng.lat > -50 && data.latlng.lng > 115 && data.latlng.lng < 180){ 
                australiacount++;
                leftbottomcoordinates = leftbotprojection([data.latlng.lng,data.latlng.lat]);
                svgleftbottom.append('svg:circle')
                .attr('cx', leftbottomcoordinates[0])
                .attr('cy', leftbottomcoordinates[1])
                .attr('r', 0)
                .style('opacity',0)
                .attr('class','point')
                .transition()
                .duration(200)
                .attr('r',100)
                .style('opacity',1.0)
                .transition()
                .ease('linear')
                .duration(500 + Math.random()*500)
                .attr('r',4)
                .style('opacity',1);
                //$("#leftbottom1overlay").prepend(data.location + "<br/>");
                $("#leftbottom1overlay").streamwriter("write",data.location);
            }
        }
    }, Math.random()*500);
});


// force a reload every hour
setTimeout(function(){location.reload(true)},3600000);

streamwriter.js

(function ( $ ) {
    $.widget( "arscan.streamwriter", {
        options: {
            enabled: true,
            timeout: 50,
            charblock: 6,
            maxlines: 7,
        },
    _currentline: {},
    _currentlinecount:{},
    _queue: {},
    _create: function() {
        var self = this;
        self._currentline[self.element[0].id] = self.element.text();
        self._currentlinecount[self.element[0].id] = 0;
        self._queue[this.element[0].id] = [];
        self.element.empty();
        var loop = function(){

            setTimeout(loop, self.options.timeout);
            self._typewrite();

        }
        if(self.options.enabled)
            loop();
    },
    write: function(text){
        if(this.options.enabled){
            this._queue[this.element[0].id].push(text);
        } else {
            this._currentlinecount[this.element[0].id]++;
            this.element.append(document.createElement("br"));
            if(this._currentlinecount[this.element[0].id] > this.options.maxlines){
                this._currentlinecount[this.element[0].id]=0;
                this.element.empty();

            }
            this.element.append(document.createTextNode(text));
        }

    },
    _typewrite: function(){

        if(this._currentline[this.element[0].id].length > 0){
            this.element.append(document.createTextNode(this._currentline[this.element[0].id].substring(0,this.options.charblock)));
            this._currentline[this.element[0].id] = this._currentline[this.element[0].id].slice(this.options.charblock);

        } else if (this._queue[this.element[0].id].length > 0){
            this._currentlinecount[this.element[0].id]++;
            this.element.append(document.createElement("br"));
            if(this._currentlinecount[this.element[0].id] > this.options.maxlines){
                this._currentlinecount[this.element[0].id]=0;
                this.element.empty();

            }
            this._currentline[this.element[0].id] = this._queue[this.element[0].id].shift();
        }
    }

    });
})(jQuery);

styles.css

/* ---------*/
/*  font     */

@font-face {
    font-family: 'Lets go Digital';
    src: url('lets_go_digital_regular-webfont.eot');
    src: url('lets_go_digital_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('lets_go_digital_regular-webfont.woff') format('woff'),
         url('lets_go_digital_regular-webfont.ttf') format('truetype'),
         url('lets_go_digital_regular-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* by Font Diner */
/* http://fontdiner.com */
@font-face {
    font-family: 'featured_item';
    src: url('featureditem-webfont.eot');
    src: url('featureditem-webfont.eot?#iefix') format('embedded-opentype'),
         url('featureditem-webfont.woff') format('woff'),
         url('featureditem-webfont.ttf') format('truetype'),
         url('featureditem-webfont.svg#featured_itemregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* ---------*/
/*  maps     */

.land {
    stroke: #83F52C;
    stroke-width: 1;
    fill:none;  
}
.russia {
    stroke: #DD0048;
    stroke-width: 2;
    fill:none;  
}
.usa {
    stroke: #67C8FF;
    stroke-width: 2;
    fill:none;  
}
.point {
  fill: #67C8FF;
  stroke: #67C8FF;
  stroke-opacity: .5;
  stroke-width: .5px;
}
/* ------------*/
/*  common     */

body {

    font-family: 'featured_item';
    font-size: 18px;
    text-transform:uppercase;
    color: #67C8FF;

}
.glowbox {
    border:2px solid #FFF;
    border-radius: 5px;
    box-shadow: 0 0 15px #999,
                inset 0 0 10em #222;
    box-shadow: 0 0 15px #005b8e,
                inset 0 0 10em #002033;
}

.glowbox a{
    color: #67C8FF;
}

.texttitle {
    border-bottom: 1px;
    color: #DD0048;
}

.column {
    float: left;
}

h1 {
    margin: 0px;
    padding: 0px;
    color: #FFF;
    size: 16px;
    font-weight: normal;
    margin-top: -30px;
    text-align: center;

}

a {
    color: inherit;
    text-decoration: none;
}

td {
    color: #83F52C;
    margin: 0px;
    padding: 0px;
    font-size: 8px;
    line-height:130%;
}
table {
    width: 100%;
}

td.hit {
    color: #67C8FF;
}
td.loc{
    text-align:right;
}
td.repo{
}
td.actor{
}
.glass {

}

.glass:after{

}

/* ------------*/
/*  elements   */

#container{
    top:0;left:0;right:0;bottom:0;
    margin: auto;
    width: 1580px;
    height: 600px;
    position:absolute;
}

#center {
    margin-top:12px;
    padding-right:10px;
}

#centermapoverlay {
    font-family: 'Press Start 2P';
    font-size: 8px;
    line-height: 14px;
    color: #DD0048;
    position: absolute;
    padding-left:20px;
    top: 205px;
    height:84px;
    overflow:hidden;
}
#paused {
    position: absolute;
    left: 850px;
    top: 170px;
    font-size:40px;
    display:none;
}

#centerbottom {
    height: 172px;
    width: 480px;
    overflow: hidden;
    color: #83F52C;
    padding:8px;
    margin-top:26px;
}
#centermiddle {
    padding-top: 10px;
    padding-bottom: 23px;
    width: 500px;

}
#centermiddle div{
    float:left;
    width:165px;
    line-height:18px;
    text-align:center;
}

#left {
    width:500px;
    padding-right:10px;
    transform: 20px;
    -ms-perspective: 20px;
    -webkit-perspective: 800;
    -moz-perspective: 20px;
}
#leftmap {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(10deg);
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateY(.2deg);
}
#leftmapoverlay {
    font-family: 'Press Start 2P';
    font-size: 8px;
    line-height: 14px;
    color: #DD0048;
    position: absolute;
    bottom: 20px;
    left:20px;
    height:84px;
    overflow:hidden;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(10deg);
}
.smallwhite{
    color: #FFF;
    font-size:10px;
}
.bigred{
    font-size:26px;
    font-family: "Lets go Digital";
    color: #DD0048;
}
#leftmiddle {
    padding-top: 10px;
    padding-bottom: 30px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(10deg);
    text-align:center;

}
#leftmiddle div{
    float:left;
    width:165px;
    margin: auto;
    line-height:18px;
}


#leftbottom{
    margin-top:23px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(10deg);
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateY(.2deg);
}

#leftbottom1{
    float:left;
    width:230px;
    height:200px;

}
#leftbottom1overlay {
    font-family: 'Press Start 2P';
    font-size: 8px;
    line-height: 14px;
    color: #DD0048;
    position: absolute;
    top: 145px;
    left:20px;
    height:48px;
    overflow:hidden;
}
#leftbottom2{
    margin-left:30px;
    float:left;
    width:210px;
    height:180px;
    padding:10px;
    overflow:hidden;

}

#right {
    width:500px;
    padding-right:20px;
    transform: 20px;
    -ms-perspective: 20px;
    -webkit-perspective: 800;
    -moz-perspective: 20px;
}
#rightmap {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(350deg);
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateY(-.2deg);
}
#rightmapoverlay {
    font-family: 'Press Start 2P';
    font-size: 8px;
    line-height: 14px;
    color: #DD0048;
    position: absolute;
    bottom: 20px;
    right:20px;
    text-align:right;
    height:84px;
    overflow:hidden;
}
#rightmiddle {
    padding-top: 10px;
    padding-bottom: 24px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(350deg);
    text-align:center;

}
#rightmiddle div{
    float:left;
    width:165px;
    margin: auto;
    line-height:18px;
}


#rightbottom{
    margin-top:30px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(350deg);
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateY(-.2deg);
}

#rightbottom1{
    float:left;
    width:210px;
    height:180px;
    padding:10px;
    overflow:hidden;

}
#rightbottom2{
    margin-left:30px;
    float:left;
    width:210px;
    height:180px;
    padding:10px;
    overflow:hidden;

}

body {
    padding:30px;
}

wargames_usa.json

world_small.json