Pages on R's 🎪

Pages on R's 🎪https://rscircus.github.io/pages/Recent content in Pages on R's 🎪Hugo -- gohugo.ioen-US<link>https://rscircus.github.io/pages/climate_anomaly/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://rscircus.github.io/pages/climate_anomaly/</guid><description><!DOCTYPE html> <html lang="en"> <head> <title>Global temperature anomaly</title> <meta charset="utf-8" />   <meta http-equiv="origin-trial" content="AgYa7FnJa6DIsgD3xRNKlFeEOGbBumXQx8GLUCwdbX8wNzpS0MdFRFEV7I1aG+42d2359CkI27RwTgDsa1UCSgUAAABteyJvcmlnaW4iOiJodHRwczovL3JzY2lyY3VzLmdpdGh1Yi5pbzo0NDMiLCJmZWF0dXJlIjoiV2ViWFJEZXZpY2VNNzYiLCJleHBpcnkiOjE1NzQxOTIwNjIsImlzU3ViZG9tYWluIjp0cnVlfQ=="> <style type="text/css"> html { height: 100%; } body { margin: 0; padding: 0; background: #000000 url(globe/loading.gif) center center no-repeat; color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 20px; height: 100%; } #info { font-size: 11px; position: absolute; bottom: 5px; background-color: rgba(0, 0, 0, 0.8); border-radius: 3px; right: 10px; padding: 10px; } #currentInfo { width: 270px; position: absolute; right: 20px; top: 63px; background-color: rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.4); padding: 10px; } a { color: #aaa; text-decoration: none; } a:hover { text-decoration: underline; } .bull { padding: 0 5px; color: #555; } #title { position: absolute; top: 20px; width: 270px; left: 20px; background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; font: 20px Georgia; padding: 10px; } .year { font: 16px Georgia; line-height: 26px; height: 30px; text-align: center; float: left; width: 90px; color: rgba(255, 255, 255, 0.4); cursor: pointer; -webkit-transition: all 0.1s ease-out; } .year:hover, .year.active { font-size: 23px; color: #fff; } #ce span { display: none; } #ce { width: 107px; height: 55px; display: block; position: absolute; bottom: 15px; left: 20px; background: url(/globe/ce.png); } </style> </head> <body> <div id="container"></div>  <div id="info"> Created by <a href="https://rscircus.github.io">R. Siegbert</a> based on <a href="https://github.com/dataarts/webgl-globe" target="_blank" >WebGL Globe</a > using data from <a href="https://www.ncdc.noaa.gov" target="_blank">GHCN</a>. </div> <div id="currentInfo"> <span id="year2019" class="year">2019</span> Compared to the <i>average</i> August in the span 1951-1980 the August 2019 was hotter in the <span style="color:red">red</span> regions and cooler in the <span style="color:blue">blue</span> regions. The hottest area / longest red line is about +8 degrees Celsius "longer/hotter".  </div> <div id="title"> World Temperature Anomaly August 2019 </div> <script type="text/javascript" src="globe/third-party/Detector.js"></script> <script src="globe/third-party/HelioWebXRPolyfill.js"></script> <script type="text/javascript" src="globe/third-party/three.js" ></script> <script type="text/javascript" src="globe/third-party/Tween.js"></script> <script type="text/javascript" src="globe/third-party/WebVR.js"></script> <script type="text/javascript" src="globe/third-party/hammer.min.js"></script> <script type="text/javascript" src="globe/globe.js"></script> <script type="text/javascript"> if (!Detector.webgl) { Detector.addGetWebGLMessage(); } else { var years = ['2019']; var container = document.getElementById('container'); //var container = document.body var globe = new DAT.Globe(container); console.log(globe); var i, tweens = []; var settime = function(globe, t) { return function() { new TWEEN.Tween(globe) .to({time: t / years.length}, 500) .easing(TWEEN.Easing.Cubic.EaseOut) .start(); var y = document.getElementById('year' + years[t]); if (y.getAttribute('class') === 'year active') { return; } var yy = document.getElementsByClassName('year'); for (i = 0; i < yy.length; i++) { yy[i].setAttribute('class', 'year'); } y.setAttribute('class', 'year active'); }; }; for (var i = 0; i < years.length; i++) { var y = document.getElementById('year' + years[i]); y.addEventListener('mouseover', settime(globe, i), false); } var xhr; TWEEN.start(); xhr = new XMLHttpRequest(); /* Debug: */ xhr.open( 'GET', 'ghcn_nasa_aug/ghcn_aug_2019_anomaly_1951_1980_base.json', true, ); xhr.onreadystatechange = function(e) { if (xhr.readyState === 4) { if (xhr.status === 200) { var data = JSON.parse(xhr.responseText); window.data = data; for (i = 0; i < data.length; i++) { globe.addData( data[i][1], { format: 'magnitude', name: data[i][0], animated: true, }, 25, //scaling default value was 200 - that is size * scaling = magnitude ); } globe.createPoints(); settime(globe, 0)(); globe.animate(); document.body.style.backgroundImage = 'none'; // remove loading } } }; xhr.send(null); } </script> </body> </html></description></item></channel></rss>