Morton (Z-order) Curve

A representation of the Morton (Z-order) curve, using d3-morton layout. Use the slider to modify the curve order (number of iterations). On mouse hover, XY coordinates are reversely converted to curve distance. Zoom/pan the canvas using mouse-wheel/drag events.

See also Hilbert curve.

svg {
            margin: 10px;
        }

svg path {
            fill: none;
            stroke: #3A5894;
            stroke-width: 0.25;
            stroke-linecap: square;
        }

svg path.skeleton {
            stroke: #EEE;
            stroke-width: 0.1;
        }

#val-tooltip {
            display: none;
            position: absolute;
            margin-top: 22px;
            margin-left: -1px;
            padding: 5px;
            border-radius: 3px;
            font: 11px sans-serif;
            color: #eee;
            background: rgba(0,0,140,0.9);
            text-align: center;
            pointer-events: none;
        }

</style>
</head>
<body>
    <svg id="morton-chart"></svg>
    <div id="morton-controls">
        <input id="morton-order"/>
    </div>
    <div id="val-tooltip"></div>

https://code.jquery.com/jquery-3.1.0.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.1.3/bootstrap-slider.min.js

https://unpkg.com/d3-morton