jaredwinick · March 2, 2013 05:15
diff --git a/index.html b/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>