https://github.com/vasturiano/hilbert-chart
Hilbert space-filling curve chart
https://github.com/vasturiano/hilbert-chart
chart d3-charts d3js data-visualization hilbert-curve layout space-filling-curves
Last synced: 3 months ago
JSON representation
Hilbert space-filling curve chart
- Host: GitHub
- URL: https://github.com/vasturiano/hilbert-chart
- Owner: vasturiano
- License: mit
- Created: 2016-10-14T03:34:32.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2025-06-05T23:04:38.000Z (8 months ago)
- Last Synced: 2025-09-07T09:35:44.171Z (5 months ago)
- Topics: chart, d3-charts, d3js, data-visualization, hilbert-curve, layout, space-filling-curves
- Language: JavaScript
- Homepage: https://vasturiano.github.io/hilbert-chart/examples/ipv4-address-space/
- Size: 860 KB
- Stars: 34
- Watchers: 3
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Hilbert Chart
==============
[![NPM package][npm-img]][npm-url]
[![Build Size][build-size-img]][build-size-url]
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]
A hilbert space-filling curve chart for representing one-dimensional lengths on a two-dimensional space.
Live example at: https://observablehq.com/@vasturiano/hilbert-map-of-ipv4-address-space
## Quick start
```js
import HilbertChart from 'hilbert-chart';
```
or using a *script* tag
```html
```
then
```js
const myChart = new HilbertChart()
.hilbertOrder()
.data();
```
## API reference
### Initialisation
```js
new HilbertChart(, { configOptions })
```
| Config options | Description | Default |
| --- | --- | :--: |
| useCanvas: boolean | Whether to use **HTML5 Canvas** (`true`) or **SVG** (`false`) as rendering method. Canvas yields much better rendering performance for very large number of items. | `false` |
| zoomWithModKey: boolean | Whether to require a modifier key (meta or ctrl) to be pressed in order to engage the scrolling zoom. | `false` |
### Methods
| Method | Description | Default |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------- | ------------- |
| width([number]) | Getter/setter for the length of each side of the square chart, in px. | (fit to window) |
| margin([number]) | Getter/setter for the chart margin that contains the axis ticks and labels, in px. | 90 |
| hilbertOrder([number]) | Getter/setter for the extent of the hilbert curve range, determined by `4^order`. Values higher than `26` are disadvised, due to JavaScript's [MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER). | 4 |
| data([array]) | Getter/setter for the list of ranges to render. Each range object should follow the minimum syntax of `{start: , length: }`. | `[]` |
| rangeLabel([string or fn]) | Getter/setter for the range object label accessor function (`fn(range)`) or attribute. | `name` |
| rangeLabelColor([string or fn]) | Getter/setter for the range object label color accessor function (`fn(range)`) or attribute. | `() => 'black'` |
| rangeColor([string or fn]) | Getter/setter for the range object color accessor function (`fn(range)`) or attribute. | (cycle through d3.schemeCategory20 for unique labels) |
| rangePadding([number, string or fn]) | Getter/setter for the range object padding ratio accessor function (`fn(range)`), attribute or a constant number for all ranges. The padding ratio should be a number between `0` and `1` representing the proportional size of the padding space compared to the width of the path. | 0 |
| rangePaddingAbsolute([number, string or fn]) | Getter/setter for the range object absolute padding accessor function (`fn(range)`), attribute or a constant number for all ranges. This absolute padding is added to the relative one set with `rangePadding`. | 0 |
| valFormatter([fn]) | Getter/setter for the value formatting function (`fn(value)`), as text displayed in axis ticks and tooltips. Should return a string. | `d => d` |
| focusOn(pos, length, [ms]) | Zoom-in on a particular area of the chart, defined by [`pos`, `pos+length-1`]. May be an approximation if `length` doesn't match a logical bit boundary. An optional 3rd argument defines the duration of the transition (in ms) to animate the zooming motion. A value of 0 (default) jumps immediately to the final position. ||
| showValTooltip([boolean]) | Getter/setter for whether to show a value tooltip on mouse-over. | `true` |
| showRangeTooltip([boolean]) | Getter/setter for whether to show a range tooltip on mouse-over. | `true` |
| rangeTooltipContent([string or fn]) | Getter/setter for the range object tooltip content accessor function or attribute. Supports plain text or HTML content. | `: - ` |
| enableZoom([boolean]) | Getter/setter for whether to enable zoom/pan interaction in the chart. | `true` |
| onRangeClick(fn) | Callback function for range clicks. The range object is included as single argument `onRangeClick(range)`. | - |
| onRangeHover(fn) | Callback function for range mouse over events. The range object (or `null` if hovering out) is included as single argument `onRangeHover(range)`. | - |
| onPointerMove(fn) | Callback function for pointer move events over the hilbert canvas. The hilbert curve value directly under the mouse pointer is included as argument, as well as the event object itself. `onPointerMove(value, event)`. | - |
| onZoom(fn) | Callback function for zoom/pan events. The current zoom transform is included as single argument `onZoom({ k, x, y })`. Note that `onZoom` is triggered by user interaction as well as programmatic zooming/panning with `focusOn()`. | - |
| onZoomEnd(fn) | Callback function for 'end' of zoom/pan events. The current zoom transform is included as single argument `onZoomEnd({ k, x, y })`. Note that `onZoomEnd` is triggered by user interaction as well as programmatic zooming/panning with `focusOn()`. | - |
## ❤️ Support This Project
If you find this module useful and would like to support its development, you can [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=url). Your contributions help keep open-source sustainable!
[](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=url)
[npm-img]: https://img.shields.io/npm/v/hilbert-chart
[npm-url]: https://npmjs.org/package/hilbert-chart
[build-size-img]: https://img.shields.io/bundlephobia/minzip/hilbert-chart
[build-size-url]: https://bundlephobia.com/result?p=hilbert-chart
[npm-downloads-img]: https://img.shields.io/npm/dt/hilbert-chart
[npm-downloads-url]: https://www.npmtrends.com/hilbert-chart