syntagmatic/index.html

## 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="http://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>
	<!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="http://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>