A dendrogram viewer web-application
Dendrogram Viewer is an open-source interactive web-application written in javascript that allows the visualization of dendrograms, which are tree diagrams used to illustrate the arrangement of the clusters as produced by a hierarchical clustering (HC) algorithm. D3.js is used as the basis for dendrogram visualization.
The application allows an interactive visualization of different number of clusters and different dissimilarities / distances. It also has several visual options, such as dendrogram color palette selection, vertical layout, viewing cluster labels, etc.
Dendrogram Viewer is open-source under the MIT license and is free for commercial use.
- Source repository: https://github.com/pedrodbs/DendrogramViewer
Table of contents
The D3.js dendrogram layout is based on the instructions in this article:
In addition, the following javascript packages are used in the application:
- D3.js (v3), used for the dendrogram layout visualization
- jscolor Color Picker (v2.0.5), used for background color selection
- Colour Palette Generator, used for dendrogram color palette selection
- SVG Crowbar (v2, modified to not export styles and hence reduce file size), used for dendrogram export to SVG image files
You can git clone
the Dendrogram Viewer source code and then open the index.html
file in a web browser (Firefox usage is recommended for better results).
The json file format is a modified version of the standard format used for trees by D3.js to make large clustering files more compact. Each cluster is represented by a node object where:
- Attribute
n
holds the name or id of the cluster; - Attribute
d
is the dissimilarity / distance at which it was found and created by the HC algorithm; - Attribute
c
is a list containing the pair of parents / children from which the cluster was created.
For example, the following json was produced by using the Aglomera.NET framework to cluster the data-set in [Kaufman & Rousseeuw, 1990]:
{
"n": "(1;4;5;2;3;6;7)", "d": 5.5,
"c": [
{ "n": "(2;3;6;7)", "d": 2.05,
"c": [
{
"n": "(2;3;6)", "d": 1.9,
"c": [
{
"n": "(2;3)", "d": 1.12,
"c": [
{ "n": "(3)", "d": 0.0, "c": [] },
{ "n": "(2)", "d": 0.0, "c": [] } ] },
{ "n": "(6)", "d": 0.0, "c": [] } ] },
{ "n": "(7)", "d": 0.0, "c": [] } ]
},
{ "n": "(1;4;5)", "d": 1.5,
"c": [
{ "n": "(1;4)", "d": 0.71,
"c": [
{ "n": "(4)", "d": 0.0, "c": [] },
{ "n": "(1)", "d": 0.0, "c": [] } ] },
{ "n": "(5)", "d": 0.0, "c": [] } ]
} ]
}
The application automatically loads a default json file from the examples
folder. Manual file selection can be achieved in two ways:
- By using the
file
parameter in the URL, e.g.file:///index.html?file=examples/iris.json;
- By clicking the
Load...
button and selecting the desired file.
- Supports zooming (mouse scroll) and dragging (mouse click and drag) of the dendrogram elements by toggling the
Zoom & drag:
check-box. - Changing the the
Num. clusters
slider will allow the visualization of the cluster-set of the corresponding size. The instances within a particular cluster are visualized by having the same node and link color. Choosing a value of1
will show a single cluster containing all instances, i.e., all with the same color. - Changing the the
Dist. threshold
slider will allow the visualization of the cluster-set that the algorithm found at the corresponding dissimilarity / distance. Choosing a value of0
will show each instance in its own cluster, i.e., all with distinct colors.
To export / download the dendrogram into an SVG (Scalable Vector Graphics) file, click the Download SVG
button. Note: this will export an image file with basic element styling, e.g., colors and weights. For full formatting place the styles.css
in the same folder (and possibly customize the style file).
Supports viewing the labels of each cluster (usually the instances contained therein) by toggling the Show labels
check-box.
Supports both vertical and horizontal dendrogram layouts by toggling the Vertical layout
check-box.
Supports both straight and rounded tree branch links by toggling the Straight links
check-box.
Supports grayscale colors, by toggling the Grayscale
check-box.
Allows a selection between different color palettes to be used for the dendrogram's cluster colors, by choosing from the Color scheme
combo-box, including Tol's, Color Brewer, etc. Note: some palettes have a limit on the number of colors hence a limited number of clusters have to be selected.
Background color can also be chosen by using the Background color
picker.
References
- Kaufman, L., & Rousseeuw, P. J. (1990). Finding groups in data: an introduction to cluster analysis. John Wiley & Sons.
Other links
Copyright © 2018, Pedro Sequeira