https://github.com/vasturiano/d3-hilbert
D3 layout to visualize distance variables using a continuous Hilbert space-filling curve.
https://github.com/vasturiano/d3-hilbert
d3js data-visualization hilbert-curve layout space-filling-curves
Last synced: 11 months ago
JSON representation
D3 layout to visualize distance variables using a continuous Hilbert space-filling curve.
- Host: GitHub
- URL: https://github.com/vasturiano/d3-hilbert
- Owner: vasturiano
- License: mit
- Created: 2016-09-26T09:16:58.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2025-04-09T19:29:03.000Z (about 1 year ago)
- Last Synced: 2025-07-28T02:51:58.871Z (11 months ago)
- Topics: d3js, data-visualization, hilbert-curve, layout, space-filling-curves
- Language: JavaScript
- Homepage: https://observablehq.com/@vasturiano/hilbert-curve
- Size: 218 KB
- Stars: 21
- Watchers: 3
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
d3-hilbert
==============
[![NPM package][npm-img]][npm-url]
[![Build Size][build-size-img]][build-size-url]
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]
D3 layout to visualize distance variables using a continuous Hilbert space-filling curve. Here's an [example](https://observablehq.com/@vasturiano/hilbert-curve).
See also [d3-morton](https://github.com/vasturiano/d3-morton-order).
If you are looking for a module that also performs rendering, please see [hilbert-chart](https://github.com/vasturiano/hilbert-chart).
## Quick start
```js
import d3Hilbert from 'd3-hilbert';
```
or using a *script* tag
```html
```
then
```js
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:, length:}`) 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** (**U**p, **D**own, **L**eft, **R**ight)). | |
| **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. | |
[npm-img]: https://img.shields.io/npm/v/d3-hilbert
[npm-url]: https://npmjs.org/package/d3-hilbert
[build-size-img]: https://img.shields.io/bundlephobia/minzip/d3-hilbert
[build-size-url]: https://bundlephobia.com/result?p=d3-hilbert
[npm-downloads-img]: https://img.shields.io/npm/dt/d3-hilbert
[npm-downloads-url]: https://www.npmtrends.com/d3-hilbert