A hilbert space-filling curve D3 chart for representing one-dimensional lengths on a two-dimensional space.
npm install hilbert-chartHilbert 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
``js`
import HilbertChart from 'hilbert-chart';`
or using a script taghtml``
thenjs`
const myChart = new HilbertChart(
.hilbertOrder(
.data(
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 |$3
| 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. | 4 |
| data([array]) | Getter/setter for the list of ranges to render. Each range object should follow the minimum syntax of {start: . | [] |
| 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. |