Hilbert Chart

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

import HilbertChart from 'hilbert-chart';

or using a script tag

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

then

const myChart = new HilbertChart(<myDOMElement>)
  .hilbertOrder(<hilbertOrder>)
  .data(<myData>);

API reference

Initialisation

new HilbertChart(<domElement>, { 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. | 4 | | data([array]) | Getter/setter for the list of ranges to render. Each range object should follow the minimum syntax of {start: <int>, length: <int>}. | [] | | 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. | <label>: <start> - <end> | | 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(). | - |