Hyperbolic Tree

Efficient Hyperbolic Browsing in JavaScript and SVG

Michael Glatzhofer

Introduction

• Interactive hierarchy visualisation
• Based on Lampng Rao 95_[1]
• HTML5 SVG imlementaion

Features

• Scalable up to 1000 nodes
• Scalable up to 100k nodes with weight culling and primeter culling
• Configurable mouse and touch interaction
• Configurable layers, visualisation presets
• File formats: csv, json, skos, treeml

VIDEO 1: Hyperbolic Tree Browser 1995

VIDEO 2: Hyperbolic Tree Browser 1995

Poincaré Disk Model

Poincaré Disk Model

$$Focus\ point:\ P \in ℂ $$

$$Rotaion:\ \theta \in ℂ $$

$$Node\ layout:\ z \in ℂ $$

$$z_t = {\frac{\theta z + P}{1 + \bar{P} \theta z}}$$

$$Identity\ transformation:\ \Big(P=0, \theta=1\Big) $$

Unitvector Transformation

Implementation

• Hierarchy, layout, transformation and layerstack form core visualisation model.
• No bindings. Request animation frame centered design.
• Layers are implemented with D3 update pattern.
• Interaction as invisible layer on top.

• Hierarchy: d3-hierarchy. +New fileformats.
• Bergé layout supports 'Tree strech' as zoom replacement. Strech parameter: \(λ\).
• Layerstack responsible for updating SVG
• Layerstack 'tranformZ hack' important for performance

ViewModel Hypertree

SVG Limit (λ ~.1, no Weight Filter)

SVG/D3 limits to 1000 Nodes

But we dont need more since humans perfere less information.
If SVG should be used elements must be removed.

Layout and transformation is applied to subset of hierarchy.

How to determin this subset?

Perimeter Culling

ViewModel Hypertree

Perimeter Culling working (λ ~1)

Weight Culling
(Semantic Filtering depends on Dataset)

Weight Culling working

Weight Culling ~working
(Number of Nodes limited, User disorientated)

Interaction Traces

Pathes

Finally

ViewModel Hypertree

UML Diagramm Visualisation Model

Evaluation

Chrome Performance

Summary

Focused view (l>.5): Perimeter culling sufficient if average degree < 5
Over view (l<.5): Performs only if semantic filtering like weight culling is applied

Semantic filtering must be adapted for each dataset, if overview is required.

Build System (How to Develop)

• gulp is a Javascript based build tool
  • Pipes and Filters pattern implementation, with glob selectors
  • Alternatively Promise based Tasks
  • Watches filesystem, starts builds and synchronises Browser
  • Typescript plugin
  • Webpack plugin
• webpack
  • Creates bundle by crawling imports (tree shaking)
  • Minifyer plugin
  • SASS plugin

Thanks for listening, Using and Contributing