vasturiano / d3-hilbert

D3 layout to visualize distance variables using a continuous Hilbert space-filling curve.

d3-hilbert

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.

d3-hilbert's Issues

Option to show a grid of IDs into the indexed region

Is an idea to reuse all script for another kind of interface, that is usual for teaching or to analyse grid behaviour. The main problem is the XML SVG language, it is ugly for put text into rectangles, but perhaps D3 (and x,y reuse) offers a better solution.

---

Using grid with geographical map, examples: leaflet with geohash and quadtree, old google-map with geohash, ...

Suggestion to add a control to show base4

Suggestion

To use someting like parseInt(cell_id,4) instead of decimal representation. Can be also an input-radio, controlling the user decision about decimal or hierarchical.

Rationale

The refinement ratio of the region-grid indexed by Hilbert and Morton curves is 4, so the base 4 is the natural way to represent Cell ID for humans: the base4(cell_id) is also a label of the hierarchy.