We presented a novel visualization representation, O3NJ trees, for hierarchical analysis of multi-dimensional data. This representation is based on NJ trees, which so far have been mostly used for phylogenetic data analysis in biology.

O3NJ online demo can be found here (or click title).

You can download our code and open index.html with Live Server.

Our system has two panels: a control panel (left) and a dashboard (right). The three views from left to right are the O3NJ tree, the distilled hierarchy, and the MDS projection.

When initialized, the NJ tree is optimally ordered and the hierarchy is automatically distilled with default values for our two thresholds. The color of the nodes in the tree and MDS plots encode their class labels in the data. For the distilled cluster tree, we colorize each leaf with the color of class who has outnumbered leaves in the corresponding leaf sequence in NJ tree. Meanwhile, the leaf correspond to all outliers are represented with a red ring.

the three slide bars in the control panel allow to modify the thresholds ARD, Alpha and Beta in our algorithm. ARD is in charge of re-cutting the NJ tree; Alpha is in charge of reordering the NJ tree; Beta for grading persistence.

There are 4 examples in the O3NJ Gallery, and you can find other datasets in src/data. To generate O3NJ tree for a new dataset, you need:

1. Distance Matrix.
2. Neighbour joining tree generated by the distance matrix. You can generate neighbour joining tree using:

var NJ = new NeighborJoining(D, taxa, classify);
NJ.buildTree();

3. You possibly also need 2D MDS data for scatterplots.

If you have problems, please submit an issue.