Skip to content

Instantly share code, notes, and snippets.

@jaredwinick
Created March 2, 2013 05:15
Show Gist options
  • Save jaredwinick/5069799 to your computer and use it in GitHub Desktop.
Save jaredwinick/5069799 to your computer and use it in GitHub Desktop.
Z-Order Curve
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment