Skip to content

Instantly share code, notes, and snippets.

@arscan

arscan/australia_small.json

Last active August 14, 2021 06:17
Show Gist options
  • Save arscan/7046646 to your computer and use it in GitHub Desktop.
Save arscan/7046646 to your computer and use it in GitHub Desktop.
Download ZIP
Wargames Visualization
Display the source blob
Display the rendered blob
Raw
australia_small.json
{"type":"Topology","transform":{"scale":[0.006518465946594658,0.0035976646664666466],"translate":[113.338953,-46.641235]},"objects":{"australia":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","arcs":[[[0]],[[1]]]},{"type":"MultiPolygon","arcs":[[[2]],[[3]]]}]}},"arcs":[[[4918,1625],[148,-95],[204,90],[92,-18],[10,-329],[-53,-97],[-16,-224],[-52,76],[-107,-192],[-32,14],[-95,9],[-94,237],[-21,185],[-89,241],[5,128],[100,-25]],[[4635,9139],[57,-219],[98,105],[50,-117],[74,-109],[-15,-123],[33,-238],[22,-139],[38,-34],[42,-238],[-14,-144],[49,-188],[166,-146],[212,-253],[-21,-67],[89,-174],[60,-301],[61,61],[62,-120],[38,42],[25,-294],[109,-171],[71,-106],[120,-225],[43,-223],[5,-159],[-10,-172],[73,-236],[-10,-246],[-26,-129],[-41,-248],[3,-159],[-31,-199],[-67,-253],[-114,-138],[-57,-214],[-50,-138],[-45,-240],[-59,-138],[-39,-209],[-20,-191],[8,-88],[-88,-96],[-173,-10],[-140,-114],[-72,-108],[-93,-119],[-126,122],[-95,49],[25,145],[-85,-53],[-133,-200],[-134,75],[-87,44],[-87,19],[-148,81],[-100,172],[-28,210],[-35,141],[-77,112],[-147,35],[51,134],[-37,207],[-76,-193],[-136,-51],[81,153],[22,161],[60,137],[-12,205],[-125,-237],[-95,-95],[-60,-221],[-120,115],[6,147],[-96,202],[-81,103],[29,65],[-198,169],[-107,6],[-149,137],[-273,-27],[-199,-99],[-174,-93],[-148,19],[-162,-143],[-132,-65],[-30,-145],[-57,-114],[-131,-5],[-95,-26],[-137,50],[-110,-29],[-105,-13],[-91,-149],[-45,13],[-76,-78],[-74,-88],[-113,11],[-102,0],[-164,176],[-82,53],[3,160],[76,37],[26,65],[-5,99],[19,194],[-16,164],[-82,281],[-26,159],[8,158],[-61,181],[-4,82],[-68,111],[-19,217],[-89,220],[-20,118],[66,-119],[-50,257],[76,-80],[45,-108],[-3,143],[-76,219],[-15,87],[-35,83],[16,161],[31,69],[22,139],[-16,162],[63,200],[12,-212],[65,192],[123,93],[76,118],[116,102],[71,22],[42,-34],[120,103],[94,31],[23,61],[41,25],[85,-6],[160,81],[85,123],[38,149],[90,140],[8,112],[3,151],[107,236],[66,-240],[64,56],[-55,131],[48,135],[68,-60],[19,211],[85,137],[37,110],[76,47],[3,78],[68,-33],[1,70],[68,40],[75,37],[112,-127],[85,-165],[97,-2],[98,-26],[-33,153],[74,223],[69,73],[-25,69],[68,159],[93,98],[78,-34],[129,53],[-3,142],[-112,92],[82,40],[101,-69],[82,-114],[128,-71],[44,28],[95,-85],[90,79],[57,-24],[36,54],[70,-138],[-40,-149],[-58,-112],[-52,-9],[17,-111],[-46,-139],[-53,-137],[11,-78],[121,-154],[119,-89],[79,-96],[110,-165],[43,1],[81,-71],[23,-86],[147,-95],[101,95],[30,150],[32,123],[19,152],[46,221],[-21,135],[11,81],[-19,159],[21,209],[30,57],[-24,93],[36,147],[30,153],[3,79],[57,103],[43,-135],[11,-174],[38,-34],[8,-117],[55,-141],[11,-157],[-6,-101]],[[9156,1591],[35,-115],[108,112],[45,-118],[0,-117],[-57,-129],[-100,-205],[-79,-111],[57,-134],[-118,-4],[-133,-103],[-41,-182],[-87,-281],[-196,-204],[-142,5],[-100,92],[-165,19],[-27,102],[82,207],[194,274],[99,53],[110,106],[132,144],[92,146],[68,206],[58,70],[23,156],[107,129],[35,-118]],[[9399,2914],[112,-292],[3,190],[70,-76],[22,-212],[123,-89],[104,-23],[88,107],[78,-32],[-37,-248],[-48,-161],[-117,5],[-41,-85],[14,-120],[-22,-50],[-133,-341],[-120,-111],[-25,74],[-64,40],[88,228],[-50,152],[-165,113],[3,100],[112,97],[25,214],[-6,179],[-63,187],[5,49],[-73,115],[-122,245],[-63,197],[57,21],[82,-153],[120,-72],[43,-248]]]}
Display the source blob
Display the rendered blob
Raw
europe_small.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
featureditem-webfont.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
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>
Display the source blob
Display the rendered blob
Raw
lets_go_digital_regular-webfont.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
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);
Raw
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);
Raw
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;
}
Display the source blob
Display the rendered blob
Raw
wargames_usa.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
world_small.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment