Device Orientation and Motion

<!DOCTYPE HTML>
<html>
<head>
<title>Device Orientation</title>
<style>
body { font-family: monospace; font-size: 40px; text-align: center; margin: 0;}
span { font-size: 1.4em; font-weight: bold;}
p { width: 33%; height: 20%; float: left; }
</style>
</head>
<body>

 alpha 


 beta 


 gamma 


 absolute 


 x 


 y 


 z 


 <a href="https://developer.mozilla.org/en-US/docs/DOM/Orientation_and_motion_data_explained">orientation and motion</a> 
 <a href="https://developer.mozilla.org/en-US/docs/Detecting_device_orientation">learn more</a>

<script src="https://d3js.org/d3.v2.js"></script>
<script>
function handleOrientation(orientData) {
 var absolute = orientData.absolute;
 var alpha = orientData.alpha;
 var beta = orientData.beta;
 var gamma = orientData.gamma;
 
 d3.select('#alpha').text(alpha ? alpha.toFixed(1) : null);
 d3.select('#beta').text(beta ? beta.toFixed(1) : null);
 d3.select('#gamma').text(gamma ? gamma.toFixed(1) : null);
 d3.select('#absolute').text(gamma ? absolute.toFixed(1) : null);
}

function handleMotionEvent(event) {
  var x = event.accelerationIncludingGravity.x;
  var y = event.accelerationIncludingGravity.y;
  var z = event.accelerationIncludingGravity.z;

d3.select('#x').text(x ? x.toFixed(1) : null);
  d3.select('#y').text(y ? y.toFixed(1) : null);
  d3.select('#z').text(z ? z.toFixed(1) : null);
}

window.addEventListener("deviceorientation", handleOrientation, true);
window.addEventListener("devicemotion", handleMotionEvent, true);
</script>
</body>
</html>

Modified http://d3js.org/d3.v2.js to a secure url

https://d3js.org/d3.v2.js