function mortonDemo() {

    var svg = d3.select('svg#morton-chart'),
        canvasWidth = Math.min(window.innerWidth, window.innerHeight - 100),
        zOrder,
        order = 3;

    function d3Digest() {
        var zOrderData = {
            start: 0,
            length: Math.pow(4, order)
        };

        zOrder.order(order).layout(zOrderData);

        svg.selectAll('path')
            .datum(zOrderData)
            .attr('d', function(d) { return getZOrderPath(d.pathVertices); })
            .attr('transform', function(d) {
                return 'scale('+ d.cellWidth + ') '
                    + 'translate(' + (d.pathVertices[0][0] +.5) + ',' + (d.pathVertices[0][1] +.5) + ')';
            });

        svg.select('path:not(.skeleton)')
            .transition().duration(order * 1000).ease(d3.easePoly)
            .attrTween('stroke-dasharray', tweenDash);

        function getZOrderPath(vertices) {
            var path = 'M0 0L0 0';

            vertices.forEach(function(vert) {
                path += 'L' + vert.join(',');
            });

            return path;
        }

        function tweenDash() {
            var l = this.getTotalLength(),
                i = d3.interpolateString("0," + l, l + "," + l);
            return function(t) { return i(t); };
        }
    }

    function orderChange(newOrder) {
        order = newOrder;
        d3Digest();
    }

    function init() {

        zOrder = d3.zOrder()
            .order(order)
            .canvasWidth(canvasWidth)
            .simplifyCurves(false);

        svg.attr("width", canvasWidth).attr("height", canvasWidth);

        var canvas = svg.append('g');
        canvas.append('path').attr('class', 'skeleton');
        canvas.append('path');

        // Canvas zoom/pan
        svg.call(d3.zoom()
            .translateExtent([[0, 0], [canvasWidth, canvasWidth]])
            .scaleExtent([1, Infinity])
            .on("zoom", function() {
                canvas.attr("transform", d3.event.transform);
            })
        );

        // Value Tooltip
        var valTooltip = d3.select('#val-tooltip');
        svg.on('mouseover', function() { valTooltip.style("display", "inline"); })
            .on('mouseout', function() { valTooltip.style("display", "none"); })
            .on('mousemove', function () {
                var coords = d3.mouse(canvas.node());
                valTooltip.text(zOrder.getValAtXY(coords[0], coords[1]))
                    .style('left', d3.event.pageX)
                    .style('top', d3.event.pageY);
            });

        // Order slider
        $('input#morton-order').slider({
            step: 1,
            max: 9,
            min: 0,
            value: order,
            tooltip: 'always',
            tooltip_position: 'bottom',
            formatter: function(d) {
                return 'Order: ' + d;
            }
        }).on('change', function(e) {
            orderChange(e.value.newValue);
        });

        d3Digest();
    }

    init();
}