Device Orientation and Motion by syntagmatic

index.html

<!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>
<p>
  alpha<br/><span id="alpha"></span>
</p>
<p>
  beta<br/><span id="beta"></span>
</p>
<p>
  gamma<br/><span id="gamma"></span>
</p>
<p>
  absolute<br/><span id="absolute"></span>
</p>
<p>
  x<br/><span id="x"></span>
</p>
<p>
  y<br/><span id="y"></span>
</p>
<p>
  z<br/><span id="z"></span>
</p>
<p>
  <small style="font-size: 18px;"><a href="https://developer.mozilla.org/en-US/docs/DOM/Orientation_and_motion_data_explained">orientation and motion</a></small><br/>
  <small style="font-size: 18px;"><a href="https://developer.mozilla.org/en-US/docs/Detecting_device_orientation">learn more</a></small>
</p>
<script src="//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>