Skip to content

D3 layout to visualize distance variables using a continuous Morton (Z-order) space-filling curve.

License

Notifications You must be signed in to change notification settings

vasturiano/d3-morton-order

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

d3-morton

NPM package Build Size NPM Downloads

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.

About

D3 layout to visualize distance variables using a continuous Morton (Z-order) space-filling curve.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published