vasturiano / hilbert-chart

Hilbert space-filling curve chart

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 = HilbertChart();

myChart
  .hilbertOrder(<hilbertOrder>)
  .data(<myData>)
  (<myDOMElement>);

API reference

Initialisation

HilbertChart({ configOptions })(<domElement>)

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().	-

hilbert-chart's Issues

Help using `focusOn`

First of all, thank you for publishing this. It looks like exactly what I am looking for, to be able to visualize our private IPv4 allocations.

However, I am having trouble using the focusOn function. All of our allocations are withing the 10/8 reserved space, so I would like to start zoomed in on that. Is that what focusOn is for? I might be misunderstanding the docs.

Here is an example I created to illustrate what I am seeing: https://observablehq.com/d/5995dc487d6ff315

I have a few netowrks defined in the CSV, and I am calling focusOn, but the chart is not zooming in, and the axis labels are gone. What am I doing wrong here?