d3-hilbert

!NPM packagenpm-imgnpm-url !Build Sizebuild-size-imgbuild-size-url !NPM Downloadsnpm-downloads-imgnpm-downloads-url
D3 layout to visualize distance variables using a continuous Hilbert space-filling curve. Here's an example.
See also d3-morton.
If you are looking for a module that also performs rendering, please see hilbert-chart.

Quick start

import d3Hilbert from 'd3-hilbert';

or using a script tag

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

then

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

API reference

| Method | Description | Default | | ------------------ | -------------------------------------------------------------------------------------------------------------------------- | ------------- | | canvasWidth(number) | Getter/setter for the length of each side of the hilbert square canvas. | 1 | | order(int) | Getter/setter for the extent of the hilbert 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 4 to 11 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 bit boundaries, such as the case of IP address routes. | true | | layout(rangeObject) | Extends the input rangeObject (syntax: {start:<int>, length:<int>}) with 3 additional properties defining the hilbert curve: .cellWidth (number defining the side length of each square cell and essentially the thickness of the line, according to the canvasWidth), .startCell (int,int the x,y coordinates of the starting cell) and .pathVertices (Array of vertices, specified in terms of characters indicating movement direction: UDLR (Up, Down, Left, Right)). | | | getValAtXY(num, num) | Returns the reverse translated value on the curve domain found at coordinates x,y, relative to the canvasWidth. | | | getXyAtVal(num) | Returns the [x, y] coordinates of the requested value. Throws an error if the value is outside the boundaries of the current hilbert domain. | |