d3-morton

D3 layout to visualize distance variables using a continuous Morton (Z-order) space-filling curve. Here's an example.

See also d3-hilbert.

Quick start

import d3ZOrder from 'd3-morton';

or using a script tag

<script src="//unpkg.com/d3-morton"></script>

then

const myRange = { start: 4, length: 9 };
d3.zOrder()
    .order(2)
    .layout(myRange)

API reference

| Method | Description | Default | | ------------------ | -------------------------------------------------------------------------------------------------------------------------- | ------------- | | canvasWidth([number]) | Getter/setter for the length of each side of the square canvas which covers the full domain of the Z-order curve. | 1 | | order([int]) | Getter/setter for the extent of the Z-Order curve domain, determined by 4^order. The maximum safe order is 26, due to the JS numbers upper-boundary of 53 bits. | 4 | | simplifyCurves([boolean]) | Getter/setter for whether to simplify the resolution of the curve to the most canonical 2-bit boundary that fits the range integral. For example, in a 2nd order curve (16 values), a range from 8 to 15 can be simplified from 8 vertices to 2 (each filling a square with 4 values), on the lower quadrants. This simplification greatly reduces the number of vertices in the curve and improves the calculation and rendering performance, specially for high-order ranges which tend to fall on 2-bit boundaries. | true | | layout(rangeObject) | Extends the input rangeObject (syntax: {start:<int>, length:<int>}) with 2 additional properties defining the Z-Order curve: .cellWidth (number defining the side length of each square cell and essentially the thickness of the line, according to the canvasWidth) and .pathVertices (Array of [num,num], the sequential x,y coordinates of all the vertex points in the curve). | | | getValAtXY(num, num) | Returns the reverse translated value on the curve domain found at coordinates x,y, relative to the canvasWidth. | |