Many types of data can be represented as trees, and so are nicely shown as
dendrograms. In particular, when the data consist of objects separated by known distances, many types of
clustering will put them in tree form. That's what's going on here: we have city data (where distance has its familiar meaning), random data, and text data from Shakespeare where "social distance" is inversely proportional to the number of times that characters have consecutive speeches (and so are probably conversing). See also
these treemap and
fractal map representations of the same data.
So there's a lot of classic computer science in this page's code: data preparation, representation of 2D distance matrices as fast 1D hash tables, hierarchic clustering, recursive routines galore to turn the trees into pixel positions. Plus plenty of trigonometry for the circular diagram. With a modern browser (Safari, Chrome, Firefox, Opera), it's all fast enough.
The circular and bezier dendrograms are done in canvas and won't work in non-compliant browsers (i.e., IE). The native support for quadratic bezier curves in canvas makes the curvy connectors easy. The lower-left boxes-and-sticks dendrogram is done with positioned DIV elements and works across browsers. The spectrum-sequence coloring is done by working in HSV color space, far more natural than RGB.