jaredwinick/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Z-Order Curve</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">

	  body {
  	  background: #fff;
	  }

  </style>
  </head>
  <body>
    <script type="text/javascript">

	var w = 1200,
      h = 800;

	// http://stackoverflow.com/questions/4909263/how-to-efficiently-de-interleave-bits-inverse-morton
	morton = function(x)
	{
	    x = x & 0x55555555;
	    x = (x | (x >> 1)) & 0x33333333;
	    x = (x | (x >> 2)) & 0x0F0F0F0F;
	    x = (x | (x >> 4)) & 0x00FF00FF;
	    x = (x | (x >> 8)) & 0x0000FFFF;
	    return x;
	}

	buildCurve = function(numberOfPoints, scale) {

		var curve = [];

		var start = new Date().getTime();

		for ( var z = 0; z < numberOfPoints; ++z ) {
			var x = morton(z);
			var y = morton(z >> 1);
			curve.push( {"x" : x*scale, "y" : y*scale} );
			//console.log( "z: " + z + " [" + x + "," + y +"]");
		}

		var end = new Date().getTime();
		//console.log("Build curve in [" + (end-start) + "] milliseconds");

		return curve;
	}

	 var lineFunction = d3.svg.line()
	                          	.x(function(d) { return d.x; })
	                          	.y(function(d) { return d.y; })
	                         	.interpolate("linear");

	var svg = d3.select("body").append("svg")
	                           	.attr("width", w)
	                            .attr("height", h);

	svg.append("path")
		.attr("d", lineFunction( buildCurve(30000, 8) ))
	    .attr("stroke", "#333")
		.attr("stroke-width", 1)
		.attr("fill", "none");


    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Z-Order Curve</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">

	body {
	background: #fff;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">

	var w = 1200,
	h = 800;

	// http://stackoverflow.com/questions/4909263/how-to-efficiently-de-interleave-bits-inverse-morton
	morton = function(x)
	{
	x = x & 0x55555555;
	x = (x \| (x >> 1)) & 0x33333333;
	x = (x \| (x >> 2)) & 0x0F0F0F0F;
	x = (x \| (x >> 4)) & 0x00FF00FF;
	x = (x \| (x >> 8)) & 0x0000FFFF;
	return x;
	}

	buildCurve = function(numberOfPoints, scale) {

	var curve = [];

	var start = new Date().getTime();

	for ( var z = 0; z < numberOfPoints; ++z ) {
	var x = morton(z);
	var y = morton(z >> 1);
	curve.push( {"x" : xscale, "y" : yscale} );
	//console.log( "z: " + z + " [" + x + "," + y +"]");
	}

	var end = new Date().getTime();
	//console.log("Build curve in [" + (end-start) + "] milliseconds");

	return curve;
	}

	var lineFunction = d3.svg.line()
	.x(function(d) { return d.x; })
	.y(function(d) { return d.y; })
	.interpolate("linear");

	var svg = d3.select("body").append("svg")
	.attr("width", w)
	.attr("height", h);

	svg.append("path")
	.attr("d", lineFunction( buildCurve(30000, 8) ))
	.attr("stroke", "#333")
	.attr("stroke-width", 1)
	.attr("fill", "none");


	</script>
	</body>
	</html>